@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============================================================
   theme.css — Veda Jyoti Platform Unified Theme
   Cream/gold aesthetic — matches Ask + Numerolabs surface.
   Shared across Samay and BTR pages.
   ------------------------------------------------------------
   CONSISTENCY PASS (handoff) — changes vs original:
   1. Body font unified to DM Sans (was split Manrope/DM Sans).
      Manrope removed from @import; --font-sans now DM Sans.
   2. --font-body / --font-display are now aliases of
      --font-sans / --font-serif (single source of truth).
   3. Parallel BTR semantic palette (--green/--red/--amber)
      now aliases the canonical --status-* tokens.
   4. .btn-primary:hover purple #5B21B6 -> brand gold-deep.
   5. Mobile-nav indigo #1a1740 -> brand ink #1A1714;
      lavender --status-info-bg -> neutral gold tint.
   No other rules changed. Drop-in replacement.
   ============================================================ */

/* ---- CSS Variables ---- */
:root {
  /* Brand — gold replaces purple, keeps amber as complement */
  --brand-primary: #8B6914;       /* Gold — main accent (was purple) */
  --brand-primary-hover: #6B4F0F; /* Gold-deep — primary :hover (design regression fix #1) */
  --brand-secondary: #B45309;     /* Warm amber — secondary accent */
  --brand-gradient: linear-gradient(135deg, #8B6914 0%, #A67D1A 50%, #6B4F0F 100%);
  --brand-gradient-warm: linear-gradient(135deg, #B45309 0%, #92400E 100%);

  /* Surfaces — cream palette */
  --bg-page: #F4F2EE;             /* Cream page background (Ask's --ink) */
  --bg-card: #FFFFFF;             /* Pure white cards for contrast */
  --bg-card-hover: #FBFAF7;       /* Warm-white card hover */
  --bg-sidebar: #1A1714;          /* Near-black sidebar (Ask's --cream) */
  --bg-input: #F8F7F4;            /* Barely-there input bg */
  --bg-input-focus: #FFFFFF;
  --bg-code: #F1EDE8;             /* Parchment-tan code bg */
  --bg-badge: #F3F0EB;            /* Subtle tan badge */

  /* Text */
  --text-primary: #1A1714;        /* Deep brown-black (Ask's --cream) */
  --text-secondary: #5C564B;      /* Warm medium (Ask's --cream-2) */
  --text-muted: #9A9389;          /* Muted warm gray (Ask's --cream-3) */
  --text-inverse: #F8F7F4;        /* Cream text on dark bg */
  --text-link: #8B6914;           /* Gold links */

  /* Borders */
  --border-light: #D1CDC4;        /* Ask's --line-soft */
  --border-medium: #E2DFD8;       /* Ask's --line */
  --border-focus: #8B6914;        /* Gold focus ring */

  /* Status */
  --status-success: #1A7A4C;      /* Ask's --green */
  --status-success-bg: #EFF7F1;
  --status-warning: #C89F2C;      /* Ask's --amber */
  --status-warning-bg: #FDF8E8;
  --status-error: #B93A3A;        /* Ask's --rose */
  --status-error-bg: #FBEFEF;
  --status-info: #8B6914;         /* Ask's --purple (reserved for info accents) */
  --status-info-bg: #F2EEE2;      /* neutral gold tint (was lavender #F3E5F5) */
  /* Status :hover (darker shade of each — closes the flattened-hover follow-up) */
  --status-success-hover: #155F3B;
  --status-warning-hover: #A07F1E;
  --status-error-hover: #9A2D2D;
  --status-info-hover: #6B4F0F;   /* = brand-primary-hover (info uses gold) */

  /* ===== Data Visualization (planets + dignity) — shared web+app contract =====
     Domain constants, NOT general-purpose UI colours. Deduped + warmed for the
     cream background (design ruling 2026-06-17). Keep in the planet / viz
     namespace so they never leak into chrome. */
  --planet-sun: #D45500;     --planet-moon: #2F5AC7;    --planet-mars: #C0392B;
  --planet-mercury: #0E8C63; --planet-jupiter: #C77D0A; --planet-venus: #C13B82;
  --planet-saturn: #475569;  --planet-rahu: #6C5A7A;    --planet-ketu: #92400E;
  --planet-uranus: #0D9488;  --planet-neptune: #5A66C4;
  --viz-own: #2D6CB0;        --viz-own-bg: #E9F1FA;
  --viz-friend: #B8860B;     --viz-friend-bg: #FBF4E2;
  /* Categorical data-viz hues — for functional category schemes that need
     distinct blue/purple the warm status palette doesn't provide (e.g. the
     mind/heart and past/future groupings). Domain colours, not UI chrome. */
  --viz-blue: #2D6CB0;       --viz-blue-bg: #E9F1FA;
  --viz-purple: #6B5B95;     --viz-purple-bg: #EFEBF5;
  --viz-teal: #2A8C82;       --viz-teal-bg: #E4F1EF;

  /* Panchabhuta element hues — a five-slot categorical set for the geopathic
     stress reading (/geostress). Drawn from the viz family above so they sit
     in the same muted register, then validated as a set: all five clear the
     chroma floor, the adjacent-pair CVD floor (worst 11.3 deutan) and 3:1
     contrast on the card surface. --element-jala IS --viz-blue; teal and
     purple are the same hues lifted in chroma, because at their UI values
     both read as grey to the validator. Do not re-tune one in isolation. */
  --element-prithvi: #A8751A; --element-prithvi-bg: #F7F0E2;
  --element-jala:    #2D6CB0; --element-jala-bg:    #E9F1FA;
  --element-agni:    #C0562A; --element-agni-bg:    #FAEDE6;
  --element-vayu:    #0C8F7C; --element-vayu-bg:    #E1F2EF;
  --element-akasha:  #5B4A9E; --element-akasha-bg:  #EDEAF6;

  /* Shadows — warm-tinted */
  --shadow-sm: 0 2px 6px rgba(26, 23, 20, 0.08);
  --shadow-md: 0 4px 12px rgba(26, 23, 20, 0.07);
  --shadow-lg: 0 12px 32px rgba(26, 23, 20, 0.10);
  --shadow-glow: 0 0 20px rgba(139, 105, 20, 0.12);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-12: 12px;               /* 4px-grid step between sm/md (design D3) */
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Typography — serif display + sans body matches Ask */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', Palatino, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
  --font-size-2xs: 10px;          /* tabular/data-viz/caption ONLY — never body (design D2) */
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 34px;          /* headings / hero stat numbers (design D2) */
  --font-size-3xl: 36px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}

/* ---- Global Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--bg-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

p { margin: 0 0 var(--space-md); }
a { color: var(--text-link); text-decoration: none; transition: opacity var(--transition-fast); }
a:hover { opacity: 0.8; }

code, pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}
code {
  background: var(--bg-code);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
pre {
  background: var(--bg-code);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--brand-primary);
  color: var(--text-inverse);
}
.btn-primary:hover:not(:disabled) { background: #6B4F0F; box-shadow: var(--shadow-glow); }

.btn-secondary {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}
.btn-secondary:hover:not(:disabled) { background: var(--border-light); }

.btn-danger {
  background: var(--status-error);
  color: var(--text-inverse);
}
.btn-danger:hover:not(:disabled) { background: #B91C1C; }

.btn-sm { padding: 6px 14px; font-size: var(--font-size-xs); }
.btn-lg { padding: 14px 28px; font-size: var(--font-size-base); }

/* ---- Cards ---- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}
.card:hover { box-shadow: var(--shadow-md); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

/* ---- Forms ---- */
input[type="text"], input[type="email"], input[type="number"], input[type="date"],
input[type="time"], input[type="password"], input[type="url"], input[type="search"],
textarea, select {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  width: 100%;
  transition: all var(--transition-fast);
  outline: none;
}
input:focus, textarea:focus, select:focus {
  background: var(--bg-input-focus);
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(139,105,20,0.1);
}
label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  line-height: 1.4;
}
.badge-green  { background: var(--status-success-bg); color: var(--status-success); }
.badge-red    { background: var(--status-error-bg); color: var(--status-error); }
/* ---- Tables ---- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
th {
  text-align: left;
  padding: 12px 16px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-light);
}
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-card-hover); }

/* ---- Stat Cards ---- */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}
.stat-card .stat-val {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--brand-primary);
}
.stat-card .stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--space-xs);
}

/* ---- Tabs ---- */
.tab-bar {
  display: flex;
  gap: 2px;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: var(--space-lg);
}
.tab-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.tab-btn.active, .tab-btn:hover {
  background: var(--bg-card);
  color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}

/* ---- Modal ---- */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  width: 90%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
}
.modal h3 { margin-bottom: var(--space-lg); }

/* ---- Toast ---- */
.toast-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.toast {
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-inverse);
  background: var(--text-primary);
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.3s ease;
}
.toast.error { background: var(--status-error); }
.toast.success { background: var(--status-success); }

@keyframes toastIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}



/* ---- Utility ---- */
.flex { display: flex; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--font-size-sm); }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .modal { width: 95%; padding: var(--space-lg); }
  .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-btn { flex: none; white-space: nowrap; padding: 8px 12px; font-size: var(--font-size-xs); }
}

/* ============================================================
   BTR Compatibility Aliases
   The BTR pages (chart.html, chart-basic.html, multi.html)
   use a different set of CSS variable names from their
   standalone era. These aliases map old BTR names → unified
   theme values so both Samay and BTR pages render correctly.
   ============================================================ */
:root {
  /* Surfaces */
  --bg-surface: var(--bg-card);
  --bg-elevated: var(--bg-input);
  --bg-input-focus: #FFFFFF;

  /* Borders */
  --border: var(--border-light);
  --border-strong: var(--border-medium);
  --border-focus: var(--brand-primary);

  /* BTR accent (gold/amber) — distinct from Samay purple brand */
  --accent: #8b6914;
  --accent-light: #a67d1a;
  --accent-glow: rgba(139,105,20,0.08);
  --accent-glow-strong: rgba(139,105,20,0.14);
  --accent-surface: #faf6eb;

  /* Semantic colors — now alias the canonical --status-* tokens */
  --green: var(--status-success);
  --green-bg: var(--status-success-bg);
  --red: var(--status-error);
  --red-bg: var(--status-error-bg);
  --amber: var(--status-warning);
  --amber-bg: var(--status-warning-bg);
  --amber-text: #6a520f;      /* readable gold text on amber-bg / light backgrounds (WCAG AA) */
  --amber-on-fill: #33280a;   /* dark text on a solid amber fill */

  /* Typography — aliases of the single canonical families */
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.03);
  --shadow-elevated: 0 2px 8px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.04);
}

/* BTR shared form/table/button styles (from old BTR theme) */
.samay-note{padding:10px 14px;border-radius:var(--radius-md);font-size:var(--font-size-base);line-height:1.45;}
.samay-note.ok{background:var(--green-bg);color:var(--green);border:1px solid #b6e2c8;}
.samay-note.err{background:var(--red-bg);color:var(--red);border:1px solid #f5c6c6;}

.samay-table-wrap{overflow-x:auto;margin:8px 0 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);}
.samay-table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm);font-family:var(--font-mono);}
.samay-table th{background:var(--accent-surface);color:var(--accent);font-weight:600;text-align:left;padding:8px 10px;border-bottom:2px solid var(--border-strong);white-space:nowrap;font-size:var(--font-size-sm);letter-spacing:.03em;text-transform:uppercase;}
.samay-table td{padding:7px 10px;border-bottom:1px solid var(--border);color:var(--text-primary);white-space:nowrap;}
.samay-table tbody tr:last-child td{border-bottom:none;}
.samay-table tbody tr:hover td{background:var(--accent-glow);}

.samay-btn{width:100%;padding:13px 20px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:background .2s,box-shadow .2s,transform .1s;letter-spacing:.01em;}
.samay-btn:hover{background:var(--accent-light);box-shadow:0 4px 16px rgba(139,105,20,0.25);}
.samay-btn:active{transform:scale(.985);}
.samay-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}

.samay-section{margin:18px 0;padding:14px 16px;background:var(--bg-elevated);border-radius:var(--radius-md);border:1px solid var(--border);}
.algo-selector{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--accent-surface);border:1px solid rgba(139,105,20,0.15);border-radius:var(--radius-md);}
.algo-selector .algo-icon{width:34px;height:34px;border-radius:var(--radius-sm);background:rgba(139,105,20,0.1);border:1px solid rgba(139,105,20,0.15);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);color:var(--accent);font-weight:700;flex-shrink:0;}
.algo-selector .algo-info{flex:1;min-width:0;}
.algo-selector .algo-label{font-size:var(--font-size-xs);font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;}
.algo-selector .algo-desc{font-size:var(--font-size-sm);color:var(--text-muted);margin-top:1px;}
.algo-selector select{width:190px;padding:7px 30px 7px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--accent);font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:600;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238b6914' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}

.samay-field label{display:block;font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em;}
.samay-field input,.samay-field select,.samay-field textarea{width:100%;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:var(--font-size-base);transition:border-color .2s,box-shadow .2s,background .2s;outline:none;}
.samay-field input:focus,.samay-field select:focus,.samay-field textarea:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow);background:var(--bg-input-focus);}
.samay-field input::placeholder{color:var(--text-muted);font-size:var(--font-size-sm);}

.site-footer a{color:var(--accent);text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}
/* ============================================================
   Unified Site Navigation — append to theme.css
   ============================================================ */

/* ---- Hide admin links by default (nav.js shows them for admin/owner) ---- */
.nav-admin-only {
  display: none;
}

/* ---- Nav Container ---- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--brand-gradient);
  box-shadow: 0 2px 12px rgba(26,23,20,0.25);
  font-family: var(--font-sans);
}

.site-nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  height: 54px;
}
/* Reading/utility pages opt out via <body data-narrow="1">,
   collapsing the topbar inner rail back to the legacy 980px. */
body[data-narrow] .site-nav-inner { max-width: 980px; }

/* ---- Brand ---- */
.site-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--text-inverse);
  font-weight: 800;
  font-size: var(--font-size-lg);
  letter-spacing: -0.5px;
  flex-shrink: 0;
  opacity: 1;
  padding-left: 2px;
}
.site-nav-brand:hover { opacity: 0.9; }

/* The VR VAASTU wordmark. The artwork is dark gold on transparent, which would sink into the
   gold nav bar, so it is knocked out to white to sit with the brand text beside it — one
   asset, no second file to keep in step. The knockout works on the vector the same way it
   did on the raster: the filter runs on the painted element, not on the file format.
   Width is left to the artwork's own 409:198. */
.site-nav-logo {
  height: 24px;   /* the bar is a fixed 54px, so this has room and does not move it */
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* ---- Desktop Nav Links ---- */
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--space-lg);
  flex: 1;
  min-width: 0;
}

.site-nav-link {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.site-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.site-nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 600;
}

/* ---- Right Side (credits + user) ---- */
.site-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
}

.site-nav-credits {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
  /* Now a link to the credits page — keep the pill look, add a click cue. */
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.site-nav-credits:hover,
.site-nav-credits:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  text-decoration: none;
  color: #FFFFFF;
}

.site-nav-help-btn {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
}
.site-nav-help-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.site-nav-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: #FFFFFF;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
}
.site-nav-user-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
}

.site-nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
}

.site-nav-user-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.site-nav-user-btn svg {
  opacity: 0.5;
  flex-shrink: 0;
}

/* ---- Dropdown Menu ---- */
.site-nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 950;
}
.site-nav-dropdown.open { display: block; }

.site-nav-dropdown-header {
  padding: 10px 14px;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  background: var(--bg-input);
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav-dropdown-section {
  padding: 6px 0;
}

.site-nav-dropdown-label {
  padding: 6px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.site-nav-dropdown-item {
  display: block;
  padding: 8px 14px;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.site-nav-dropdown-item:hover {
  background: var(--bg-input);
}
.site-nav-dropdown-item.active {
  color: var(--brand-primary);
  font-weight: 600;
}

.site-nav-dropdown-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

.site-nav-danger {
  color: var(--status-error) !important;
}

/* ---- Hamburger (mobile only) ---- */
.site-nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 8px 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: auto;
  transition: all var(--transition-fast);
}
.site-nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1px;
  transition: all 0.2s ease;
}
.site-nav-hamburger:hover {
  background: rgba(255, 255, 255, 0.14);
}
/* Animate to X when open */
.site-nav-hamburger.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.site-nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.site-nav-hamburger.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---- Mobile Menu ---- */
.site-nav-mobile {
  display: none;
  background: #1A1714;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  max-height: calc(100vh - 54px);
  overflow-y: auto;
}
.site-nav-mobile.open { display: block; }

.site-nav-mobile-section {
  margin-bottom: var(--space-md);
}

.site-nav-mobile-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.3);
  padding: 4px 12px 6px;
}

.site-nav-mobile-link {
  display: block;
  padding: 10px 12px;
  font-size: var(--font-size-base);
  color: #FFFFFF;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.site-nav-mobile-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.site-nav-mobile-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

.site-nav-mobile-credits {
  display: block;
  margin-top: var(--space-md);
  padding: 10px 12px;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.82);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
}
.site-nav-mobile-credits:hover,
.site-nav-mobile-credits:focus-visible {
  color: #FFFFFF;
  text-decoration: none;
}

/* ---- Body offset (prevent content hiding behind sticky nav) ---- */
body.has-site-nav {
  /* Applied by nav.js or manually add class to <body> */
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .site-nav-links,
  .site-nav-right {
    display: none;
  }
  .site-nav-hamburger {
    display: flex;
  }
  .site-nav-brand-text {
    font-size: var(--font-size-base);
  }
}

@media (min-width: 861px) {
  .site-nav-mobile {
    display: none !important;
  }
}

/* ---- Hide group labels on medium screens ---- */
@media (max-width: 1060px) {
}

/* ---- Utility: horizontal scroll wrapper for wide tables ---- */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }