@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ══════════════════════════════════════════════════════════════
   FINCOMMAND — BRAND DESIGN SYSTEM
   Gold/black luxury financial terminal aesthetic

   Include in every module:
   <link rel="stylesheet" href="../assets/brand.css">
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
   ══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root, html { color-scheme: dark; }
:root {
  /* Gold Palette (Primary Brand) */
  --gold: #C9A84C;
  --gold-light: #E8C97A;
  --gold-dim: #7A6230;
  --gold-dim2: rgba(201,168,76,0.10);

  /* Surfaces (Background Hierarchy) */
  --base: #0E0E0F;
  --surface: #161618;
  --surface2: #1E1E21;
  --surface3: #26262A;

  /* Text */
  --text: #F0EBE0;
  --text-muted: #ADA598;
  --text-faint: #746C62;

  /* Semantic */
  --green: #4CAF7A;
  --red: #C9544C;
  --amber: #E8C97A;
  --blue: #C9A84C;
  --purple: #C9A84C;

  /* Budget buckets (Needs / Wants) — shared with retirement calculator Broad/Detailed UI */
  --needs: #C36B6B;
  --wants: #6F8FBF;

  /* Borders */
  --border: rgba(201,168,76,0.18);
  --border1: rgba(201,168,76,0.12); /* tab track — between border and border2 */
  --border2: rgba(201,168,76,0.08);

  /* Tag Backgrounds */
  --tag-green: rgba(76,175,122,0.12);
  --tag-red: rgba(201,84,76,0.12);
  --tag-amber: rgba(201,168,76,0.12);
  --tag-blue: rgba(201,168,76,0.12);

  /* Aliases */
  --accent: #C9A84C;
  --accent-dim: rgba(201,168,76,0.10);
  --accent-glow: rgba(201,168,76,0.20);

  /* Display text — large headings & financial numbers.
     Terminal: warm gold-light so big numbers read as premium.
     Landscape themes override this to --text (white/cream)
     so the accent color stays as an accent, not a headline. */
  --display: var(--gold-light);

  /* Nav hierarchy — sidebar item text colors.
     Terminal: muted/faint gold (current behaviour).
     Landscapes: parent = full white, child = vivid accent. */
  --nav-parent: var(--text-muted);
  --nav-child:  var(--text-faint);

  /* Typography */
  --font-d: 'Cormorant Garamond', serif;
  --font-u: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --radius: 10px;
  --ease: cubic-bezier(0.4,0,0.2,1);

  /* Grid overlay (themeable) */
  --grid-line: rgba(201,168,76,0.03);
}


/* ── ELEGANT SIMPLICITY THEME (Boldin-inspired) ─────────────
   Forest-green / warm-cream. Clean Inter sans throughout.
   Placed AFTER body.goldmember so same-specificity (0,1,1)
   cascade order wins — no !important needed.
   Applied via: document.body.dataset.theme = 'elegant'       */
body[data-theme="elegant"] {
  /* Forest green — primary brand */
  --gold:        #0a5d52;
  --gold-light:  #0d7a6b;
  --gold-dim:    #4a9e90;
  --gold-dim2:   rgba(10,93,82,0.08);

  /* Terracotta orange — contrasting accent (Boldin-inspired) */
  --orange:      #e05830;
  --orange-dim:  rgba(224,88,48,0.10);
  --orange-glow: rgba(224,88,48,0.18);

  /* Warm cream surfaces */
  --base:        #eae5dd;
  --surface:     #fbf8f3;
  --surface2:    #f2ede5;
  --surface3:    #e8e2d8;

  /* Charcoal text */
  --text:        #1a2e29;
  --text-muted:  #4a6560;
  --text-faint:  #8a9e99;

  /* Semantic — orange replaces amber for warm highlights */
  --green:       #0a7c5c;
  --red:         #c0392b;
  --amber:       #e05830;   /* terracotta takes amber's role */
  --blue:        #1a6b9e;
  --purple:      #7b4f9e;

  /* Borders — subtle green tint */
  --border:      rgba(10,93,82,0.16);
  --border2:     rgba(10,93,82,0.08);

  /* Tag backgrounds */
  --tag-green:   rgba(10,124,92,0.10);
  --tag-red:     rgba(192,57,43,0.10);
  --tag-amber:   rgba(224,88,48,0.10);  /* orange-tinted */
  --tag-blue:    rgba(26,107,158,0.10);

  /* Accent — green primary, orange for CTAs & highlights */
  --accent:      #0a5d52;
  --accent-dim:  rgba(10,93,82,0.08);
  --accent-glow: rgba(10,93,82,0.14);

  /* Typography — Inter throughout */
  --font-d: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-u: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Softer geometry */
  --radius: 14px;

  /* Suppress terminal grid */
  --grid-line: transparent;
}

/* Kill the grid overlay pseudo-element entirely */
body[data-theme="elegant"]::before { display: none; }

/* Allow subtle shadows in elegant (flat design only in terminal) */
body[data-theme="elegant"] .card,
body[data-theme="elegant"] [class*="panel"],
body[data-theme="elegant"] [class*="modal-"] {
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}

/* Elegant: primary CTA buttons use terracotta orange */
body[data-theme="elegant"] .btn-primary,
body[data-theme="elegant"] button[class*="primary"],
body[data-theme="elegant"] [class*="cta"] {
  background: var(--orange);
  border-color: var(--orange);
}

/* Elegant: key financial numbers in terracotta orange
   (mirrors Boldin's use of orange for prominent figures) */
body[data-theme="elegant"] .stat-value,
body[data-theme="elegant"] [class*="stat-val"],
body[data-theme="elegant"] [class*="hero-val"],
body[data-theme="elegant"] [class*="big-num"],
body[data-theme="elegant"] [class*="net-val"],
body[data-theme="elegant"] [class*="total-val"],
body[data-theme="elegant"] [class*="amount-val"],
body[data-theme="elegant"] [class*="score-val"],
body[data-theme="elegant"] [class*="ring-val"],
body[data-theme="elegant"] [class*="surplus"],
body[data-theme="elegant"] [class*="metric-val"] {
  color: var(--orange);
}

/* ── STRAIGHT BUSINESS THEME (Palantir-inspired) ────────────
   Pure black/white. IBM Plex throughout. No radius. No color.
   Applied via: document.body.dataset.theme = 'straight-business' */
body[data-theme="straight-business"] {
  --gold:        #000000;
  --gold-light:  #111111;
  --gold-dim:    #555555;
  --gold-dim2:   rgba(0,0,0,0.05);

  --base:        #f4f4f4;
  --surface:     #ffffff;
  --surface2:    #efefef;
  --surface3:    #e4e4e4;

  --text:        #0a0a0a;
  --text-muted:  #4a4a4a;
  --text-faint:  #888888;

  --green:       #1a6634;
  --red:         #b81c00;
  --amber:       #8a5c00;
  --blue:        #0044bb;
  --purple:      #5500aa;

  --needs:       #b81c00;
  --wants:       #0044bb;

  --border:      rgba(0,0,0,0.14);
  --border1:     rgba(0,0,0,0.09);
  --border2:     rgba(0,0,0,0.06);

  --tag-green:   rgba(26,102,52,0.08);
  --tag-red:     rgba(184,28,0,0.08);
  --tag-amber:   rgba(138,92,0,0.08);
  --tag-blue:    rgba(0,68,187,0.08);

  --accent:      #000000;
  --accent-dim:  rgba(0,0,0,0.05);
  --accent-glow: rgba(0,0,0,0.10);

  --display:     #0a0a0a;
  --nav-parent:  #0a0a0a;
  --nav-child:   #4a4a4a;

  --font-d: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', monospace;
  --font-u: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius: 2px;
  --grid-line: transparent;
}

body[data-theme="straight-business"]::before { display: none; }

/* Stark: hairline borders, no shadow */
body[data-theme="straight-business"] .card,
body[data-theme="straight-business"] [class*="panel"],
body[data-theme="straight-business"] [class*="modal-"] {
  border: 1px solid rgba(0,0,0,0.14);
  box-shadow: none;
}

/* Stark: primary buttons — solid black */
body[data-theme="straight-business"] .btn-primary,
body[data-theme="straight-business"] button[class*="primary"],
body[data-theme="straight-business"] [class*="cta"] {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* Stark: key financial numbers in pure black (no gold/orange) */
body[data-theme="straight-business"] .stat-value,
body[data-theme="straight-business"] [class*="stat-val"],
body[data-theme="straight-business"] [class*="hero-val"],
body[data-theme="straight-business"] [class*="big-num"],
body[data-theme="straight-business"] [class*="net-val"],
body[data-theme="straight-business"] [class*="total-val"],
body[data-theme="straight-business"] [class*="amount-val"],
body[data-theme="straight-business"] [class*="score-val"],
body[data-theme="straight-business"] [class*="ring-val"],
body[data-theme="straight-business"] [class*="surplus"],
body[data-theme="straight-business"] [class*="metric-val"] {
  color: #0a0a0a;
}

/* ── RESET & BASE ──────────────────────────────────────────── */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ width:100%; min-height:100vh; overflow-x:hidden; }
body {
  background:var(--base); color:var(--text);
  font-family:var(--font-u); font-size:13px; font-weight:400;
}


/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── CARDS ─────────────────────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
}
.card-title {
  font-family:var(--font-u); font-size:9px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted);
  margin-bottom:14px; display:flex; align-items:center; gap:8px;
}

/* ── STAT CARDS ────────────────────────────────────────────── */
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 12px; text-align:center;
  transition:border-color .2s; animation:fadeUp .4s var(--ease) both;
}
.stat-card:hover { border-color:var(--border2); }
.stat-label {
  font-size:9px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:6px;
}
.stat-value {
  font-family:var(--font-d); font-size:28px; font-weight:600;
  color:var(--display); line-height:1;
}
.stat-sub { font-size:10px; color:var(--text-muted); margin-top:5px; }

/* ── COLOR CLASSES ─────────────────────────────────────────── */
.green { color:var(--green); }
.red { color:var(--red); }
.amber { color:var(--amber); }
.gold { color:var(--gold); }

/* ── FORMS ─────────────────────────────────────────────────── */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:14px; }
.form-group label {
  display:block; font-size:9px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:6px;
}
.form-group input,
.form-group select {
  width:100%; padding:10px 14px; border-radius:6px;
  border:1px solid var(--border); background:var(--surface2);
  color:var(--text); font-size:13px; font-family:var(--font-u);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.form-group input:focus,
.form-group select:focus {
  border-color:var(--gold); box-shadow:0 0 0 2px rgba(201,168,76,0.12);
}
.form-group input::placeholder { color:var(--text-faint); }

/* Native <select> dropdown panel — force dark theme to match terminal aesthetic. */
select { color-scheme: dark; }
select option {
  background:var(--surface2); color:var(--text);
  padding:8px 12px;
}
select option:checked {
  background:var(--gold); color:#000;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  padding:10px 20px; border-radius:6px; border:none; cursor:pointer;
  font-family:var(--font-u); font-size:11px; font-weight:600;
  letter-spacing:.06em; transition:all .15s var(--ease);
  display:inline-flex; align-items:center; gap:6px;
}
.btn:active { transform:scale(0.98); }
.btn-primary { background:var(--gold); color:var(--base); }
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn-secondary { background:var(--surface3); color:var(--text-muted); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--gold); color:var(--text); }
.btn-success { background:var(--green); color:#fff; }
.btn-danger { background:var(--red); color:#fff; }
.btn-sm { padding:8px 14px; font-size:10px; }
.btn:disabled { opacity:.4; cursor:default; transform:none; }
.btn-group { display:flex; gap:8px; }

/* ── BADGES ────────────────────────────────────────────────── */
.badge {
  display:inline-block; padding:3px 10px; border-radius:3px;
  font-family:var(--font-u); font-size:9px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.badge-green { background:var(--tag-green); color:var(--green); }
.badge-red { background:var(--tag-red); color:var(--red); }
.badge-amber { background:var(--tag-amber); color:var(--amber); }
.badge-blue { background:var(--tag-blue); color:var(--gold); }

/* ── TAB BAR — canonical module nav style ───────────────────
   Usage: wrap buttons in .fc-tab-row, each button gets .fc-tab
   Modules may use their own class names but must match this visual:
   9px/600/uppercase/letter-spaced label, inactive muted track,
   active = gold 2px underline + centered 7px circle node.
─────────────────────────────────────────────────────────────── */
.fc-tab-row { display:flex; gap:0; }
.fc-tab {
  flex:0 0 auto; padding:10px 20px;
  font-family:var(--font-u); font-size:9px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint); background:transparent; border:none;
  border-bottom:2px solid var(--border1);
  cursor:pointer; position:relative; white-space:nowrap;
  transition:color .15s, border-color .15s;
}
.fc-tab:hover { color:var(--text-muted); }
.fc-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
.fc-tab.active::after {
  content:''; position:absolute; bottom:-5px; left:50%;
  transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--gold);
}

/* ── TABLES ────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
.table-wrap table { width:100%; border-collapse:collapse; }
.table-wrap th {
  font-family:var(--font-u); font-size:9px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted);
  padding:10px 14px; text-align:left; background:var(--surface2);
  border-bottom:1px solid var(--border);
}
.table-wrap td {
  padding:10px 14px; border-bottom:1px solid var(--border2);
  color:var(--text); font-size:12px;
}
.table-wrap tr:hover { background:rgba(201,168,76,0.03); }
.score-val { font-family:var(--font-d); font-size:15px; font-weight:600; color:var(--gold); }

/* ── RESULT BOX ────────────────────────────────────────────── */
.result-box {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; padding:20px;
}
.result-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px;
}
.result-label {
  font-size:9px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:4px;
}
.result-value {
  font-family:var(--font-d); font-size:22px; font-weight:600;
  color:var(--display);
}

/* ── RULES PANEL ───────────────────────────────────────────── */
.rules-panel {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; padding:16px 20px;
}
.rules-title {
  font-size:9px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:12px;
}
.rule-item { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:12px; color:var(--text); }
.rule-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.rule-dot.pass { background:var(--green); }
.rule-dot.warn { background:var(--gold); }
.rule-dot.fail { background:var(--red); }
.rule-dot.neutral { background:var(--text-muted); }

/* ── BANNERS ───────────────────────────────────────────────── */
.warning-banner {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-radius:8px; background:rgba(201,84,76,0.08);
  border:1px solid rgba(201,84,76,0.25); font-size:12px; color:var(--red);
}
.info-banner {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-radius:8px; background:rgba(201,168,76,0.06);
  border:1px solid rgba(201,168,76,0.2); font-size:12px; color:var(--gold);
}

/* ── SCORE BAR ─────────────────────────────────────────────── */
.score-bar {
  width:100%; height:5px; background:var(--surface3);
  border-radius:3px; overflow:hidden;
}
.score-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-light));
}

/* ── TOGGLE SWITCH ─────────────────────────────────────────── */
.toggle-switch { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle-switch input { display:none; }
.toggle-track {
  width:36px; height:20px; border-radius:10px;
  background:var(--surface3); position:relative; transition:.22s;
}
.toggle-thumb {
  width:16px; height:16px; border-radius:50%; background:var(--text-muted);
  position:absolute; top:2px; left:2px; transition:.22s;
}
.toggle-switch input:checked + .toggle-track { background:var(--gold); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { left:18px; background:var(--base); }
.toggle-label { font-size:12px; color:var(--text); }

/* ── GOLD RULE (decorative divider) ────────────────────────── */
hr.gold-rule {
  border:none; height:1px; margin:24px 0;
  background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

/* ── GRID LAYOUT ───────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:1024px){ .grid-4{grid-template-columns:1fr 1fr;} }
@media(max-width:900px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

/* ── UTILITY CLASSES ───────────────────────────────────────── */
.mb-16 { margin-bottom:16px; }
.mt-12 { margin-top:12px; }
.flex { display:flex; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.gap-8 { gap:8px; }
.gap-12 { gap:12px; }
.sticky-calc { position:sticky; top:76px; }

/* ── TOAST / FLASH CONFIRMATION ────────────────────────────── */
.save-toast {
  position:fixed; bottom:24px; right:24px; padding:10px 20px;
  border-radius:6px; background:var(--gold); color:var(--base);
  font-size:12px; font-weight:500; z-index:100;
  opacity:0; transform:translateY(10px); transition:all .3s;
  pointer-events:none;
}
.save-toast.show { opacity:1; transform:translateY(0); }

/* ── EMPTY STATE ───────────────────────────────────────────── */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-faint); }
.empty-state svg { margin-bottom:16px; opacity:.3; }
.empty-state p { font-size:14px; }

/* ── FC CUSTOM SELECT ──────────────────────────────────────── */
.fc-sel{position:relative;display:block}
.fc-sel-trigger{
  width:100%;display:flex;align-items:center;gap:8px;
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  padding:0 14px;min-height:40px;cursor:pointer;transition:border-color .15s;
  user-select:none;text-align:left;font-family:inherit;color:inherit
}
.fc-sel-trigger:hover,.fc-sel.open .fc-sel-trigger{border-color:var(--gold)}
.fc-sel-icon{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.fc-sel-value{flex:1;font-family:var(--font-u);font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-sel-chevron{color:var(--text-faint);flex-shrink:0;transition:transform .2s;display:flex;align-items:center}
.fc-sel.open .fc-sel-chevron{transform:rotate(180deg)}
.fc-sel-panel{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:400;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  overflow-y:auto;overflow-x:hidden;display:none;min-width:180px;
  max-height:min(320px, 50vh)
}
/* When .fc-sel-up is applied (not enough room below), flip dropdown above */
.fc-sel.fc-sel-up .fc-sel-panel{top:auto;bottom:calc(100% + 4px)}
.fc-sel.open .fc-sel-panel{display:block}
.fc-sel-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  cursor:pointer;transition:background .1s,color .1s;
  border-bottom:1px solid var(--border2)
}
.fc-sel-item:last-child{border-bottom:none}
.fc-sel-item:hover{background:var(--surface2)}
.fc-sel-item.active{color:var(--gold)}
.fc-sel-item-icon{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.fc-sel-item-label{flex:1;font-family:var(--font-u);font-size:12px;font-weight:500;color:inherit}
.fc-sel-item-check{flex-shrink:0;opacity:0;transition:opacity .1s;color:var(--gold);display:flex;align-items:center}
.fc-sel-item.active .fc-sel-item-check{opacity:1}

/* ── RESPONSIVE DEFAULTS ───────────────────────────────────── */
@media(max-width:600px){
  body { font-size:12px; }
  .card { padding:14px; }
  .stat-value { font-size:22px; }
  .result-value { font-size:18px; }
}

/* ═══════════════════════════════════════════════════════════════
   FITTING ROOM — LANDSCAPE THEMES
   Each landscape overrides the brand token set.
   Applied as a body class: <body class="aurora dc-blacktie">
   ═══════════════════════════════════════════════════════════════ */

/* Aurora Borealis — electric teal on deep navy */
body.aurora{
  --gold:#00F5C4;--gold-light:#5CF7D8;--gold-dim:#00B890;--gold-dim2:rgba(0,245,196,.10);
  --accent:#00F5C4;--accent-dim:rgba(0,245,196,.10);--accent-glow:rgba(0,245,196,.20);
  --base:#080E1A;--surface:#0D1820;--surface2:#132030;--surface3:#1A2A40;
  --border:rgba(0,245,196,.18);--border2:rgba(0,245,196,.08);
  --grid-line:rgba(0,245,196,.03);
  --text:#E8F4F8;--text-muted:rgba(232,244,248,.55);--text-faint:rgba(232,244,248,.28);
  --display:var(--text);
  --nav-parent:var(--text);--nav-child:var(--gold);
}
/* Sahara Sunset — warm amber on midnight earth */
body.sahara{
  --gold:#F5A623;--gold-light:#F8C870;--gold-dim:#C07808;--gold-dim2:rgba(245,166,35,.10);
  --accent:#F5A623;--accent-dim:rgba(245,166,35,.10);--accent-glow:rgba(245,166,35,.20);
  --base:#1A0A00;--surface:#2A1400;--surface2:#3A1E00;--surface3:#4A2800;
  --border:rgba(245,166,35,.18);--border2:rgba(245,166,35,.08);
  --grid-line:rgba(245,166,35,.03);
  --text:#FAF0E0;--text-muted:rgba(250,240,224,.55);--text-faint:rgba(250,240,224,.28);
  --display:var(--text);
  --nav-parent:var(--text);--nav-child:var(--gold);
}
/* Tokyo at Night — neon hot-pink on near-black */
body.tokyo{
  --gold:#FF2D78;--gold-light:#FF7AAB;--gold-dim:#CC0055;--gold-dim2:rgba(255,45,120,.10);
  --accent:#FF2D78;--accent-dim:rgba(255,45,120,.10);--accent-glow:rgba(255,45,120,.22);
  --base:#050508;--surface:#0F0A14;--surface2:#18101C;--surface3:#221428;
  --border:rgba(255,45,120,.20);--border2:rgba(255,45,120,.09);
  --grid-line:rgba(255,45,120,.03);
  --text:#F0F0FF;--text-muted:rgba(240,240,255,.55);--text-faint:rgba(240,240,255,.28);
  --display:var(--text);
  --nav-parent:var(--text);--nav-child:var(--gold);
}
/* Mountain Summit — alpine green on dark slate */
body.mountain{
  --gold:#6EE7B7;--gold-light:#A7F3D0;--gold-dim:#047857;--gold-dim2:rgba(110,231,183,.10);
  --accent:#6EE7B7;--accent-dim:rgba(110,231,183,.10);--accent-glow:rgba(110,231,183,.20);
  --base:#0E1317;--surface:#141C22;--surface2:#1C262E;--surface3:#24303A;
  --border:rgba(110,231,183,.18);--border2:rgba(110,231,183,.08);
  --grid-line:rgba(110,231,183,.03);
  --text:#ECF0F1;--text-muted:rgba(236,240,241,.55);--text-faint:rgba(236,240,241,.28);
  --display:var(--text);
  --nav-parent:var(--text);--nav-child:var(--gold);
}
/* Deep Space — ultraviolet on void black */
body.space{
  --gold:#A78BFA;--gold-light:#C4B5FD;--gold-dim:#6D28D9;--gold-dim2:rgba(167,139,250,.10);
  --accent:#A78BFA;--accent-dim:rgba(167,139,250,.10);--accent-glow:rgba(167,139,250,.20);
  --base:#03030A;--surface:#08061A;--surface2:#100A28;--surface3:#181038;
  --border:rgba(167,139,250,.18);--border2:rgba(167,139,250,.08);
  --grid-line:rgba(167,139,250,.03);
  --text:#F5F5FF;--text-muted:rgba(245,245,255,.55);--text-faint:rgba(245,245,255,.28);
  --display:var(--text);
  --nav-parent:var(--text);--nav-child:var(--gold);
}
/* Golden Wheat — harvest gold on dark earth */
body.wheat{
  --gold:#F0C040;--gold-light:#F8D878;--gold-dim:#C09010;--gold-dim2:rgba(240,192,64,.10);
  --accent:#F0C040;--accent-dim:rgba(240,192,64,.10);--accent-glow:rgba(240,192,64,.20);
  --base:#1A1200;--surface:#261A00;--surface2:#342400;--surface3:#422E00;
  --border:rgba(240,192,64,.18);--border2:rgba(240,192,64,.08);
  --grid-line:rgba(240,192,64,.03);
  --text:#FFF8E7;--text-muted:rgba(255,248,231,.55);--text-faint:rgba(255,248,231,.28);
  --display:var(--text);
  --nav-parent:var(--text);--nav-child:var(--gold);
}
/* Canadian Rockies — lake blue on forest dark */
body.rockies{
  --gold:#45B3E0;--gold-light:#7CCDE8;--gold-dim:#1A85B8;--gold-dim2:rgba(69,179,224,.10);
  --accent:#45B3E0;--accent-dim:rgba(69,179,224,.10);--accent-glow:rgba(69,179,224,.20);
  --base:#0A1208;--surface:#101C10;--surface2:#182418;--surface3:#203028;
  --border:rgba(69,179,224,.18);--border2:rgba(69,179,224,.08);
  --grid-line:rgba(69,179,224,.03);
  --text:#F4F4EE;--text-muted:rgba(244,244,238,.55);--text-faint:rgba(244,244,238,.28);
  --display:var(--text);
  --nav-parent:var(--text);--nav-child:var(--gold);
}
/* Tropical Coast — coral orange on ocean dark */
body.tropical{
  --gold:#FF6B4A;--gold-light:#FFA080;--gold-dim:#CC4422;--gold-dim2:rgba(255,107,74,.10);
  --accent:#FF6B4A;--accent-dim:rgba(255,107,74,.10);--accent-glow:rgba(255,107,74,.20);
  --base:#020F12;--surface:#081820;--surface2:#10222C;--surface3:#182E3A;
  --border:rgba(255,107,74,.18);--border2:rgba(255,107,74,.08);
  --grid-line:rgba(255,107,74,.03);
  --text:#FFF9F0;--text-muted:rgba(255,249,240,.55);--text-faint:rgba(255,249,240,.28);
  --display:var(--text);
  --nav-parent:var(--text);--nav-child:var(--gold);
}
/* Desert Southwest — turquoise on adobe dark */
body.southwest{
  --gold:#06B6D4;--gold-light:#67E8F9;--gold-dim:#0E7490;--gold-dim2:rgba(6,182,212,.10);
  --accent:#06B6D4;--accent-dim:rgba(6,182,212,.10);--accent-glow:rgba(6,182,212,.20);
  --base:#140800;--surface:#1E1000;--surface2:#2A1800;--surface3:#382200;
  --border:rgba(6,182,212,.18);--border2:rgba(6,182,212,.08);
  --grid-line:rgba(6,182,212,.03);
  --text:#FFF5E6;--text-muted:rgba(255,245,230,.55);--text-faint:rgba(255,245,230,.28);
  --display:var(--text);
  --nav-parent:var(--text);--nav-child:var(--gold);
}
/* Northern European — crimson on arctic light (LIGHT THEME) */
body.nordic{
  --gold:#DC2626;--gold-light:#EF4444;--gold-dim:#991B1B;--gold-dim2:rgba(220,38,38,.10);
  --accent:#DC2626;--accent-dim:rgba(220,38,38,.10);--accent-glow:rgba(220,38,38,.20);
  --base:#F2F4F5;--surface:#FFFFFF;--surface2:#EBEDF0;--surface3:#DDE1E6;
  --border:rgba(220,38,38,.15);--border2:rgba(220,38,38,.07);
  --grid-line:rgba(0,0,0,.03);
  --text:#1A2030;--text-muted:rgba(26,32,48,.60);--text-faint:rgba(26,32,48,.35);
  --display:var(--text);
  --nav-parent:var(--text);--nav-child:var(--gold);
}
/* Maldives Ocean — deep cyan on soft white (LIGHT THEME) */
body.maldives{
  --gold:#0099CC;--gold-light:#33BBEE;--gold-dim:#006699;--gold-dim2:rgba(0,153,204,.10);
  --accent:#0099CC;--accent-dim:rgba(0,153,204,.10);--accent-glow:rgba(0,153,204,.20);
  --base:#F8FCFF;--surface:#FFFFFF;--surface2:#EBF8FF;--surface3:#DCF1FF;
  --border:rgba(0,153,204,.15);--border2:rgba(0,153,204,.07);
  --grid-line:rgba(0,0,0,.03);
  --text:#0A1828;--text-muted:rgba(10,24,40,.60);--text-faint:rgba(10,24,40,.35);
  --display:var(--text);
  --nav-parent:var(--text);--nav-child:var(--gold);
}

/* ══════════════════════════════════════════════════════════════
   FC-INFO — shared ? / ⓘ info icon + hover popover
   Usage:
     <span class="fc-info-wrap">
       <button class="fc-info-icon" tabindex="0">?</button>
       <div class="fc-info-pop">
         <div class="fc-info-pop-title">TITLE</div>
         <div class="fc-info-pop-body">Explanation text here.</div>
       </div>
     </span>
   Add .right to .fc-info-pop to right-align. JS in fc-dialog.js auto-flips.
   ══════════════════════════════════════════════════════════════ */
.fc-info-wrap {
  position:relative; display:inline-flex; align-items:center;
}
.fc-info-icon {
  width:17px; height:17px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(201,168,76,.13); border:1px solid rgba(201,168,76,.30);
  color:var(--gold); font-size:10px; font-weight:700; cursor:pointer;
  font-family:var(--font-u,'Montserrat',sans-serif);
  line-height:1; flex-shrink:0; transition:background .15s, color .15s;
  padding:0;
}
.fc-info-icon:hover, .fc-info-icon:focus { background:var(--gold); color:#000; outline:none; }
.fc-info-pop {
  position:absolute; top:calc(100% + 8px); left:0; z-index:9000;
  width:360px; max-width:90vw;
  background:#0d0d0e; border:1px solid var(--gold); border-radius:6px;
  padding:0; pointer-events:none; opacity:0;
  transition:opacity .14s, transform .14s;
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(0,0,0,.8);
}
.fc-info-wrap:hover .fc-info-pop,
.fc-info-icon:focus + .fc-info-pop { opacity:1; pointer-events:auto; transform:none; }
.fc-info-pop.right { left:auto; right:0; }
.fc-info-pop.above { top:auto; bottom:calc(100% + 8px); transform:translateY(4px); }
.fc-info-wrap:hover .fc-info-pop.above,
.fc-info-icon:focus + .fc-info-pop.above { transform:none; }
.fc-info-pop-title {
  font-family:var(--font-u,'Montserrat',sans-serif);
  font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); padding:13px 16px 11px;
  border-bottom:1px solid rgba(201,168,76,.30);
}
.fc-info-pop-body {
  font-family:var(--font-u,'Montserrat',sans-serif);
  font-size:12px; font-weight:400; line-height:1.65; color:var(--text);
  padding:12px 16px 14px;
  /* Defensive resets — prevent text-transform/letter-spacing/font-style
     from bleeding in via uppercase parent labels (e.g. .fsc-label) */
  text-transform:none;
  letter-spacing:0;
  font-style:normal;
}
.fc-info-pop-body p { margin:0 0 8px; }
.fc-info-pop-body p:last-child { margin:0; }
.fc-info-pop-body b, .fc-info-pop-body strong { color:var(--gold); font-weight:600; }

/* ══════════════════════════════════════════════════════════════
   FC-DIALOG — custom prompt / confirm / alert modals
   ══════════════════════════════════════════════════════════════ */
.fc-dlg-backdrop {
  position:fixed; inset:0; z-index:99999;
  background:rgba(0,0,0,.72);
  display:flex; align-items:center; justify-content:center;
  animation:fc-dlg-fade-in .12s ease;
}
@keyframes fc-dlg-fade-in { from { opacity:0 } to { opacity:1 } }
.fc-dlg-card {
  background:var(--surface);
  border:1px solid var(--gold);
  border-radius:10px;
  padding:28px 32px 24px;
  min-width:340px; max-width:460px; width:90vw;
  box-sizing:border-box;
  animation:fc-dlg-slide-in .14s ease;
}
@keyframes fc-dlg-slide-in { from { transform:translateY(-8px); opacity:0 } to { transform:none; opacity:1 } }
.fc-dlg-title {
  font-family:var(--font-u, 'Montserrat', sans-serif);
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 12px;
}
.fc-dlg-rule {
  border:none; border-top:1px solid var(--border);
  margin:0 0 16px;
}
.fc-dlg-body {
  font-family:var(--font-u, 'Montserrat', sans-serif);
  font-size:13px; line-height:1.65; color:var(--text-muted);
  margin:0 0 20px;
}
.fc-dlg-input {
  width:100%; box-sizing:border-box;
  background:var(--base); border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-size:14px; font-family:var(--font-u, 'Montserrat', sans-serif);
  padding:10px 13px; outline:none; margin:0 0 20px; display:block;
  transition:border-color .15s;
}
.fc-dlg-input:focus { border-color:var(--gold); }
.fc-dlg-actions {
  display:flex; justify-content:flex-end; gap:10px;
}
.fc-dlg-btn {
  padding:9px 20px; border-radius:6px;
  font-family:var(--font-u, 'Montserrat', sans-serif);
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:all .15s; border:1px solid transparent;
}
.fc-dlg-btn--primary {
  background:var(--gold); color:var(--base); border-color:var(--gold);
}
.fc-dlg-btn--primary:hover { opacity:.85; }
.fc-dlg-btn--ghost {
  background:transparent; color:var(--text-muted); border-color:var(--border);
}
.fc-dlg-btn--ghost:hover { border-color:var(--text-muted); color:var(--text); }
.fc-dlg-btn--danger {
  background:transparent; color:#E05C5C; border-color:#E05C5C;
}
.fc-dlg-btn--danger:hover { background:#E05C5C; color:#fff; }

/* ── DRESS CODES — font overrides ──────────────────────────── */
/* Classic Terminal — the original Black Gold pairing. First choice. */
body.dc-classic      { --font-d:'Cormorant Garamond',serif;    --font-u:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif }
body.dc-blacktie     { --font-d:'Cormorant Garamond',serif;    --font-u:'DM Sans',-apple-system,sans-serif }
body.dc-professional { --font-d:'Playfair Display',serif;      --font-u:'Lato',-apple-system,sans-serif }
body.dc-smartcasual  { --font-d:'Josefin Sans',sans-serif;     --font-u:'Work Sans',-apple-system,sans-serif }
body.dc-heritage     { --font-d:'Libre Baskerville',serif;     --font-u:'Work Sans',-apple-system,sans-serif }
body.dc-editorial    { --font-d:'Abril Fatface',serif;         --font-u:'Karla',-apple-system,sans-serif }
body.dc-techforward  { --font-d:'Syne',sans-serif;             --font-u:'Outfit',-apple-system,sans-serif }
body.dc-streetwear   { --font-d:'Orbitron',sans-serif;         --font-u:'Exo 2',-apple-system,sans-serif }
body.dc-freespirit   { --font-d:'Pacifico',cursive;            --font-u:'Poppins',-apple-system,sans-serif }

/* ═══════════════════════════════════════════════════════════════════
   FOCAL GLASS HIGHLIGHT — "liquid glass" rim for the one hero band the
   user should focus on when a module opens. Deliberate exception to the
   flat / no-shadow / ≤10px-radius rules — outer focal chrome ONLY, never
   on ordinary cards. Usage: give the focal container `position:relative`
   and drop `<div class="fc-glass-focus"></div>` in as its last child.
   Sheen sweeps the border once on open, then settles to a thin gold rim.
   ═══════════════════════════════════════════════════════════════════ */
@property --fc-glass-a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.fc-glass-focus{
  position:absolute;
  /* Frame sits OUTSIDE the content box so it never overlaps/clips text. */
  inset:calc(-1 * var(--fc-glass-outset,8px));
  pointer-events:none; z-index:5;
  /* Whole overlay starts hidden and is only visible during the one-time pulse. */
  opacity:0;
  border-radius:calc(var(--fc-glass-radius,14px) + var(--fc-glass-outset,8px));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.22),
    /* Colored glow follows the active theme accent (gold / coral / teal / …). */
    inset 0 0 18px var(--accent-glow, rgba(201,168,76,.18)),
    0 0 0 1px rgba(0,0,0,.5);
  /* animation NOT auto-started — brand.js fires it via .fc-glass-fire after
     content has rendered (double RAF after DOMContentLoaded), so the overlay
     covers the full hero region, not an empty/partial parent. */
}
.fc-glass-focus.fc-glass-fire{
  animation:fcGlassPulse 3s ease-out forwards;
}
.fc-glass-focus.fc-glass-fire::after{
  animation:fcGlassAngle 3s ease-out forwards;
}
.fc-glass-focus::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:var(--fc-glass-rim,6px);
  -webkit-backdrop-filter:blur(5px) saturate(140%); backdrop-filter:blur(5px) saturate(140%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;
}
.fc-glass-focus::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:var(--fc-glass-rim,6px);
  background:conic-gradient(from var(--fc-glass-a),transparent 0 68%,rgba(255,255,255,.92) 80%,var(--gold-light,#F4D67C) 87%,transparent 95% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;
}
/* One-time pulse: the ENTIRE overlay (rim + glow + blur + sheen) fades in, the sheen
   sweeps the border once, then everything fades fully out — the element returns to
   exactly how it looked before this feature existed. Nothing lingers. */
@keyframes fcGlassPulse{ 0%{opacity:0} 6%{opacity:1} 85%{opacity:1} 100%{opacity:0} }
@keyframes fcGlassAngle{ from{--fc-glass-a:0deg} to{--fc-glass-a:360deg} }
@media (prefers-reduced-motion:reduce){
  .fc-glass-focus,.fc-glass-focus.fc-glass-fire{ animation:none; opacity:0 }
}
/* Already shown once this session (set by the gate in brand.js) → never pulse again. */
.fc-glass-focus.fc-glass-seen,.fc-glass-focus.fc-glass-seen.fc-glass-fire{ animation:none; opacity:0 }