/* ThalesEdge app stylesheet.
 * Extracted verbatim from the <head> of app/index.html (roadmap F2 step 1,
 * 2026-10-27). Pure move: no rule was added, removed, or reordered.
 * The three small <style> blocks that live INSIDE individual views
 * (Insights calendar etc.) were deliberately left next to their HTML. */

/* ============ DESIGN TOKENS (Claude Design handoff, design-handoff/README.md) ============ */
:root{
  /* surfaces — dark navy warmed toward deep teal */
  --bg:#0b1626; --bg-sidebar:#0c1a30; --panel:#0f1e35; --panel2:#13253c; --input:#0c1a30;
  --line:#1e344f; --line-input:#223a58;
  --text:#eaf1f9; --muted:#8fa4c0; --muted2:#a7bad3; --faint:#6f85a3;
  /* brand palette (Innovaveri sheet) */
  --cyan:#0e90c9; --cyan-hover:#3fb0e3; --teal-deep:#084c69; --gold:#dbc078;
  /* semantics — money only, never decorative */
  --good:#2fd08a; --bad:#f6465d; --warn:#dbc078; --focus:#0e90c9;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* ---- Light theme (opt-in: Profile -> Appearance; class on <html>) ----
   Overrides neutral surfaces/lines/text and darkens accents enough to stay
   readable on a light background; everything else cascades. */
:root.theme-light{
  --bg:#f4f7fb; --bg-sidebar:#eef2f7; --panel:#ffffff; --panel2:#f1f5fb; --input:#ffffff;
  --line:#d6e0ec; --line-input:#c4d3e5;
  --text:#12233b; --muted:#5a6f8b; --muted2:#43566f; --faint:#8395ac;
  --cyan:#0b7cb0; --cyan-hover:#0e90c9; --teal-deep:#0a5f83; --gold:#8a6f1c;
  --good:#12925f; --bad:#d42a41; --warn:#8a6f1c; --focus:#0b7cb0;
  --shadow:0 8px 24px rgba(20,45,80,.10);
}
*{box-sizing:border-box}
@keyframes te-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============ SHELL: sidebar + main (replaces sticky header + pill tabs) ============ */
body{
  margin:0;font-family:var(--sans);color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh;
}
.side{
  background:var(--bg-sidebar);border-right:1px solid var(--line);
  padding:18px 12px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;
  font-family:var(--display);padding:0 10px 16px}
.brand svg.mark{width:26px;height:26px;flex:0 0 26px}
.brand b{color:var(--cyan);font-weight:700}
.navgrp{font-family:var(--mono);font-size:10px;color:var(--faint);text-transform:uppercase;
  letter-spacing:.12em;padding:14px 10px 6px}
/* .tab keeps its class name + IDs so the existing setView() JS works unchanged;
   only its LOOK changes: horizontal pill -> sidebar row with cyan inset bar. */
.tab{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:9px;margin-bottom:2px;
  font-size:13.5px;color:var(--muted);cursor:pointer;user-select:none;
  transition:.15s color ease,.15s background ease;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);background:rgba(14,144,201,.14);
  box-shadow:inset 2px 0 0 var(--cyan);font-weight:600}
.tab .ico{width:16px;text-align:center;opacity:.9;flex:0 0 16px}
.soon{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--gold);
  border:1px solid rgba(219,192,120,.35);padding:1px 5px;border-radius:5px;letter-spacing:.05em}
.user{margin-top:auto;display:flex;gap:9px;align-items:center;padding:12px 10px 2px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.avatar{width:26px;height:26px;border-radius:50%;flex:0 0 26px;
  background:linear-gradient(135deg,var(--cyan),var(--gold));
  display:flex;align-items:center;justify-content:center;color:#06131c;font-weight:800;font-size:11px}
.user .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar.has-img{background:none}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.segBtn{font-size:13px;color:var(--muted);cursor:pointer;transition:.15s color,.15s background}
.segBtn.on{background:rgba(14,144,201,.16);color:var(--text);font-weight:600}
.avatarPreview{width:64px;height:64px;border-radius:50%;flex:0 0 64px;overflow:hidden;
  background:linear-gradient(135deg,var(--cyan),var(--gold));display:flex;align-items:center;
  justify-content:center;color:#06131c;font-weight:800;font-size:22px}
.avatarPreview.has-img{background:none}
.avatarPreview img{width:100%;height:100%;object-fit:cover;display:block}

main{padding:22px 24px;min-width:0}
/* EXPERIMENT (2026-07-12): no width cap — content runs edge to edge under
   the Log out button. If ultra-wide reading comfort suffers, restore a cap
   (previous value: 1880px). */
.wrap{max-width:none;margin:0 auto}

.grid{display:grid;gap:16px;grid-template-columns:460px 1fr;align-items:start}
@media (max-width:1150px){ .grid{grid-template-columns:1fr} }
/* Insights: equity curve + P&L calendar side by side on wide screens */
.insightsGrid{display:grid;gap:16px;grid-template-columns:1.15fr 1fr;align-items:start}
@media (max-width:1150px){ .insightsGrid{grid-template-columns:1fr} }

/* Roomy multi-column entry form (Add Trade tab) */
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 56px;align-items:start}
@media (max-width:900px){ .formgrid{grid-template-columns:1fr;gap:0} }
.formgrid > .hint, .formgrid > .btnbar, .formgrid > .section-head, .formgrid > .field--full{grid-column:1 / -1}
.section-head{font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:.1em;
  color:var(--gold);text-transform:uppercase;margin:16px 0 8px;
  border-bottom:1px solid rgba(219,192,120,.28);padding-bottom:6px}
/* Settings/Profile/Strategy Builder: air between stacked cards — one tile
   per concern. (Builder gained My Setups / Risk Presets / Position Size
   Calculator on 2026-07-24, so it stacks cards just like Settings now.) */
#viewSettings > .card, #viewStrategyBuild > .card{margin-bottom:18px}
/* ============ SUPPORT VIEW ============
   Same "one tile per concern" stacking as Settings/Profile, plus three
   support-only patterns: a <details> accordion for the FAQ, a responsive
   card grid for the feature guides, and a small "pill" for categories.
   <details>/<summary> is plain HTML — the browser handles open/close with
   no JavaScript at all, and it stays keyboard-accessible for free. */
#viewSupport > .card{margin-bottom:18px}
#viewSupport .card h2{font-family:var(--mono);font-size:13.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);}
/* One FAQ entry. The whole <summary> row is the click target. */
.faqItem{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;
  background:var(--panel2);overflow:hidden}
.faqItem > summary{cursor:pointer;padding:11px 14px;font-size:13.5px;font-weight:600;
  color:var(--text);list-style:none;display:flex;align-items:center;gap:10px}
.faqItem > summary::-webkit-details-marker{display:none}  /* kill Safari's default triangle */
/* Our own caret, so it can rotate when the entry opens. */
.faqItem > summary::before{content:"▸";color:var(--cyan);font-size:12px;
  transition:transform .15s ease;flex:0 0 auto}
.faqItem[open] > summary::before{transform:rotate(90deg)}
.faqItem > summary:hover{background:rgba(14,144,201,.07)}
.faqAns{padding:0 14px 13px 36px;font-size:13px;line-height:1.6;color:var(--muted2)}
.faqAns p{margin:0 0 8px}
.faqAns code{font-family:var(--mono);font-size:12px;background:var(--input);
  border:1px solid var(--line-input);border-radius:5px;padding:1px 5px}
/* Feature guides: auto-fitting grid — as many columns as fit at >=260px each,
   collapsing to one column on a phone with no media query needed. */
.guideGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.guideCard{border:1px solid var(--line);border-radius:11px;padding:13px 14px;
  background:var(--panel2)}
.guideCard h3{margin:0 0 6px;font-size:13.5px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:8px}
.guideCard h3 .ico{color:var(--cyan);font-size:14px}
.guideCard p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.guideCard .goBtn{font-size:12px;padding:6px 11px}
/* Category pill used on the ticket form + guide tags. */
.supPill{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line-input);
  border-radius:999px;padding:2px 8px;margin-right:6px}
.supEmpty{font-size:13px;color:var(--faint);padding:14px;text-align:center}
/* Settings + Profile cards: same gold landmark treatment as the Add Trade
   section heads. Danger zone h2 keeps its red via inline style (inline wins). */
#viewSettings .card h2, #viewProfile .card h2{font-family:var(--mono);font-size:13.5px;
  font-weight:600;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;
  border-bottom:1px solid rgba(219,192,120,.28)}
/* Width cap for text/form-heavy cards (Profile) under the uncapped layout.
   margin-right:auto pins them to the LEFT edge of the content area. */
.narrow{max-width:1080px;margin-left:0;margin-right:auto}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card h2{
  margin:0;padding:14px 16px 11px;
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.1px;
  border-bottom:1px solid var(--line);
  color:var(--text);
  display:flex;align-items:center;gap:10px;
}
.body{padding:16px}
.row{display:flex;gap:18px}
.row > *{flex:1}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
label{font-size:13px;color:var(--muted)}
input, select, textarea{
  width:100%;
  background:var(--input);
  border:1px solid var(--line-input);
  color:var(--text);
  border-radius:10px;
  padding:10px 11px;
  outline:none;
  font-size:13px;
  font-family:inherit;
}
/* Checkboxes are the exception to input{width:100%} — left to stretch, they
   fill the row and shove their label text to the far edge. */
input[type="checkbox"]{width:auto;flex:0 0 auto}
input:focus, select:focus, textarea:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(14,144,201,.18);
}
textarea{min-height:90px;resize:vertical}
.hint{font-size:12px;color:var(--muted);margin-top:-6px;margin-bottom:10px}
.btnbar{display:flex;gap:10px;flex-wrap:wrap}
button{
  background:var(--panel2);
  border:1px solid var(--line-input);
  color:var(--text);
  border-radius:10px;
  padding:10px 14px;
  font-size:13px;
  font-family:var(--display);font-weight:600;
  cursor:pointer;
  transition:.15s border-color ease,.15s background ease,.15s opacity ease;
  user-select:none;
}
button:hover{border-color:rgba(14,144,201,.7)}
button:active{opacity:.9}
.primary{background:var(--cyan);border-color:var(--cyan);color:#06131c}
.primary:hover{background:var(--cyan-hover);border-color:var(--cyan-hover)}
.danger{border-color:rgba(246,70,93,.6);background:rgba(246,70,93,.12);color:#f6a3b0}
.danger:hover{border-color:var(--bad)}
.ghost{background:transparent}
.small{padding:7px 10px;font-size:12px;border-radius:9px}
.right{margin-left:auto}

.topbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:end;
  padding:14px 16px;border-bottom:1px solid var(--line);
}
.topbar .field{margin:0;min-width:180px}
.topbar .field input,.topbar .field select{padding:9px 10px}
/* Filter labels (Search / Instrument / Result / From / To): gold landmarks,
   matching the gold section-heads on the Add Trade form. */
.topbar label{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--gold);
  text-transform:uppercase;letter-spacing:.08em}

.stats{
  display:grid;gap:12px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:950px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr));} }
.stat{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;
}
.stat .k{color:var(--muted);font-size:12.5px}
.stat .v{font-family:var(--mono);font-size:23px;margin-top:7px;font-weight:600;
  font-variant-numeric:tabular-nums}
.v.good{color:var(--good)}
.v.bad{color:var(--bad)}
.v.warn{color:var(--gold)}
.riskBanner{border:1px solid rgba(246,70,93,.55);background:rgba(246,70,93,.1);
  color:#f6a3b0;border-radius:12px;padding:12px 16px;margin-bottom:14px;
  font-size:13.5px;line-height:1.5}
.riskBanner b{color:var(--bad)}
/* Info banner: same shape as riskBanner but gold — a nudge ("you have
   untagged trades"), not an alarm. Flex puts text + button on one line. */
.infoBanner{border:1px solid rgba(219,192,120,.5);background:rgba(219,192,120,.08);
  color:var(--gold);border-radius:12px;padding:12px 16px;margin-bottom:14px;
  font-size:13.5px;line-height:1.5;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.infoBanner b{color:var(--gold)}
/* Enrichment bar: shown on the Add/Edit form while walking the untagged-trades
   queue ("Tagging 3 of 12"), with Skip / Exit controls. */
.enrichBar{border:1px solid rgba(14,144,201,.5);background:rgba(14,144,201,.08);
  border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:13.5px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.enrichBar b{color:var(--cyan-hover)}
/* ---- Strategy Builder phase 5: list + detail ---- */
/* Responsive card grid: auto-fill + minmax lets the browser pick the column
   count — 1 column on narrow windows, 2-3 on wide, no JS involved. */
.sbGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.sbCard{border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;
  transition:border-color .15s}
.sbCard:hover{border-color:var(--cyan)}
.sbCard .sbName{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sbCard .sbThesis{color:var(--muted);font-size:12.5px;line-height:1.5;margin:8px 0 10px}
.sbCard .sbNums{display:flex;gap:14px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.sbCard .sbNums b{color:inherit}
/* Status pills — one color per lifecycle state (draft->backtesting->sim->live->retired) */
.sbadge{font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted)}
.sbadge.live{color:var(--good);border-color:rgba(47,208,138,.5)}
.sbadge.sim{color:var(--cyan-hover);border-color:rgba(14,144,201,.5)}
.sbadge.backtesting{color:var(--gold);border-color:rgba(219,192,120,.5)}
.sbadge.retired{color:var(--bad);border-color:rgba(246,70,93,.4)}
/* Detail view: labeled sections of the read-only contract */
.sbSection{margin:16px 0}
.sbSection .sbLabel{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sbSection p{margin:0;line-height:1.6}
.sbSection ul{margin:0;padding-left:18px;line-height:1.7}
.sbConf{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.sbConf .sbConfName{font-weight:600;display:flex;gap:8px;align-items:center}
.sbConf .sbConfDef{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5}
/* ---- Strategy Builder phase 6: wizard + lifecycle controls ---- */
.sbToolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0;
  padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.sbToolbar .sel{display:flex;gap:8px;align-items:center}
.sbToolbar select{width:auto;padding:7px 10px;font-size:12px}
.wizSteps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.wizStep{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);cursor:default}
.wizStep.done{color:var(--good);border-color:rgba(47,208,138,.4);cursor:pointer}
.wizStep.on{color:var(--cyan-hover);border-color:rgba(14,144,201,.6);background:rgba(14,144,201,.08)}
.wizPane{display:none}
.wizPane.on{display:block}
.wizNav{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
/* Inline validation panel: red sibling of the gold .wizWarn — errors block Next, warnings never do */
.wizErr{color:var(--bad);font-size:12.5px;line-height:1.6;display:none;margin-top:12px;
  border:1px solid rgba(246,70,93,.5);background:rgba(246,70,93,.08);border-radius:10px;padding:10px 12px}
.wizWarn{color:var(--gold);font-size:12px;line-height:1.5;margin-top:4px}
.charCount{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0}
.charCount.bad{color:var(--bad)}
.charCount.ok{color:var(--good)}
/* Teaching copy: the wizard's whole point is putting coaching exactly where users go vague */
.teach{font-size:12.5px;color:var(--muted);line-height:1.6;border-left:3px solid rgba(219,192,120,.5);
  padding:2px 0 2px 12px;margin:0 0 14px}
.confCard{border:1px solid var(--line);border-radius:10px;padding:12px 12px 8px;margin-bottom:10px;background:var(--panel2)}
.confCard .row{gap:10px}
.confCard .cid{font-family:var(--mono);font-size:11px;color:var(--muted);word-break:break-all;margin:2px 0 6px}
.confCard .cid b{color:var(--cyan-hover);font-weight:600}
.wzRow{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.wzRow select{width:150px;flex:0 0 auto}
.wzRow input{flex:1;min-width:180px}
.wzRow .rm{flex:0 0 auto}
.chipRow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
details.wizDetails{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:14px}
details.wizDetails summary{cursor:pointer;font-size:12.5px;color:var(--muted)}
.qualSentence{font-family:var(--mono);font-size:12.5px;color:var(--gold);margin-top:8px}

.tablewrap{overflow:auto;border-top:1px solid var(--line)}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:1560px;font-size:13.5px}
thead th{
  position:sticky;top:0;z-index:2;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  color:var(--muted);text-align:left;text-transform:uppercase;letter-spacing:.06em;
  padding:12px 22px;font-size:12.5px;white-space:nowrap;
}
tbody td{
  border-bottom:1px solid rgba(30,52,79,.5);
  padding:13px 22px;vertical-align:top;
  font-variant-numeric:tabular-nums;
}
tbody tr:hover td{background:rgba(14,144,201,.06)}
/* Row delete button: invisible until you hover the row, so the table stays clean */
.rowDelBtn{
  background:none; border:none; color:#5c7086; cursor:pointer;
  font-size:14px; padding:2px 6px; border-radius:6px; opacity:0;
  transition:opacity .15s, color .15s, background .15s;
}
tbody tr:hover .rowDelBtn{opacity:1}
.rowDelBtn:hover{color:#ff6b6b; background:rgba(255,107,107,.12)}
/* Toast: small self-dismissing confirmation, bottom-center */
#toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px);
  background:#13253c; color:#e7eef7; border:1px solid rgba(46,204,113,.45);
  border-radius:10px; padding:10px 18px; font-size:13px; z-index:9999;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.err{border-color:rgba(255,107,107,.55)}
.badge{font-family:var(--mono);padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px;white-space:nowrap}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:12px;margin-right:6px;margin-top:4px;white-space:nowrap}
/* Emotion chips: tap-to-toggle tags on the Add/Edit Trade form */
.emoChip{
  font-family:var(--mono);font-size:12px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  cursor:pointer;transition:border-color .15s,color .15s,background .15s;
}
.emoChip:hover{border-color:#0e90c9;color:#cfe6f5}
.emoChip.on{background:rgba(14,144,201,.16);border-color:#0e90c9;color:#7fd0f2}
/* Emotion tags shown in the journal table (read-only, dimmer) */
.emoTag{display:inline-block;font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:999px;border:1px solid rgba(219,192,120,.4);color:#dbc078;margin-right:4px;white-space:nowrap}
/* My Setups: removable chips for the user's own setup names */
.setupChip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;padding:4px 6px 4px 10px;border-radius:999px;border:1px solid #0e90c9;background:rgba(14,144,201,.12);color:#7fd0f2;margin:0 6px 6px 0;white-space:nowrap}
.setupDel{border:none;background:transparent;color:#7fd0f2;cursor:pointer;font-size:12px;line-height:1;padding:1px 4px;border-radius:999px}
.setupDel:hover{color:#fff;background:rgba(255,107,107,.55)}
.setupChip.builtin{border-color:var(--line);background:transparent;color:var(--muted)}
.setupChip.removed{border-style:dashed;border-color:var(--line);background:transparent;color:var(--muted)}
.setupRestore{border:none;background:transparent;color:#7fd0f2;cursor:pointer;font-size:12px;line-height:1;padding:1px 4px;border-radius:999px}
.setupRestore:hover{color:#fff;background:rgba(14,144,201,.55)}
.notice{font-size:12px;color:var(--muted);padding:10px 16px;border-top:1px solid var(--line);background:rgba(12,26,48,.6)}
/* Light-theme fix (2026-07-27): .notice hardcoded a dark navy rgba() instead
   of a variable, so in light mode it rendered as a dark slab with dark text —
   effectively unreadable. Surfaced by the Support page, which uses .notice
   twice, but it affected all 16 usages. Rule of thumb this bug teaches:
   any colour written as a literal cannot be re-themed. Use a var(). */
:root.theme-light .notice{background:var(--panel2);color:var(--muted2)}
.hidden{display:none !important}
canvas{
  width:100%;height:340px;
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:12px;
}

/* ============ BILLING (Phase 4.3) ============ */
/* Plan badge — one accent per tier, same pill vocabulary as .sbadge */
.planBadge{font-family:var(--mono);font-size:11px;padding:2px 9px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.planBadge.free{color:var(--muted);border-color:var(--line)}
.planBadge.core{color:var(--cyan-hover);border-color:rgba(14,144,201,.55)}
.planBadge.pro{color:var(--gold);border-color:rgba(219,192,120,.55)}
/* Usage meter — AI coach sessions used this month */
.meterHead{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin:2px 0 6px}
.meterHead .mono{font-family:var(--mono);color:var(--muted)}
.meterBar{height:8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.meterFill{height:100%;border-radius:999px;background:var(--cyan);transition:width .3s ease}
.meterFill.warn{background:var(--gold)}
.meterFill.full{background:var(--bad)}
/* Tier cards — reuse the sbGrid auto-fill model */
.tierGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:6px}
.tierCard{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--panel2);
  display:flex;flex-direction:column;gap:10px}
.tierCard.current{border-color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(14,144,201,.35)}
.tierCard .tierName{font-family:var(--display);font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px}
.tierCard .tierPrice{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--text)}
.tierCard .tierPrice small{font-size:12px;color:var(--muted);font-weight:400}
.tierCard .tierSub{font-size:11px;color:var(--faint);margin-top:-6px;min-height:14px}
.tierCard ul.tierFeat{list-style:none;margin:2px 0 0;padding:0;font-size:12.5px;color:var(--muted2);line-height:1.5;flex:1}
.tierCard ul.tierFeat li{padding:3px 0 3px 18px;position:relative}
.tierCard ul.tierFeat li:before{content:"✓";position:absolute;left:0;color:var(--good)}
.tierCard ul.tierFeat li.off{color:var(--faint)}
.tierCard ul.tierFeat li.off:before{content:"·";color:var(--faint)}
/* Monthly/annual segmented toggle */
.billToggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--panel2)}
.billToggle button{background:transparent;border:none;padding:6px 14px;border-radius:999px;font-size:12.5px;color:var(--muted)}
.billToggle button.on{background:rgba(14,144,201,.16);color:var(--cyan-hover)}
.billToggle .save{font-family:var(--mono);font-size:10px;color:var(--good);margin-left:5px}
/* Upgrade modal — same overlay vocabulary as the auth overlay */
.billOverlay{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;
  background:rgba(7,15,28,.9);padding:20px}
.billModal{position:relative;width:760px;max-width:96vw;max-height:92vh;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.billModal h2{margin:0 0 4px;font-family:var(--display);font-size:19px}
.billModal .sub{color:var(--muted);font-size:13px;margin:0 0 14px}
.billModal .xclose{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);
  font-size:22px;line-height:1;cursor:pointer;padding:2px 6px}
/* App-wide past_due strip (injected as first child of <main>) */
#billingAlert{margin:0 0 16px}
#billingAlert:empty{display:none;margin:0}
.dueBanner{border:1px solid rgba(246,70,93,.55);background:rgba(246,70,93,.1);color:#f6a3b0;
  border-radius:12px;padding:11px 16px;font-size:13.5px;line-height:1.5;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dueBanner b{color:var(--bad)}

/* ============ RESPONSIVE SHELL: sidebar becomes a top strip on small screens ============ */
@media (max-width:820px){
  body{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:2px;border-right:none;border-bottom:1px solid var(--line);padding:10px 12px}
  .brand{padding:0 10px 0 0}
  .navgrp{display:none}
  .tab{padding:7px 10px;font-size:12.5px}
  .tab.active{box-shadow:inset 0 -2px 0 var(--cyan);background:rgba(14,144,201,.10)}
  .user{margin-top:0;margin-left:auto;border-top:none;padding:0 4px}
  main{padding:16px 14px}
}