/* =============================================================
   ChessGrammar Design System
   Terminal-first dashboard — VS Code Dark+ palette, dark only.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* -------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------- */
:root {
  /* Background layers */
  --bg-primary:        #1e1e1e;   /* editor surface */
  --bg-secondary:      #252526;   /* sidebar, panels */
  --bg-tertiary:       #2d2d30;   /* nested panels, hover */
  --bg-elevated:       #333333;   /* dropdowns, modals */
  --bg-titlebar:       #3c3c3c;
  --bg-statusbar:      #007acc;   /* VS Code status bar blue */
  --bg-statusbar-admin:#cc6633;   /* admin variant */

  /* Brand — matches chessgrammar.com main site ("Observatory" palette).
     These are the tokens used by .site-header and applied (via .site-shell
     overrides below) to all standalone pages so they look identical to the
     Vercel-hosted marketing site. */
  --brand-bg:          #141418;
  --brand-bg-secondary:#1a1a1f;
  --brand-bg-tertiary: #202027;
  --brand-bg-card:     #22222a;
  --brand-border:      #2e2e36;
  --brand-border-light:#44444e;
  --brand-text:        #e4e4e7;
  --brand-text-secondary:#a1a1aa;
  --brand-text-dimmed: #52525b;
  --brand-accent:      #0066cc;   /* CTA background */
  --brand-accent-light:#3399ff;   /* "Grammar" wordmark, CTA hover */
  --brand-accent-glow: rgba(0, 102, 204, 0.30);

  /* Borders */
  --border:            #3c3c3c;
  --border-strong:     #5a5a5a;
  --border-focus:      #569cd6;

  /* Text */
  --text-primary:      #d4d4d4;
  --text-secondary:    #969696;
  --text-muted:        #6e6e6e;
  --text-inverse:      #1e1e1e;
  --text-on-status:    #ffffff;

  /* Syntax-derived accents */
  --accent:            #4ec9b0;   /* types — primary brand accent */
  --accent-blue:       #569cd6;   /* keywords */
  --accent-orange:     #ce9178;   /* strings, warning */
  --accent-yellow:     #dcdcaa;   /* functions */
  --accent-purple:     #c586c0;   /* control flow */
  --accent-red:        #f48771;   /* errors */

  /* Semantic */
  --semantic-success:  var(--accent);
  --semantic-warning:  var(--accent-orange);
  --semantic-error:    var(--accent-red);
  --semantic-info:     var(--accent-blue);

  /* Buttons */
  --btn-bg:            #0e639c;
  --btn-bg-hover:      #1177bb;
  --btn-bg-active:     #094771;
  --btn-bg-danger:     #5a1d1d;
  --btn-bg-danger-hover:#7a2929;

  /* Typography */
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-16:16px; --fs-18:18px; --fs-22:22px; --fs-28:28px;

  --lh-tight:1.25; --lh-normal:1.55; --lh-loose:1.75;

  /* Spacing scale (4px base) */
  --space-1:4px;  --space-2:8px;  --space-3:12px;
  --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-12:48px; --space-16:64px;

  /* Radii */
  --radius-sm:2px;
  --radius-md:4px;          /* hard cap per design system */
  --radius-circle:9999px;

  /* Layout */
  --header-h:56px;        /* matches .site-header height (also applied as body padding-top) */
  --titlebar-h:32px;      /* legacy — only the .titlebar component still references this */
  --statusbar-h:24px;     /* legacy — only the .statusbar component still references this */
  --sidebar-w:48px;

  /* Z-index */
  --z-titlebar:100;
  --z-statusbar:90;
  --z-sidebar:80;
  --z-modal:200;
  --z-tooltip:300;

  /* Motion */
  --tx-fast:.12s ease;
  --tx-base:.18s ease;
}

/* Admin theme override — sidebar/statusbar warm tone, accents muted-orange */
[data-theme="admin"] {
  --bg-statusbar:      var(--bg-statusbar-admin);
  --accent:            var(--accent-orange);
  --border-focus:      var(--accent-orange);
  --btn-bg:            #8a4a25;
  --btn-bg-hover:      #a55a30;
}

/* -------------------------------------------------------------
   2. Reset + base
   ------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html,body {
  margin:0; padding:0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* Always reserve scrollbar space — keeps the viewport width constant whether
   a page has overflow or not. Without this, navigating between a short page
   (no scrollbar) and a tall page (scrollbar) shifts every centered element
   by ~17px on platforms where scrollbars take real space.

   Two rules, belt-and-suspenders:
   - `overflow-y: scroll` forces the scrollbar track to always be present.
     Works in every browser back to forever; on macOS with overlay scrollbars
     it's a no-op (scrollbars don't take width there anyway).
   - `scrollbar-gutter: stable` is the cleaner modern equivalent — it reserves
     space without showing the track when not scrolling. Used by browsers
     that support it (Chrome 94+, Firefox 97+, Safari 18.2+) and ignored
     elsewhere, where the older rule above takes over. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
/* Every page renders the position:fixed .site-header at the top, so push
   body content down by its height. Applies to standalone AND dashboard. */
body { padding-top: var(--header-h); }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-blue); color: var(--text-inverse); }

/* Scrollbars (WebKit/Blink) */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* -------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------- */
h1,h2,h3,h4 { color: var(--text-primary); font-weight:600; letter-spacing:-0.005em; margin:0; }
h1 { font-size: var(--fs-22); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-18); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-16); line-height: var(--lh-tight); font-weight:500; }
h4 { font-size: var(--fs-14); font-weight:500; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-secondary); }

p { margin:0 0 var(--space-3); color: var(--text-secondary); }
small, .text-sm { font-size: var(--fs-12); }
.text-xs { font-size: var(--fs-11); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-primary { color: var(--text-primary); }
.text-accent { color: var(--accent); }
.text-warning { color: var(--semantic-warning); }
.text-error { color: var(--semantic-error); }
.text-mono { font-family: var(--font-mono); }
.text-sans { font-family: var(--font-sans); }
.uppercase { text-transform: uppercase; letter-spacing: 0.06em; }

/* Prompt prefix — emulates a shell prompt */
.prompt { color: var(--accent); font-size: var(--fs-13); }
.prompt::before { content: "$ "; color: var(--text-muted); }
.prompt--root::before { content: "# "; color: var(--accent-orange); }

/* -------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--header-h));
}

/* 4.1 Title bar */
.titlebar {
  position: sticky; top:0;
  display: flex; align-items: center;
  height: var(--titlebar-h);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--text-secondary);
  z-index: var(--z-titlebar);
  user-select: none;
}
.titlebar__lights { display: flex; gap: var(--space-2); margin-right: var(--space-4); }
.titlebar__lights span { width:12px; height:12px; border-radius: var(--radius-circle); }
.titlebar__lights span:nth-child(1) { background:#ff5f57; }
.titlebar__lights span:nth-child(2) { background:#febc2e; }
.titlebar__lights span:nth-child(3) { background:#28c840; }
.titlebar__crumb { display: flex; align-items:center; gap: var(--space-2); }
.titlebar__crumb strong { color: var(--text-primary); font-weight: 500; }
.titlebar__crumb .sep { color: var(--text-muted); }
.titlebar__actions { margin-left: auto; display: flex; gap: var(--space-3); align-items:center; }
.titlebar__actions a { color: var(--text-secondary); font-size: var(--fs-12); }
.titlebar__actions a:hover { color: var(--text-primary); text-decoration: none; }

/* 4.2 Sidebar (activity bar) */
.sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  align-items: center;
  padding: var(--space-2) 0;
  position: sticky;
  top: var(--header-h);                          /* sit just under the fixed header */
  height: calc(100vh - var(--header-h));
  z-index: var(--z-sidebar);
}
.sidebar__nav { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; }
.sidebar__bottom { margin-top: auto; display:flex; flex-direction:column; gap: var(--space-1); width:100%; }
.nav-item {
  display: flex; align-items: center; justify-content: center;
  width: var(--sidebar-w); height: var(--sidebar-w);
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  position: relative;
  transition: color var(--tx-fast), background var(--tx-fast);
}
.nav-item:hover { color: var(--text-primary); background: var(--bg-tertiary); text-decoration:none; }
.nav-item.active { color: var(--text-primary); border-left-color: var(--accent); background: var(--bg-tertiary); }
.nav-item svg { width:22px; height:22px; }
.nav-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
  background: var(--bg-elevated); color: var(--text-primary);
  padding: 4px 8px; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--fs-12);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--tx-fast);
  z-index: var(--z-tooltip);
}
.nav-item:hover[data-tooltip]::after { opacity: 1; }

/* 4.3 Content area */
.content {
  padding: var(--space-6) var(--space-8) var(--space-8);  /* status bar gone — modest bottom padding only */
  overflow-x: hidden;
  min-width: 0;  /* allow children to shrink */
}
.content__header { margin-bottom: var(--space-6); }
.content__title { font-size: var(--fs-22); margin-bottom: var(--space-1); }
.content__subtitle { color: var(--text-secondary); font-size: var(--fs-13); margin: 0; }
.content__actions { display:flex; gap: var(--space-2); margin-top: var(--space-3); }

/* 4.4 Status bar */
.statusbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--statusbar-h);
  background: var(--bg-statusbar);
  color: var(--text-on-status);
  display: flex; align-items: center;
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  gap: var(--space-4);
  z-index: var(--z-statusbar);
}
.statusbar__seg { display: flex; align-items: center; gap: var(--space-2); }
.statusbar__seg .dot { width:8px; height:8px; border-radius: var(--radius-circle); background:#7ee787; }
.statusbar__seg .dot--warn { background:#ffbf47; }
.statusbar__seg .dot--err { background:#ff7b72; }
.statusbar__spacer { flex: 1; }
.statusbar a { color: var(--text-on-status); }

/* 4.4b Standalone site shell — applied to <body> on public-facing pages
   (signup, login, stripe success/cancel, admin login). Scopes the Vercel
   "Observatory" palette so these pages look identical to chessgrammar.com,
   without affecting the dashboard which keeps the VS Code Dark+ palette. */
body.site-shell {
  /* Palette overrides — scoped via cascade (no global mutation) */
  --bg-primary:        var(--brand-bg);
  --bg-secondary:      var(--brand-bg-secondary);
  --bg-tertiary:       var(--brand-bg-tertiary);
  --bg-elevated:       var(--brand-bg-card);
  --border:            var(--brand-border);
  --border-strong:     var(--brand-border-light);
  --border-focus:      var(--brand-accent-light);
  --text-primary:      var(--brand-text);
  --text-secondary:    var(--brand-text-secondary);
  --text-muted:        var(--brand-text-dimmed);
  --accent:            var(--brand-accent);
  --accent-blue:       var(--brand-accent-light);
  --btn-bg:            var(--brand-accent);
  --btn-bg-hover:      var(--brand-accent-light);
  --btn-bg-active:     #054e9e;

  background: var(--bg-primary);
  color: var(--text-primary);
  /* padding-top is set globally on `body` via --header-h. */
}

/* 4.4c Site header — pixel-matches src/app/components/Header.tsx +
   .site-header* in chessgrammar.com's globals.css. Translated 1:1 from
   React (Next.js Link → <a>, useState burger → vanilla JS in _standalone). */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 48px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(20, 20, 24, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--brand-border);
  font-family: var(--font-mono);
}
.site-header__logo {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--brand-text);
  transition: color 0.2s;
}
.site-header__logo span { color: var(--brand-accent-light); }
.site-header__logo:hover { color: var(--brand-accent-light); text-decoration: none; }

.site-header__nav { display: flex; gap: 32px; }
.site-header__link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text-secondary);
  text-decoration: none;
  transition: color 0.2s;
  padding: 2px 0;
}
.site-header__link:hover { color: var(--brand-text); text-decoration: none; }
.site-header__link--active { color: var(--brand-text); }

.site-header__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 16px;
  background: var(--brand-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
}
.site-header__cta:hover {
  background: var(--brand-accent-light);
  box-shadow: 0 0 20px var(--brand-accent-glow);
  text-decoration: none;
}

.site-header__burger {
  display: none;
  background: transparent;
  border: none;
  color: var(--brand-text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.site-header__burger:hover { color: var(--brand-text); }

.site-header__mobile-nav { display: none; }

/* Dashboard variant of the header — flatten the chrome so it merges with
   the content area. Same bg as the body (.content inherits this), no
   backdrop blur, no separator border. The full standalone variant keeps
   its translucent + blurred look (the marketing-site feel). */
.site-header--dashboard {
  background: var(--bg-primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--border);  /* discreet separator from content */
  /* Logo centered in the viewport. Stable across pages thanks to the
     `scrollbar-gutter: stable` rule on <html> — without it, the logo would
     shift by ~half a scrollbar's width when navigating from a non-
     scrolling page to a scrolling one. */
  justify-content: center;
}

/* Header responsive — burger on ≤ 768px */
@media (max-width: 768px) {
  .site-header {
    padding: 0 20px;
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
  }
  .site-header__nav { display: none; }
  .site-header__cta { display: none; }
  .site-header__burger { display: block; }
  .site-header__mobile-nav.is-open {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px 0 12px;
    border-top: 1px solid var(--brand-border);
    gap: 4px;
  }
  .site-header__mobile-link {
    color: var(--brand-text-secondary);
    text-decoration: none;
    padding: 10px 12px;
    font-family: var(--font-sans);
    font-size: 14px;
    border-radius: var(--radius-md);
    transition: background 0.15s, color 0.15s;
  }
  .site-header__mobile-link:hover {
    background: var(--brand-bg-secondary);
    color: var(--brand-text);
  }
  .site-header__mobile-link.site-header__link--active {
    color: var(--brand-accent-light);
    background: var(--brand-bg-secondary);
  }

  /* Dashboard variant only renders {logo + 1 link} — keep the link visible
     on mobile (it fits easily) instead of hiding behind a non-existent burger. */
  .site-header--dashboard .site-header__nav { display: flex; }
}

/* 4.4d Standalone main: centered, max-width content column */
.content--standalone {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-12);
}
.icon-mark {
  font-size: 48px; line-height: 1;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.icon-mark--err  { color: var(--semantic-error); }
.icon-mark--warn { color: var(--semantic-warning); }

.standalone-spinner {
  display: inline-block; width: 8px; height: 8px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  margin-right: var(--space-2);
  animation: cg-pulse 1s infinite ease-in-out;
}
@keyframes cg-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* 4.5 Section grids */
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* -------------------------------------------------------------
   5. Cards & panels
   ------------------------------------------------------------- */
.panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
}
.panel__title { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin:0; }
.panel__body { padding: var(--space-4); }
.panel__footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); background: var(--bg-tertiary); }

.stat {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.stat__label { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.stat__value { font-size: var(--fs-22); font-weight:600; color: var(--text-primary); }
.stat__value--accent { color: var(--accent); }
.stat__value--blue { color: var(--accent-blue); }
.stat__delta { font-size: var(--fs-12); color: var(--text-muted); }
.stat__delta--up { color: var(--semantic-success); }
.stat__delta--down { color: var(--semantic-error); }

/* -------------------------------------------------------------
   6. Badges & pills
   ------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-11); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid currentColor;
  background: transparent;
}
.badge--builder { color: var(--accent); }
.badge--scale   { color: var(--accent-blue); }
.badge--custom  { color: var(--accent-purple); }
.badge--free    { color: var(--text-muted); }

.badge--active     { color: var(--semantic-success); }
.badge--trial      { color: var(--accent-yellow); }
.badge--past_due   { color: var(--semantic-warning); }
.badge--cancelled  { color: var(--semantic-error); }
.badge--revoked    { color: var(--semantic-error); }
.badge--solid {
  background: var(--accent); color: var(--text-inverse); border-color: transparent;
}

/* -------------------------------------------------------------
   7. Code blocks & terminal output
   ------------------------------------------------------------- */
code, .code {
  font-family: var(--font-mono); font-size: var(--fs-13);
  background: var(--bg-tertiary);
  padding: 2px 6px; border-radius: var(--radius-sm);
  color: var(--accent);
}
pre.code-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-13);
  color: var(--text-primary); overflow-x: auto;
  margin: 0;
  line-height: var(--lh-loose);
}
pre.code-block .kw { color: var(--accent-blue); }
pre.code-block .str { color: var(--accent-orange); }
pre.code-block .com { color: var(--text-muted); }

.terminal {
  background: #181818;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-13);
  color: var(--text-primary);
  line-height: var(--lh-loose);
  overflow-x: auto;
}
.terminal__line { white-space: pre; }
.terminal__line--in::before  { content: "$ "; color: var(--accent); }
.terminal__line--out { color: var(--text-secondary); }
.terminal__line--err { color: var(--semantic-error); }

/* API key display with reveal/copy */
.key-display { display: flex; gap: var(--space-2); align-items: stretch; }
.key-display__value {
  flex: 1; min-width: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-13);
  color: var(--accent);
  overflow-x: auto; white-space: nowrap;
  user-select: all;
}
.key-display__value[data-state="masked"] { color: var(--text-muted); letter-spacing: 0.1em; }

/* -------------------------------------------------------------
   8. Forms
   ------------------------------------------------------------- */
.field { margin-bottom: var(--space-4); }
.field__label, label.field__label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary); font-weight: 500;
}
.field__hint { margin-top: var(--space-2); font-size: var(--fs-12); color: var(--text-muted); }
.field__error { margin-top: var(--space-2); font-size: var(--fs-12); color: var(--semantic-error); }

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--tx-fast);
}
input:focus, select:focus, textarea:focus { border-color: var(--border-focus); }
input::placeholder { color: var(--text-muted); }
select {
  appearance: none;
  background-image: linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),
                    linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-8);
}

/* Tier-card selector (used on /signup) */
.tier-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: var(--space-3); }
.tier-card {
  display: block; cursor: pointer; position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color var(--tx-fast), background var(--tx-fast);
}
.tier-card:hover { border-color: var(--border-strong); }
.tier-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tier-card:has(input:checked) { border-color: var(--accent); background: #22302d; }
.tier-card__name { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.tier-card__label { font-weight: 500; color: var(--text-primary); font-size: var(--fs-16); }
.tier-card__price { color: var(--accent); font-weight: 500; }
.tier-card__meta { color: var(--text-secondary); font-size: var(--fs-12); }

/* -------------------------------------------------------------
   9. Buttons
   ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--btn-bg); color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 500;
  cursor: pointer;
  transition: background var(--tx-fast), color var(--tx-fast), border-color var(--tx-fast);
  text-decoration: none;
}
.btn:hover { background: var(--btn-bg-hover); text-decoration: none; }
.btn:active { background: var(--btn-bg-active); }
.btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn--ghost {
  background: transparent; color: var(--text-primary); border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--bg-tertiary); border-color: var(--text-secondary); }
.btn--danger { background: var(--btn-bg-danger); }
.btn--danger:hover { background: var(--btn-bg-danger-hover); }
.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--fs-12); }
.btn--icon { padding: var(--space-2); width: 32px; height: 32px; }
.btn-group { display: inline-flex; gap: var(--space-2); }

/* -------------------------------------------------------------
   10. Tables
   ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
table.data {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: var(--fs-13);
  background: var(--bg-secondary);
}
table.data thead th {
  text-align: left; font-weight: 500; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-11);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
}
table.data td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--bg-tertiary); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .muted { color: var(--text-muted); }

/* -------------------------------------------------------------
   11. Progress bars & charts
   ------------------------------------------------------------- */
.progress {
  display: block; width: 100%; height: 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}
.progress__bar {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: var(--radius-md);
  width: var(--p, 0%);
  transition: width var(--tx-base);
}
.progress--warn .progress__bar { background: var(--semantic-warning); }
.progress--err  .progress__bar { background: var(--semantic-error); }
.progress__meta { display:flex; justify-content: space-between; margin-top: var(--space-1); font-size: var(--fs-12); color: var(--text-secondary); }

/* Vertical bar chart (CSS-only) */
.chart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 180px; padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.chart__bar {
  flex: 1; min-width: 4px;
  background: var(--accent);
  height: var(--h, 0%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: relative;
  transition: height var(--tx-base), background var(--tx-fast);
  opacity: 0.85;
}
.chart__bar:hover { background: var(--accent-blue); opacity: 1; }
.chart__bar[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--bg-elevated); color: var(--text-primary);
  padding: 4px 8px; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--fs-11);
  white-space: nowrap; pointer-events: none;
  z-index: var(--z-tooltip);
}
.chart__axis {
  display: flex; justify-content: space-between;
  margin-top: var(--space-1);
  font-size: var(--fs-11); color: var(--text-muted);
  padding: 0 var(--space-3);
}

/* -------------------------------------------------------------
   12. Modal
   ------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: none; align-items: center; justify-content: center;
  z-index: var(--z-modal);
}
.modal.is-open { display: flex; }
.modal__panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  width: min(480px, calc(100vw - 32px));
  padding: var(--space-6);
  box-shadow: 0 16px 32px rgba(0,0,0,0.5);
}
.modal__title { margin: 0 0 var(--space-3); font-size: var(--fs-16); }
.modal__body { color: var(--text-secondary); margin-bottom: var(--space-4); }
.modal__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* -------------------------------------------------------------
   13. Alerts
   ------------------------------------------------------------- */
.alert {
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-13);
  background: var(--bg-secondary);
}
.alert--ok    { border-left-color: var(--semantic-success); color: var(--semantic-success); }
.alert--warn  { border-left-color: var(--semantic-warning); color: var(--semantic-warning); }
.alert--err   { border-left-color: var(--semantic-error);   color: var(--semantic-error); }
.alert--info  { border-left-color: var(--semantic-info);    color: var(--semantic-info); }
.alert strong { color: var(--text-primary); font-weight: 500; }

/* -------------------------------------------------------------
   14. Utilities
   ------------------------------------------------------------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }

.mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)}
.mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)}
.mb-1{margin-bottom:var(--space-1)} .mb-2{margin-bottom:var(--space-2)}
.mb-3{margin-bottom:var(--space-3)} .mb-4{margin-bottom:var(--space-4)}
.mb-6{margin-bottom:var(--space-6)} .mb-8{margin-bottom:var(--space-8)}

.w-full { width: 100%; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden { display: none !important; }

.divider { height: 1px; background: var(--border); margin: var(--space-6) 0; border: 0; }

/* -------------------------------------------------------------
   15. Responsive
   ------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --sidebar-w: 44px; }
  .content { padding: var(--space-4) var(--space-4) var(--space-12); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .titlebar__crumb .sep + * { display: none; }
  .titlebar__crumb .sep:nth-of-type(1) { display: none; }
}