:root {
  --bg: #000;
  --panel: #15171b;
  --panel-2: #1f2228;
  --line: #2b2f37;
  --ink: #eef0f3;
  --ink-2: #9aa2ad;
  --accent: #4c8df6;
  --ok: #3ccb7f;
  --warn: #f0a63a;
  --danger: #f2615c;
  --glass: rgba(22, 24, 28, 0.62);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --kb-offset: 0px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; touch-action: manipulation; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.sprite { display: none; }
svg { width: 22px; height: 22px; }

.btn {
  appearance: none; border: 1px solid var(--line); background: var(--panel-2);
  border-radius: 12px; padding: 12px 18px; font-weight: 600; cursor: pointer;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:disabled { opacity: 0.6; }

/* ---- sign-in ---- */
.login { height: 100%; display: grid; place-items: center; padding: 24px calc(16px + var(--safe-r)) 24px calc(16px + var(--safe-l)); background: #0b0d10; }
.login-card {
  width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 24px; padding: 32px 24px 24px; display: flex; flex-direction: column; gap: 14px;
}
.login-mark { border-radius: 16px; }
.login h1 { margin: 4px 0 0; font-size: 26px; letter-spacing: -0.01em; }
.login p { margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.field input {
  font: inherit; font-size: 17px; color: var(--ink); background: #0b0d10; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; outline: none; -webkit-user-select: text; user-select: text;
}
.field input:focus { border-color: var(--accent); }
#code { letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.error { color: var(--danger); min-height: 1.4em; font-size: 14px; }

/* ---- stage ---- */
.app { position: fixed; inset: 0; }
.stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; background: #000; }
.screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.screen video { display: block; width: 100%; height: 100%; background: #000; pointer-events: none; }
.press {
  position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
  pointer-events: none; animation: pop 160ms ease-out;
}
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }

/* ---- floating controls ---- */
.hud {
  position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l)); pointer-events: none;
  transition: opacity 300ms;
}
.hud > * { pointer-events: auto; }
.hud.dim { opacity: 0.35; }
.hud.gone { opacity: 0; }
.hud.gone > * { pointer-events: none; }
/* With the controls gone (second monitor), a small grabber brings them back. */
/* Mid left edge: the menu bar and the Dock are too busy to cover. */
.hud-tab { position: absolute; left: var(--safe-l); top: 50%; width: 22px; height: 72px; margin-top: -36px; appearance: none; border: 0; padding: 0; background: transparent; cursor: pointer; }
.hud-tab::after { content: ""; display: block; width: 5px; height: 40px; margin: 16px 0 0 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.hud-right { display: flex; gap: 8px; align-items: center; }
.pill {
  appearance: none; border: 0; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: 18px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 13px; font-weight: 600; cursor: pointer; max-width: 62vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pill.small { padding: 0 10px; }
.round {
  appearance: none; border: 0; width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer;
}
.round.on { background: var(--accent); color: #fff; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-2); flex: none; }
.dot.live { background: var(--ok); box-shadow: 0 0 0 3px rgba(60, 203, 127, 0.25); }
.dot.wait { background: var(--warn); animation: blink 1.2s infinite; }
.dot.bad { background: var(--danger); }
@keyframes blink { 50% { opacity: 0.35; } }
.lat { font-size: 12px; padding: 2px 7px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); }
.lat.good { color: var(--ok); }
.lat.meh { color: var(--warn); }
.lat.poor { color: var(--danger); }

.banner {
  position: absolute; left: 50%; top: calc(54px + var(--safe-t)); transform: translateX(-50%); max-width: calc(100% - 32px);
  background: rgba(240, 166, 58, 0.95); color: #1b1300; font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 12px;
  text-align: center; pointer-events: none;
}

.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.72); padding: 24px; }
.overlay-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 320px; }
.overlay-icon { width: 46px; height: 46px; color: var(--ink-2); }
.overlay.busy .overlay-icon { animation: blink 1.6s infinite; }
.overlay-title { font-size: 18px; font-weight: 650; }
.overlay-text { color: var(--ink-2); font-size: 14px; }

/* ---- key bar ---- */
.keybar {
  position: absolute; left: 0; right: 0; bottom: var(--kb-offset); display: flex; gap: 6px; align-items: center;
  padding: 6px calc(8px + var(--safe-r)) calc(6px + var(--safe-b)) calc(8px + var(--safe-l));
  background: rgba(20, 22, 26, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line);
}
.keybar::-webkit-scrollbar { display: none; }
.key {
  appearance: none; flex: 1 0 auto; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 9px; border: 0;
  background: #2c3038; font-size: 15px; font-weight: 600; display: grid; place-items: center; cursor: pointer;
}
.key:active { background: #3a3f49; }
.key.mod { font-size: 18px; }
.key.mod.once { background: var(--accent); color: #fff; }
.key.mod.lock { background: #fff; color: #000; }
.keybar .sep { width: 1px; height: 26px; background: var(--line); flex: none; }

.kb { position: fixed; left: -100px; top: 0; width: 40px; height: 40px; opacity: 0; font-size: 16px; border: 0; padding: 0; resize: none; }

.toast {
  position: absolute; left: 50%; bottom: calc(70px + var(--safe-b) + var(--kb-offset)); transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--line); padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: calc(100% - 32px);
}

/* ---- menu sheet ---- */
.sheet { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.sheet-card {
  width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0;
  padding: 16px calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  display: flex; flex-direction: column; gap: 8px;
}
/* Scroll the card rather than squash its rows when it's taller than the screen. */
.sheet-card > * { flex-shrink: 0; }
@media (orientation: landscape) and (max-height: 500px) {
  .sheet { align-items: stretch; justify-content: flex-end; }
  .sheet-card { max-width: 400px; max-height: 100vh; border-radius: 0; border: 0; border-left: 1px solid var(--line); padding-top: calc(16px + var(--safe-t)); }
}
.label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-top: 8px; }
.seg { display: flex; background: #0e1013; border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; appearance: none; border: 0; background: transparent; border-radius: 9px; padding: 9px 4px; font-weight: 600; font-size: 14px; cursor: pointer; }
.seg button.on { background: var(--panel-2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; color: #fff; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cell { appearance: none; border: 1px solid var(--line); background: var(--panel-2); border-radius: 11px; padding: 11px 4px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cell:active { background: #2c3038; }
.sheet-list { display: flex; flex-direction: column; margin-top: 8px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sheet-row {
  appearance: none; border: 0; border-bottom: 1px solid var(--line); background: var(--panel-2); text-align: left;
  padding: 13px 14px; display: flex; justify-content: space-between; gap: 8px; cursor: pointer;
}
.sheet-row:last-child { border-bottom: 0; }
.sheet-row.danger { color: var(--danger); }
.sheet-row .sub { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.stats { white-space: pre-wrap; font-size: 11.5px; color: var(--ink-2); margin: 6px 2px; min-height: 1em; }