/* ============================================================
   BUDDY B — SYSTEM STYLES v3.0
   ============================================================ */

/* ── reset ───────────────────────────────────────── */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection{ background: var(--color-accent-tint); color: var(--color-accent); }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
hr{ border:0; height:1px; background: var(--color-border); margin: 0; }

/* ── utility ─────────────────────────────────────── */
.mono, .num{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.num.pos{ color: var(--color-confirm); }
.num.neg{ color: var(--color-caution); }
.mono-meta{ font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-3); letter-spacing: 0.05em; text-transform: uppercase; }
.serif{ font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.eyebrow{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: 16px;
}
.eyebrow::before{ content:""; width: 6px; height: 6px; background: var(--color-accent); border-radius: 999px; }

/* ── wordmark ────────────────────────────────────── */
.wm{
  display: inline-flex; align-items: baseline; gap: 0.12em;
  font-family: var(--font-sans);
  font-weight: 500; letter-spacing: -0.04em; line-height: 1;
  color: var(--color-ink);
}
.wm-text{ font-weight: 500; }
.wm-badge{
  display: inline-grid; place-items: center;
  background: var(--color-accent); color: white;
  font-size: 0.46em; font-weight: 600; letter-spacing: 0; line-height: 1;
  width: 1.2em; height: 1.2em; border-radius: 999px;
  transform: translateY(-0.12em);
  padding-top: 0.12em; /* optical centering of B — compensates for font baseline asymmetry */
}
.wm-meta{ font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); letter-spacing: 0.08em; text-transform: uppercase; }

/* ── app layout ──────────────────────────────────── */
.app{ display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.side{
  position: sticky; top: 0; height: 100vh;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 32px 24px;
  display: flex; flex-direction: column; gap: 28px;
  overflow-y: auto;
}
.side-brand{ display: flex; flex-direction: column; gap: 4px; }
.toc{ display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; }
.toc-group{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-3); padding: 16px 6px 6px; }
.toc a{
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; border-radius: 6px;
  font-size: 13px; color: var(--color-ink-1);
  transition: background var(--dur-fast) var(--ease-standard);
}
.toc a:hover{ background: var(--color-surface-1); color: var(--color-ink); }
.toc a .n{ font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); width: 18px; }
.side-foot{ margin-top: auto; padding-top: 20px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 4px; }
.side-foot .mono{ font-size: 10px; color: var(--color-ink-3); letter-spacing: 0.05em; text-transform: uppercase; }

.main{ padding: 56px 80px 96px; max-width: 1200px; }
.main > section{ padding-block: 80px; border-top: 1px solid var(--color-border); }
.main > section:first-child{ border-top: 0; padding-top: 32px; }

.section-head{ display: flex; align-items: baseline; gap: 24px; margin-bottom: 48px; }
.section-head .idx{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-3); padding-top: 8px; min-width: 64px; flex-shrink: 0; }
.section-head h2{ margin: 0; font-size: 36px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; }
.section-head .desc{ color: var(--color-ink-2); max-width: 64ch; margin-top: 12px; font-size: 15px; line-height: 1.55; }

/* ============================================================
   HERO (00)
   ============================================================ */
.hero{ padding-bottom: 80px; }
.hero-grid{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.hero h1{ margin: 24px 0; font-size: var(--text-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); font-weight: 500; }
.hero h1 .ital{ font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.hero p.lead{ font-size: 17px; line-height: 1.6; color: var(--color-ink-1); max-width: 52ch; }
.hero-meta{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px; margin-top: 40px; max-width: 600px; }
.hero-meta .pair{ display: flex; flex-direction: column; gap: 2px; }
.hero-meta .k{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); }
.hero-meta .v{ font-size: 14px; color: var(--color-ink); }

.hero-mark-stage{
  aspect-ratio: 1;
  background: var(--color-surface-inv);
  color: var(--color-ink-on-inv);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg);
}
.hero-mark-stage::before{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 70% 30%, oklch(0.58 0.22 285 / 0.20), transparent 55%),
    radial-gradient(circle at 30% 80%, oklch(0.7 0.16 65 / 0.10), transparent 55%);
}
.grid-bg{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, oklch(1 0 0 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.hero-wm{
  position: relative; z-index: 1;
  display: inline-flex; align-items: baseline; gap: 0.12em;
  font-size: 96px; font-weight: 500; letter-spacing: -0.04em; line-height: 1;
  color: var(--color-ink-on-inv);
}
.hero-wm-badge{
  display: inline-grid; place-items: center;
  background: var(--color-accent); color: white;
  font-size: 0.46em; font-weight: 600; line-height: 1;
  width: 1.2em; height: 1.2em; border-radius: 999px;
  transform: translateY(-0.12em);
  padding-top: 0.12em; /* optical centering of B */
}
.hero-wm-sub{
  position: absolute;
  bottom: 64px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: oklch(1 0 0 / 0.45);
}
.hero-mark-stage .corner{ position: absolute; padding: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: oklch(1 0 0 / 0.45); text-transform: uppercase; }
.hero-mark-stage .corner.tl{ top:0; left:0; }
.hero-mark-stage .corner.tr{ top:0; right:0; }
.hero-mark-stage .corner.bl{ bottom:0; left:0; }
.hero-mark-stage .corner.br{ bottom:0; right:0; }

/* ============================================================
   AUDIT (01)
   ============================================================ */
.audit{ border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); overflow: hidden; display: grid; grid-template-columns: 200px 1fr 1fr; }
.audit-head{ display: contents; }
.audit-label-h, .audit-old-h, .audit-new-h{
  padding: 14px 20px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink-3); background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border);
}
.audit-old-h{ background: var(--color-surface); }
.audit-new-h{ background: var(--color-accent-tint); color: var(--color-accent); }
.audit-row{ display: contents; }
.audit-row > *{ padding: 20px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; justify-content: center; min-height: 96px; }
.audit-row > *:first-child{ border-top: 1px solid var(--color-border); }
.audit-label{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-2); background: var(--color-surface-1); }
.audit-old{ background: var(--color-surface); opacity: 0.72; }
.audit-new{ background: var(--color-surface); border-left: 2px solid var(--color-accent); }
.audit-note{ font-size: 11.5px; color: var(--color-ink-3); margin-top: 6px; line-height: 1.4; }
.legacy-wm{ font-family: var(--font-sans); font-weight: 600; font-size: 22px; color: oklch(0.55 0.18 285); }
.legacy-wm sup{ font-size: 10px; background: oklch(0.55 0.18 285); color: white; padding: 1px 5px; border-radius: 4px; margin-left: 2px; vertical-align: super; }
.legacy-sparkle{ display: inline-block; margin-left: 4px; transform: translateY(-6px); }
.legacy-font{ font-size: 17px; font-weight: 500; color: var(--color-ink-1); }
.legacy-pill{ display: inline-block; padding: 6px 12px; border-radius: 4px; font-weight: 600; font-size: 14px; }
.audit-swatch-row{ display: flex; align-items: center; gap: 10px; }
.audit-swatch{ width: 28px; height: 28px; border-radius: 6px; }
.neg-pill{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--color-caution-tint); color: var(--color-caution-ink); border-radius: 6px; font-weight: 500; font-size: 14px; }
.neg-arrow{ width: 14px; height: 14px; color: var(--color-caution); }

/* ============================================================
   PRINCIPLES (02)
   ============================================================ */
.principles{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.principle{ padding: 32px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); transition: border-color var(--dur-base); }
.principle:hover{ border-color: var(--color-border-strong); }
.principle .num{ font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-3); letter-spacing: 0.1em; }
.principle h3{ margin: 16px 0 10px; font-size: 22px; font-weight: 500; letter-spacing: -0.015em; }
.principle h3 em{ font-family: var(--font-serif); font-weight: 400; font-style: italic; }
.principle p{ margin: 0; color: var(--color-ink-2); font-size: 14px; line-height: 1.6; }

/* ============================================================
   LOGO CONCEPTS (03)
   ============================================================ */
.logo-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.logo-concept{
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
}
.logo-concept.lc-recommended{ border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.lc-recommend{ position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); background: var(--color-accent-tint); padding: 4px 10px; border-radius: 999px; z-index: 1; }
.lc-stage{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 56px 32px 40px; background: var(--color-surface); min-height: 280px; }
.lc-mark{ width: 120px; height: 120px; flex-shrink: 0; }
.lc-wm{ display: inline-flex; align-items: baseline; gap: 0.12em; font-size: 28px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--color-ink); }
.lc-badge{ display: inline-grid; place-items: center; background: var(--color-accent); color: white; font-size: 0.46em; font-weight: 600; line-height: 1; width: 1.2em; height: 1.2em; border-radius: 999px; transform: translateY(-0.12em); padding-top: 0.12em; }
.lc-meta{ padding: 24px 28px 28px; border-top: 1px solid var(--color-border); background: var(--color-surface-1); }
.lc-num{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--color-ink-3); }
.lc-name{ font-size: 18px; font-weight: 500; margin: 6px 0 10px; letter-spacing: -0.01em; }
.lc-desc{ font-size: 13px; color: var(--color-ink-2); line-height: 1.55; }
.lc-tags{ display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.lc-tag{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; padding: 3px 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-ink-2); }

.logo-summary{ margin-top: 24px; padding: 32px; background: var(--color-accent-tint); border-radius: 16px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
.logo-summary-text p{ margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--color-ink-1); }
.logo-summary-stage{ display: flex; flex-direction: column; gap: 12px; }
.lss-row{ display: flex; align-items: center; gap: 16px; background: var(--color-surface); padding: 12px 16px; border-radius: 10px; }
.lss-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); flex: 1; }
.lss-icon{ width: 48px; height: 48px; border-radius: 12px; background: var(--color-accent); color: white; display: grid; place-items: center; font-weight: 600; font-size: 22px; }
.lss-b{ display: inline-block; }

/* ============================================================
   BRAND APPLICATIONS (04)
   ============================================================ */
.brand-card-row{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.brand-card{ padding: 32px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; }
.brand-card.dark{ background: var(--color-surface-inv); border-color: transparent; }
.brand-card.accent{ background: var(--color-accent); border-color: transparent; }
.bc-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); }
.brand-card.dark .bc-label{ color: oklch(1 0 0 / 0.5); }
.bc-stage{ flex: 1; display: grid; place-items: center; padding: 16px 0; }
.bc-foot{ font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-3); }
.brand-card.dark .bc-foot{ color: oklch(1 0 0 / 0.5); }

.clearspace{
  position: relative; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 48px; display: grid; place-items: center; background: var(--color-surface);
}
.cs-label-tl{ position: absolute; top: 16px; left: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); }
.cs-frame{ position: absolute; inset: 32px; border: 1px dashed var(--color-border-strong); border-radius: 8px; }
.cs-annot{ position: absolute; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); }
.cs-annot.x{ top: 50%; right: 10px; transform: translateY(-50%); }
.cs-annot.y{ left: 50%; bottom: 10px; transform: translateX(-50%); }

.size-rules{ padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; font-size: 13px; }
.size-rules > div{ display: flex; justify-content: space-between; align-items: center; }
.size-rules > div + div{ padding-top: 14px; border-top: 1px solid var(--color-border); }

.dos-donts{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.dd-card{ padding: 28px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-height: 180px; justify-content: space-between; }
.dd-tag{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; font-weight: 500; }
.dd-tag.good{ color: var(--color-confirm-ink); background: var(--color-confirm-tint); }
.dd-tag.bad{ color: var(--color-danger); background: var(--color-danger-tint); }
.dd-note{ font-size: 12.5px; color: var(--color-ink-2); }

/* ============================================================
   COLOR (05)
   ============================================================ */
.swatch-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 32px; }
.swatch{ border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-surface); }
.sw-chip{ height: 96px; border-bottom: 1px solid var(--color-border); }
.sw-body{ padding: 14px 16px; }
.sw-name{ font-size: 13.5px; font-weight: 500; }
.sw-token{ font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-2); margin-top: 4px; }
.sw-vals{ display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); }

.ramp{ display: flex; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; margin-bottom: 32px; }
.ramp-step{ flex: 1; padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; min-height: 90px; }
.rs-l{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; }
.rs-v{ font-family: var(--font-mono); font-size: 10px; opacity: 0.6; }

.role-grid{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-bottom: 32px; }
.role-card{ display: flex; gap: 20px; padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; align-items: center; }
.role-swatch{ width: 80px; height: 80px; border-radius: 12px; color: white; display: grid; place-items: center; font-size: 32px; font-weight: 500; flex-shrink: 0; }
.role-meta{ flex: 1; }
.role-name{ font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-2); font-weight: 500; }
.role-mono{ font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-3); margin-top: 4px; }
.role-uses{ font-size: 13px; color: var(--color-ink-2); margin-top: 10px; line-height: 1.5; }
.role-mini{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.rm-cell{ padding: 14px; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; }
.rm-cell .mono-meta{ color: inherit; opacity: 0.7; }

.sem-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 32px; }
.sem{ border: 1px solid var(--color-border); border-radius: 10px; padding: 16px; background: var(--color-surface); }
.sem-dot{ width: 14px; height: 14px; border-radius: 999px; margin-bottom: 10px; }
.sem-name{ font-size: 13px; font-weight: 500; }
.sem-desc{ font-size: 11.5px; color: var(--color-ink-2); margin-top: 2px; line-height: 1.4; }
.sem-tok{ font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); margin-top: 10px; }

.cat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cat{ display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; }
.cat-dot{ width: 10px; height: 10px; border-radius: 999px; }

/* ============================================================
   TYPOGRAPHY (06)
   ============================================================ */
.type-trio{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 40px; }
.tt-card{ border: 1px solid var(--color-border); border-radius: 12px; padding: 32px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; background: var(--color-surface); }
.tt-sample{ font-size: 96px; line-height: 1; letter-spacing: -0.04em; color: var(--color-ink); }
.tt-meta{ display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.tt-fam{ font-size: 14px; font-weight: 500; }
.tt-role{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-3); }

.type-scale{ border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; margin-bottom: 40px; }
.ts-row{ display: grid; grid-template-columns: 140px 1fr 200px; align-items: baseline; gap: 24px; padding: 18px 24px; border-top: 1px solid var(--color-border); }
.ts-row:first-child{ border-top: 0; }
.ts-tok{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--color-ink-2); text-transform: uppercase; }
.ts-spec{ font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-3); text-align: right; }
.ts-row.dx .ts-text{ font-size: var(--text-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); font-weight: 500; }
.ts-row.dl .ts-text{ font-size: var(--text-display-l); line-height: var(--lh-display-l); letter-spacing: var(--tr-display-l); font-weight: 500; }
.ts-row.dm .ts-text{ font-size: var(--text-display-m); line-height: var(--lh-display-m); letter-spacing: var(--tr-display-m); font-weight: 500; }
.ts-row.ds .ts-text{ font-size: var(--text-display-s); line-height: var(--lh-display-s); letter-spacing: var(--tr-display-s); font-weight: 500; }
.ts-row.hl .ts-text{ font-size: var(--text-heading-l); line-height: var(--lh-heading-l); letter-spacing: var(--tr-heading-l); font-weight: 500; }
.ts-row.hm .ts-text{ font-size: var(--text-heading-m); line-height: var(--lh-heading-m); letter-spacing: var(--tr-heading-m); font-weight: 500; }
.ts-row.hs .ts-text{ font-size: var(--text-heading-s); line-height: var(--lh-heading-s); letter-spacing: var(--tr-heading-s); font-weight: 500; }
.ts-row.bl .ts-text{ font-size: var(--text-body-l); }
.ts-row.bd .ts-text{ font-size: var(--text-body); }
.ts-row.bs .ts-text{ font-size: var(--text-body-s); }
.ts-row.cp .ts-text{ font-size: var(--text-caption); color: var(--color-ink-2); }
.ts-row.mc .ts-text{ font-size: var(--text-micro); letter-spacing: var(--tr-micro); color: var(--color-ink-3); font-family: var(--font-mono); text-transform: uppercase; }

.num-showcase{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.num-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.num-cardlabel{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); }
.num-foot{ font-size: 11.5px; color: var(--color-ink-2); margin-top: 4px; }
.delta-arrow{ font-family: var(--font-mono); font-size: 18px; }
.delta-arrow.up{ color: var(--color-confirm); }
.delta-arrow.down{ color: var(--color-caution); }

/* ============================================================
   SPACING + RADIUS (07)
   ============================================================ */
.spacing-grid{ display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: 40px; }
.sp-cell{ border: 1px solid var(--color-border); border-radius: 8px; padding: 14px; background: var(--color-surface); text-align: center; }
.sp-bar{ background: var(--color-ink); height: 6px; border-radius: 999px; margin: 0 auto 12px; }
.sp-name{ font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink); }
.sp-val{ font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); margin-top: 2px; }

.radius-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.rad-cell{ border: 1px solid var(--color-border); border-radius: 10px; padding: 20px; text-align: center; background: var(--color-surface); }
.rad-box{ width: 56px; height: 56px; background: var(--color-accent); margin: 0 auto 12px; }
.rad-name{ font-family: var(--font-mono); font-size: 11px; color: var(--color-ink); }
.rad-use{ font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); margin-top: 2px; }

/* ============================================================
   ELEVATION (08)
   ============================================================ */
.elev-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 32px; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 16px; }
.elev{ background: var(--color-surface); border-radius: 12px; padding: 20px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; }
.elev.s1{ box-shadow: var(--shadow-xs); }
.elev.s2{ box-shadow: var(--shadow-sm); }
.elev.s3{ box-shadow: var(--shadow-md); }
.elev.s4{ box-shadow: var(--shadow-lg); }
.elev.s5{ box-shadow: var(--shadow-xl); }
.elev-name{ font-size: 13.5px; font-weight: 500; }
.elev-tok{ font-family: var(--font-mono); font-size: 10.5px; color: var(--color-ink-3); }

/* ============================================================
   MOTION (09)
   ============================================================ */
.motion-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px; }
.motion-card{ border: 1px solid var(--color-border); border-radius: 12px; padding: 24px; background: var(--color-surface); }
.motion-card h4{ margin: 0 0 16px; font-size: 14px; font-weight: 500; }
.motion-row{ display: grid; grid-template-columns: 90px 1fr 80px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.motion-row:first-of-type{ border-top: 0; }
.mr-name{ font-family: var(--font-mono); font-size: 11px; color: var(--color-ink); }
.mr-track{ height: 6px; background: var(--color-surface-1); border-radius: 999px; position: relative; overflow: hidden; }
.mr-ball{ position: absolute; top: 50%; left: 4px; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 999px; background: var(--color-accent); animation: travel 2.8s infinite; }
.motion-row.r1 .mr-ball{ animation-timing-function: var(--ease-standard); }
.motion-row.r2 .mr-ball{ animation-timing-function: var(--ease-emphasis); }
.motion-row.r3 .mr-ball{ animation-timing-function: var(--ease-exit); }
.motion-row.r4 .mr-ball{ animation-timing-function: var(--ease-spring); }
.mr-val{ font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-3); text-align: right; }
@keyframes travel{
  0%   { left: 4px; }
  45%  { left: calc(100% - 16px); }
  50%  { left: calc(100% - 16px); }
  95%  { left: 4px; }
  100% { left: 4px; }
}
.dur-row{ display: grid; grid-template-columns: 120px 1fr 80px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.dur-row:first-of-type{ border-top: 0; }
.dur-desc{ color: var(--color-ink-2); font-size: 13px; }

.state-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.state-cell{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.state-name{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-3); }
.loading-dot{ display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.4; animation: pulse 1.2s ease-in-out infinite; }
.loading-dot + .loading-dot{ margin-left: 4px; animation-delay: 0.15s; }
.loading-dot + .loading-dot + .loading-dot{ animation-delay: 0.3s; }
@keyframes pulse{ 0%, 80%, 100% { opacity: 0.4; transform: scale(1); } 40% { opacity: 1; transform: scale(1.2); } }

/* ============================================================
   ICONS (10)
   ============================================================ */
.icon-grid{ display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; border: 1px solid var(--color-border); border-radius: 12px; padding: 16px; background: var(--color-surface); }
.ic{ aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 12px; transition: background var(--dur-fast); }
.ic:hover{ background: var(--color-surface-1); }
.ic svg{ width: 22px; height: 22px; stroke: var(--color-ink); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ic-lbl{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-3); }

/* ============================================================
   COMPONENTS (11)
   ============================================================ */
.comp-grid{ display: grid; gap: 16px; }
.comp-block{ border: 1px solid var(--color-border); border-radius: 16px; padding: 32px; background: var(--color-surface); }
.comp-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.comp-head h3{ margin: 0; font-size: 16px; font-weight: 500; }
.comp-tok{ font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-3); }
.row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row + .row{ margin-top: 14px; }
.row-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-3); width: 100%; padding-top: 18px; border-top: 1px solid var(--color-border); margin-top: 16px; }
.row-label:first-of-type{ border-top: 0; padding-top: 0; margin-top: 0; }

/* button */
.btn{
  --bg: transparent;
  --bg-hover: var(--color-surface-1);
  --bg-active: var(--color-surface-2);
  --fg: var(--color-ink);
  --bd: var(--color-border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: 8px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bd);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast), box-shadow var(--dur-fast);
  white-space: nowrap;
}
.btn:hover{ background: var(--bg-hover); }
.btn:active{ background: var(--bg-active); transform: translateY(0.5px); }
.btn:focus-visible{ outline: 0; box-shadow: var(--shadow-focus); }
.btn .btn-icon{ width: 14px; height: 14px; fill: none; stroke: currentColor; }
.btn-primary{ --bg: var(--color-ink); --bg-hover: oklch(0.25 0.03 280); --bg-active: oklch(0.3 0.03 280); --fg: white; --bd: transparent; }
.btn-accent{ --bg: var(--color-accent); --bg-hover: var(--color-accent-hover); --bg-active: var(--color-accent-press); --fg: white; --bd: transparent; }
.btn-confirm{ --bg: var(--color-confirm); --bg-hover: var(--color-confirm-hover); --bg-active: var(--color-confirm-press); --fg: white; --bd: transparent; }
.btn-ghost{ --bd: transparent; }
.btn-danger{ --fg: var(--color-danger); --bg-hover: var(--color-danger-tint); --bd: var(--color-border); }
.btn-sm{ height: 28px; padding: 0 11px; font-size: 12.5px; border-radius: 6px; }
.btn-lg{ height: 44px; padding: 0 20px; font-size: 15px; }
.btn-xl{ height: 52px; padding: 0 28px; font-size: 16px; border-radius: 10px; }

/* input */
.input{
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 13.5px;
  min-width: 220px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input:focus-within, .input-focused{ border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
.input input{ all: unset; flex: 1; font-size: 13.5px; }
.input input::placeholder{ color: var(--color-ink-3); }
.input-lead, .input-tail{ display: flex; align-items: center; color: var(--color-ink-3); }
.input-lead svg, .input-tail svg{ width: 14px; height: 14px; }
.input-error{ border-color: var(--color-danger); }
.input-err-icon{ color: var(--color-danger); font-weight: 600; }
.input-currency input{ font-family: var(--font-mono); font-size: 18px; font-weight: 500; }

/* select / date */
.select-trigger{ display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; height: 36px; padding: 0 12px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-surface); font-size: 13.5px; min-width: 180px; }
.select-trigger svg{ width: 12px; height: 12px; color: var(--color-ink-3); }
.select-trigger > svg:first-child{ color: var(--color-ink-3); margin-right: 4px; }
.chev{ flex-shrink: 0; }

/* toggles */
.toggle-pair{ display: flex; align-items: center; gap: 8px; font-size: 13px; }
.switch{ position: relative; width: 36px; height: 22px; background: var(--color-border-strong); border-radius: 999px; transition: background var(--dur-base); cursor: pointer; flex-shrink: 0; }
.switch::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: white; border-radius: 999px; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-standard); }
.switch.on{ background: var(--color-confirm); }
.switch.on::after{ transform: translateX(14px); }

.check{ width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--color-border-strong); display: inline-grid; place-items: center; background: var(--color-surface); flex-shrink: 0; }
.check.on{ background: var(--color-accent); border-color: var(--color-accent); }
.check.on::after{ content: ""; width: 8px; height: 5px; border-left: 1.5px solid white; border-bottom: 1.5px solid white; transform: translateY(-1px) rotate(-45deg); }

.radio{ width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--color-border-strong); display: inline-grid; place-items: center; background: var(--color-surface); flex-shrink: 0; }
.radio.on{ border-color: var(--color-accent); }
.radio.on::after{ content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--color-accent); }

/* tabs */
.tabs{ display: flex; gap: 2px; padding: 3px; background: var(--color-surface-1); border-radius: 8px; width: max-content; }
.tab{ font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 6px; color: var(--color-ink-2); cursor: pointer; }
.tab.on{ background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-sm); }

/* segmented */
.seg{ display: flex; border: 1px solid var(--color-border-strong); border-radius: 8px; overflow: hidden; }
.seg-opt{ padding: 7px 12px; font-size: 12.5px; font-weight: 500; color: var(--color-ink-1); border-right: 1px solid var(--color-border); cursor: pointer; }
.seg-opt:last-child{ border-right: 0; }
.seg-opt.on{ background: var(--color-ink); color: white; }

/* chip */
.chip{
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 999px;
  background: var(--color-surface-1);
  color: var(--color-ink-1);
  border: 1px solid var(--color-border);
  font-size: 12.5px; font-weight: 500;
}
.chip-small{ height: 22px; padding: 0 8px; font-size: 11px; }
.chip-dot{ width: 6px; height: 6px; border-radius: 999px; }
.chip-confirm{ background: var(--color-confirm-tint); color: var(--color-confirm-ink); border-color: transparent; }
.chip-pending{ background: var(--color-pending-tint); color: oklch(0.42 0.10 60); border-color: transparent; }
.chip-warning{ background: var(--color-warning-tint); color: oklch(0.42 0.13 85); border-color: transparent; }
.chip-caution{ background: var(--color-caution-tint); color: var(--color-caution-ink); border-color: transparent; }
.chip-danger{ background: var(--color-danger-tint); color: var(--color-danger); border-color: transparent; }
.chip-info{ background: var(--color-info-tint); color: var(--color-info); border-color: transparent; }
.chip-accent{ background: var(--color-accent-tint); color: var(--color-accent); border-color: transparent; }

/* badge */
.badge{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  background: var(--color-surface-1); color: var(--color-ink-2);
  border: 1px solid var(--color-border);
}
.badge-new{ background: var(--color-accent-tint); color: var(--color-accent); border-color: transparent; }
.badge-accent{ background: var(--color-accent); color: white; border-color: transparent; }

/* alerts */
.alerts{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.alert{ display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); }
.alert-ic{ width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; color: white; font-size: 12px; font-weight: 600; }
.alert.success .alert-ic{ background: var(--color-confirm); }
.alert.info .alert-ic{ background: var(--color-info); }
.alert.warning .alert-ic{ background: var(--color-warning); color: oklch(0.3 0.13 85); }
.alert.caution .alert-ic{ background: var(--color-caution); }
.alert.danger .alert-ic{ background: var(--color-danger); }
.alert-body{ display: flex; flex-direction: column; gap: 2px; }
.alert-title{ font-size: 13.5px; font-weight: 500; }
.alert-msg{ font-size: 12.5px; color: var(--color-ink-2); line-height: 1.45; }
.alert-x{ color: var(--color-ink-3); font-size: 12px; }

/* avatars */
.av{ width: 32px; height: 32px; border-radius: 999px; background: var(--color-surface-2); display: inline-grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--color-ink-1); border: 1px solid var(--color-border); flex-shrink: 0; }
.av-accent{ background: var(--color-accent-tint); color: var(--color-accent); border-color: transparent; }
.av-confirm{ background: var(--color-confirm-tint); color: var(--color-confirm-ink); border-color: transparent; }
.av-dark{ background: var(--color-surface-inv); color: white; border-color: transparent; }
.av-stack{ display: flex; }
.av-stack .av{ margin-right: -10px; background: var(--color-surface); }
.av-stack .av:last-child{ margin-right: 0; }

/* progress */
.prog-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }
.prog-block{ display: flex; flex-direction: column; gap: 8px; }
.prog-head{ display: flex; justify-content: space-between; align-items: baseline; }
.progress{ height: 6px; background: var(--color-surface-1); border-radius: 999px; overflow: hidden; }
.progress > span{ display: block; height: 100%; background: var(--color-accent); border-radius: inherit; transition: width var(--dur-slow) var(--ease-standard); }

/* skeleton */
.skeleton-line{ height: 12px; background: linear-gradient(90deg, var(--color-surface-1) 0%, var(--color-surface-2) 50%, var(--color-surface-1) 100%); background-size: 200% 100%; border-radius: 6px; animation: shimmer 1.4s linear infinite; }
.skeleton-block{ background: linear-gradient(90deg, var(--color-surface-1) 0%, var(--color-surface-2) 50%, var(--color-surface-1) 100%); background-size: 200% 100%; border-radius: 6px; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer{ 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.spinner{ width: 18px; height: 18px; border: 2px solid var(--color-surface-2); border-top-color: var(--color-accent); border-radius: 999px; animation: spin 0.8s linear infinite; }
@keyframes spin{ to { transform: rotate(360deg); } }

/* ============================================================
   PRIVACY (12)
   ============================================================ */
.privacy-stage{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.privacy-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; }
.pc-bar{ display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--color-surface-1); border-bottom: 1px solid var(--color-border); }
.eye-btn{ width: 32px; height: 32px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); display: grid; place-items: center; color: var(--color-ink); cursor: pointer; transition: background var(--dur-fast); }
.eye-btn:hover{ background: var(--color-accent-tint); color: var(--color-accent); border-color: transparent; }
.eye-btn svg{ width: 16px; height: 16px; }
.eye-btn.off{ background: var(--color-ink); color: white; border-color: transparent; }
.pc-body{ padding: 24px; display: flex; flex-direction: column; }
.pc-row{ display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--color-border); }
.pc-row:first-child{ border-top: 0; padding-top: 0; }
.pc-row:last-child{ padding-bottom: 0; }
.pc-label{ font-size: 13.5px; color: var(--color-ink-1); }
.pc-val{ font-size: 18px; font-weight: 500; }
.pc-hide{ letter-spacing: 0.05em; color: var(--color-ink-2); }

.privacy-notes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pn-card{ background: var(--color-surface-1); border-radius: 12px; padding: 24px; }
.pn-num{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--color-ink-3); }
.pn-title{ font-size: 14px; font-weight: 500; margin: 8px 0 6px; }
.pn-desc{ font-size: 13px; color: var(--color-ink-2); line-height: 1.5; }

/* ============================================================
   CHARTS (13)
   ============================================================ */
.chart-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 40px; }
.chart-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 24px; }
.cc-negative{ border-color: var(--color-caution); border-left-width: 3px; }
.cc-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.cc-head h4{ margin: 0; font-size: 14px; font-weight: 500; color: var(--color-ink-1); }
.cc-big{ display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.cc-big .num{ font-size: 28px; font-weight: 500; letter-spacing: -0.015em; }
.cc-delta{ font-family: var(--font-mono); font-size: 12px; }
.cc-delta.pos{ color: var(--color-confirm); }
.cc-delta.neg{ color: var(--color-caution); }
.cc-delta.cau{ color: var(--color-caution); }
.cc-foot{ font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-3); margin-top: 14px; }
.cc-legend{ display: flex; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--color-ink-2); }
.cc-legend span{ display: flex; align-items: center; gap: 6px; }
.cc-legend i{ width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* bars: basic */
.bars-basic{ display: flex; gap: 8px; align-items: flex-end; height: 160px; padding-bottom: 24px; position: relative; }
.bb-bar{ flex: 1; background: var(--color-ink-2); border-radius: 4px 4px 0 0; position: relative; transition: background var(--dur-fast); }
.bb-bar.accent{ background: var(--color-accent); }
.bb-bar .bb-lbl{ position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); }

/* bars: stacked */
.bars-stacked{ display: flex; gap: 20px; align-items: flex-end; height: 160px; padding-bottom: 24px; position: relative; }
.bs-col{ flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; position: relative; }
.bs-seg{ border-radius: 2px; }
.bs-col .bb-lbl{ position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); }

/* bars: grouped */
.bars-grouped{ display: flex; gap: 12px; align-items: flex-end; height: 160px; padding-bottom: 24px; position: relative; }
.bg-col{ flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; height: 100%; }
.bg-pair{ display: flex; gap: 3px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.bg-bar{ width: 50%; border-radius: 3px 3px 0 0; }
.bg-bar.in{ background: var(--color-confirm); }
.bg-bar.out{ background: var(--color-ink-2); }
.bg-col .bb-lbl{ position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); }

/* bars: horizontal */
.bars-horizontal{ display: flex; flex-direction: column; gap: 12px; }
.bh-row{ display: grid; grid-template-columns: 80px 1fr 100px; align-items: center; gap: 12px; }
.bh-lbl{ font-size: 13px; }
.bh-track{ height: 10px; background: var(--color-surface-1); border-radius: 999px; overflow: hidden; }
.bh-track > span{ display: block; height: 100%; border-radius: inherit; }
.bh-val{ font-size: 13px; text-align: right; }

/* bars: diverging */
.bars-diverge{ display: flex; gap: 10px; align-items: center; height: 160px; padding-bottom: 24px; position: relative; }
.bd-axis{ position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--color-border); }
.bd-col{ flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; }
.bd-bar{ width: 100%; border-radius: 3px; }
.bd-bar.pos{ background: var(--color-confirm); align-self: flex-end; margin-top: 50%; }
.bd-bar.neg{ background: var(--color-caution); align-self: flex-start; margin-bottom: 50%; }
.bd-col .bb-lbl{ position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); }

/* donuts */
.donut-stage{ display: flex; align-items: center; gap: 32px; padding: 16px 0; }
.donut{ width: 140px; height: 140px; border-radius: 999px; flex-shrink: 0; position: relative; }
.donut::after{ content: ""; position: absolute; inset: 24px; background: var(--color-surface); border-radius: 999px; }
.donut-classic{
  background: conic-gradient(
    var(--color-accent) 0 38%,
    oklch(0.72 0.14 35) 38% 64%,
    oklch(0.68 0.14 265) 64% 82%,
    oklch(0.72 0.14 320) 82% 92%,
    var(--color-surface-2) 92% 100%
  );
}
.donut-kpi{
  background: conic-gradient(
    var(--color-accent) 0 42%,
    var(--color-confirm) 42% 68%,
    oklch(0.72 0.14 35) 68% 88%,
    var(--color-surface-2) 88% 100%
  );
}
.donut-progress{
  background: conic-gradient(
    var(--color-confirm) 0 68%,
    var(--color-surface-2) 68% 100%
  );
}
.donut-center{ position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 1; }
.donut-center .num{ font-weight: 500; }
.donut-dual{ width: 180px; height: 180px; position: relative; flex-shrink: 0; }
.donut-outer{
  width: 100%; height: 100%; border-radius: 999px; position: absolute;
  background: conic-gradient(var(--color-confirm) 0 50%, var(--color-surface-2) 50% 100%);
}
.donut-outer::after{ content: ""; position: absolute; inset: 18px; background: var(--color-surface); border-radius: 999px; }
.donut-inner{
  width: 110px; height: 110px; border-radius: 999px; position: absolute; top: 35px; left: 35px;
  background: conic-gradient(var(--color-accent) 0 75%, var(--color-surface-2) 75% 100%);
}
.donut-inner::after{ content: ""; position: absolute; inset: 16px; background: var(--color-surface); border-radius: 999px; }
.donut-dual .donut-center{ z-index: 2; }
.half-donut{ width: 200px; height: 100px; position: relative; flex-shrink: 0; overflow: hidden; }
.hd-fill{ width: 200px; height: 200px; border-radius: 999px; background: conic-gradient(from 270deg, var(--color-caution) 0 24%, var(--color-warning) 24% 48%, var(--color-confirm) 48% 82%, var(--color-surface-2) 82% 100%); }
.hd-mask{ position: absolute; top: 26px; left: 26px; width: 148px; height: 148px; border-radius: 999px 999px 0 0; background: var(--color-surface); }
.hd-center{ position: absolute; bottom: 0; left: 0; right: 0; text-align: center; }
.donut-legend{ flex: 1; display: flex; flex-direction: column; gap: 10px; }
.dl-item{ display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dl-sw{ width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.dl-lbl{ flex: 1; }
.dl-val{ font-size: 13px; color: var(--color-ink-2); }

/* line charts */
.line-stage{ position: relative; height: 180px; margin-bottom: 12px; }
.line-stage svg{ width: 100%; height: 100%; overflow: visible; }
.line-axis{ display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 8px; }
.forecast-tick{ color: var(--color-accent); font-weight: 500; }

.spark-list{ display: flex; flex-direction: column; gap: 14px; }
.spark-row{ display: flex; align-items: center; gap: 16px; }
.spark-info{ flex: 1; display: flex; flex-direction: column; gap: 2px; }
.spark-name{ font-size: 13px; font-weight: 500; }
.spark-line{ width: 100px; height: 24px; }
.spark-val{ font-size: 13px; font-weight: 500; min-width: 80px; text-align: right; }

/* ============================================================
   CASH FLOW (14)
   ============================================================ */
.cashflow-bar{ margin-bottom: 20px; }
.cf-controls{ display: flex; align-items: center; gap: 10px; }

.cashflow-rail{
  display: flex; gap: 16px; overflow-x: auto; padding: 8px 4px 24px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  margin: 0 -80px 32px;
  padding-left: 80px; padding-right: 80px;
}
.cashflow-rail::-webkit-scrollbar{ height: 8px; }
.cashflow-rail::-webkit-scrollbar-track{ background: transparent; }
.cashflow-rail::-webkit-scrollbar-thumb{ background: var(--color-border-strong); border-radius: 999px; }

.cf-card{
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  transition: box-shadow var(--dur-base), transform var(--dur-base), border-color var(--dur-base);
}
.cf-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cf-card-selected{ background: var(--color-accent-tint); border-color: var(--color-accent); border-width: 2px; box-shadow: var(--shadow-md); padding: 23px; }
.cf-card-negative{ background: var(--color-caution-tint); border-color: var(--color-caution); }
.cf-card-forecast{ border-style: dashed; background: var(--color-surface); }

.cf-head{ display: flex; align-items: baseline; gap: 10px; }
.cf-month{ font-size: 24px; font-weight: 500; letter-spacing: -0.015em; }
.cf-year{ font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-3); margin-right: auto; }
.cf-trend{ height: 28px; padding: 0 4px; }
.cf-trend svg{ width: 100%; height: 100%; }

.cf-figures{ display: flex; flex-direction: column; gap: 0; }
.cf-fig{ display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-top: 1px solid oklch(0 0 0 / 0.05); }
.cf-fig:first-child{ border-top: 0; padding-top: 0; }
.cf-fig-lbl{ font-size: 12px; color: var(--color-ink-2); }
.cf-fig-val{ font-size: 13px; font-weight: 500; }
.cf-fig-bold{ padding: 10px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: 4px 0; }
.cf-fig-bold .cf-fig-lbl{ font-weight: 500; color: var(--color-ink); }
.cf-fig-bold .cf-fig-val{ font-size: 16px; }

.cf-buddy-note{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px;
  background: var(--color-surface);
  border-radius: 10px;
  border: 1px solid var(--color-caution);
  border-left-width: 3px;
}
.cf-buddy-ic{
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--color-accent); color: white;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  flex-shrink: 0;
}
.cf-buddy-msg{ font-size: 12px; color: var(--color-ink-1); line-height: 1.45; }

.cf-progress{ display: flex; flex-direction: column; gap: 6px; }
.cf-progress-head{ display: flex; justify-content: space-between; align-items: baseline; }
.cf-progress-head .num{ font-size: 12px; }

.cf-foot{ display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid oklch(0 0 0 / 0.06); }
.cf-net{ font-size: 13px; font-weight: 500; }
.cf-net.pos{ color: var(--color-confirm); }
.cf-net.neg{ color: var(--color-caution); }

.cf-states{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cf-state{ padding: 20px; background: var(--color-surface-1); border-radius: 12px; }
.cf-state-name{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); }
.cf-state-swatch{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 14px; margin: 12px 0; text-align: center; }
.cf-forecast-swatch{ border-style: dashed; }
.cf-state-desc{ font-size: 12px; color: var(--color-ink-2); line-height: 1.5; }

/* ============================================================
   SUMMARY BOXES (15)
   ============================================================ */
.summary-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sum-card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.sum-card:hover{ border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.sum-card-negative{ background: var(--color-caution-tint); border-color: var(--color-caution); border-left-width: 3px; }
.sum-top{ display: flex; align-items: center; gap: 10px; }
.sum-ic{ width: 32px; height: 32px; border-radius: 8px; background: var(--color-surface-1); display: grid; place-items: center; color: var(--color-ink-1); }
.sum-ic.ic-caution{ background: var(--color-caution); color: white; }
.sum-ic svg{ width: 16px; height: 16px; }
.sum-title{ font-size: 13px; color: var(--color-ink-2); font-weight: 500; }
.sum-val{ font-size: 26px; font-weight: 500; letter-spacing: -0.015em; }
.sum-row{ display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sum-delta{ font-family: var(--font-mono); font-size: 11px; }
.sum-delta.pos{ color: var(--color-confirm); }
.sum-delta.neg-soft{ color: var(--color-ink-2); }
.sum-delta.cau{ color: var(--color-caution); }
.sum-delta.neutral{ color: var(--color-ink-3); }
.sum-spark{ width: 80px; height: 20px; flex-shrink: 0; }

/* ============================================================
   TABLES (16)
   ============================================================ */
.table-wrap{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; margin-bottom: 24px; }
.table-bar{ display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--color-border); gap: 12px; flex-wrap: wrap; }
.tb-left, .tb-right{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-left .input{ min-width: 220px; }

.data-table{ width: 100%; border-collapse: collapse; }
.data-table th{
  text-align: left;
  padding: 12px 16px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-ink-3); font-weight: 500;
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border);
}
.data-table th.dt-check{ width: 40px; padding: 12px 8px 12px 20px; }
.data-table th.dt-actions{ width: 48px; }
.data-table th.dt-right{ text-align: right; }
.data-table th.dt-sort{ cursor: pointer; }
.data-table th.dt-sort::after{ content: " ⇅"; opacity: 0.4; }
.data-table th.dt-sort-asc::after{ content: " ↓"; opacity: 1; color: var(--color-accent); }
.data-table td{ padding: 14px 16px; border-bottom: 1px solid var(--color-border); font-size: 13px; vertical-align: middle; }
.data-table tr:last-child td{ border-bottom: 0; }
.data-table tr:hover td{ background: var(--color-surface-1); }
.data-table td.dt-check{ padding: 14px 8px 14px 20px; }
.data-table td.dt-right{ text-align: right; }
.data-table tr.dt-failed td{ opacity: 0.65; }
.dt-merch{ display: flex; align-items: center; gap: 10px; }
.dt-mi{ width: 32px; height: 32px; border-radius: 8px; background: var(--color-surface-1); display: inline-grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.dt-name{ font-size: 13px; font-weight: 500; }
.dt-action{ width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--color-ink-3); }
.dt-action:hover{ background: var(--color-surface-1); color: var(--color-ink); }

.table-foot{ display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid var(--color-border); }
.pagination{ display: flex; gap: 4px; align-items: center; }
.page-btn{ width: 28px; height: 28px; border-radius: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-1); border: 1px solid var(--color-border); background: var(--color-surface); }
.page-btn:hover{ background: var(--color-surface-1); }
.page-btn.on{ background: var(--color-ink); color: white; border-color: transparent; }

.table-meta-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.table-collapsed{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 20px; }
.tc-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); margin-bottom: 12px; }
.tc-card{ background: var(--color-surface-1); border-radius: 10px; padding: 14px; margin-bottom: 8px; }
.tc-card:last-child{ margin-bottom: 0; }
.tc-row1{ display: flex; align-items: center; gap: 10px; }
.tc-row2{ display: flex; gap: 6px; margin-top: 10px; padding-left: 42px; }

.table-empty{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.te-art{ width: 80px; height: 80px; }
.te-title{ font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.te-desc{ font-size: 13.5px; color: var(--color-ink-2); max-width: 36ch; line-height: 1.5; }
.te-actions{ display: flex; gap: 8px; margin-top: 8px; }

/* ============================================================
   BANNERS (17)
   ============================================================ */
.banner-hero{
  background: linear-gradient(135deg, var(--color-accent) 0%, oklch(0.50 0.22 295) 100%);
  color: white;
  border-radius: 24px;
  padding: 48px;
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.banner-hero::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, oklch(1 0 0 / 0.10), transparent 50%),
    linear-gradient(to right, oklch(1 0 0 / 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 0.06) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
}
.bh-left{ position: relative; z-index: 1; }
.bh-left h3{ margin: 16px 0 12px; font-size: 36px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.bh-left p{ margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: oklch(1 0 0 / 0.8); max-width: 44ch; }
.bh-cta{ display: flex; gap: 10px; }
.banner-hero .btn-confirm{ background: white; color: var(--color-accent); }
.banner-hero .btn-ghost{ color: white; border-color: oklch(1 0 0 / 0.3); }
.bh-right{ position: relative; z-index: 1; }
.bh-stack{ display: flex; flex-direction: column; gap: 12px; }
.bh-tile{ background: oklch(1 0 0 / 0.08); border: 1px solid oklch(1 0 0 / 0.15); backdrop-filter: blur(8px); border-radius: 12px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; color: white; }
.bh-tile .mono-meta{ color: oklch(1 0 0 / 0.6); }
.bh-t1{ transform: translateX(-12px); }
.bh-t2{ transform: translateX(8px); }
.bh-t3{ transform: translateX(-4px); }

.banner-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.banner-context{ display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--color-accent-tint); border-radius: 12px; }
.bc-ic{ width: 36px; height: 36px; border-radius: 999px; background: var(--color-accent); color: white; display: grid; place-items: center; font-size: 16px; }
.bc-body{ flex: 1; }
.bc-title{ font-size: 14px; font-weight: 500; }
.bc-msg{ font-size: 12.5px; color: var(--color-ink-2); margin-top: 2px; }
.bc-x{ width: 24px; height: 24px; color: var(--color-ink-3); font-size: 12px; }

.banner-inline{ display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--color-surface-inv); color: white; border-radius: 12px; position: relative; overflow: hidden; }
.bi-bar{ position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-accent); }
.bi-body{ flex: 1; padding-left: 6px; }
.bi-eyebrow{ color: oklch(1 0 0 / 0.5) !important; margin-bottom: 4px; }
.bi-title{ font-size: 14px; font-weight: 500; }
.bi-msg{ font-size: 12.5px; color: oklch(1 0 0 / 0.7); margin-top: 2px; }
.banner-inline .btn{ background: white; color: var(--color-ink); border-color: transparent; }

.banner-mobile-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bm-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: 240px; position: relative; overflow: hidden; }
.bm-card-1{ background: oklch(0.96 0.04 285); border-color: transparent; }
.bm-card-2{ background: oklch(0.96 0.06 65); border-color: transparent; }
.bm-card-3{ background: var(--color-surface-inv); color: white; border-color: transparent; }
.bm-step{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); }
.bm-card-3 .bm-step{ color: oklch(1 0 0 / 0.5); }
.bm-card h4{ margin: 8px 0 4px; font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.bm-card p{ margin: 0 0 auto; font-size: 13px; color: var(--color-ink-2); line-height: 1.55; }
.bm-card-3 p{ color: oklch(1 0 0 / 0.7); }
.bm-card-3 .btn-confirm{ background: var(--color-confirm); color: white; }

/* ============================================================
   RESPONSIVE TRIO (18)
   ============================================================ */
.resp-trio{ display: grid; grid-template-columns: 1.4fr 1fr 0.6fr; gap: 16px; margin-bottom: 32px; align-items: end; }
.resp-frame{ display: flex; flex-direction: column; gap: 10px; }
.resp-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); padding: 0 4px; }

/* WEB */
.rw-chrome{ background: var(--color-surface-1); border-radius: 12px 12px 0 0; padding: 8px 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-border); border-bottom: 0; }
.rw-dot{ width: 8px; height: 8px; border-radius: 999px; background: var(--color-border-strong); }
.rw-url{ flex: 1; max-width: 260px; background: var(--color-surface); padding: 4px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-2); text-align: center; margin: 0 auto; }
.rw-app{ display: grid; grid-template-columns: 140px 1fr; min-height: 380px; border: 1px solid var(--color-border); border-radius: 0 0 12px 12px; overflow: hidden; }
.rw-side{ background: var(--color-surface); border-right: 1px solid var(--color-border); padding: 14px 10px; display: flex; flex-direction: column; gap: 1px; }
.rw-side-brand{ padding: 4px 8px 12px; }
.rw-side-item{ padding: 6px 10px; font-size: 11px; color: var(--color-ink-1); border-radius: 5px; }
.rw-side-item.on{ background: var(--color-surface-1); font-weight: 500; }
.rw-main{ background: var(--color-surface-1); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.rw-bar{ display: flex; justify-content: space-between; align-items: center; }
.rw-h1{ font-size: 14px; font-weight: 500; }
.rw-bar-r{ display: flex; gap: 6px; align-items: center; }
.rw-eye{ width: 22px; height: 22px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); display: grid; place-items: center; font-size: 9px; color: var(--color-ink-1); }
.rw-btn-confirm{ background: var(--color-confirm); color: white; padding: 4px 8px; border-radius: 5px; font-size: 10px; font-weight: 500; }
.rw-kpis{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rw-kpi{ background: var(--color-surface); border-radius: 6px; padding: 8px 10px; }
.rw-kpi-lbl{ font-family: var(--font-mono); font-size: 8px; color: var(--color-ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.rw-kpi-val{ font-family: var(--font-mono); font-size: 11px; font-weight: 500; margin-top: 2px; }
.rw-charts{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; }
.rw-chart{ background: var(--color-surface); border-radius: 6px; padding: 10px; }
.rw-chart-lbl{ font-family: var(--font-mono); font-size: 9px; color: var(--color-ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.rw-chart svg{ width: 100%; height: 50px; }
.rw-donut{ background: var(--color-surface); border-radius: 6px; padding: 10px; background-image: conic-gradient(var(--color-accent) 0 38%, oklch(0.72 0.14 35) 38% 64%, oklch(0.68 0.14 265) 64% 82%, oklch(0.72 0.14 320) 82% 92%, var(--color-surface-2) 92% 100%); background-size: 50px 50px; background-repeat: no-repeat; background-position: center; }
.rw-tx{ background: var(--color-surface); border-radius: 6px; padding: 10px; }
.rw-tx-row{ display: flex; justify-content: space-between; font-size: 10px; padding: 4px 0; border-top: 1px solid var(--color-border); }
.rw-tx-row:first-child{ border-top: 0; }
.rw-tx-row .num{ font-size: 10px; }

/* TABLET */
.rt-bezel{ background: var(--color-surface-inv); border-radius: 22px; padding: 8px; box-shadow: var(--shadow-lg); }
.rt-screen{ background: var(--color-surface-1); border-radius: 16px; padding: 14px; min-height: 380px; display: flex; flex-direction: column; gap: 10px; }
.rt-bar{ display: flex; align-items: center; gap: 10px; }
.rt-burger{ width: 16px; height: 12px; position: relative; }
.rt-burger::before, .rt-burger::after{ content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--color-ink); border-radius: 1px; }
.rt-burger::before{ top: 0; }
.rt-burger::after{ bottom: 0; }
.rt-bar > .wm{ margin-right: auto; }
.rt-eye{ width: 22px; height: 22px; border-radius: 999px; background: var(--color-surface); display: grid; place-items: center; font-size: 9px; }
.rt-h{ font-size: 16px; font-weight: 500; }
.rt-kpis{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rt-kpi{ background: var(--color-surface); border-radius: 8px; padding: 12px; }
.rt-kpi-lbl{ font-family: var(--font-mono); font-size: 9px; color: var(--color-ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.rt-kpi-val{ font-family: var(--font-mono); font-size: 14px; font-weight: 500; margin-top: 4px; }
.rt-chart{ background: var(--color-surface); border-radius: 8px; padding: 12px; }
.rt-chart-lbl{ font-family: var(--font-mono); font-size: 9px; color: var(--color-ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.rt-chart svg{ width: 100%; height: 50px; }
.rt-tx{ background: var(--color-surface); border-radius: 8px; padding: 12px; }
.rt-tx-row{ display: flex; justify-content: space-between; font-size: 11px; padding: 5px 0; border-top: 1px solid var(--color-border); }
.rt-tx-row:first-child{ border-top: 0; }
.rt-tx-row .num{ font-size: 11px; }
.rt-tabs{ display: flex; justify-content: space-around; padding-top: 6px; margin-top: auto; border-top: 1px solid var(--color-border); }
.rt-tab{ font-size: 10px; color: var(--color-ink-3); padding: 4px 6px; }
.rt-tab.on{ color: var(--color-ink); font-weight: 500; }

/* MOBILE */
.rm-bezel{ background: var(--color-surface-inv); border-radius: 30px; padding: 6px; box-shadow: var(--shadow-lg); position: relative; aspect-ratio: 9 / 19; }
.rm-notch{ position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 60px; height: 16px; background: oklch(0.08 0 0); border-radius: 999px; z-index: 2; }
.rm-screen{ background: var(--color-surface); border-radius: 24px; height: 100%; overflow: hidden; padding: 24px 12px 6px; display: flex; flex-direction: column; gap: 8px; }
.rm-status{ display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; font-weight: 600; padding: 4px 4px 0; }
.rm-head{ display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
.rm-greet{ font-family: var(--font-mono); font-size: 8px; color: var(--color-ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.rm-nm{ font-size: 13px; font-weight: 500; }
.rm-eye{ width: 22px; height: 22px; border-radius: 999px; background: var(--color-surface-1); display: grid; place-items: center; font-size: 9px; }
.rm-balance{ background: var(--color-surface-inv); color: white; border-radius: 12px; padding: 12px; }
.rm-bal-lbl{ font-family: var(--font-mono); font-size: 8px; color: oklch(1 0 0 / 0.5); letter-spacing: 0.08em; text-transform: uppercase; }
.rm-bal-val{ font-family: var(--font-mono); font-size: 18px; font-weight: 500; margin-top: 4px; }
.rm-bal-d{ font-family: var(--font-mono); font-size: 9px; color: var(--color-confirm); margin-top: 6px; }
.rm-actions{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.rm-act{ background: var(--color-surface-1); border-radius: 6px; padding: 8px 0; text-align: center; font-size: 9px; font-weight: 500; }
.rm-recent-h{ display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.rm-recent-h > span:first-child{ font-size: 11px; font-weight: 500; }
.rm-recent-h > .mono-meta{ font-size: 8px; }
.rm-tx{ display: flex; justify-content: space-between; padding: 4px 4px; font-size: 10px; border-top: 1px solid var(--color-border); }
.rm-tx:first-of-type{ border-top: 0; }
.rm-tx .num{ font-size: 10px; font-weight: 500; }
.rm-tab{ display: flex; justify-content: space-around; padding: 6px 0 4px; margin-top: auto; border-top: 1px solid var(--color-border); }
.rm-tb{ font-size: 8px; color: var(--color-ink-3); }
.rm-tb.on{ color: var(--color-ink); font-weight: 500; }

.resp-notes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rn-card{ background: var(--color-surface-1); border-radius: 12px; padding: 20px; }
.rn-num{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--color-ink-3); }
.rn-title{ font-size: 14px; font-weight: 500; margin: 6px 0; }
.rn-desc{ font-size: 12.5px; color: var(--color-ink-2); line-height: 1.5; }

/* ============================================================
   TOKENS (19)
   ============================================================ */
.token-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.token-card{ border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: var(--color-surface); }
.tc-hd{ padding: 12px 20px; background: var(--color-surface); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); }
.tc-nm{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-2); }
.tc-lang{ font-family: var(--font-mono); font-size: 10px; color: var(--color-ink-3); }
.token-card pre{ margin: 0; padding: 20px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: var(--color-ink-1); background: var(--color-surface-1); overflow-x: auto; max-height: 480px; }
.token-card .k{ color: var(--color-ink-3); }
.token-card .v{ color: var(--color-accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ padding: 64px 0 96px; border-top: 1px solid var(--color-border); margin-top: 96px; }
.foot-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand{ display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.foot-tag{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-3); }
.foot h5{ margin: 0 0 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-3); font-weight: 500; }
.foot ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--color-ink-1); }
.foot .pitch{ font-size: 17px; line-height: 1.5; color: var(--color-ink); max-width: 38ch; margin: 0; }
.foot .pitch em{ font-family: var(--font-serif); font-style: italic; }
.foot-meta{ margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-3); letter-spacing: 0.05em; text-transform: uppercase; }

/* ============================================================
   RESPONSIVE — system itself
   ============================================================ */
@media (max-width: 1100px){
  .app{ grid-template-columns: 1fr; }
  .side{ position: relative; height: auto; }
  .main{ padding: 32px 32px 64px; }
  .audit{ grid-template-columns: 1fr; }
  .audit-head{ display: none; }
  .hero-grid{ grid-template-columns: 1fr; }
  .principles, .logo-grid, .brand-card-row, .swatch-grid, .role-grid, .type-trio, .chart-grid, .summary-grid, .resp-trio, .banner-row, .banner-mobile-row, .token-grid, .privacy-stage{ grid-template-columns: 1fr; }
  .dos-donts, .num-showcase, .sem-grid, .cf-states, .privacy-notes, .resp-notes{ grid-template-columns: repeat(2, 1fr); }
  .summary-grid, .icon-grid{ grid-template-columns: repeat(4, 1fr); }
  .state-grid, .elev-grid{ grid-template-columns: repeat(3, 1fr); }
  .spacing-grid, .radius-grid{ grid-template-columns: repeat(4, 1fr); }
  .banner-hero{ grid-template-columns: 1fr; padding: 32px; }
  .bh-left h3{ font-size: 28px; }
  .cashflow-rail{ margin: 0 -32px 32px; padding-left: 32px; padding-right: 32px; }
}