/* J.A.R.V.I.S. — one design language.
   Loaded on every page by nav.js. The old HUD was a costume: scanlines, Orbitron,
   neon glow. This replaces it with a quiet graphite workspace: one accent, real
   typographic hierarchy, dense primitives, and a persistent sidebar. CRM pages
   keep their tables and pills but inherit the same tokens. */

:root {
  --bg: #08090c;
  --bg-soft: #0b0d12;
  --panel: #0f1218;
  --panel-2: #12161d;
  --line: #1e232d;
  --line-strong: #2b3240;
  --text: #eef1f6;
  --muted: #98a1b2;
  --muted-2: #6d7789;
  --accent: #8db4ff;
  --accent-ink: #0a1020;
  --good: #69d6a4;
  --warn: #e6b566;
  --bad: #f07f95;
  --violet: #b09bff;
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar: 236px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after,
.scanlines,
.hud-scan,
.hud-grain { display: none !important; }

a { color: inherit; }

::selection { background: rgba(141, 180, 255, 0.28); }

/* ---------- shell ---------- */

body.has-sidebar { padding-left: var(--sidebar); }

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 14px 14px;
  background: #090b0f;
  border-right: 1px solid var(--line);
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--line);
}

.side-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--accent), #5f7fd6);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--font);
  letter-spacing: -0.04em;
}

.side-brand strong { display: block; font-size: 13px; letter-spacing: 0.01em; }
.side-brand span { display: block; color: var(--muted-2); font-size: 11px; margin-top: 1px; }

.side-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--muted);
  text-decoration: none;
  font-size: 12.5px;
}
.side-search:hover { border-color: var(--line-strong); color: var(--text); }
.side-search kbd {
  font: 500 10px/1 var(--mono);
  padding: 3px 5px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--muted-2);
  background: var(--bg);
}

.side-nav { flex: 1 1 auto; overflow-y: auto; padding: 2px 0 10px; }
.side-group { margin-bottom: 14px; }
.side-label {
  padding: 0 10px 6px;
  font: 600 10px/1 var(--font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin: 1px 0;
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12.8px;
  font-weight: 450;
}
.side-link svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: 0.85; }
.side-link:hover { background: var(--panel); color: var(--text); }
.side-link.active { background: #171c26; color: var(--text); }
.side-link.active svg { opacity: 1; color: var(--accent); }
.side-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.side-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: none;
  place-items: center;
  background: rgba(141, 180, 255, 0.16);
  color: var(--accent);
  font: 600 10px/1 var(--mono);
}
.side-badge.on { display: grid; }

.side-foot {
  border-top: 1px solid var(--line);
  padding: 10px 8px 2px;
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: var(--muted-2);
}
.side-foot .side-state { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.side-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(105, 214, 164, 0.1); }
.side-dot.off { background: var(--bad); box-shadow: 0 0 0 3px rgba(240, 127, 149, 0.1); }
.side-foot .side-spend { font-family: var(--mono); color: var(--muted); }

/* ---------- topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 28px;
  background: rgba(8, 9, 12, 0.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.topbar::before, .topbar::after { display: none !important; }
.topbar .brand { gap: 11px; }
.topbar .brand-text h1 {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
}
.topbar .brand-text p {
  margin: 2px 0 0;
  font: 500 10.5px/1.2 var(--font);
  letter-spacing: 0.05em;
  color: var(--muted-2);
}
.topbar .reactor { width: 30px; height: 30px; flex: 0 0 30px; }
.topbar .reactor .ring { display: none; }
.topbar .reactor .core {
  inset: 3px;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--accent), #5f7fd6);
  box-shadow: none;
  animation: none;
}
.topbar .clock {
  margin-left: auto;
  font-family: var(--mono);
  text-align: right;
}
.topbar .clock #time { font-size: 13px; color: var(--text); letter-spacing: 0.02em; }
.topbar .clock #date { font-size: 10px; color: var(--muted-2); letter-spacing: 0.08em; }
.topbar .header-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- typography ---------- */

h1, h2, h3, h4 { font-family: var(--font); letter-spacing: -0.015em; }
h1 { font-size: 24px; font-weight: 600; }
h2 { font-size: 14px; font-weight: 600; }
h3 { font-size: 12.5px; font-weight: 600; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim { color: var(--muted-2); }

/* ---------- buttons + inputs ---------- */

.btn, .crm-btn, button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font: 500 12.5px/1 var(--font);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.btn:hover, .crm-btn:hover { background: #171c25; border-color: #394253; color: var(--text); }
.btn.primary, .crm-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn.primary:hover, .crm-btn.primary:hover { background: #a9c6ff; border-color: #a9c6ff; color: var(--accent-ink); }
.btn.ghost, .crm-btn.quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover, .crm-btn.quiet:hover { background: var(--panel); color: var(--text); }
.btn.danger, .crm-btn.danger { color: var(--bad); border-color: rgba(240, 127, 149, 0.35); background: transparent; }
.btn.danger:hover, .crm-btn.danger:hover { background: rgba(240, 127, 149, 0.1); }
.btn.small, .crm-btn.small { min-height: 26px; padding: 4px 9px; font-size: 11.5px; }
.btn:disabled, .crm-btn:disabled { opacity: 0.45; cursor: not-allowed; }

input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: 400 13px/1.4 var(--font);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(141, 180, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(141, 180, 255, 0.1);
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
textarea { min-height: 110px; resize: vertical; }
label { color: var(--muted); font-size: 12px; }
label > span { display: block; margin-bottom: 5px; }

/* ---------- page layout ---------- */

.app-page {
  position: relative;
  z-index: 2;
  max-width: 1420px;
  margin: 0 auto;
  padding: 26px 28px 64px;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 28px;
  margin-bottom: 22px;
}
.page-head .eyebrow {
  margin: 0 0 6px;
  font: 600 10.5px/1 var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-head h1 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); }
.page-sub { margin: 7px 0 0; max-width: 68ch; color: var(--muted); font-size: 13px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(380px, 100%);
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted-2);
}
.searchbar svg { width: 15px; height: 15px; flex: 0 0 15px; }
.searchbar input { border: 0; background: transparent; box-shadow: none; padding: 5px 0; min-width: 0; }
.searchbar input:focus { box-shadow: none; }
.searchbar kbd { font: 500 10px/1 var(--mono); color: var(--muted-2); padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; }

.askbar {
  display: flex;
  gap: 8px;
  padding: 8px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #10141b, #0d1016);
}
.askbar input { border: 0; background: transparent; font-size: 14px; }
.askbar input:focus { box-shadow: none; }
.ask-reply {
  margin: -12px 0 20px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  white-space: pre-wrap;
}

/* ---------- metrics ---------- */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.metric {
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  min-width: 0;
}
.metric .metric-label {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric .metric-value {
  display: block;
  margin-top: 8px;
  font: 600 26px/1 var(--font);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.metric .metric-hint { display: block; margin-top: 6px; font-size: 11px; color: var(--muted-2); }
.metric[data-tone='warn'] .metric-value { color: var(--warn); }
.metric[data-tone='bad'] .metric-value { color: var(--bad); }
.metric[data-tone='good'] .metric-value { color: var(--good); }

/* ---------- cards, rows, pills ---------- */

.card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; }
.card-head .meta { margin-left: auto; color: var(--muted-2); font-size: 11px; }
.card-head a { margin-left: auto; color: var(--muted); font-size: 11.5px; text-decoration: none; }
.card-head a:hover { color: var(--text); }
.card-body { padding: 6px 16px 14px; }
.card-body.flush { padding: 0; }
.card-foot { padding: 10px 16px; border-top: 1px solid var(--line); }

/* Legacy pages (todo, reminders, settings, study, status) use .panel/.stack.
   Give those the same surface as the new cards so one shell reads as one app. */
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: none;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.panel-head h2 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text);
}
.panel-meta, .panel-link { font-size: 11.5px; color: var(--muted-2); }
.panel-link { margin-left: auto; text-decoration: none; }
.stack { display: grid; gap: 0; }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font: 500 10px/1.2 var(--font);
}
.badge-amber { color: var(--warn); border-color: rgba(230, 181, 102, 0.32); }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .two-up { grid-template-columns: 1fr; } }

.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }

.row-list { display: grid; }
.row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  min-width: 0;
}
.row:last-child { border-bottom: 0; }
.row-click { cursor: pointer; }
.row-click:hover .row-title { color: var(--accent); }
.row-main { flex: 1 1 auto; min-width: 0; }
.row-title {
  display: block;
  color: var(--text);
  font-size: 12.8px;
  font-weight: 500;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-side { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.row-time { font: 500 10.5px/1.3 var(--mono); color: var(--muted-2); white-space: nowrap; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 10px/1.2 var(--font);
  white-space: nowrap;
}
.pill.good, .pill.live { color: var(--good); border-color: rgba(105, 214, 164, 0.32); background: rgba(105, 214, 164, 0.07); }
.pill.warn, .pill.pending, .pill.needs_credential { color: var(--warn); border-color: rgba(230, 181, 102, 0.32); background: rgba(230, 181, 102, 0.07); }
.pill.bad, .pill.error { color: var(--bad); border-color: rgba(240, 127, 149, 0.32); background: rgba(240, 127, 149, 0.07); }
.pill.accent { color: var(--accent); border-color: rgba(141, 180, 255, 0.32); background: rgba(141, 180, 255, 0.08); }

.empty {
  padding: 22px 4px;
  color: var(--muted-2);
  font-size: 12.5px;
  text-align: left;
}

.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--muted);
  font-size: 12.5px;
}
.banner.good { border-color: rgba(105, 214, 164, 0.3); color: var(--good); }
.banner.bad { border-color: rgba(240, 127, 149, 0.3); color: var(--bad); }
.banner .crm-btn { margin-left: auto; }

/* ---------- legacy CRM restyle ---------- */

.crm-page {
  --crm-line: var(--line);
  --crm-line-strong: var(--line-strong);
  --crm-ink: var(--text);
  --crm-muted: var(--muted);
  --crm-paper: var(--panel);
  --crm-paper-alt: var(--panel-2);
  --crm-accent: var(--accent);
  --crm-good: var(--good);
  --crm-warn: var(--warn);
  --crm-bad: var(--bad);
  --crm-violet: var(--violet);
}
.crm-page .scanlines { display: none; }
.crm-shell { max-width: 1420px; padding: 26px 28px 64px; }
.crm-masthead {
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 20px 22px;
}
.crm-eyebrow { font-family: var(--font); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--accent); }
.crm-masthead h1 { font-family: var(--font); font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; }
.crm-subtitle { color: var(--muted); font-size: 13px; }
.crm-masthead-meta { font-family: var(--font); font-size: 10.5px; color: var(--muted-2); }
.crm-masthead-meta strong { color: var(--text); font-family: var(--mono); font-size: 11px; }
.crm-toolbar { margin: 14px 0 18px; }
.crm-seg { border-radius: var(--radius-sm); border-color: var(--line-strong); }
.crm-seg button, .crm-btn { font-family: var(--font); font-size: 12px; letter-spacing: 0; text-transform: none; border-radius: var(--radius-sm); }
.crm-seg button { border-radius: 0; }
.crm-seg button.active { background: var(--accent); color: var(--accent-ink); }
.crm-kpis { gap: 10px; border: 0; background: transparent; margin-bottom: 20px; }
.crm-kpi { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); border-top: 1px solid var(--line); padding: 13px 15px; }
.crm-kpi[data-tone='good'], .crm-kpi[data-tone='warn'], .crm-kpi[data-tone='bad'] { border-top: 1px solid var(--line); }
.crm-kpi-label { font-family: var(--font); font-size: 11px; letter-spacing: 0; text-transform: none; }
.crm-kpi-value { font-family: var(--font); font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.03em; margin: 7px 0 3px; }
.crm-kpi-hint { font-size: 11px; color: var(--muted-2); }
.crm-grid { gap: 12px; }
.crm-card { border-radius: var(--radius); border-color: var(--line); background: var(--panel); }
.crm-card-head { padding: 12px 15px; background: var(--panel-2); }
.crm-card-head h2 { font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; text-transform: none; }
.crm-card-head .crm-card-meta { font-family: var(--font); font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.crm-card-body { padding: 13px 15px 15px; }
.crm-table th { font-family: var(--font); font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--muted-2); text-transform: none; }
.crm-table td { font-size: 12.5px; }
.crm-table th, .crm-table td { border-color: rgba(255, 255, 255, 0.05); }
.crm-pill { border-radius: 999px; font-family: var(--font); font-size: 10px; }
.crm-tag { font-family: var(--font); font-size: 10px; border-radius: 5px; }
.crm-status { font-size: 12px; }
.crm-callout { border-radius: var(--radius-sm); }
.crm-field input, .crm-field select, .crm-field textarea { border-radius: var(--radius-sm); }
.crm-dialog { border-radius: 14px; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); }
.crm-dialog::backdrop { background: rgba(2, 4, 8, 0.72); backdrop-filter: blur(4px); }
.crm-dialog-actions { border-color: var(--line); }
.crm-connector { border-radius: var(--radius); }
.crm-connector-top h3 { font-size: 13px; }
.crm-connector .provider { color: var(--muted-2); }
.crm-account { border-color: rgba(255,255,255,0.05); }

/* ---------- tabs ---------- */

.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-soft);
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 500 11.5px/1 var(--font);
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--panel-2); color: var(--text); }

/* ---------- dialogs / forms ---------- */

dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
dialog::backdrop { background: rgba(2, 4, 8, 0.72); backdrop-filter: blur(4px); }
dialog form { padding: 20px; display: grid; gap: 13px; }
dialog h2 { margin: 0; font-size: 16px; }
.dialog-sub { margin: -4px 0 2px; color: var(--muted); font-size: 12.5px; }
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 4px -20px -20px;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
}
.field { display: grid; gap: 5px; }
.field small { color: var(--muted-2); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-row { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.check-row label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.check-row input { width: auto; }

.wizard-steps {
  display: flex;
  gap: 6px;
  margin: 2px 0 6px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.wizard-steps li {
  flex: 1 1 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted-2);
  font-size: 10.5px;
  text-align: center;
  counter-increment: step;
}
.wizard-steps li::before {
  content: counter(step) '  ';
  font-family: var(--mono);
  opacity: 0.7;
}
.wizard-steps li.active {
  border-color: rgba(141, 180, 255, 0.45);
  background: rgba(141, 180, 255, 0.08);
  color: var(--text);
}

/* ---------- reading / writing ---------- */

.reader-head { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.reader-head h2 { margin: 0 0 4px; font-size: 16px; }
.reader-meta { color: var(--muted); font-size: 12px; }
.reader-body {
  padding: 16px;
  color: #d6dbe4;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  max-height: 520px;
  overflow-y: auto;
}
.reader-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }

.split {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.6fr);
  gap: 12px;
  align-items: start;
}
.list-scroll { max-height: 620px; overflow-y: auto; }
.select-row { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; }
.select-row:hover { background: var(--panel-2); }
.select-row.active { background: #171c26; box-shadow: inset 2px 0 0 var(--accent); }
.select-row .subject { font-size: 12.8px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-row .from { margin-top: 2px; color: var(--muted-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-row .when { float: right; color: var(--muted-2); font: 500 10px/1.4 var(--mono); margin-left: 8px; }

/* ---------- utilities ---------- */

.hstack { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vstack { display: grid; gap: 10px; }
.spacer { flex: 1 1 auto; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

.kbd {
  font: 500 10px/1 var(--mono);
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted-2);
}

/* ---------- print ---------- */

@media print {
  .app-sidebar, .topbar, .page-actions, .askbar, .btn, .crm-btn { display: none !important; }
  body.has-sidebar { padding-left: 0; }
  body { background: #fff; color: #111; }
  .app-page, .crm-shell { max-width: none; padding: 0; }
  .card, .crm-card, .metric { border-color: #ddd; background: #fff; }
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 6; }
}

@media (max-width: 900px) {
  body.has-sidebar { padding-left: 0; padding-bottom: 66px; }
  .app-sidebar {
    inset: auto 0 0 0;
    width: auto;
    height: 62px;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--line);
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(9, 11, 15, 0.96);
    backdrop-filter: blur(14px);
  }
  .side-brand, .side-search, .side-label, .side-foot { display: none; }
  .side-nav { display: flex; gap: 2px; padding: 0; overflow: visible; flex: 1 1 auto; }
  .side-group { display: contents; }
  .side-link {
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 56px;
    padding: 7px 8px;
    font-size: 9.5px;
    text-align: center;
  }
  .side-link svg { width: 17px; height: 17px; flex: 0 0 17px; }
  .side-link.active::before { display: none; }
  .side-badge { position: absolute; top: 3px; right: 6px; min-width: 14px; height: 14px; font-size: 8px; }
  .topbar { padding: 9px 14px; min-height: 56px; }
  .topbar .clock { display: none; }
  .topbar .brand-text p { display: none; }
  .topbar .spend { display: none; }
  .topbar .header-actions .btn { display: none; }
  .app-page, .crm-shell { padding: 18px 14px 40px; }
  .page-head { margin-bottom: 16px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-4, .span-5, .span-6, .span-7, .span-8, .span-12 { grid-column: 1 / -1; }
  .split { grid-template-columns: 1fr; }
  .crm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-card, .crm-card.third, .crm-card.two-thirds { grid-column: 1 / -1; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   MCU HUD layer — the workshop look, layered over the graphite base.

   Reference: the Iron Man / Avengers JARVIS display language (Jayse Hansen's
   HUD work): a near-black blue field, one electric-cyan signal colour that
   only ever means "this is live", warm amber reserved for warnings, hairline
   geometry, monospaced telemetry, the arc reactor as the single focal point.
   No scanline cosplay and no Orbitron: the film's type is clean grotesque for
   prose and a technical mono for readings, which is what this keeps.
   ===================================================================== */

:root {
  --bg: #03070c;
  --bg-soft: #050b12;
  --panel: rgba(6, 14, 22, 0.78);
  --panel-2: rgba(9, 20, 30, 0.92);
  --line: rgba(93, 242, 255, 0.13);
  --line-strong: rgba(93, 242, 255, 0.3);
  --text: #e6faff;
  --muted: #90b6c6;
  --muted-2: #5d8497;
  --accent: #5df2ff;
  --accent-ink: #02141c;
  --good: #5dffc0;
  --warn: #ffc46b;
  --bad: #ff6f8d;
  --violet: #a8e9ff;
  --radius: 5px;
  --radius-sm: 3px;
}

body {
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(23, 96, 126, 0.42), transparent 62%),
    radial-gradient(900px 700px at 108% 112%, rgba(12, 62, 92, 0.3), transparent 60%),
    linear-gradient(180deg, #03070c 0%, #02050a 100%);
  background-attachment: fixed;
}

/* style.css already draws a grid layer; this re-enables it, quiets it, and fades it
   out toward the edges so it reads as depth instead of wallpaper. */
body::before {
  display: block !important;
  opacity: 0.6;
  background-size: 52px 52px;
  background-image:
    linear-gradient(rgba(93, 242, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 242, 255, 0.055) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 82%);
  mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 82%);
}

/* ---------- sidebar ---------- */

.app-sidebar {
  background: linear-gradient(180deg, rgba(4, 11, 18, 0.97), rgba(3, 8, 13, 0.99));
  border-right: 1px solid var(--line);
}
.app-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(93, 242, 255, 0.45), transparent);
  opacity: 0.55;
  pointer-events: none;
}
.side-mark {
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: transparent;
  color: var(--accent);
  font: 600 12px/1 var(--mono);
  box-shadow: inset 0 0 12px rgba(93, 242, 255, 0.22), 0 0 12px rgba(93, 242, 255, 0.14);
}
.side-brand strong { letter-spacing: 0.14em; font-size: 12px; text-transform: uppercase; }
.side-brand span { font: 500 9px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
.side-label { font: 500 9px/1 var(--mono); letter-spacing: 0.26em; color: var(--muted-2); }
.side-link { border-radius: 3px; letter-spacing: 0.02em; }
.side-link:hover { background: rgba(93, 242, 255, 0.06); color: var(--text); }
.side-link.active {
  background: rgba(93, 242, 255, 0.1);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(93, 242, 255, 0.18);
}
.side-link.active::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.side-link.active svg { color: var(--accent); filter: drop-shadow(0 0 5px rgba(93, 242, 255, 0.55)); }
.side-badge { border-radius: 3px; background: rgba(93, 242, 255, 0.14); color: var(--accent); }
.side-search { border-radius: 3px; background: rgba(9, 20, 30, 0.72); }
.side-foot .side-spend { letter-spacing: 0.06em; }

/* ---------- topbar + reactor ---------- */

.topbar {
  background: linear-gradient(180deg, rgba(3, 9, 14, 0.95), rgba(3, 9, 14, 0.72));
  border-bottom: 1px solid var(--line);
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(93, 242, 255, 0.55), transparent);
  pointer-events: none;
}
.topbar .reactor { position: relative; }
.topbar .reactor::before,
.topbar .reactor::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(93, 242, 255, 0.55);
  pointer-events: none;
}
.topbar .reactor::before {
  inset: -5px;
  border-right-color: transparent;
  border-left-color: transparent;
  animation: spin 6s linear infinite;
}
.topbar .reactor::after {
  inset: -12px;
  border-style: dashed;
  border-color: rgba(93, 242, 255, 0.26);
  animation: spin 18s linear infinite reverse;
}
.topbar .reactor .core {
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #f2ffff, #5df2ff 45%, #0b7d92 100%);
  box-shadow: 0 0 14px rgba(93, 242, 255, 0.8), 0 0 34px rgba(93, 242, 255, 0.32);
}
.topbar .brand-text h1 { font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.topbar .brand-text p { font: 500 9px/1.4 var(--mono); letter-spacing: 0.26em; color: var(--accent); opacity: 0.7; }
.topbar .clock #time { font: 500 14px/1 var(--mono); letter-spacing: 0.14em; text-shadow: 0 0 14px rgba(93, 242, 255, 0.45); }
.topbar .clock #date { font: 500 9px/1.5 var(--mono); letter-spacing: 0.22em; color: var(--muted-2); }

/* ---------- surfaces: hairline panels with corner brackets ---------- */

.card, .panel, .crm-card, .metric {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(9, 20, 29, 0.85), rgba(5, 12, 19, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.card::before, .panel::before, .crm-card::before, .metric::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 16px;
  height: 16px;
  border-top: 1px solid rgba(93, 242, 255, 0.8);
  border-left: 1px solid rgba(93, 242, 255, 0.8);
  border-top-left-radius: var(--radius);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.card::after, .panel::after, .crm-card::after, .metric::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 16px;
  height: 16px;
  border-bottom: 1px solid rgba(93, 242, 255, 0.8);
  border-right: 1px solid rgba(93, 242, 255, 0.8);
  border-bottom-right-radius: var(--radius);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.card:hover::before, .card:hover::after,
.panel:hover::before, .panel:hover::after,
.metric:hover::before, .metric:hover::after { opacity: 1; }

.card-head, .panel-head { border-bottom: 1px solid var(--line); background: rgba(93, 242, 255, 0.025); }
.card-head h2, .panel-head h2 {
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #bfeaf5;
}
.card-head .meta, .panel-meta { font: 500 9px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.card-head a, .panel-link { font: 500 9px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.metric .metric-label, .crm-kpi-label {
  font: 500 9px/1.3 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.metric .metric-value, .crm-kpi-value {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-shadow: 0 0 20px rgba(93, 242, 255, 0.26);
}
.metric .metric-hint { font: 500 9.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

.row { border-bottom: 1px solid rgba(93, 242, 255, 0.07); }
.row-title { font-size: 13px; }
.row-sub { font-size: 11.5px; letter-spacing: 0.02em; }
.row-time { letter-spacing: 0.08em; }
.pill, .badge, .crm-pill, .crm-tag {
  border-radius: 2px;
  font: 500 9px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-head .eyebrow { font: 500 9.5px/1 var(--mono); letter-spacing: 0.3em; }
.page-sub { font-size: 13px; }

/* ---------- controls ---------- */

.btn, .crm-btn, button.btn {
  border-radius: 3px;
  border-color: var(--line-strong);
  background: rgba(93, 242, 255, 0.05);
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.btn:hover, .crm-btn:hover {
  background: rgba(93, 242, 255, 0.12);
  border-color: rgba(93, 242, 255, 0.55);
  box-shadow: 0 0 14px rgba(93, 242, 255, 0.2);
  color: var(--text);
}
.btn.primary, .crm-btn.primary {
  background: linear-gradient(180deg, #8ef8ff, #4ad8ea);
  border-color: rgba(93, 242, 255, 0.7);
  color: var(--accent-ink);
  box-shadow: 0 0 18px rgba(93, 242, 255, 0.34);
}
.btn.primary:hover, .crm-btn.primary:hover { background: linear-gradient(180deg, #b3fbff, #5ee4f5); color: var(--accent-ink); }
input, select, textarea { background: rgba(3, 10, 16, 0.85); border-radius: 3px; border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus {
  border-color: rgba(93, 242, 255, 0.65);
  box-shadow: 0 0 0 1px rgba(93, 242, 255, 0.22), 0 0 18px rgba(93, 242, 255, 0.16);
}
.askbar { border-radius: 4px; background: linear-gradient(180deg, rgba(10, 24, 34, 0.9), rgba(4, 11, 18, 0.95)); }
.ask-reply { border-left: 2px solid var(--accent); border-radius: 0 3px 3px 0; }

/* ---------- the reactor hero (Overview) ---------- */

.reactor-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  margin: 0 0 20px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 190% at 0% 50%, rgba(20, 90, 120, 0.24), transparent 58%),
    linear-gradient(180deg, rgba(9, 20, 29, 0.82), rgba(4, 10, 16, 0.92));
}
.reactor-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(93, 242, 255, 0.07), transparent);
  transform: translateX(-100%);
  animation: hero-scan 7s linear infinite;
  pointer-events: none;
}
.hero-orbit { position: relative; width: 116px; height: 116px; display: grid; place-items: center; }
.hero-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(93, 242, 255, 0.34); }
.hero-orbit i:nth-of-type(2) {
  inset: 10px;
  border-style: dashed;
  border-color: rgba(93, 242, 255, 0.22);
  animation: spin 24s linear infinite;
}
.hero-orbit i:nth-of-type(3) {
  inset: 22px;
  border-color: rgba(255, 196, 107, 0.34);
  border-left-color: transparent;
  border-right-color: transparent;
  animation: spin 9s linear infinite reverse;
}
.hero-core {
  position: absolute;
  inset: 37px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffffff, #5df2ff 42%, #0a6f85 100%);
  box-shadow: 0 0 26px rgba(93, 242, 255, 0.75), 0 0 64px rgba(93, 242, 255, 0.3);
  animation: hero-pulse 2.6s ease-in-out infinite;
}
.hero-title {
  margin: 0;
  font: 500 clamp(15px, 1.6vw, 19px)/1.35 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #eafdff;
  text-shadow: 0 0 20px rgba(93, 242, 255, 0.35);
}
.hero-sub { margin: 8px 0 0; max-width: 64ch; color: var(--muted); font-size: 12.5px; }
.hero-readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 13px;
  font: 500 9.5px/1.5 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.hero-readouts b { color: var(--accent); font-weight: 500; }

@keyframes hero-scan { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes hero-pulse { 50% { transform: scale(1.06); opacity: 0.85; } }

@media (max-width: 720px) {
  .reactor-hero { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .hero-orbit { width: 84px; height: 84px; }
  .hero-core { inset: 26px; }
  .hero-title { font-size: 14px; font-family: var(--mono); }
}

/* printing should stay plain paper, whatever the screen looks like */
@media print {
  body::before, .topbar::after, .reactor-hero::before { display: none !important; }
  .card, .panel, .metric { background: #fff; }
}