/* ============================================================================
   Roots Scribe — "Command Center" theme
   A dark, neon, ops-dashboard look (teal/blue/amber/coral on near-black), matching
   the reference command-center design. It works by (1) re-mapping the design tokens
   used by BOTH stylesheets (zoho.css and style.css) to the command palette, and
   (2) layering command chrome (glowing hairline panels, uppercase micro-labels,
   neon KPIs). Link this LAST on every page so it wins.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"]{
  /* ---- zoho.css token set ---- */
  --app:#05070b; --side:#080b13; --surface:#0b0f18; --inset:#0e1421;
  --ink:#e8eef7; --ink-2:#9fb0c3; --muted:#697d92;
  --line:#1a2534; --line-2:#141c28;
  --blue:#3fd0a4; --blue-ink:#49b3ff; --blue-weak:rgba(63,208,164,.12);
  --green:#3fd0a4; --green-weak:rgba(63,208,164,.12);
  --amber:#ffb547; --amber-weak:rgba(255,181,71,.12);
  --red:#ff7a6b; --red-weak:rgba(255,122,107,.12); --red-ink:#ff7a6b;
  --shadow:0 0 0 1px rgba(63,208,164,.03), 0 10px 30px rgba(0,0,0,.55);
  --shadow-lg:0 0 40px rgba(63,208,164,.07), 0 24px 70px rgba(0,0,0,.65);
  --r:8px; --r-sm:6px;
  --sans:"Geist","Inter",ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono","IBM Plex Mono",ui-monospace,monospace;

  /* ---- style.css token set (billing / review / login) ---- */
  --bg:#05070b; --bg-2:#0b0f18; --panel:#0b0f18; --panel-2:#0e1421;
  --border:#1a2534; --border-soft:#141c28;
  --text:#e8eef7;
  --accent:#3fd0a4; --accent-2:#49b3ff; --accent-3:#3fd0a4;
  --radius:8px;
  --grad:linear-gradient(135deg,#3fd0a4,#49b3ff);
  --ring:0 0 0 3px rgba(63,208,164,.25);

  --cmd-teal:#3fd0a4; --cmd-blue:#49b3ff; --cmd-amber:#ffb547; --cmd-coral:#ff7a6b;
  color-scheme:dark;
}

/* ---- Base ---- */
body{
  background:#05070b !important;
  color:#e8eef7 !important;
  font-family:var(--sans) !important;
  /* faint command-grid + corner glows */
  background-image:
    radial-gradient(1200px 600px at 78% -10%, rgba(73,179,255,.06), transparent 60%),
    radial-gradient(900px 500px at -5% 110%, rgba(63,208,164,.06), transparent 60%),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px) !important;
  background-size:auto, auto, 40px 40px, 40px 40px !important;
  background-attachment:fixed !important;
}

/* ---- App shell / sidebar (zoho.css layout) ---- */
.app{ background:transparent !important; }
.side{
  background:linear-gradient(180deg,#080b13,#06090f) !important;
  border-right:1px solid var(--line) !important;
}
.brand .logo, .auth-logo, .logo{
  background:linear-gradient(135deg,#3fd0a4,#2aa9d6) !important; color:#04121a !important;
  box-shadow:0 0 18px rgba(63,208,164,.35) !important; font-weight:700 !important;
}
.brand .nm{ color:#e8eef7 !important; }
.brand .nm small, .side .brand small{
  color:var(--cmd-teal) !important; text-transform:uppercase; letter-spacing:.16em;
  font-size:9px !important; opacity:.85;
}
.side .sec{ color:#547089 !important; text-transform:uppercase; letter-spacing:.14em; }
.nav-item{ color:#9fb0c3 !important; border-radius:6px !important; }
.nav-item:hover{ background:rgba(63,208,164,.06) !important; color:#e8eef7 !important; }
.nav-item.active{
  color:var(--cmd-teal) !important;
  background:linear-gradient(90deg,rgba(63,208,164,.14),rgba(63,208,164,.02)) !important;
  box-shadow:inset 2px 0 0 var(--cmd-teal) !important;
}
.nav-item svg{ opacity:.9; }
.nav-badge{ background:var(--cmd-teal) !important; color:#04121a !important; }

/* ---- Top bar ---- */
.topbar{
  background:linear-gradient(180deg,rgba(11,15,24,.95),rgba(11,15,24,.75)) !important;
  border-bottom:1px solid var(--line) !important; backdrop-filter:blur(6px);
}
.page-title, .topbar h1{
  color:#e8eef7 !important; letter-spacing:.02em; font-weight:700 !important;
}
.search input, #globalSearch{
  background:#0b0f18 !important; border:1px solid var(--line) !important; color:#e8eef7 !important;
}
.avatar{ background:linear-gradient(135deg,#3fd0a4,#2aa9d6) !important; color:#04121a !important; }

/* ---- Panels / cards (both stylesheets) ---- */
.card, .panel, .kpi, .u-card, .rc, .board .wizard, .track, .clearbar,
.keybar, .rv-list, .goal-form, section.panel, .transcript, pre{
  background:linear-gradient(180deg,#0b0f18,#090d15) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:var(--shadow) !important;
  position:relative;
}
/* glowing top hairline on the main data panels */
.panel::before, .kpi::before, .card::before{
  content:""; position:absolute; left:10px; right:10px; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(63,208,164,.55),transparent);
  opacity:.7; pointer-events:none;
}
.panel h2, .u-card h2{
  color:#cfe0f0 !important; text-transform:uppercase; letter-spacing:.12em;
  font-size:12.5px !important; display:flex; align-items:center; gap:8px;
}
.panel h2::before, .u-card h2::before{
  content:""; width:3px; height:14px; border-radius:2px;
  background:var(--cmd-teal); box-shadow:0 0 10px rgba(63,208,164,.6);
}
.panel h2 .h-sub, .panel h2 .hint{ color:var(--muted) !important; letter-spacing:.02em; text-transform:none; }

/* ---- KPI numbers: neon ---- */
.kpi .val, .card-value, .bigpct{
  color:#e8eef7 !important; -webkit-text-fill-color:#e8eef7 !important;
  text-shadow:0 0 18px rgba(63,208,164,.25); font-family:var(--sans);
}
.kpi.accent{
  background:linear-gradient(135deg,rgba(63,208,164,.16),rgba(73,179,255,.10)) !important;
  border:1px solid rgba(63,208,164,.4) !important;
  box-shadow:0 0 30px rgba(63,208,164,.12), var(--shadow) !important;
}
.kpi.accent .val{ color:#eafff8 !important; -webkit-text-fill-color:#eafff8 !important; }
.kpi .lbl, .card-label{ color:var(--muted) !important; text-transform:uppercase; letter-spacing:.1em; }

/* ---- Buttons ---- */
.btn{
  background:#0e1421 !important; color:#cfe0f0 !important; border:1px solid var(--line) !important;
}
.btn:hover{ border-color:var(--cmd-teal) !important; color:#e8eef7 !important;
  box-shadow:0 0 14px rgba(63,208,164,.18) !important; background:#101a26 !important; }
.btn.primary, .auth-btn, .btn.primary:where(*){
  background:linear-gradient(135deg,#3fd0a4,#33b98f) !important; color:#04121a !important;
  border:0 !important; font-weight:600 !important; box-shadow:0 0 18px rgba(63,208,164,.25) !important;
}
.btn.primary:hover, .auth-btn:hover{ filter:brightness(1.08); }
.btn.danger{ background:rgba(255,122,107,.12) !important; color:#ff9a8e !important;
  border:1px solid rgba(255,122,107,.4) !important; }
.btn.danger:hover{ box-shadow:0 0 14px rgba(255,122,107,.25) !important; }

/* ---- Inputs / selects ---- */
input, select, textarea, .mini-select, .grid input, .grid select,
.auth-card input, #txt{
  background:#0b0f18 !important; color:#e8eef7 !important;
  border:1px solid var(--line) !important; border-radius:6px;
}
input:focus, select:focus, textarea:focus{
  outline:none !important; border-color:var(--cmd-teal) !important;
  box-shadow:0 0 0 3px rgba(63,208,164,.18) !important;
}
::placeholder{ color:#5b6e83 !important; }

/* ---- Tables (billing / dashboard) ---- */
.ctable th{ color:#8fa4ba !important; border-bottom:1px solid var(--line) !important;
  text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.ctable td{ color:#d3deec !important; border-bottom:1px solid var(--line-2) !important; }
.table-wrap{ border-radius:var(--r); }

/* ---- Status tags / pills ---- */
.state, .rolechip, .cyl-tag, .cyl-chip, .nav-badge{ border-radius:999px; }
.state.done{ color:var(--cmd-teal) !important; }
.state.running{ color:var(--cmd-blue) !important; }
.state.error, .state.failed{ color:var(--cmd-coral) !important; }
.rolechip{ background:rgba(63,208,164,.12) !important; color:var(--cmd-teal) !important;
  border:1px solid rgba(63,208,164,.3); }

/* ---- Bars / meters (dashboard + billing) ---- */
.barrow .track, .bar-track, .track i.green, .spark i{ }
.barrow .track{ background:#0e1421 !important; }
.barrow .track i{ background:linear-gradient(90deg,#3fd0a4,#49b3ff) !important; }
.barrow .track i.green{ background:linear-gradient(90deg,#3fd0a4,#33b98f) !important; }
.mbar .col{ background:linear-gradient(180deg,#49b3ff,#3fd0a4) !important;
  box-shadow:0 0 12px rgba(63,208,164,.25); }
.spark i{ background:rgba(63,208,164,.25) !important; }
.spark i.hot{ background:var(--cmd-teal) !important; box-shadow:0 0 8px rgba(63,208,164,.5); }

/* ---- Steps / wizard rail ---- */
.step.active, .step.done{ color:var(--cmd-teal) !important; }
.step .dot, .step i{ }

/* ---- Purge / danger bar keeps its coral identity ---- */
.purgebar{ border-left:3px solid var(--cmd-coral) !important;
  background:linear-gradient(180deg,rgba(255,122,107,.06),transparent) !important; }
.purgebar .label{ color:var(--cmd-coral) !important; }
.csbar{ border-left:3px solid var(--cmd-teal) !important; }

/* ---- Login card ---- */
.auth-card{ background:linear-gradient(180deg,#0b0f18,#090d15) !important;
  border:1px solid var(--line) !important; box-shadow:var(--shadow-lg) !important; }
.auth-title{ color:#e8eef7 !important; }
.auth-sub, .auth-note{ color:var(--muted) !important; }

/* ---- Review pane ---- */
.rv-top, .rv-bar, .marker-bar{ background:#0b0f18 !important; border-color:var(--line) !important; }
.rv-item{ color:#d3deec !important; border-color:var(--line-2) !important; }
.rv-item:hover{ background:rgba(63,208,164,.06) !important; }
.rv-item.active{ background:rgba(63,208,164,.12) !important; border-left:3px solid var(--cmd-teal) !important; }

/* ---- Scrollbars ---- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:#080b13; }
*::-webkit-scrollbar-thumb{ background:#1a2534; border-radius:99px; border:2px solid #080b13; }
*::-webkit-scrollbar-thumb:hover{ background:#26374d; }

/* ---- Connection pill ---- */
.netpill{ background:rgba(63,208,164,.08) !important; border:1px solid rgba(63,208,164,.25) !important; }
.netpill.bad, .keystatus.bad{ background:rgba(255,122,107,.08) !important;
  border-color:rgba(255,122,107,.3) !important; color:#ff9a8e !important; }
.keystatus.ok{ color:var(--cmd-teal) !important; }