/* ── Design Tokens — Night Gold ─────────────────────────────────────────── */
:root {
  --gold:           #F0C040;   /* dark fallback; themed blocks below override */
  --gold-glow-md:   rgba(240,192,64,0.45);

  /* Legacy aliases → theme-aware tokens (defined per [data-theme] below).
     Custom properties resolve at use-time, so these follow the active theme. */
  --gold-border: var(--line);
  --bg-body:  var(--bg);
  --bg-card:  var(--surface);
  --glass:    var(--bg2);

  --text-main:   var(--ink);
  --text-muted:  var(--mut);
  --text-subtle: var(--dim);

  --status-live:    #22c55e;
  --status-error:   #ef4444;

  --font-b: 'Outfit', system-ui, sans-serif;

  --radius:    10px;
}

/* ── Theme: Dark ─────────────────────────────────────────────────────────── */
:root[data-theme="dark"]{
  --bg:#0C0A05; --bg2:#0E0B06; --surface:#16110A; --surface-2:#1B150C;
  --line:#272013; --line-strong:#39301B; --ink:#F6EFD6; --ink-2:#C9BC93;
  --mut:#9A8A5F; --dim:#6E5F38;
  --gold:#F0C040; --gold-ink:#0C0A05; --gold-soft:#F0C04022;
  --blue:#7CD9FF; --green:#34D17A; --purple:#D9B8FE;
  --glow: radial-gradient(700px 360px at 50% -8%, #1E1709 0%, transparent 70%);
  --shadow: 0 24px 60px -28px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.02) inset;
  --field-bg:#0E0B06;
}

/* ── Theme: Light ────────────────────────────────────────────────────────── */
:root[data-theme="light"]{
  --bg:#F7F2E7; --bg2:#FBF8F1; --surface:#FFFFFF; --surface-2:#FFFDF7;
  --line:#ECE3CF; --line-strong:#E0D4B6; --ink:#241B0B; --ink-2:#5A4D32;
  --mut:#8A7B59; --dim:#A99B77;
  --gold:#B7861A; --gold-ink:#FFFFFF; --gold-soft:#B7861A14;
  --blue:#1F7FA8; --green:#1E874C; --purple:#7B4FB0;
  --glow: radial-gradient(720px 380px at 50% -10%, #F6ECD2 0%, transparent 72%);
  --shadow: 0 26px 60px -30px rgba(120,96,30,.35), 0 1px 0 rgba(255,255,255,.7) inset;
  --field-bg:#FBF7EC;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* The `hidden` attribute must win over component display rules (e.g.
   .terminal-shell{display:flex}, .rail{display:flex}, .stage{display:flex}). */
[hidden] { display: none !important; }

body {
  background: var(--bg);
  font-family: var(--font-b);
  color: var(--ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: background 0.25s ease, color 0.25s ease;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gold-border);
  background: rgba(14,11,6,0.6);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wordmark {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.health-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-error);
  transition: background 0.3s;
}

/* ── Savings Meter ───────────────────────────────────────────────────────── */
.savings-meter {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
}
.savings-meter b {
  color: var(--gold);
  font-weight: 600;
}

/* ── Login Panel ─────────────────────────────────────────────────────────── */
.login-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-form {
  width: 100%;
  max-width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 32px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.login-form h1 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--gold);
}

.login-form p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

#login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#password-input {
  padding: 10px 12px;
  background: rgba(240,192,64,0.06);
  border: 1px solid var(--gold-border);
  border-radius: 6px;
  color: var(--text-main);
  font-size: 14px;
  font-family: inherit;
}

#password-input:focus {
  outline: none;
  border-color: rgba(240,192,64,0.5);
  box-shadow: 0 0 0 2px rgba(240,192,64,0.1);
}

.btn-login {
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--gold), #F8E080);
  border: none;
  border-radius: 6px;
  color: #0E0B06;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}

.btn-login:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.btn-login:active {
  transform: translateY(0);
}

.error-msg {
  font-size: 12px;
  color: var(--status-error);
  margin-top: 8px;
  text-align: center;
}

/* ── App Components ─────────────────────────────────────────────────────── */
.appbar{display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;border-bottom:1px solid var(--line);background:var(--bg2)}
.brand{display:flex;align-items:center;gap:11px;font-weight:680;letter-spacing:-.01em;font-size:17px}
.brand .mark{width:25px;height:25px;border-radius:8px;
  background:linear-gradient(150deg,#F4CD5A,#E0A92A);
  box-shadow:0 2px 8px -2px #E0A92A88;position:relative}
.brand .mark:after{content:"";position:absolute;inset:6px 6px auto 6px;height:3px;border-radius:2px;
  background:var(--gold-ink);opacity:.85;box-shadow:0 5px 0 var(--gold-ink)}
.bar-right{display:flex;align-items:center;gap:14px}
.meter{display:flex;gap:13px;align-items:center;font-size:13px;color:var(--ink-2);
  background:var(--gold-soft);border:1px solid var(--line);border-radius:999px;padding:7px 15px}
.meter b{color:var(--gold)}

.stage{display:flex;justify-content:center;padding:60px 24px}
.card{width:100%;max-width:660px;background:var(--surface);border:1px solid var(--line);
  border-radius:24px;padding:40px 42px 34px;box-shadow:var(--shadow)}
.rail{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);margin-bottom:30px;
  justify-content:center;font-weight:560}
.rail .step{display:flex;align-items:center;gap:8px}
.rail .num{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  border:1px solid var(--line-strong)}
.rail .done .num{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.rail .now .num{border-color:var(--gold);color:var(--gold)}
.rail .now{color:var(--ink)}
.rail .seg{width:26px;height:1px;background:var(--line-strong)}

.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:650;margin-bottom:9px}
.title{font-size:27px;font-weight:680;letter-spacing:-.02em;margin:0 0 6px}
.sub{color:var(--mut);font-size:15.5px;line-height:1.5;margin:0 0 24px}
.keysteps{color:var(--mut);font-size:14px;line-height:1.7;margin:0 0 20px;padding-left:20px}
.keysteps a{color:var(--accent,#74D6FF);text-decoration:none}
.keysteps a:hover{text-decoration:underline}

.field{position:relative}
.field textarea{width:100%;resize:none;background:var(--field-bg);border:1px solid var(--line-strong);
  border-radius:14px;padding:16px 17px;color:var(--ink);font-size:16px;line-height:1.5;
  font-family:"Cascadia Code",ui-monospace,Consolas,monospace;outline:none;transition:border-color .15s,box-shadow .15s}
.field textarea::placeholder{color:var(--dim)}
.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}

.or{display:flex;align-items:center;gap:14px;color:var(--dim);font-size:12px;margin:22px 0 15px;
  text-transform:uppercase;letter-spacing:.1em}
.or:before,.or:after{content:"";height:1px;background:var(--line);flex:1}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1px solid var(--line-strong);background:transparent;border-radius:999px;
  padding:10px 18px;font-size:14.5px;color:var(--ink-2);cursor:pointer;
  transition:all .14s;font-family:inherit}
.chip:hover{border-color:var(--gold);color:var(--ink)}
.chip.on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:650;
  box-shadow:0 4px 14px -6px var(--gold)}

.resolved{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.picksel{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.picksel .arrow{color:var(--dim);font-family:"Cascadia Code",monospace}
select{appearance:none;-webkit-appearance:none;background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:10px;color:var(--ink);
  padding:11px 34px 11px 15px;font-size:14.5px;font-family:"Cascadia Code",monospace;cursor:pointer;outline:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 17px) 21px,calc(100% - 12px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:focus{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}

.launch{border:0;border-radius:13px;padding:14px 26px;font-size:16px;font-weight:680;cursor:pointer;
  color:var(--gold-ink);font-family:inherit;letter-spacing:-.01em;
  background:linear-gradient(160deg,#F4CD5A,#E2A726);box-shadow:0 8px 22px -10px #E2A72699;
  transition:transform .12s,box-shadow .12s}
.launch:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px #E2A726aa}

.inp{width:100%;background:var(--field-bg);border:1px solid var(--line-strong);border-radius:12px;
  padding:13px 15px;color:var(--ink);font-size:15.5px;font-family:inherit;outline:none;
  transition:border-color .15s,box-shadow .15s}
.inp::placeholder{color:var(--dim)}
.inp:focus{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
form#f{display:flex;flex-direction:column;gap:13px;margin-top:6px}
.err{color:var(--status-error);font-size:13px;margin-top:10px}
.muted{color:var(--mut);font-size:13.5px;margin-top:16px}
.muted a{color:var(--gold);text-decoration:none;font-weight:600}
.muted a:hover{text-decoration:underline}
.seats{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:12px}
.seat-info{color:var(--mut);text-transform:capitalize;letter-spacing:.01em}
.seat-info.full{color:var(--ink-2)}
.seat-upgrade{color:var(--gold);text-decoration:none;font-weight:620;font-size:11.5px;
  border:1px solid var(--gold-soft);border-radius:999px;padding:3px 11px;line-height:1.4;
  transition:background .14s,border-color .14s}
.seat-upgrade:hover{background:var(--gold-soft);border-color:var(--gold)}
.theme-toggle{border:none;background:none;cursor:pointer;padding:4px 6px;font-size:19px;line-height:1;
  color:var(--gold);opacity:.9;transition:opacity .15s,transform .15s}
.theme-toggle:hover{opacity:1;transform:scale(1.12)}

/* ── Snapshot panel (desktop autosave restore) ──────────────────────────── */
.snap-panel{position:fixed;top:52px;right:14px;z-index:40;width:320px;max-height:60vh;overflow-y:auto;
  background:var(--card,#111);border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);font-size:13px}
.snap-panel h3{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.snap-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;
  border-top:1px solid var(--line-strong)}
.snap-row:first-of-type{border-top:none}
.snap-when{color:var(--ink-2)}
.snap-sha{color:var(--mut);font-family:monospace;font-size:11.5px;margin-left:6px}
.snap-restore{border:1px solid var(--line-strong);background:transparent;color:var(--ink-2);
  border-radius:999px;padding:3px 11px;font-size:11.5px;cursor:pointer;white-space:nowrap;
  transition:border-color .14s,color .14s}
.snap-restore:hover{border-color:var(--gold);color:var(--ink)}
.snap-restore.arm{border-color:var(--status-error);color:var(--status-error)}
.snap-empty{color:var(--mut);padding:6px 0}

/* ── Terminal Shell ──────────────────────────────────────────────────────── */
.terminal-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#term-tab-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  padding: 4px 8px 0;
  flex-shrink: 0;
}

#term-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
#term-tabs::-webkit-scrollbar { display: none; }

.term-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px 6px;
  background: var(--gold-soft);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: var(--mut);
  font-size: 13px;
  font-family: "Cascadia Code", Consolas, monospace;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.term-tab:hover { background: var(--gold-soft); color: var(--ink); }
.term-tab.active {
  background: var(--field-bg);
  border-color: var(--gold);
  color: var(--gold);
}

.term-tab-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 0 0 2px;
  opacity: 0.5;
}
.term-tab-close:hover { opacity: 1; color: #ef4444; }

#term-new-btn {
  margin-left: 4px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--mut);
  font-size: 16px;
  line-height: 1;
  width: 26px;
  height: 26px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
#term-new-btn:hover { background: var(--gold-soft); color: var(--gold); }

/* pane area */
#term-panes {
  flex: 1;
  position: relative;
  background: var(--field-bg);
  overflow: hidden;
}

.term-pane {
  position: absolute;
  inset: 0;
  padding: 10px 12px;
  box-sizing: border-box;
  overflow: hidden;
  display: none;
}
.term-pane.active { display: block; }

.term-pane .xterm,
.term-pane .xterm-viewport,
.term-pane .xterm-screen {
  width: 100% !important;
  height: 100% !important;
}

.term-pane .xterm-viewport::-webkit-scrollbar { width: 6px; }
.term-pane .xterm-viewport::-webkit-scrollbar-track { background: transparent; }
.term-pane .xterm-viewport::-webkit-scrollbar-thumb {
  background: rgba(240,192,64,0.30);
  border-radius: 3px;
}

/* ── Settings Panel ──────────────────────────────────────────────────────── */
.settings-panel {
  position: fixed;
  top: 52px;
  right: 14px;
  z-index: 40;
  width: 340px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.settings-panel h3 {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
}

.settings-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.settings-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.license-status-chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

.license-status-chip.active {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: var(--green);
}

.license-status-chip.not-active {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--status-error);
}

.license-status-chip.offline {
  background: rgba(156, 163, 175, 0.15);
  border: 1px solid rgba(156, 163, 175, 0.4);
  color: var(--mut);
}

.license-input {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
  font-family: 'Courier New', monospace;
}

.license-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(240, 192, 64, 0.1);
}

.license-input::placeholder {
  color: var(--dim);
}

.license-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.settings-btn {
  flex: 1;
  padding: 8px 10px;
  background: var(--line);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.settings-btn:hover {
  background: var(--line-strong);
  border-color: var(--gold);
}

.settings-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-btn.danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--status-error);
}

.settings-btn.danger:hover {
  background: rgba(239, 68, 68, 0.25);
}

.skills-list {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 8px;
}

.skills-item {
  display: inline-block;
  padding: 4px 8px;
  margin: 3px 4px 3px 0;
  background: var(--gold-soft);
  border: 1px solid rgba(240, 192, 64, 0.3);
  border-radius: 4px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 500;
}

.settings-status-msg {
  font-size: 11px;
  padding: 8px;
  margin-top: 8px;
  border-radius: 4px;
  text-align: center;
}

.settings-status-msg.success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--green);
}

.settings-status-msg.error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--status-error);
}

.settings-status-msg.info {
  background: rgba(124, 217, 255, 0.15);
  color: var(--blue);
}