:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e8edf2;
  background: #0b0f14;
  --panel: #10161e;
  --line: #26303c;
  --muted: #8895a5;
  --green: #62d88e;
  --amber: #f2bd5c;
  --red: #ff6b70;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 0%, rgba(47, 109, 100, .16), transparent 35rem),
    #0b0f14;
}

main { max-width: 1180px; margin: 0 auto; padding: 28px 20px 20px; }

header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.eyebrow { color: #55c2b0; font: 700 11px/1.2 ui-monospace, monospace; letter-spacing: .16em; margin: 0 0 8px; }
h1 { font-size: clamp(25px, 5vw, 42px); line-height: 1; margin: 0; letter-spacing: -.035em; }
.connection { color: var(--muted); font: 600 12px ui-monospace, monospace; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; }
.connection.live { color: var(--green); border-color: rgba(98, 216, 142, .35); }
.connection.error { color: var(--amber); }

nav { display: flex; gap: 8px; margin: 25px 0 10px; overflow-x: auto; }
[hidden] { display: none !important; }
.auth-gate { margin-top: 25px; padding: 56px 24px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; }
.auth-gate .lock-mark { margin: 0 0 18px; color: #55c2b0; font-size: 24px; }
.auth-gate h2 { margin: 0 0 10px; font-size: 22px; }
.auth-gate p { margin: 0 auto 24px; max-width: 520px; color: var(--muted); line-height: 1.5; }
.auth-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.auth-gate .auth-actions a { display: inline-block; padding: 11px 17px; border: 1px solid #62d8be; border-radius: 9px; color: #07110f; background: #62d8be; text-decoration: none; font-weight: 750; }
.auth-gate .auth-actions a.secondary { color: #b7c5d1; background: transparent; border-color: #3b4a5a; }
nav button { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #0d1218; padding: 10px 15px; font: 650 14px inherit; cursor: pointer; }
nav button.active { color: #fff; background: #17202a; border-color: #3b4a5a; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px rgba(136, 149, 165, .1); }
.dot.running { background: var(--green); box-shadow: 0 0 0 3px rgba(98, 216, 142, .12); }
.dot.exited, .dot.absent { background: var(--amber); }
.dot.conflict, .dot.external_running { background: var(--red); }
.dot.browser-running { background: #55c2b0; box-shadow: 0 0 0 3px rgba(85, 194, 176, .12); }

.terminal-shell { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; box-shadow: 0 20px 70px rgba(0, 0, 0, .32); }
.terminal-bar { height: 44px; display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--muted); font: 12px ui-monospace, monospace; }
.lights { display: flex; gap: 6px; }
.lights i { width: 9px; height: 9px; border-radius: 50%; background: #394453; }
.lights i:first-child { background: #e16066; }
.lights i:nth-child(2) { background: #d9ac50; }
.lights i:nth-child(3) { background: #55b77b; }
.state { text-transform: uppercase; font-size: 10px; letter-spacing: .07em; }
.state.running { color: var(--green); }
.state.exited, .state.absent { color: var(--amber); }
.state.conflict, .state.external_running { color: var(--red); }
.browser-shell { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; box-shadow: 0 20px 70px rgba(0, 0, 0, .32); }
.browser-popout { color: #85daca; text-decoration: none; font-weight: 700; }
.browser-popout:hover { color: #b8f0e6; }
.browser-actions { display: flex; align-items: center; gap: 12px; }
.browser-restore { border: 1px solid #3b4a5a; border-radius: 7px; color: #b8f0e6; background: #16212a; padding: 6px 9px; font: 700 11px ui-monospace, monospace; cursor: pointer; }
.browser-restore:hover { border-color: #55c2b0; }
.browser-restore:disabled { cursor: wait; opacity: .55; }
.browser-status { padding: 8px 14px; border-bottom: 1px solid var(--line); color: #8895a5; background: #0d1218; font: 11px/1.4 ui-monospace, monospace; }
.browser-frame { display: block; width: 100%; height: min(76vh, 900px); min-height: 520px; border: 0; background: #05080c; }
pre { height: min(68vh, 760px); min-height: 390px; margin: 0; padding: 18px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #cbd6df; background: #090d12; font: 13px/1.48 "Cascadia Mono", "SFMono-Regular", Consolas, monospace; tab-size: 4; }
footer { padding-top: 12px; color: #657281; text-align: center; font-size: 11px; }

@media (max-width: 600px) {
  main { padding: 20px 12px 12px; }
  header { align-items: center; }
  .terminal-bar { grid-template-columns: 60px 1fr auto; padding: 0 10px; }
  pre { padding: 13px; font-size: 11px; min-height: 58vh; }
  .browser-frame { height: 70vh; min-height: 440px; }
}