:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080b10;
  color: #f6f7f9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(38, 180, 128, .16), transparent 38%),
    linear-gradient(180deg, #0b0f14 0%, #07090d 100%);
}

button, input { font: inherit; }

button {
  border: 0;
  border-radius: 14px;
  min-height: 48px;
  padding: 0 18px;
  cursor: pointer;
  font-weight: 700;
}

button:disabled { cursor: not-allowed; opacity: .45; }

.shell {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
}

.topbar, .section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

h1, h2, p { margin: 0; }
h1 { font-size: clamp(30px, 8vw, 52px); letter-spacing: -.04em; }
h2 { font-size: 18px; }

.eyebrow {
  color: #6fe1b3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.card, .screen-card {
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  background: rgba(17, 23, 31, .84);
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
}

.card { padding: 18px; }
.hero { display: grid; gap: 18px; }
.muted, .tiny { color: #9ba6b3; }
.mode-text { margin-top: 7px; color: #dce3ea; font-weight: 650; }
.tiny { margin-top: 12px; font-size: 12px; line-height: 1.5; }

.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.primary { background: #67e0ae; color: #07110d; }
.secondary { background: #273240; color: #f6f7f9; }
.wake { background: #f1b65a; color: #201407; }
.ghost { background: transparent; color: #b9c2cc; border: 1px solid rgba(255,255,255,.1); }
.hidden { display: none !important; }

.badge {
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.badge.online { color: #7aefbf; background: rgba(58, 207, 145, .13); }
.badge.offline { color: #aeb7c1; background: rgba(255,255,255,.06); }

.screen-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #020304;
}

#remoteScreen {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.screen-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  color: #dbe3ea;
}

.screen-placeholder small { color: #7f8b98; }
.screen-icon { font-size: 48px; color: #67e0ae; }

details summary { cursor: pointer; font-weight: 750; }
label { display: grid; gap: 7px; margin-top: 14px; color: #aeb8c2; font-size: 13px; }

input {
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 0 13px;
  background: #0b1016;
  color: #f7f9fb;
}

.settings button { margin-top: 14px; width: 100%; }
.event-log { margin: 14px 0 0; padding-left: 22px; color: #9ca8b5; font-size: 13px; line-height: 1.6; }

.compact {
  min-height: 38px;
  padding: 0 14px;
}

.key-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.key-button {
  min-height: 42px;
  padding: 0 7px;
  background: #202a35;
  color: #e8edf2;
  font-size: 13px;
}

.keyboard-panel { margin-top: 14px; }
.keyboard-panel textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 12px;
  background: #0b1016;
  color: #f7f9fb;
  font: inherit;
}

.keyboard-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

@media (min-width: 700px) {
  .hero { grid-template-columns: 1fr 1.15fr; align-items: center; }
  .actions { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}