/* ===== TOKENS (compressed — same as showcase) ===== */
:root {
  --paper:#f6f1e8; --paper-2:#efe9dd; --surface:#fff;
  --ink:#1c1a17; --ink-2:#56504a; --ink-3:#8a8279;
  --line:#ddd4c2; --line-soft:#e8e1d1;
  --accent:#6d3b7a; --accent-soft:#efe2f2; --accent-deep:#5a2e65; --accent-glow:rgba(109,59,122,.12);
  --olive:#5d6b2f; --olive-soft:#e7ebd5;
  --ochre:#c98a1b; --ochre-soft:#fae9c4;
  --clay:#b34a2a; --clay-soft:#f6dacc;
  --sky:#2e5e8e; --sky-soft:#d8e5f2;
  --ok:var(--olive); --warn:var(--ochre); --err:var(--clay); --info:var(--sky);
  --font-serif:'DM Serif Display',serif; --font-sans:'Geist',sans-serif; --font-mono:'Geist Mono',monospace;
  --focus-ring:0 0 0 3px var(--accent-glow);
  color-scheme: light;
}
[data-theme="meadow"] { --paper:#f1f0e4; --paper-2:#e7ebd5; --ink:#1a1e14; --ink-2:#4f5644; --ink-3:#858a74; --line:#d4d8c2; --line-soft:#e0e3d1; --accent:#5d6b2f; --accent-soft:#e7ebd5; --accent-deep:#475220; --accent-glow:rgba(93,107,47,.14); }
[data-theme="bloom"]  { --paper:#f7eff3; --paper-2:#efe2f2; --ink:#1f141e; --ink-2:#574652; --ink-3:#8b7d87; --line:#e3d0dd; --line-soft:#ecdde6; --accent:#8a3f97; --accent-soft:#f0dff4; --accent-deep:#6d3077; --accent-glow:rgba(138,63,151,.14); }
[data-theme="dusk"]   { --paper:#1c1b22; --paper-2:#25242c; --surface:#2d2c36; --ink:#f0ece2; --ink-2:#b6b1a6; --ink-3:#8a857a; --line:#3a3945; --line-soft:#2f2e38; --accent:#e5a05c; --accent-soft:rgba(229,160,92,.15); --accent-deep:#d48c45; --accent-glow:rgba(229,160,92,.25); color-scheme:dark; }

/* ===== RESET & BASE ===== */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--paper); color:var(--ink); font:400 15px/1.55 var(--font-sans);
  -webkit-font-smoothing:antialiased; transition: background-color .35s ease, color .35s ease; }
button { font:inherit; }

/* ===== TOP CHROME (template switcher) ===== */
.top-chrome { position:sticky; top:0; z-index:40; background:var(--paper);
  border-bottom:1px solid var(--line); padding:10px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.top-chrome__brand { display:flex; align-items:center; gap:10px; font:400 17px/1 var(--font-serif); color:var(--ink); }
.top-chrome__brand .dot { width:22px; height:22px; border-radius:50%; background:var(--accent); display:inline-block; }
.top-chrome__tabs { display:flex; gap:2px; overflow-x:auto; flex:1; scrollbar-width:none; }
.top-chrome__tabs::-webkit-scrollbar { display:none; }
.tpl-tab { padding:7px 12px; border-radius:8px; border:0; background:transparent; cursor:pointer;
  font:500 12px/1 var(--font-mono); letter-spacing:.04em; color:var(--ink-3); white-space:nowrap; }
.tpl-tab:hover { color:var(--ink); background:var(--paper-2); }
.tpl-tab.active { background:var(--ink); color:var(--paper); }
[data-theme="dusk"] .tpl-tab.active { background:var(--surface); color:var(--ink); }
.top-chrome__theme { display:flex; gap:6px; padding:3px; background:var(--paper-2); border-radius:10px; }
.theme-sw { width:22px; height:22px; border-radius:50%; border:1.5px solid transparent; cursor:pointer; padding:0; }
.theme-sw.active { border-color:var(--ink); }
.theme-sw[data-t="cream"]  { background:#f6f1e8; border-color:#ddd4c2; }
.theme-sw[data-t="meadow"] { background:#5d6b2f; }
.theme-sw[data-t="bloom"]  { background:#8a3f97; }
.theme-sw[data-t="dusk"]   { background:#1c1b22; border-color:#3a3945; }

/* ===== SHARED PRIMITIVES (condensed) ===== */
.label { font:500 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px 24px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.panel-head h3 { margin:0; font:400 20px/1.2 var(--font-serif); color:var(--ink); letter-spacing:-.01em; }
.panel-head h3 em { font-style:italic; }
.sub { color:var(--ink-3); margin:0; font:400 14px/1.5 var(--font-sans); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border-radius:999px; font:500 13px/1 var(--font-sans); color:var(--ink);
  background:var(--surface); border:1px solid var(--line); cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, box-shadow .18s; }
.btn:hover { background:var(--paper-2); }
.btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.btn--primary { background:var(--accent); border-color:var(--accent); color:#fff; }
[data-theme="dusk"] .btn--primary { color:var(--paper-2); }
.btn--primary:hover { background:var(--accent-deep); }
.btn--ghost { background:transparent; }
.btn--danger { background:var(--err); border-color:var(--err); color:#fff; }
.btn--danger:hover { background:color-mix(in oklab, var(--err) 80%, #000); }
.btn--block { width:100%; }
.btn--sm { padding:6px 10px; font-size:12px; }
.btn--lg { padding:13px 22px; font-size:14px; }

.chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  font:500 12px/1 var(--font-sans); color:var(--ink-2); cursor:pointer; }
.chip:hover { background:var(--paper-2); }
.chip--active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
[data-theme="dusk"] .chip--active { background:var(--surface); color:var(--ink); }

.pill { display:inline-flex; padding:4px 10px; border-radius:999px;
  font:500 11px/1.4 var(--font-sans); color:var(--ink-2); background:var(--paper-2);
  letter-spacing:.01em; }
.pill--ok    { background:var(--olive-soft); color:var(--olive); }
.pill--warn  { background:var(--ochre-soft); color:var(--ochre); }
.pill--err   { background:var(--clay-soft); color:var(--clay); }
.pill--info  { background:var(--sky-soft); color:var(--sky); }

.o-input, .input { width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink); font:400 14px/1.2 var(--font-sans); }
.o-input:focus { outline:2px solid var(--accent); outline-offset:2px; border-color:transparent; }
.o-field { display:grid; gap:6px; }
.o-field__label { font:500 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.o-form { display:grid; gap:14px; }
.o-form__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.o-form__actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
.o-textarea { width:100%; padding:12px 14px; min-height:80px; resize:vertical; background:var(--surface); border:1px solid var(--line); border-radius:12px; font:400 14px/1.5 var(--font-sans); color:var(--ink); }
.o-search { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.o-search input { flex:1; border:0; background:none; outline:0; font:400 13px var(--font-sans); color:var(--ink); }
.o-search input::placeholder { color:var(--ink-3); }
.o-search__icon { color:var(--ink-3); }
.o-kbd { font:500 11px var(--font-mono); color:var(--ink-3); padding:2px 6px; background:var(--paper-2); border:1px solid var(--line); border-radius:6px; }
.o-link { color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-soft); }
.o-link:hover { color:var(--ink); border-bottom-color:var(--ink); }

.o-divider { border:0; height:1px; background:var(--line); margin:0; }
.o-divider--label { display:flex; align-items:center; gap:12px; background:none; height:auto;
  font:500 10px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.o-divider--label::before, .o-divider--label::after { content:""; flex:1; height:1px; background:var(--line); }

.o-checkbox { appearance:none; -webkit-appearance:none; width:18px; height:18px; border:1.5px solid var(--line); border-radius:5px; background:var(--surface); cursor:pointer; display:inline-grid; place-content:center; }
.o-checkbox:checked { background:var(--accent); border-color:var(--accent); }
.o-checkbox:checked::after { content:""; width:10px; height:6px; border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px); }
.o-checkbox-wrap { display:inline-flex; align-items:center; gap:9px; font:400 13px var(--font-sans); color:var(--ink); cursor:pointer; }
.o-radio { appearance:none; width:18px; height:18px; border:1.5px solid var(--line); border-radius:50%; background:var(--surface); cursor:pointer; display:inline-grid; place-content:center; }
.o-radio:checked { border-color:var(--accent); }
.o-radio:checked::after { content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.o-radio-wrap { display:inline-flex; align-items:center; gap:9px; font:400 13px var(--font-sans); color:var(--ink); cursor:pointer; }
.o-switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; position:relative; }
.o-switch input { position:absolute; opacity:0; pointer-events:none; }
.o-switch__track { width:36px; height:20px; border-radius:999px; background:var(--line); position:relative; transition:background .2s; }
.o-switch__thumb { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.15); transition:transform .2s; }
.o-switch input:checked + .o-switch__track { background:var(--accent); }
.o-switch input:checked + .o-switch__track .o-switch__thumb { transform:translateX(16px); }
.o-segmented { display:inline-flex; padding:3px; gap:2px; background:var(--paper-2); border:1px solid var(--line); border-radius:11px; }
.o-segmented button { padding:6px 12px; border:0; background:transparent; border-radius:8px; font:500 12px var(--font-sans); color:var(--ink-2); cursor:pointer; }
.o-segmented button[aria-checked="true"] { background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.05); }

.o-slider { -webkit-appearance:none; width:100%; height:18px; background:transparent; --v:60%; }
.o-slider::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(to right, var(--accent) 0 var(--v), var(--line) var(--v) 100%); }
.o-slider::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; margin-top:-6px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); }

.o-select { position:relative; }
.o-select select { appearance:none; -webkit-appearance:none; width:100%; padding:9px 32px 9px 12px; background:var(--surface); border:1px solid var(--line); border-radius:11px; font:400 13px var(--font-sans); color:var(--ink); cursor:pointer; }
.o-select__chev { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:10px; pointer-events:none; }

.o-avatar { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; font:500 11px var(--font-mono); color:var(--ink); flex:0 0 auto; }
.o-avatar-stack { display:inline-flex; }
.o-avatar-stack .o-avatar { border:2px solid var(--surface); margin-left:-8px; }
.o-avatar-stack .o-avatar:first-child { margin-left:0; }

.o-icon-btn { width:32px; height:32px; display:inline-grid; place-items:center; background:none; border:0; border-radius:9px; cursor:pointer; color:var(--ink-2); font-size:14px; }
.o-icon-btn:hover { background:var(--paper-2); color:var(--ink); }

.o-breadcrumbs ol { display:flex; align-items:center; gap:8px; padding:0; margin:0; list-style:none; font:500 12px var(--font-mono); color:var(--ink-3); letter-spacing:.04em; }
.o-breadcrumbs li + li::before { content:"/"; opacity:.5; margin-right:4px; }
.o-breadcrumbs a { color:var(--ink-2); text-decoration:none; }
.o-breadcrumbs a:hover { color:var(--accent); }
.o-breadcrumbs [aria-current="page"] { color:var(--ink); }

.o-alert { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:13px; background:var(--paper-2); border:1px solid var(--line); }
.o-alert__dot { width:9px; height:9px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
.o-alert__body { flex:1; font:400 13px/1.45 var(--font-sans); color:var(--ink-2); }
.o-alert__body strong { color:var(--ink); font-weight:500; }
.o-alert__body em { font-family:var(--font-serif); font-style:italic; }
.o-alert--info { background:var(--sky-soft); border-color:transparent; }
.o-alert--info .o-alert__dot { background:var(--info); }
.o-alert--ok { background:var(--olive-soft); border-color:transparent; }
.o-alert--ok .o-alert__dot { background:var(--ok); }

.o-progress__track { height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.o-progress__fill { height:100%; background:var(--accent); border-radius:inherit; }
.o-num { font-variant-numeric:tabular-nums; font-family:var(--font-mono); }

.o-table-wrap { border:1px solid var(--line); border-radius:16px; background:var(--surface); overflow:hidden; }
.o-table { width:100%; border-collapse:collapse; font:400 13px var(--font-sans); color:var(--ink); }
.o-table thead th { text-align:left; font:500 10px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:12px 14px; border-bottom:1px solid var(--line); background:var(--paper-2); }
.o-table tbody td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.o-table tbody tr:last-child td { border-bottom:0; }
.o-table tbody tr:hover { background:rgba(0,0,0,.02); }

.o-stat { display:flex; flex-direction:column; gap:4px; }
.o-stat__label { font:500 11px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.o-stat__value { font:400 34px/1 var(--font-serif); color:var(--ink); letter-spacing:-.01em; }
.o-stat__delta { font:500 12px var(--font-mono); color:var(--ink-3); }
.o-stat__delta--up { color:var(--ok); }
.o-stat__delta--down { color:var(--err); }

.o-callout { margin:0; padding:18px 22px; background:var(--paper-2); border-left:3px solid var(--accent); border-radius:4px 14px 14px 4px; }
.o-callout p { margin:0 0 6px; font:400 17px/1.5 var(--font-serif); color:var(--ink); font-style:italic; }
.o-callout footer { font:500 11px var(--font-mono); color:var(--ink-3); }

.no-scrollbar { scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbar::-webkit-scrollbar { display:none; }

/* ===== TEMPLATE SWITCHER SYSTEM ===== */
.tpl { display:none; }
.tpl.active { display:block; }
.tpl-frame { padding:28px; }
.tpl-caption { max-width:920px; margin:0 auto 24px; padding:14px 18px; background:var(--paper-2); border-radius:14px; color:var(--ink-2); font:400 13px/1.5 var(--font-sans); border:1px solid var(--line-soft); }
.tpl-caption b { color:var(--ink); font-weight:500; }

/* ====================================================
   01 — AUTH / LOGIN
   ==================================================== */
.auth-shell { min-height:720px; display:grid; grid-template-columns:minmax(0,1fr) 1fr; background:var(--paper); border:1px solid var(--line); border-radius:24px; overflow:hidden; max-width:1200px; margin:0 auto; }
.auth-panel { padding:48px 56px; display:flex; flex-direction:column; gap:26px; }
.auth-brand { width:36px; height:36px; border-radius:12px; background:var(--accent); position:relative; overflow:hidden; }
.auth-brand::before { content:""; position:absolute; right:-6px; bottom:-6px; width:22px; height:22px; border-radius:50%; background:var(--ochre); }
.auth-head h1 { margin:8px 0 6px; font:400 42px/1.05 var(--font-serif); letter-spacing:-.02em; color:var(--ink); }
.auth-head h1 em { font-style:italic; }
.auth-row { display:flex; justify-content:space-between; align-items:center; margin:-2px 0 4px; font-size:13px; }
.auth-foot { margin-top:auto; font:400 13px var(--font-sans); color:var(--ink-3); }
.auth-art { position:relative; background:var(--paper-2); overflow:hidden; }
.auth-art svg { position:absolute; inset:0; width:100%; height:100%; }
.auth-art .o-callout { position:absolute; left:40px; bottom:40px; max-width:300px; background:var(--surface); }

/* ====================================================
   02 — SETTINGS
   ==================================================== */
.app-shell { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:220px 1fr; background:var(--paper); border:1px solid var(--line); border-radius:24px; overflow:hidden; min-height:720px; }
.app-side { background:var(--paper-2); border-right:1px solid var(--line); padding:22px 14px; display:flex; flex-direction:column; gap:18px; overflow-y:auto; scrollbar-width:none; }
.app-side::-webkit-scrollbar { display:none; }
.app-side__brand { display:flex; align-items:center; gap:10px; padding:4px 10px; font:400 17px var(--font-serif); }
.app-side__brand .m { width:28px; height:28px; border-radius:9px; background:var(--accent); }
.app-nav { display:flex; flex-direction:column; gap:1px; }
.app-nav__label { padding:10px 12px 6px; font:500 10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.app-nav a { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:9px; text-decoration:none; color:var(--ink-2); font:500 13px var(--font-sans); }
.app-nav a:hover { background:var(--surface); color:var(--ink); }
.app-nav a.active { background:var(--ink); color:var(--paper); }
[data-theme="dusk"] .app-nav a.active { background:var(--surface); color:var(--ink); }
.app-nav a .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); }
.app-main { padding:32px 40px; overflow-y:auto; }
.page-head { margin-bottom:24px; }
.page-head h1 { margin:4px 0 0; font:400 34px/1.1 var(--font-serif); color:var(--ink); letter-spacing:-.02em; }
.page-head h1 em { font-style:italic; }
.page-head--split { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.page-head__actions { display:flex; gap:8px; align-items:center; }

.settings-body { display:grid; grid-template-columns:200px 1fr; gap:32px; }
.settings-nav { display:flex; flex-direction:column; gap:2px; position:sticky; top:0; align-self:start; }
.settings-nav a { padding:8px 12px; border-radius:9px; font:500 13px var(--font-sans); color:var(--ink-2); text-decoration:none; cursor:pointer; }
.settings-nav a:hover { background:var(--paper-2); color:var(--ink); }
.settings-nav a.active { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.settings-nav a.danger { color:var(--err); margin-top:14px; }
/* override .tpl-tab styling when used inside settings-nav so it keeps the editorial feel */
.settings-nav.sub-switch { display:flex; flex-direction:column; gap:2px; margin-bottom:0; justify-content:flex-start; }
.settings-nav.sub-switch .tpl-tab { padding:8px 12px; border-radius:9px; font:500 13px var(--font-sans); letter-spacing:0; color:var(--ink-2); background:transparent; text-align:left; text-transform:none; }
.settings-nav.sub-switch .tpl-tab:hover { background:var(--paper-2); color:var(--ink); }
.settings-nav.sub-switch .tpl-tab.active { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.settings-content { display:grid; gap:18px; }
.settings-list { list-style:none; padding:0; margin:0; }
.settings-list li { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); gap:16px; }
.settings-list li:last-child { border-bottom:0; }
.settings-list b { display:block; font:500 14px var(--font-sans); color:var(--ink); }
.settings-list span.meta { font:400 13px var(--font-sans); color:var(--ink-3); }
.avatar-row { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.panel--danger { border-color:var(--err); background:color-mix(in oklab, var(--clay-soft) 30%, var(--surface)); }
.danger-row { display:flex; justify-content:space-between; align-items:center; gap:16px; }

/* ====================================================
   03 — DASHBOARD
   ==================================================== */
.kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.kpi-card { padding:20px 22px; background:var(--surface); border:1px solid var(--line); border-radius:18px; position:relative; overflow:hidden; }
.kpi-card::after { content:""; position:absolute; right:-30px; bottom:-30px; width:80px; height:80px; border-radius:50%; border:2px dashed var(--line); }
.kpi-card:nth-child(2)::after { border-color:var(--ochre); opacity:.4; }
.kpi-card:nth-child(3)::after { border-color:var(--olive); opacity:.4; }
.kpi-card:nth-child(4)::after { border-color:var(--clay); opacity:.4; }

.chart-plot { aspect-ratio:3/1; background:var(--paper-2); border-radius:14px; padding:16px; position:relative; overflow:hidden; }
.chart-plot svg { width:100%; height:100%; }
.dash-lower { display:grid; grid-template-columns:1.2fr 1fr; gap:16px; margin-top:16px; }

.o-timeline { list-style:none; padding:0; margin:0; display:grid; gap:14px; position:relative; }
.o-timeline::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--line); }
.o-timeline li { position:relative; padding-left:26px; }
.o-timeline li::before { content:""; position:absolute; left:2px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); }
.o-timeline time { display:block; font:500 10px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px; }
.o-timeline p { margin:0; font:400 13px var(--font-sans); color:var(--ink); }
.o-timeline em { font-family:var(--font-serif); font-style:italic; }

.leaderboard { list-style:none; padding:0; margin:0; }
.leaderboard li { display:grid; grid-template-columns:24px auto 1fr auto; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.leaderboard li:last-child { border-bottom:0; }
.leaderboard .rank { font:400 16px var(--font-serif); color:var(--ink-3); }
.leaderboard b { font:500 13px var(--font-sans); color:var(--ink); }

/* ====================================================
   04 — COMMERCE PLP
   ==================================================== */
.plp-body { display:grid; grid-template-columns:220px 1fr; gap:28px; }
.filter-group { padding:14px 0; border-bottom:1px solid var(--line); display:grid; gap:8px; }
.filter-group:last-child { border-bottom:0; }
.filter-group h4 { margin:0 0 4px; font:500 11px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.plp-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
.plp-toolbar__actions { display:flex; gap:10px; align-items:center; }
.plp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px; }
.product-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.product-card:hover { transform:translateY(-2px); box-shadow:0 14px 32px -18px rgba(32,28,22,.18); }
.product-card__media { aspect-ratio:4/5; display:block; position:relative; }
.product-card__tag { position:absolute; top:10px; left:10px; font:500 10px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; background:var(--surface); color:var(--ink-2); padding:4px 7px; border-radius:6px; }
.product-card__body { padding:12px 14px 14px; display:grid; gap:3px; }
.product-card__brand { margin:0; font:500 10px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.product-card h3 { margin:2px 0; font:400 15px/1.3 var(--font-serif); letter-spacing:-.01em; color:var(--ink); }
.product-card__foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.price { font:500 14px var(--font-mono); color:var(--ink); font-variant-numeric:tabular-nums; }

/* ====================================================
   05 — COMMERCE PDP
   ==================================================== */
.pdp-top { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:start; margin-top:14px; }
.pdp-gallery { display:grid; gap:10px; }
.pdp-hero { aspect-ratio:4/5; border-radius:20px; }
.pdp-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.pdp-thumb { aspect-ratio:1; border-radius:12px; border:2px solid transparent; cursor:pointer; padding:0; }
.pdp-thumb.active { border-color:var(--accent); }
.pdp-buy { position:sticky; top:80px; }
.pdp-title { margin:6px 0 10px; font:400 38px/1.1 var(--font-serif); letter-spacing:-.02em; }
.pdp-title em { font-style:italic; }
.pdp-price-row { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.pdp-price { font:500 26px var(--font-mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.pdp-sub { color:var(--ink-2); font-size:14px; line-height:1.6; margin:0 0 20px; }
.pdp-variants { margin-bottom:18px; display:grid; gap:10px; }
.pdp-actions { display:grid; grid-template-columns:1fr auto; gap:10px; margin-bottom:16px; }
.pdp-meta { list-style:none; padding:0; margin:0; display:grid; gap:8px; font:400 13px var(--font-sans); color:var(--ink-2); }
.pdp-specs { margin-top:40px; padding-top:30px; border-top:1px solid var(--line); }
.pdp-specs h3 { font:400 22px var(--font-serif); margin:0 0 14px; }
.o-dl { display:grid; gap:10px; margin:0; }
.o-dl > div { display:grid; grid-template-columns:140px 1fr; gap:14px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.o-dl > div:last-child { border-bottom:0; }
.o-dl dt { font:500 11px var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin:0; }
.o-dl dd { margin:0; font:400 13px var(--font-sans); color:var(--ink); }
.pdp-reviews { margin-top:40px; padding-top:30px; border-top:1px solid var(--line); }
.pdp-reviews h3 { font:400 22px var(--font-serif); margin:0 0 18px; }
.pdp-reviews h3 em { font-style:italic; }
.review-summary { display:flex; gap:30px; align-items:center; margin-bottom:20px; padding:20px; background:var(--paper-2); border-radius:18px; }
.review-score { font:400 48px/1 var(--font-serif); color:var(--ink); }
.review-score span { font-size:18px; color:var(--ink-3); }

/* ====================================================
   06 — CHECKOUT
   ==================================================== */
.checkout-head { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--line); }
.checkout-head .brand { display:flex; align-items:center; gap:10px; font:400 18px var(--font-serif); }
.checkout-head .brand .m { width:24px; height:24px; border-radius:7px; background:var(--accent); }
.checkout-body { display:grid; grid-template-columns:1fr 360px; gap:40px; padding:32px 40px; }
.stepper { list-style:none; padding:0; margin:0 0 24px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.stepper li { display:flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font:500 12px var(--font-mono); color:var(--ink-3); white-space:nowrap; }
.stepper li span { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--paper-2); color:var(--ink-3); font-size:11px; }
.stepper li.done { color:var(--ink-2); }
.stepper li.done span { background:var(--ok); color:#fff; }
.stepper li.active { color:var(--ink); background:var(--accent-soft); }
.stepper li.active span { background:var(--accent); color:#fff; }
.stepper li + li::before { content:""; width:20px; height:1px; background:var(--line); }

.checkout-lines { list-style:none; padding:0; margin:0 0 16px; display:grid; gap:12px; }
.checkout-lines li { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; padding:12px; background:var(--paper-2); border-radius:12px; }
.checkout-lines .o-avatar { width:44px; height:44px; font-size:14px; }
.checkout-lines b { display:block; font:500 13px var(--font-sans); color:var(--ink); }
.checkout-lines span.qty { font:400 11px var(--font-mono); color:var(--ink-3); }
.checkout-totals { display:grid; gap:8px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:14px; }
.checkout-totals > div { display:flex; justify-content:space-between; font:400 13px var(--font-sans); color:var(--ink-2); }
.checkout-grand { font:500 15px var(--font-sans); color:var(--ink) !important; padding-top:8px; border-top:1px dashed var(--line); }

/* ====================================================
   07 — FINANCE
   ==================================================== */
.finance-hero { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; padding:36px 40px; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); color:#fff; border-radius:22px; position:relative; overflow:hidden; margin-bottom:16px; }
.finance-hero::after { content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; border:2px solid rgba(255,255,255,.12); }
.finance-hero::before { content:""; position:absolute; left:-80px; bottom:-80px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.06); }
.finance-hero .label { color:rgba(255,255,255,.7); }
.finance-balance { font:400 64px/1 var(--font-serif); color:#fff; margin:6px 0 4px; letter-spacing:-.02em; }
.finance-balance span { font-size:32px; opacity:.7; }
.finance-hero .meta { font:500 11px var(--font-mono); color:rgba(255,255,255,.6); }
.finance-hero-actions { display:grid; grid-template-columns:repeat(4, 72px); gap:10px; position:relative; z-index:1; }
.hero-action { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 0; background:rgba(255,255,255,.1); border:0; border-radius:14px; color:#fff; cursor:pointer; font:500 11px var(--font-mono); letter-spacing:.04em; }
.hero-action:hover { background:rgba(255,255,255,.18); }
.hero-action .glyph { font-size:20px; font-weight:400; }

.finance-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:16px; margin-bottom:16px; }
.finance-card { padding:24px; border-radius:18px; position:relative; min-height:180px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; }
.finance-card__label { font:500 11px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; opacity:.7; margin:0; }
.finance-card__number { font:500 22px/1 var(--font-mono); margin:6px 0; letter-spacing:.1em; }
.finance-card__name { font:500 13px var(--font-sans); margin:0; opacity:.9; }

/* ====================================================
   08 — MARKETING LANDING
   ==================================================== */
.mkt-wrap { background:var(--paper); }
.mkt-announce { text-align:center; padding:8px 20px; background:var(--accent-soft); font:500 12px var(--font-sans); color:var(--accent); }
.mkt-announce em { font-family:var(--font-serif); font-style:italic; }
.mkt-nav { display:flex; justify-content:space-between; align-items:center; padding:18px 40px; border-bottom:1px solid var(--line); }
.mkt-nav__brand { font:400 20px var(--font-serif); display:flex; align-items:center; gap:10px; }
.mkt-nav__brand .m { width:26px; height:26px; border-radius:8px; background:var(--accent); }
.mkt-nav__links { display:flex; gap:20px; }
.mkt-nav__links a { color:var(--ink-2); text-decoration:none; font:500 13px var(--font-sans); }
.mkt-nav__links a:hover { color:var(--ink); }

.mkt-hero { padding:80px 40px 60px; text-align:center; position:relative; overflow:hidden; }
.mkt-hero__pill { display:inline-flex; padding:6px 14px; border-radius:999px; background:var(--paper-2); border:1px solid var(--line); font:500 11px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:22px; }
.mkt-hero h1 { margin:0 0 20px; font:400 72px/1 var(--font-serif); letter-spacing:-.03em; color:var(--ink); max-width:900px; margin-left:auto; margin-right:auto; }
.mkt-hero h1 em { font-style:italic; color:var(--accent); }
.mkt-hero p { font-size:18px; line-height:1.6; color:var(--ink-2); max-width:620px; margin:0 auto 28px; }
.mkt-hero__actions { display:flex; gap:10px; justify-content:center; margin-bottom:60px; }
.mkt-hero__visual { max-width:900px; margin:0 auto; aspect-ratio:2/1; background:var(--paper-2); border-radius:22px; position:relative; overflow:hidden; }
.mkt-hero__visual::before { content:""; position:absolute; left:50px; top:50px; width:140px; height:140px; border-radius:50%; background:var(--accent-soft); }
.mkt-hero__visual::after { content:""; position:absolute; right:80px; bottom:60px; width:180px; height:180px; border-radius:50%; background:var(--ochre-soft); }

.mkt-logos { padding:40px; text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mkt-logos p { font:500 11px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 18px; }
.mkt-logos__row { display:flex; justify-content:center; gap:50px; opacity:.6; }
.mkt-logos__row span { font:500 16px var(--font-serif); color:var(--ink-2); }

.mkt-features { padding:80px 40px; }
.mkt-features h2 { text-align:center; font:400 44px/1.1 var(--font-serif); margin:0 0 16px; letter-spacing:-.02em; color:var(--ink); }
.mkt-features h2 em { font-style:italic; }
.mkt-features__lead { text-align:center; font-size:16px; color:var(--ink-2); max-width:580px; margin:0 auto 50px; line-height:1.6; }
.mkt-features__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1100px; margin:0 auto; }
.mkt-feature { padding:30px; background:var(--surface); border:1px solid var(--line); border-radius:20px; }
.mkt-feature__shape { width:44px; height:44px; border-radius:12px; background:var(--accent-soft); display:grid; place-items:center; color:var(--accent); font-size:20px; margin-bottom:16px; }
.mkt-feature h3 { margin:0 0 8px; font:400 22px var(--font-serif); letter-spacing:-.01em; }
.mkt-feature h3 em { font-style:italic; }
.mkt-feature p { color:var(--ink-2); margin:0; font-size:14px; line-height:1.6; }

.mkt-cta { padding:80px 40px; text-align:center; background:var(--paper-2); }
.mkt-cta h2 { font:400 48px/1.1 var(--font-serif); margin:0 0 14px; letter-spacing:-.02em; }
.mkt-cta h2 em { font-style:italic; }
.mkt-cta p { color:var(--ink-2); font-size:16px; margin:0 0 26px; }

.mkt-footer { padding:40px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; color:var(--ink-3); font:400 13px var(--font-sans); }

/* ====================================================
   09 — LMS
   ==================================================== */
.lms-featured { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; padding:34px 36px; margin-bottom:20px; border-radius:22px; background:linear-gradient(135deg, var(--ochre-soft) 0%, var(--paper-2) 100%); border:1px solid var(--line); position:relative; overflow:hidden; }
.lms-featured h2 { margin:6px 0 10px; font:400 40px/1.1 var(--font-serif); letter-spacing:-.02em; }
.lms-featured h2 em { font-style:italic; color:var(--accent); }
.lms-featured p { color:var(--ink-2); margin:0 0 18px; max-width:480px; line-height:1.55; }
.lms-featured__art { width:200px; height:200px; position:relative; flex:0 0 auto; }
.lms-featured__art::before, .lms-featured__art::after { content:""; position:absolute; border-radius:50%; }
.lms-featured__art::before { width:160px; height:160px; background:var(--accent); right:0; top:20px; }
.lms-featured__art::after { width:90px; height:90px; background:var(--surface); border:3px solid var(--ochre); left:0; bottom:0; }

.lms-chipbar { display:flex; gap:8px; padding:14px 0 20px; overflow-x:auto; }
.lms-courses { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-bottom:30px; }
.course-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.course-card:hover { transform:translateY(-2px); box-shadow:0 14px 32px -18px rgba(32,28,22,.18); }
.course-card__media { aspect-ratio:16/10; position:relative; }
.course-card__duration { position:absolute; bottom:10px; right:10px; padding:4px 8px; background:rgba(32,28,22,.7); color:#fff; border-radius:6px; font:500 10px var(--font-mono); letter-spacing:.06em; }
.course-card__body { padding:14px 16px 16px; }
.course-card__instructor { margin:0 0 8px; font:500 11px var(--font-mono); color:var(--ink-3); letter-spacing:.04em; display:flex; align-items:center; gap:8px; }
.course-card__instructor .o-avatar { width:22px; height:22px; font-size:10px; }
.course-card h3 { margin:4px 0 4px; font:400 17px/1.3 var(--font-serif); letter-spacing:-.01em; color:var(--ink); }
.course-card__sub { margin:0 0 12px; color:var(--ink-3); font-size:13px; line-height:1.45; }
.course-card__foot { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; }
.course-card__foot .o-progress__track { width:100%; }

/* LMS Course (player) */
.lms-course-body { display:grid; grid-template-columns:1fr 340px; gap:24px; margin-top:16px; }
.lms-player { display:grid; gap:18px; }
.lms-video { aspect-ratio:16/9; border-radius:18px; background:radial-gradient(circle at 30% 40%, var(--accent-soft), var(--paper-2)); display:grid; place-items:center; position:relative; border:1px solid var(--line); }
.lms-video__play { width:64px; height:64px; border-radius:50%; border:0; background:var(--surface); box-shadow:0 8px 20px -4px rgba(0,0,0,.18); font-size:18px; cursor:pointer; color:var(--ink); }
.lms-video__time { position:absolute; bottom:14px; right:14px; padding:4px 8px; background:rgba(32,28,22,.65); color:#fff; border-radius:6px; font:500 11px var(--font-mono); }
.lms-lesson-meta { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.lms-lesson-meta h1 { margin:0; font:400 28px/1.15 var(--font-serif); letter-spacing:-.02em; }
.lms-lesson-meta em { font-style:italic; }
.lms-lesson-actions { display:flex; gap:8px; }
.lms-tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin:0; padding:0 4px; }
.lms-tab { padding:10px 14px; background:none; border:0; cursor:pointer; font:500 13px var(--font-sans); color:var(--ink-3); border-radius:10px 10px 0 0; position:relative; }
.lms-tab.active { color:var(--ink); }
.lms-tab.active::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--accent); border-radius:2px 2px 0 0; }
.lms-content { padding:10px 4px; color:var(--ink-2); line-height:1.65; }
.lms-content p { margin:0 0 14px; }
.lms-content h3 { margin:24px 0 10px; font:400 19px var(--font-serif); color:var(--ink); }

.lms-curriculum { position:sticky; top:84px; align-self:start; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:20px; display:grid; gap:14px; }
.lms-curriculum__head { display:flex; justify-content:space-between; align-items:center; }
.lms-curriculum h3 { margin:0; font:400 17px var(--font-serif); color:var(--ink); }
.lms-lessons { list-style:none; padding:0; margin:0; display:grid; gap:2px; }
.lms-lessons li { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px; padding:9px 8px; border-radius:9px; cursor:pointer; }
.lms-lessons li:hover { background:var(--paper-2); }
.lms-lessons li.active { background:var(--accent-soft); }
.lms-lessons .lsnum { font:500 11px var(--font-mono); color:var(--ink-3); }
.lms-lessons b { display:block; font:500 13px var(--font-sans); color:var(--ink); }
.lms-lessons .dur { display:block; font:500 10px var(--font-mono); color:var(--ink-3); margin-top:2px; }
.lms-lessons .check { color:var(--ok); font-weight:500; }
.lms-lessons .now { font:500 10px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }

/* ====================================================
   11 — INBOX / MESSAGES
   ==================================================== */
.msg-row { display:block; padding:14px 20px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s; position:relative; }
.msg-row:hover { background:var(--paper-2); }
.msg-row--active { background:var(--paper-2); }
.msg-row--active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.msg-row--unread .msg-row__subj { color:var(--ink); font-weight:500; }
.msg-row--unread .msg-row__meta b { color:var(--ink); }
.msg-row__top { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.msg-row__meta { flex:1; display:flex; justify-content:space-between; align-items:baseline; gap:8px; font:500 13px var(--font-sans); color:var(--ink-2); }
.msg-row__meta b { font-weight:500; color:var(--ink); }
.msg-row__time { font:500 11px var(--font-mono); color:var(--ink-3); letter-spacing:.04em; flex-shrink:0; }
.msg-row__subj { margin:0 0 4px; font:500 13px/1.35 var(--font-sans); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-row__snippet { margin:0 0 8px; font:400 12px/1.45 var(--font-sans); color:var(--ink-3); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.msg-row__tags { display:flex; gap:4px; flex-wrap:wrap; }
.msg-row__tags .pill { padding:2px 7px; font-size:10px; }

/* ====================================================
   12 — CHIPBAR (journal / lms)
   ==================================================== */
.chipbar { display:flex; gap:6px; flex-wrap:wrap; }

/* ====================================================
   10 — 404
   ==================================================== */
.err-wrap { min-height:720px; display:grid; place-items:center; padding:60px 20px; position:relative; overflow:hidden; }
.err-shapes { position:absolute; inset:0; pointer-events:none; }
.err-shapes::before, .err-shapes::after { content:""; position:absolute; border-radius:50%; }
.err-shapes::before { width:420px; height:420px; background:var(--accent-soft); left:-140px; top:10%; }
.err-shapes::after { width:280px; height:280px; background:var(--ochre-soft); right:-80px; bottom:10%; }
.err-content { position:relative; z-index:1; text-align:center; max-width:640px; }
.err-code { font:400 180px/.85 var(--font-serif); letter-spacing:-.04em; color:var(--ink); margin-bottom:20px; }
.err-code em { font-style:italic; color:var(--accent); }
.err-content h1 { margin:0 0 14px; font:400 34px/1.2 var(--font-serif); color:var(--ink); letter-spacing:-.01em; }
.err-content h1 em { font-style:italic; }
.err-content p { color:var(--ink-2); font-size:16px; line-height:1.6; margin:0 0 28px; }
.err-actions { display:flex; gap:10px; justify-content:center; }

/* ====================================================
   SUB-VIEW SWITCHER (used inside individual templates)
   ==================================================== */
.sub-switch { display:flex; justify-content:center; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.sub-switch .tpl-tab { padding:6px 11px; font:500 11px/1 var(--font-mono); letter-spacing:.04em; }
.sub-view { display:none !important; }
.sub-view.active { display:block !important; }
.sub-view.active[style*="grid"] { display:grid !important; }

/* ====================================================
   02 — SETTINGS (extras)
   ==================================================== */
.plan-card { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:24px 26px; border-radius:18px; background:linear-gradient(135deg, var(--accent-soft), var(--paper-2)); border:1px solid var(--line); position:relative; overflow:hidden; }
.plan-card::after { content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:var(--accent); opacity:.08; }
.plan-card h4 { margin:0; font:400 22px var(--font-serif); color:var(--ink); letter-spacing:-.01em; }
.plan-card h4 em { font-style:italic; color:var(--accent); }
.plan-card .meta { color:var(--ink-2); margin:4px 0 0; font:400 13px var(--font-sans); }
.plan-usage { display:grid; gap:8px; margin-top:12px; }
.plan-usage__row { display:grid; grid-template-columns:140px 1fr 60px; align-items:center; gap:12px; font:500 11px var(--font-mono); color:var(--ink-3); }

.invoice-row { display:grid; grid-template-columns:100px 1fr 100px 80px 80px; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-soft); font:400 13px var(--font-sans); }
.invoice-row:last-child { border-bottom:0; }
.invoice-row .o-num { color:var(--ink-3); }
.invoice-row b { color:var(--ink); font-weight:500; }

.integration-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.integration-card { padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:16px; display:grid; gap:10px; }
.integration-card__head { display:flex; align-items:center; gap:10px; justify-content:space-between; }
.integration-card__logo { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font:400 16px var(--font-serif); color:#fff; flex:0 0 auto; }
.integration-card h4 { margin:0; font:500 14px var(--font-sans); color:var(--ink); }
.integration-card p { margin:0; font:400 12px/1.45 var(--font-sans); color:var(--ink-3); }

.noti-matrix { width:100%; border-collapse:collapse; font:400 13px var(--font-sans); }
.noti-matrix th { text-align:center; font:500 10px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:10px 6px; border-bottom:1px solid var(--line); }
.noti-matrix th:first-child { text-align:left; padding-left:0; }
.noti-matrix td { padding:14px 6px; border-bottom:1px solid var(--line-soft); text-align:center; }
.noti-matrix td:first-child { text-align:left; padding-left:0; }
.noti-matrix tbody tr:last-child td { border-bottom:0; }
.noti-matrix b { display:block; font:500 13px var(--font-sans); color:var(--ink); }
.noti-matrix span.meta { font:400 12px var(--font-sans); color:var(--ink-3); }

.member-row { display:grid; grid-template-columns:40px 1fr 140px 100px 40px; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.member-row:last-child { border-bottom:0; }
.member-row b { display:block; font:500 14px var(--font-sans); color:var(--ink); }
.member-row span.meta { font:400 12px var(--font-sans); color:var(--ink-3); }

.key-row { display:grid; grid-template-columns:1fr 260px 120px 40px; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.key-row:last-child { border-bottom:0; }
.key-row b { font:500 13px var(--font-sans); color:var(--ink); }
.key-row code { font:500 12px var(--font-mono); color:var(--ink-3); background:var(--paper-2); padding:4px 8px; border-radius:6px; }

/* ====================================================
   03 — DASHBOARD (deep-dive extras)
   ==================================================== */
.date-range { display:flex; align-items:center; gap:4px; padding:6px 12px; background:var(--surface); border:1px solid var(--line); border-radius:999px; font:500 12px var(--font-mono); color:var(--ink-2); cursor:pointer; }
.date-range::before { content:"◐"; color:var(--ink-3); }
.date-range .vs { color:var(--ink-3); margin:0 2px; }
.chart-big { aspect-ratio:2.4/1; background:var(--paper-2); border-radius:14px; padding:20px; position:relative; overflow:hidden; }
.chart-big svg { width:100%; height:100%; }
.chart-legend { display:flex; gap:16px; margin-bottom:12px; flex-wrap:wrap; }
.chart-legend__item { display:flex; align-items:center; gap:6px; font:500 12px var(--font-mono); color:var(--ink-2); }
.chart-legend__dot { width:10px; height:10px; border-radius:3px; }

.funnel { display:grid; gap:10px; }
.funnel__step { display:grid; grid-template-columns:140px 1fr auto; gap:14px; align-items:center; }
.funnel__bar { height:32px; border-radius:8px; background:var(--accent); display:flex; align-items:center; padding:0 12px; color:#fff; font:500 12px var(--font-mono); letter-spacing:.04em; }
.funnel__bar.muted { background:var(--accent-soft); color:var(--accent); }
.funnel__drop { font:500 11px var(--font-mono); color:var(--ink-3); min-width:50px; text-align:right; }

.cohort-grid { display:grid; grid-template-columns:80px repeat(8, 1fr); gap:2px; font:500 11px var(--font-mono); }
.cohort-grid .h { padding:6px 4px; text-align:center; color:var(--ink-3); }
.cohort-grid .h.first { text-align:left; padding-left:2px; }
.cohort-grid .c { padding:10px 4px; text-align:center; border-radius:4px; }
.cohort-grid .c.label { background:none; color:var(--ink-2); text-align:left; padding-left:2px; font-weight:500; }

.donut-wrap { display:grid; grid-template-columns:160px 1fr; gap:22px; align-items:center; }
.donut-legend { list-style:none; padding:0; margin:0; display:grid; gap:8px; font:500 12px var(--font-mono); color:var(--ink-2); }
.donut-legend li { display:grid; grid-template-columns:12px 1fr 50px; align-items:center; gap:10px; }
.donut-legend .sw { width:10px; height:10px; border-radius:3px; }

/* ====================================================
   11 — ONBOARDING
   ==================================================== */
.onb-shell { max-width:1100px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden; }
.onb-head { display:flex; justify-content:space-between; align-items:center; padding:20px 32px; border-bottom:1px solid var(--line); }
.onb-head .brand { display:flex; align-items:center; gap:10px; font:400 18px var(--font-serif); }
.onb-head .brand .m { width:26px; height:26px; border-radius:8px; background:var(--accent); }
.onb-steps { display:flex; gap:6px; align-items:center; }
.onb-steps__item { display:flex; align-items:center; gap:6px; font:500 11px var(--font-mono); color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; }
.onb-steps__item + .onb-steps__item::before { content:""; width:18px; height:1px; background:var(--line); }
.onb-steps__item span { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--paper-2); font:500 11px var(--font-mono); color:var(--ink-3); }
.onb-steps__item.done { color:var(--ink-2); }
.onb-steps__item.done span { background:var(--ok); color:#fff; }
.onb-steps__item.active { color:var(--ink); }
.onb-steps__item.active span { background:var(--accent); color:#fff; }

.onb-body { padding:60px 80px 48px; min-height:500px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.onb-body--single { grid-template-columns:1fr; max-width:620px; margin:0 auto; text-align:center; padding:60px 40px 40px; }
.onb-body h1 { margin:8px 0 10px; font:400 48px/1.05 var(--font-serif); letter-spacing:-.02em; }
.onb-body h1 em { font-style:italic; color:var(--accent); }
.onb-body > div > .sub { margin:0 0 24px; font-size:16px; color:var(--ink-2); line-height:1.6; }
.onb-foot { display:flex; justify-content:space-between; align-items:center; padding:20px 32px; border-top:1px solid var(--line); background:var(--paper-2); }

.onb-role { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.onb-role__card { padding:22px; border:1.5px solid var(--line); border-radius:16px; cursor:pointer; background:var(--surface); display:grid; gap:8px; }
.onb-role__card:hover { border-color:var(--ink-3); }
.onb-role__card.active { border-color:var(--accent); background:var(--accent-soft); }
.onb-role__glyph { width:40px; height:40px; border-radius:12px; background:var(--paper-2); display:grid; place-items:center; font:400 18px var(--font-serif); color:var(--ink-2); }
.onb-role__card.active .onb-role__glyph { background:var(--surface); color:var(--accent); }
.onb-role__card b { font:500 14px var(--font-sans); color:var(--ink); }
.onb-role__card p { margin:0; font:400 12px/1.45 var(--font-sans); color:var(--ink-3); }

.onb-invite-list { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:8px; }
.onb-invite-list li { display:grid; grid-template-columns:40px 1fr 60px; align-items:center; gap:12px; padding:10px 14px; background:var(--paper-2); border-radius:10px; }
.onb-invite-list li b { font:500 13px var(--font-sans); color:var(--ink); }
.onb-invite-list li span.role { font:500 11px var(--font-mono); color:var(--ink-3); }

.onb-welcome-art { aspect-ratio:1; max-width:380px; margin:0 auto; position:relative; }
.onb-welcome-art::before, .onb-welcome-art::after { content:""; position:absolute; border-radius:50%; }
.onb-welcome-art::before { width:70%; height:70%; background:var(--accent-soft); right:0; top:0; }
.onb-welcome-art::after { width:50%; height:50%; background:var(--ochre); left:0; bottom:5%; }

/* ====================================================
   01 — AUTH (extras)
   ==================================================== */
.auth-panel--narrow { max-width:460px; margin:0 auto; }
.auth-pw-meter { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:6px; }
.auth-pw-meter span { height:3px; border-radius:2px; background:var(--line); }
.auth-pw-meter span.on { background:var(--accent); }
.auth-pw-rules { list-style:none; padding:0; margin:8px 0 0; display:grid; gap:4px; font:400 12px var(--font-sans); color:var(--ink-3); }
.auth-pw-rules li { display:flex; align-items:center; gap:6px; }
.auth-pw-rules li::before { content:"○"; font-size:9px; color:var(--ink-3); }
.auth-pw-rules li.ok { color:var(--ok); }
.auth-pw-rules li.ok::before { content:"●"; color:var(--ok); }
.otp-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:18px 0; }
.otp-grid input { padding:18px 0; text-align:center; font:500 22px/1 var(--font-mono); border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); }
.otp-grid input:focus { outline:2px solid var(--accent); outline-offset:2px; border-color:transparent; }
.otp-grid input.filled { border-color:var(--accent); background:var(--accent-soft); }
.auth-resend { display:flex; justify-content:center; align-items:center; gap:8px; font:400 13px var(--font-sans); color:var(--ink-3); margin-top:4px; }
.auth-icon-big { width:72px; height:72px; border-radius:22px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font:400 32px var(--font-serif); margin:0 auto 18px; }

/* ===== Responsive fallbacks ===== */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns:1fr; min-height:auto; }
  .auth-art { display:none; }
  .auth-panel { padding:32px 24px; }
  .app-shell { grid-template-columns:1fr; }
  .app-side { display:none; }
  .settings-body, .plp-body, .pdp-top, .checkout-body, .finance-grid, .dash-lower, .lms-course-body, .mkt-features__grid { grid-template-columns:1fr !important; }
  .kpi-strip { grid-template-columns:repeat(2,1fr); }
  .finance-hero { grid-template-columns:1fr; }
  .finance-hero-actions { grid-template-columns:repeat(4,1fr); }
  .mkt-hero h1 { font-size:42px; }
  .err-code { font-size:120px; }
}