/* Savior Hub — Merchant OS design system (2026-11-08)
   One stylesheet for every Merchant OS screen. Tokens first, then primitives, then components.
   Rules: 4px spacing grid; 44px minimum touch targets; colour is never the only signal; works 320px → 1600px. */

:root {
  /* colour — neutral ink scale + one brand accent + status hues */
  --ink-950:#0b1220; --ink-900:#111a2b; --ink-800:#1d283b; --ink-700:#334155; --ink-600:#4a5568; --ink-500:#64748b;
  --ink-400:#94a3b8; --ink-300:#cbd5e1; --ink-200:#e2e8f0; --ink-150:#eaeef3; --ink-100:#f1f4f8; --ink-50:#f7f9fb; --white:#ffffff;
  --brand-700:#075e66; --brand-600:#0a7480; --brand-500:#0e8a96; --brand-100:#dff3f4; --brand-50:#eff9f9;
  --ok-600:#13795b; --ok-100:#dcf2e8; --warn-600:#a15c07; --warn-100:#fdf0d5; --bad-600:#b4232f; --bad-100:#fbe3e4;
  --info-600:#2457c5; --info-100:#e3ebfb; --violet-600:#6d3fc8; --violet-100:#eee7fb;

  /* semantic roles */
  --bg:var(--ink-50); --surface:var(--white); --surface-2:var(--ink-100); --surface-3:var(--ink-150);
  --line:var(--ink-200); --line-strong:var(--ink-300);
  --text:var(--ink-900); --text-2:var(--ink-600); --text-3:var(--ink-500);
  --accent:var(--brand-600); --accent-strong:var(--brand-700); --accent-soft:var(--brand-50); --on-accent:#ffffff;
  --focus:0 0 0 3px color-mix(in srgb, var(--brand-500) 40%, transparent);

  /* type */
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-xs:12px; --t-sm:13px; --t-base:15px; --t-md:16px; --t-lg:18px; --t-xl:22px; --t-2xl:28px;

  /* space, radius, elevation */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --shadow-1:0 1px 2px rgba(11,18,32,.05), 0 1px 1px rgba(11,18,32,.03);
  --shadow-2:0 2px 6px rgba(11,18,32,.06), 0 8px 24px rgba(11,18,32,.06);
  --shadow-3:0 12px 40px rgba(11,18,32,.18);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:160ms;
  --topbar:56px; --tabbar:64px; --rail:248px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0a0f1a; --surface:#111827; --surface-2:#172033; --surface-3:#1d283d; --line:#243149; --line-strong:#33425f;
    --text:#e8edf5; --text-2:#a7b3c6; --text-3:#8391a8; --accent:#3fb8c3; --accent-strong:#69cbd3; --accent-soft:#0f2a31; --on-accent:#04191c;
    --ok-100:#0e2a20; --ok-600:#4cc796; --warn-100:#2d2210; --warn-600:#f0b54d; --bad-100:#311317; --bad-600:#f17c84; --info-100:#121f3d; --info-600:#8fb0f7;
    --violet-100:#211a36; --violet-600:#b79cf2;
    --shadow-1:none; --shadow-2:0 0 0 1px var(--line); --shadow-3:0 16px 48px rgba(0,0,0,.5); color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0a0f1a; --surface:#111827; --surface-2:#172033; --surface-3:#1d283d; --line:#243149; --line-strong:#33425f;
  --text:#e8edf5; --text-2:#a7b3c6; --text-3:#8391a8; --accent:#3fb8c3; --accent-strong:#69cbd3; --accent-soft:#0f2a31; --on-accent:#04191c;
  --ok-100:#0e2a20; --ok-600:#4cc796; --warn-100:#2d2210; --warn-600:#f0b54d; --bad-100:#311317; --bad-600:#f17c84; --info-100:#121f3d; --info-600:#8fb0f7;
  --violet-100:#211a36; --violet-600:#b79cf2; --shadow-1:none; --shadow-2:0 0 0 1px var(--line); --shadow-3:0 16px 48px rgba(0,0,0,.5); color-scheme:dark;
}

/* ── base ─────────────────────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:400 var(--t-base)/1.5 var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,svg,video { display:block; max-width:100%; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:2px; }
:focus-visible { outline:none; box-shadow:var(--focus); border-radius:var(--r-sm); }
h1,h2,h3,h4 { font-family:var(--font-display); margin:0; letter-spacing:-.01em; color:var(--text); }
h1 { font-size:var(--t-xl); line-height:1.25; font-weight:700; }
h2 { font-size:var(--t-lg); line-height:1.3; font-weight:650; }
h3 { font-size:var(--t-md); line-height:1.35; font-weight:650; }
h4 { font-size:var(--t-sm); font-weight:650; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }
p { margin:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:absolute; left:-999px; top:8px; z-index:100; background:var(--surface); padding:8px 12px; border-radius:var(--r-sm); box-shadow:var(--shadow-2); }
.skip:focus { left:8px; }
@media (min-width:1024px) { h1 { font-size:var(--t-2xl); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

/* ── shell ────────────────────────────────────────────────────────────────────────────────────────── */
.shell { min-height:100dvh; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:40; height:calc(var(--topbar) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) var(--s4) 0;
  display:flex; align-items:center; gap:var(--s3); background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--line); }
.topbar .logo { display:flex; align-items:center; gap:var(--s2); font-weight:700; color:var(--text); white-space:nowrap; min-width:0; }
.topbar .logo .mark { width:28px; height:28px; border-radius:8px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-size:13px; font-weight:800; flex:none; }
.topbar .logo .who { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.topbar .logo .who b { font-size:var(--t-base); overflow:hidden; text-overflow:ellipsis; }
.topbar .logo .who small { font-size:var(--t-xs); color:var(--text-3); font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.topbar .spacer { flex:1; }
.topbar .search { display:none; }
.icon-btn { width:44px; height:44px; flex:none; display:inline-grid; place-items:center; border-radius:var(--r-full); border:0; background:transparent; color:var(--text-2); cursor:pointer; position:relative; }
.icon-btn:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
.icon-btn .dot { position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--bad-600); box-shadow:0 0 0 2px var(--surface); }
.ask-btn { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:var(--r-full); background:var(--ink-900); color:#fff; font-weight:600; font-size:var(--t-sm); border:0; cursor:pointer; white-space:nowrap; }
.ask-btn:hover { text-decoration:none; background:var(--ink-800); }
:root[data-theme="dark"] .ask-btn { background:var(--accent); color:var(--on-accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ask-btn { background:var(--accent); color:var(--on-accent); } }
.ask-btn .spark { width:16px; height:16px; }

.body { flex:1; display:flex; min-width:0; }
.rail { display:none; }
.main { flex:1; min-width:0; padding:var(--s4) var(--s4) calc(var(--tabbar) + env(safe-area-inset-bottom) + var(--s8)); }
.main-inner { max-width:1180px; margin:0 auto; }
.tabbar { position:fixed; z-index:40; left:0; right:0; bottom:0; height:calc(var(--tabbar) + env(safe-area-inset-bottom)); padding:0 var(--s2) env(safe-area-inset-bottom);
  display:grid; grid-template-columns:repeat(5,1fr); background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); border-top:1px solid var(--line); }
.tabbar a, .tabbar button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:44px; color:var(--text-3); font:600 11px/1.1 var(--font); background:none; border:0; cursor:pointer; border-radius:var(--r-md); }
.tabbar a:hover { text-decoration:none; color:var(--text); }
.tabbar svg { width:22px; height:22px; }
.tabbar [aria-current="page"] { color:var(--accent); }
.acting { background:var(--warn-100); color:var(--warn-600); font-size:var(--t-sm); font-weight:600; padding:8px var(--s4); display:flex; gap:8px; align-items:center; justify-content:center; text-align:center; }
.demo-ribbon { background:var(--violet-100); color:var(--violet-600); font-size:var(--t-xs); font-weight:600; text-align:center; padding:6px var(--s4); }

@media (min-width:1024px) {
  .topbar { padding-left:var(--s6); padding-right:var(--s6); }
  .topbar .search { display:flex; align-items:center; gap:8px; width:min(420px, 34vw); height:38px; padding:0 12px; border-radius:var(--r-full); background:var(--surface-2); color:var(--text-3); border:1px solid transparent; }
  .topbar .search:focus-within { border-color:var(--line-strong); background:var(--surface); }
  .topbar .search input { border:0; background:transparent; outline:none; font:inherit; color:var(--text); width:100%; min-height:0; padding:0; box-shadow:none; }
  .topbar .search kbd { font:500 11px var(--mono); color:var(--text-3); border:1px solid var(--line); border-radius:6px; padding:1px 6px; }
  .search-icon-only { display:none !important; }
  .rail { display:flex; flex-direction:column; width:var(--rail); flex:none; position:sticky; top:var(--topbar); height:calc(100dvh - var(--topbar)); overflow-y:auto;
    padding:var(--s4) var(--s3) var(--s6); border-right:1px solid var(--line); background:var(--surface); }
  .main { padding:var(--s8) var(--s8) var(--s10); }
  .tabbar { display:none; }
}
.rail .grp { margin:var(--s4) var(--s2) var(--s1); font:650 11px/1 var(--font); text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }
.rail a { display:flex; align-items:center; gap:10px; min-height:40px; padding:0 var(--s3); border-radius:var(--r-md); color:var(--text-2); font-weight:550; font-size:var(--t-base); }
.rail a svg { width:19px; height:19px; flex:none; color:var(--text-3); }
.rail a:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
.rail a[aria-current="page"] { background:var(--accent-soft); color:var(--accent-strong); font-weight:650; }
.rail a[aria-current="page"] svg { color:var(--accent); }
.rail a .count { margin-left:auto; font-size:var(--t-xs); font-weight:700; background:var(--surface-3); color:var(--text-2); border-radius:var(--r-full); padding:1px 8px; }
.rail a .count.hot { background:var(--bad-100); color:var(--bad-600); }
.rail .foot { margin-top:auto; padding:var(--s3); font-size:var(--t-xs); color:var(--text-3); }

/* ── page scaffolding ─────────────────────────────────────────────────────────────────────────────── */
.page-head { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s3) var(--s4); margin-bottom:var(--s5); }
.page-head .titles { flex:1 1 280px; min-width:0; }
.page-head .eyebrow { font-size:var(--t-sm); color:var(--text-3); font-weight:550; margin-bottom:2px; display:flex; gap:6px; align-items:center; }
.page-head .eyebrow a { color:var(--text-3); }
.page-head p.lead { color:var(--text-2); margin-top:4px; max-width:68ch; }
.page-head .actions { display:flex; flex-wrap:wrap; gap:var(--s2); }
.section { margin-top:var(--s8); }
.section > .section-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3); }
.stack > * + * { margin-top:var(--s3); }
.stack-lg > * + * { margin-top:var(--s5); }
.row { display:flex; align-items:center; gap:var(--s3); }
.row.wrap { flex-wrap:wrap; }
.between { justify-content:space-between; }
.grow { flex:1; min-width:0; }
.muted { color:var(--text-2); }
.subtle { color:var(--text-3); font-size:var(--t-sm); }
.small { font-size:var(--t-sm); }
.tiny { font-size:var(--t-xs); }
.mono { font-family:var(--mono); font-size:.92em; }
.nowrap { white-space:nowrap; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.right { text-align:right; }
.grid { display:grid; gap:var(--s4); }
.grid-2 { display:grid; gap:var(--s4); grid-template-columns:1fr; }
.grid-3 { display:grid; gap:var(--s4); grid-template-columns:1fr; }
.grid-4 { display:grid; gap:var(--s3); grid-template-columns:repeat(2, minmax(0,1fr)); }
.split { display:grid; gap:var(--s5); grid-template-columns:1fr; }
@media (min-width:720px) { .grid-2 { grid-template-columns:repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns:repeat(2, minmax(0,1fr)); } .grid-4 { grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:1100px) { .grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); } .split { grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr); align-items:start; } .split.wide-right { grid-template-columns:minmax(300px,.9fr) minmax(0,1.4fr); } }
.sticky-col { position:sticky; top:calc(var(--topbar) + var(--s6)); }

/* ── cards & lists ────────────────────────────────────────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); }
.card-pad { padding:var(--s4); }
@media (min-width:720px) { .card-pad { padding:var(--s5); } }
.card-head { display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s4) 0; }
.card-head h2, .card-head h3 { flex:1; min-width:0; }
.card-foot { padding:var(--s3) var(--s4); border-top:1px solid var(--line); display:flex; gap:var(--s2); justify-content:flex-end; flex-wrap:wrap; }
a.card { display:block; color:inherit; transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
a.card:hover { text-decoration:none; border-color:var(--line-strong); box-shadow:var(--shadow-2); }
.list { list-style:none; margin:0; padding:0; }
.list > li + li { border-top:1px solid var(--line); }
.item { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); min-height:60px; color:inherit; }
a.item:hover, button.item:hover { background:var(--surface-2); text-decoration:none; }
button.item { width:100%; text-align:left; border:0; background:none; font:inherit; cursor:pointer; }
.item .lead-ico { width:40px; height:40px; flex:none; border-radius:var(--r-md); display:grid; place-items:center; background:var(--surface-2); color:var(--text-2); }
.item .lead-ico svg { width:20px; height:20px; }
.item .t { font-weight:600; }
.item .d { color:var(--text-2); font-size:var(--t-sm); }
.item .chev { color:var(--text-3); width:18px; height:18px; flex:none; }
.thumb { width:56px; height:56px; flex:none; border-radius:var(--r-md); object-fit:cover; background:var(--surface-3); }
.thumb.lg { width:72px; height:72px; }
.ph { display:grid; place-items:center; color:var(--text-3); font-weight:700; letter-spacing:.02em; background:linear-gradient(135deg, var(--surface-2), var(--surface-3)); }

/* ── metrics ──────────────────────────────────────────────────────────────────────────────────────── */
.metric { padding:var(--s4); }
.metric .label { font-size:var(--t-sm); color:var(--text-2); font-weight:550; display:flex; align-items:center; gap:6px; }
.metric .value { font:700 26px/1.15 var(--font-display); letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums; }
.metric .delta { font-size:var(--t-sm); font-weight:600; margin-top:4px; }
.delta.up { color:var(--ok-600); } .delta.down { color:var(--bad-600); }
.spark { width:100%; height:36px; margin-top:var(--s2); }

/* ── buttons ──────────────────────────────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:var(--r-md); border:1px solid transparent;
  font:600 var(--t-base)/1 var(--font); cursor:pointer; white-space:nowrap; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); text-decoration:none !important; }
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--accent); color:var(--on-accent); }
.btn-primary:hover { background:var(--accent-strong); }
.btn-secondary { background:var(--surface); color:var(--text); border-color:var(--line-strong); }
.btn-secondary:hover { background:var(--surface-2); }
.btn-quiet { background:transparent; color:var(--text-2); }
.btn-quiet:hover { background:var(--surface-2); color:var(--text); }
.btn-danger { background:var(--surface); color:var(--bad-600); border-color:color-mix(in srgb, var(--bad-600) 35%, transparent); }
.btn-danger:hover { background:var(--bad-100); }
.btn-dark { background:var(--ink-900); color:#fff; }
.btn-sm { min-height:36px; padding:0 12px; font-size:var(--t-sm); border-radius:10px; }
.btn-block { width:100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn.is-busy { position:relative; color:transparent !important; pointer-events:none; }
.btn.is-busy::after { content:""; position:absolute; width:18px; height:18px; border-radius:50%; border:2px solid currentColor; border-color:var(--on-accent) transparent var(--on-accent) transparent; animation:spin .8s linear infinite; }
.btn-secondary.is-busy::after, .btn-quiet.is-busy::after { border-color:var(--text-2) transparent var(--text-2) transparent; }
@keyframes spin { to { transform:rotate(360deg); } }
.seg { display:inline-flex; padding:3px; background:var(--surface-2); border-radius:var(--r-md); gap:2px; }
.seg button, .seg a { min-height:36px; padding:0 14px; border-radius:9px; border:0; background:transparent; color:var(--text-2); font:600 var(--t-sm) var(--font); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.seg [aria-pressed="true"], .seg [aria-current="page"] { background:var(--surface); color:var(--text); box-shadow:var(--shadow-1); text-decoration:none; }

/* ── status chips ─────────────────────────────────────────────────────────────────────────────────── */
.chip { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:var(--r-full); font:600 12px/1 var(--font); white-space:nowrap; background:var(--surface-3); color:var(--text-2); }
.chip svg { width:13px; height:13px; }
.chip.ok { background:var(--ok-100); color:var(--ok-600); }
.chip.warn { background:var(--warn-100); color:var(--warn-600); }
.chip.bad { background:var(--bad-100); color:var(--bad-600); }
.chip.info { background:var(--info-100); color:var(--info-600); }
.chip.violet { background:var(--violet-100); color:var(--violet-600); }
.chip.brand { background:var(--accent-soft); color:var(--accent-strong); }
.chip.outline { background:transparent; box-shadow:inset 0 0 0 1px var(--line-strong); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.badge-env { font:700 10px/1 var(--font); letter-spacing:.06em; text-transform:uppercase; padding:4px 7px; border-radius:6px; }

/* ── forms ────────────────────────────────────────────────────────────────────────────────────────── */
.field { display:block; }
.field + .field { margin-top:var(--s4); }
.field > .label { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); font-weight:600; font-size:var(--t-sm); margin-bottom:6px; color:var(--text); }
.field > .label .opt { font-weight:500; color:var(--text-3); }
.field .help { font-size:var(--t-sm); color:var(--text-3); margin-top:6px; }
.field .error { font-size:var(--t-sm); color:var(--bad-600); margin-top:6px; font-weight:550; }
.input, .select, .textarea, input[type="text"].input, input[type="email"].input {
  width:100%; min-height:44px; padding:10px 12px; border-radius:var(--r-md); border:1px solid var(--line-strong); background:var(--surface); color:var(--text);
  font:400 var(--t-md)/1.4 var(--font); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.textarea { min-height:96px; resize:vertical; }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--focus); }
.input[aria-invalid="true"] { border-color:var(--bad-600); }
.input-group { display:flex; align-items:stretch; }
.input-group .addon { display:flex; align-items:center; padding:0 12px; border:1px solid var(--line-strong); border-right:0; border-radius:var(--r-md) 0 0 var(--r-md); background:var(--surface-2); color:var(--text-2); font-weight:600; }
.input-group .input { border-radius:0 var(--r-md) var(--r-md) 0; }
.select { appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
.check { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; font-weight:550; }
.check input { width:20px; height:20px; accent-color:var(--accent); flex:none; }
.switch { position:relative; display:inline-flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; font-weight:550; }
.switch input { position:absolute; opacity:0; width:44px; height:26px; margin:0; cursor:pointer; }
.switch .track { width:44px; height:26px; border-radius:var(--r-full); background:var(--line-strong); position:relative; transition:background var(--dur) var(--ease); flex:none; }
.switch .track::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform var(--dur) var(--ease); }
.switch input:checked + .track { background:var(--accent); }
.switch input:checked + .track::after { transform:translateX(18px); }
.switch input:focus-visible + .track { box-shadow:var(--focus); }
.fieldset { border:0; padding:0; margin:0; }
.form-grid { display:grid; gap:var(--s4); grid-template-columns:1fr; }
@media (min-width:720px) { .form-grid.two { grid-template-columns:1fr 1fr; } .form-grid .span-2 { grid-column:1 / -1; } }

/* ── upload ───────────────────────────────────────────────────────────────────────────────────────── */
.drop { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s2); text-align:center; padding:var(--s6) var(--s4);
  border:1.5px dashed var(--line-strong); border-radius:var(--r-lg); background:var(--surface-2); color:var(--text-2); cursor:pointer; transition:border-color var(--dur), background var(--dur); }
.drop:hover, .drop.is-over { border-color:var(--accent); background:var(--accent-soft); }
.drop input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.drop svg { width:28px; height:28px; color:var(--accent); }
.drop .hint { font-size:var(--t-sm); color:var(--text-3); }
.drop .actions { display:flex; gap:var(--s2); flex-wrap:wrap; justify-content:center; position:relative; z-index:1; }
.upload-preview { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px,1fr)); gap:var(--s2); margin-top:var(--s3); }
.upload-preview img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-md); }

/* ── notices, toasts, empty, skeleton ─────────────────────────────────────────────────────────────── */
.notice { display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3) var(--s4); border-radius:var(--r-md); background:var(--surface-2); color:var(--text); font-size:var(--t-sm); border:1px solid var(--line); }
.notice svg { width:18px; height:18px; flex:none; margin-top:1px; }
.notice.ok { background:var(--ok-100); border-color:transparent; } .notice.ok svg { color:var(--ok-600); }
.notice.warn { background:var(--warn-100); border-color:transparent; } .notice.warn svg { color:var(--warn-600); }
.notice.bad { background:var(--bad-100); border-color:transparent; } .notice.bad svg { color:var(--bad-600); }
.notice.info { background:var(--info-100); border-color:transparent; } .notice.info svg { color:var(--info-600); }
.notice.violet { background:var(--violet-100); border-color:transparent; } .notice.violet svg { color:var(--violet-600); }
.notice b { font-weight:650; }
.toasts { position:fixed; z-index:80; left:50%; transform:translateX(-50%); bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 12px); display:flex; flex-direction:column; gap:8px; width:min(480px, calc(100vw - 24px)); pointer-events:none; }
@media (min-width:1024px) { .toasts { bottom:24px; } }
.toast { pointer-events:auto; display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:var(--r-md); background:var(--ink-900); color:#fff; box-shadow:var(--shadow-3); font-size:var(--t-sm); font-weight:550; animation:rise .22s var(--ease); }
.toast svg { width:18px; height:18px; flex:none; }
.toast .t-ok { color:#5ee0a8; } .toast .t-bad { color:#ff9aa1; }
.toast a { color:#7fe3ea; margin-left:auto; font-weight:650; }
@keyframes rise { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
.empty { text-align:center; padding:var(--s10) var(--s4); color:var(--text-2); }
.empty .art { width:56px; height:56px; margin:0 auto var(--s3); border-radius:16px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; }
.empty .art svg { width:26px; height:26px; }
.empty h3 { margin-bottom:4px; }
.empty p { max-width:44ch; margin:0 auto var(--s4); font-size:var(--t-sm); }
.skeleton { background:linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size:200% 100%; animation:shimmer 1.2s infinite; border-radius:var(--r-sm); }
@keyframes shimmer { to { background-position:-200% 0; } }

/* ── tables (desktop) that become cards (phone) ───────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table { width:100%; border-collapse:collapse; font-size:var(--t-base); }
.table th { text-align:left; font:600 var(--t-xs)/1.2 var(--font); text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); padding:10px var(--s4); border-bottom:1px solid var(--line); white-space:nowrap; }
.table td { padding:12px var(--s4); border-bottom:1px solid var(--line); vertical-align:middle; }
.table tr:last-child td { border-bottom:0; }
.table tbody tr:hover { background:var(--surface-2); }
.table .num { text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width:719px) {
  .table.stack-sm thead { display:none; }
  .table.stack-sm tr { display:block; padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); }
  .table.stack-sm td { display:flex; justify-content:space-between; gap:var(--s3); padding:4px 0; border:0; }
  .table.stack-sm td::before { content:attr(data-label); color:var(--text-3); font-size:var(--t-sm); }
  .table.stack-sm td.primary { font-weight:650; font-size:var(--t-md); }
  .table.stack-sm td.primary::before { content:none; }
}

/* ── sheets & dialogs ─────────────────────────────────────────────────────────────────────────────── */
dialog.sheet { border:0; padding:0; background:var(--surface); color:var(--text); width:100%; max-width:100%; max-height:92dvh; margin:auto 0 0; border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--shadow-3); }
dialog.sheet::backdrop { background:rgba(8,12,20,.45); backdrop-filter:blur(2px); }
dialog.sheet[open] { animation:sheet-up .24s var(--ease); display:flex; flex-direction:column; }
@keyframes sheet-up { from { transform:translateY(24px); opacity:.6; } to { transform:none; opacity:1; } }
.sheet-head { display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s3) var(--s3) var(--s5); border-bottom:1px solid var(--line); }
.sheet-head h2 { flex:1; font-size:var(--t-lg); }
.sheet-body { padding:var(--s5); overflow-y:auto; }
.sheet-foot { padding:var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:flex; gap:var(--s2); justify-content:flex-end; flex-wrap:wrap; }
.sheet .grab { width:36px; height:5px; border-radius:3px; background:var(--line-strong); margin:8px auto 0; }
@media (min-width:720px) {
  dialog.sheet { width:min(640px, calc(100vw - 48px)); margin:auto; border-radius:var(--r-xl); max-height:86dvh; }
  dialog.sheet.wide { width:min(960px, calc(100vw - 48px)); }
  .sheet .grab { display:none; }
}

/* ── stepper & change lifecycle ───────────────────────────────────────────────────────────────────── */
.stepper { display:flex; list-style:none; margin:0; padding:0; gap:0; overflow-x:auto; }
.stepper li { flex:1; min-width:84px; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; font-size:var(--t-xs); font-weight:600; color:var(--text-3); text-align:center; }
.stepper li::before { content:""; position:absolute; top:11px; left:-50%; right:50%; height:2px; background:var(--line-strong); z-index:0; }
.stepper li:first-child::before { display:none; }
.stepper .n { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:2px solid var(--line-strong); z-index:1; color:var(--text-3); font-size:11px; }
.stepper .n svg { width:13px; height:13px; }
.stepper li.done { color:var(--text-2); } .stepper li.done::before { background:var(--ok-600); }
.stepper li.done .n { background:var(--ok-600); border-color:var(--ok-600); color:#fff; }
.stepper li.now { color:var(--text); } .stepper li.now::before { background:var(--ok-600); }
.stepper li.now .n { border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.stepper li.fail .n { background:var(--bad-600); border-color:var(--bad-600); color:#fff; }
.targets { display:grid; gap:var(--s2); }
.target { display:flex; align-items:center; gap:var(--s3); padding:10px var(--s3); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.target .ch { font-weight:600; flex:1; min-width:0; }
.target .ev { font-size:var(--t-xs); color:var(--text-3); }

/* ── diff ─────────────────────────────────────────────────────────────────────────────────────────── */
.diff { display:grid; grid-template-columns:auto 1fr; gap:6px var(--s3); font-size:var(--t-sm); }
.diff .k { color:var(--text-3); font-weight:600; }
.diff del { color:var(--bad-600); background:var(--bad-100); text-decoration:line-through; border-radius:4px; padding:0 4px; }
.diff ins { color:var(--ok-600); background:var(--ok-100); text-decoration:none; border-radius:4px; padding:0 4px; }

/* ── menu & product presentation ──────────────────────────────────────────────────────────────────── */
.cat-nav { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.cat-nav::-webkit-scrollbar { display:none; }
.cat-nav a { flex:none; height:36px; display:inline-flex; align-items:center; padding:0 14px; border-radius:var(--r-full); background:var(--surface); border:1px solid var(--line); color:var(--text-2); font-weight:600; font-size:var(--t-sm); }
.cat-nav a[aria-current="true"], .cat-nav a:hover { background:var(--ink-900); color:#fff; border-color:var(--ink-900); text-decoration:none; }
.menu-item { display:flex; gap:var(--s3); align-items:center; padding:var(--s3) var(--s4); min-height:76px; color:inherit; }
.menu-item:hover { background:var(--surface-2); text-decoration:none; }
.menu-item .meta { flex:1; min-width:0; }
.menu-item .name { font-weight:650; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.menu-item .desc { color:var(--text-2); font-size:var(--t-sm); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.menu-item .price { font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.menu-item.off .name, .menu-item.off .price { color:var(--text-3); }
.product-card { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.product-card .img { aspect-ratio:4/3; background:var(--surface-3); object-fit:cover; width:100%; }
.product-card .body2 { padding:var(--s3) var(--s4) var(--s4); }

/* ── preview frames ───────────────────────────────────────────────────────────────────────────────── */
.device { margin:0 auto; border-radius:28px; padding:10px; background:var(--ink-900); box-shadow:var(--shadow-3); transition:width .25s var(--ease); }
.device.phone { width:min(375px, 100%); }
.device.desktop { width:100%; border-radius:14px; padding:8px; }
.device .screen { border-radius:20px; overflow:hidden; background:#fff; height:640px; }
.device.desktop .screen { border-radius:8px; height:560px; }
.device iframe { width:100%; height:100%; border:0; display:block; background:#fff; }
.device .bar { display:flex; gap:6px; padding:2px 6px 8px; }
.device .bar i { width:10px; height:10px; border-radius:50%; background:#3a4458; }
.device.phone .bar { display:none; }

/* ── assets grid ──────────────────────────────────────────────────────────────────────────────────── */
.asset-grid { display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.asset { position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); border:1px solid var(--line); color:inherit; display:block; }
.asset:hover { text-decoration:none; box-shadow:var(--shadow-2); }
.asset .img { aspect-ratio:1; width:100%; object-fit:cover; background:var(--surface-3); }
.asset .cap { padding:8px 10px; font-size:var(--t-sm); }
.asset .cap .t { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asset .corner { position:absolute; top:8px; left:8px; }
.swatch { width:44px; height:44px; border-radius:var(--r-md); border:1px solid rgba(0,0,0,.08); flex:none; }
.color-row { display:flex; align-items:center; gap:var(--s3); }
.color-row input[type="color"] { width:44px; height:44px; padding:0; border:1px solid var(--line-strong); border-radius:var(--r-md); background:none; cursor:pointer; }

/* ── campaign & creative ──────────────────────────────────────────────────────────────────────────── */
.creative { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); display:flex; flex-direction:column; }
.creative .stage { background:var(--surface-2); padding:var(--s3); display:grid; place-items:center; min-height:180px; }
.creative .stage img, .creative .stage svg { max-height:320px; width:auto; border-radius:8px; box-shadow:var(--shadow-2); }
.creative .meta { padding:var(--s3) var(--s4); display:flex; flex-direction:column; gap:6px; flex:1; }
.creative .acts { display:flex; gap:6px; padding:0 var(--s4) var(--s4); flex-wrap:wrap; }
.copy-block { white-space:pre-wrap; background:var(--surface-2); border-radius:var(--r-md); padding:var(--s3); font-size:var(--t-sm); line-height:1.55; }
.wizard-steps { display:flex; gap:6px; margin-bottom:var(--s5); }
.wizard-steps span { flex:1; height:4px; border-radius:2px; background:var(--line); }
.wizard-steps span.on { background:var(--accent); }
.choice-grid { display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.choice { position:relative; display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s4); border-radius:var(--r-lg); border:1.5px solid var(--line); background:var(--surface); cursor:pointer; transition:border-color var(--dur), box-shadow var(--dur); }
.choice:hover { border-color:var(--line-strong); }
.choice input { position:absolute; opacity:0; }
.choice:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.choice:has(input:focus-visible) { box-shadow:var(--focus); }
.choice .ico { width:40px; height:40px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:none; }
.choice .ico svg { width:20px; height:20px; }
.choice b { display:block; }
.choice small { color:var(--text-2); font-size:var(--t-sm); }

/* ── Ask Savior ───────────────────────────────────────────────────────────────────────────────────── */
.ask-hero { background:radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface); }
.ask-box { display:flex; gap:var(--s2); align-items:flex-end; padding:var(--s2); border:1.5px solid var(--line-strong); border-radius:var(--r-xl); background:var(--surface); }
.ask-box:focus-within { border-color:var(--accent); box-shadow:var(--focus); }
.ask-box textarea { flex:1; border:0; outline:none; resize:none; font:400 var(--t-md)/1.45 var(--font); background:transparent; color:var(--text); padding:10px; min-height:48px; max-height:180px; }
.suggest { display:flex; flex-wrap:wrap; gap:8px; }
.suggest button { min-height:36px; padding:0 14px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--surface); color:var(--text-2); font:550 var(--t-sm) var(--font); cursor:pointer; text-align:left; }
.suggest button:hover { border-color:var(--accent); color:var(--accent-strong); }
.plan-step { display:flex; gap:var(--s3); padding:var(--s3) 0; }
.plan-step + .plan-step { border-top:1px solid var(--line); }
.plan-step .n { width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong); font-weight:700; font-size:var(--t-sm); display:grid; place-items:center; flex:none; }
.mic.is-live { color:var(--bad-600); background:var(--bad-100); }

/* ── timeline / thread ────────────────────────────────────────────────────────────────────────────── */
.thread { display:flex; flex-direction:column; gap:var(--s3); }
.msg { max-width:min(560px, 92%); padding:10px 14px; border-radius:16px; background:var(--surface-2); font-size:var(--t-base); }
.msg.mine { align-self:flex-end; background:var(--accent); color:var(--on-accent); }
.msg.note { align-self:stretch; max-width:none; background:var(--warn-100); color:var(--text); border-radius:var(--r-md); }
.msg.sys { align-self:center; background:transparent; color:var(--text-3); font-size:var(--t-sm); padding:2px 8px; }
.msg .by { font-size:var(--t-xs); opacity:.75; margin-bottom:2px; font-weight:600; }
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { position:relative; padding:0 0 var(--s4) var(--s6); font-size:var(--t-sm); }
.timeline li::before { content:""; position:absolute; left:6px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
.timeline li::after { content:""; position:absolute; left:9.5px; top:18px; bottom:0; width:1px; background:var(--line); }
.timeline li:last-child::after { display:none; }
.timeline li.ok::before { background:var(--ok-600); } .timeline li.bad::before { background:var(--bad-600); } .timeline li.info::before { background:var(--accent); }

/* ── More menu (phone) ────────────────────────────────────────────────────────────────────────────── */
.more-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s2); }
.more-grid a { display:flex; flex-direction:column; align-items:center; gap:8px; padding:var(--s4) var(--s2); border-radius:var(--r-lg); background:var(--surface-2); color:var(--text); font-weight:600; font-size:var(--t-sm); text-align:center; }
.more-grid a:hover { text-decoration:none; background:var(--surface-3); }
.more-grid svg { width:24px; height:24px; color:var(--accent); }

/* ── print (flyers) ───────────────────────────────────────────────────────────────────────────────── */
@media print {
  .topbar, .rail, .tabbar, .toasts, .no-print, .demo-ribbon, .acting { display:none !important; }
  .main { padding:0 !important; } body { background:#fff; }
}

/* ── fixes from QA round 1 ───────────────────────────────────────────────────────────────────────── */
a.card.item { display:flex; }
.qa-grid { display:grid; gap:var(--s3); grid-template-columns:repeat(2, minmax(0,1fr)); }
.qa-grid .item { flex-direction:column; align-items:flex-start; gap:10px; min-height:0; padding:var(--s4); }
@media (min-width:1100px) { .qa-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.site-switch { display:none; }
@media (min-width:720px) { .site-switch { display:block; } }
/* grid/flex children may shrink below their content width (prevents overflow from long chips, tables, steppers) */
.grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .split > *, .stack > *, .stack-lg > *, .card, .main-inner > * { min-width:0; }
.target { flex-wrap:wrap; row-gap:6px; }
.stepper li { min-width:64px; }
.table-wrap { max-width:100%; }
.table-wrap, .card { position:relative; }   /* keeps .sr-only text inside scroll containers (it is absolutely positioned) */
.ask-btn .lbl-sm { display:none; }
@media (max-width:430px) {
  .ask-btn { padding:0 12px; } .ask-btn .lbl-lg { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .ask-btn .lbl-sm { display:inline; }
  .topbar .logo .who small { display:none; } .topbar { gap:4px; } .topbar .icon-btn { width:40px; }
}