/* Hello Paco v2 — shared mockup styles (offline, no CDN).
   Tokens follow docs/design/DESIGN.md §2–§4. Mockup-only chrome is prefixed .mockbar / .mb-*.
   Icons are appended at the end of this file by _tools/icons.py (.ic .ic-<name>). */

/* ===== 1. Primitives ===== */
:root {
  --yellow-50:#FFFBEA; --yellow-100:#FFF4C2; --yellow-200:#F1DF84; --yellow-500:#EFCD00; --yellow-600:#E2C200; --yellow-700:#846F00; --yellow-800:#776000;
  --ink-900:#22251F; --ink-800:#33362F; --ink-700:#464943; --ink-600:#5F6458; --ink-500:#6B7066; --ink-450:#878B81; --ink-400:#9A9E94; --ink-300:#C9CBC2; --ink-200:#E4E5DF; --ink-150:#ECEBE4; --ink-100:#F3F2EC;
  --cream-50:#FFFEFA; --cream-100:#FFFAF0; --cream-200:#F8F7F2;
  --night-950:#061710; --night-900:#071A13; --night-800:#0E2620; --night-700:#102B21;
  --paco-blue:#0757A6; --mint-100:#DCF7E9; --mint-900:#103D2F; --lilac-600:#7C5CFF;
}

/* ===== 2. Semantic tokens (Hello Paco) ===== */
:root {
  --bg-canvas:var(--cream-200); --bg-surface:var(--cream-50); --bg-raised:#FFFFFF; --bg-sunken:var(--ink-100); --bg-hover:#F6F5EF;
  --fg-strong:var(--ink-900); --fg-default:var(--ink-800); --fg-muted:var(--ink-600); --fg-subtle:var(--ink-500); --fg-disabled:var(--ink-400);
  --border-subtle:var(--ink-150); --border-default:var(--ink-200); --border-strong:var(--ink-300); --border-input:var(--ink-450);
  --action:var(--ink-900); --action-hover:var(--ink-800); --on-action:#FFFFFF;
  --brand:var(--yellow-500); --brand-hover:var(--yellow-600); --on-brand:var(--ink-900); --brand-text:var(--yellow-800); --brand-rgb:239 205 0;
  --bg-selected:var(--yellow-50);
  --ai-fg:var(--yellow-800); --ai-bg:var(--yellow-50); --ai-border:var(--yellow-200);
  --shadow-brand:0 10px 26px rgb(169 145 0 / .20);
  --success-fg:#117C52; --success-bg:#E6F7EF; --success-border:#BFE8D3;
  --warning-fg:#A35200; --warning-bg:#FFF1DB; --warning-border:#F6D3A1;
  --danger-fg:#B42318; --danger-bg:#FDECEA; --danger-border:#F5C2BC;
  --info-fg:var(--paco-blue); --info-bg:#E8F0FA; --info-border:#C7DAF0;
  --internal-fg:#4B3A99; --internal-bg:#F3F0FF; --internal-border:#D9D0FF;
  --bubble-out-bg:var(--mint-100); --bubble-out-fg:var(--mint-900);
  --presence-on:#27C884; --presence-pause:#F2A33A; --presence-off:var(--ink-300); --presence-busy:var(--lilac-600);
  --impersonation-bg:#0B1F4D; --impersonation-fg:#DCE7FF;
  --ch-whatsapp:#25D366; --ch-messenger:#0084FF; --ch-email:var(--ink-700); --ch-webchat:var(--paco-blue); --ch-voice:var(--lilac-600);
  --ch-instagram:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF);
  --chart-1:var(--ink-800); --chart-2:var(--brand); --chart-3:#2A9466; --chart-4:var(--lilac-600); --chart-5:var(--paco-blue); --chart-6:#D9582F; --chart-7:#8F7E4B;
  --font-sans:Inter, "Segoe UI", system-ui, Arial, Helvetica, sans-serif;
  --font-display:Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono:ui-monospace, "SFMono-Regular", Menlo, "DejaVu Sans Mono", monospace;
  --radius-xs:6px; --radius-sm:9px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px; --radius-2xl:32px;
  --shadow-xs:0 1px 2px rgb(34 37 31 / .06); --shadow-sm:0 4px 12px rgb(15 44 35 / .05); --shadow-md:0 14px 34px rgb(42 47 36 / .07);
  --shadow-lg:0 20px 44px rgb(42 47 36 / .10); --shadow-xl:0 45px 100px rgb(20 47 39 / .18), 0 8px 26px rgb(20 47 39 / .07);
  --ease-brand:cubic-bezier(.16,.85,.24,1); --ease-materialize:cubic-bezier(.16,1,.3,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:280ms;
  --control-h:36px; --row-conversation:64px; --pad-card:20px; --gap-thread:10px;
  --topbar-h:56px; --sidebar-w:232px; --queue-w:clamp(300px,24vw,340px); --contact-w:clamp(280px,22vw,320px);
}
html[data-density="compact"] { --control-h:32px; --row-conversation:52px; --pad-card:14px; --gap-thread:6px; }

/* White-label (DESIGN §4.2, Atende+ #2563EB): only the brand group changes; the Paco disappears */
body.brand-partner {
  --brand:#2563EB; --brand-hover:#1D4ED8; --on-brand:#FFFFFF; --brand-text:#2563EB; --brand-rgb:37 99 235;
  --bg-selected:#EEF3FD; --ai-fg:#2563EB; --ai-bg:#EEF3FD; --ai-border:#BED0F9;
  --shadow-brand:0 10px 26px rgb(37 99 235 / .25); --chart-2:#2563EB;
}
body.brand-partner .only-hp, body:not(.brand-partner) .only-wl { display:none !important; }

/* ===== 3. Base ===== */
* { box-sizing:border-box; }
html, body { margin:0; }
body { font-family:var(--font-sans); font-size:14px; line-height:20px; color:var(--fg-default); background:var(--bg-canvas); -webkit-font-smoothing:antialiased; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:inherit; }
h1, h2, h3, h4 { margin:0; }
p { margin:0; }
.num, .t td.r, .kpi b { font-variant-numeric:tabular-nums; }
:is(button, a, input, select, textarea, [tabindex]):focus-visible { outline:2px solid var(--ink-900); outline-offset:2px; box-shadow:0 0 0 6px rgb(var(--brand-rgb) / .35); }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
[hidden] { display:none !important; }

/* ===== 4. Mockup chrome (not product) ===== */
.mockbar { position:relative; z-index:70; display:flex; flex-wrap:nowrap; align-items:center; gap:5px 8px; min-height:34px; padding:5px 12px; white-space:nowrap; background:#14160F; color:#C9CBC2; font-size:11.5px; font-weight:700; overflow-x:auto; }
.mockbar .mk { padding:2px 7px; border-radius:5px; background:var(--yellow-500); color:#22251F; font-size:10px; font-weight:900; letter-spacing:.12em; }
.mockbar a { color:#F1DF84; text-decoration:none; }
.mockbar .mb-title { color:#F3F2EC; }
.mockbar .mb-route { padding:1px 7px; border-radius:6px; background:#2A2C25; color:#E4E5DF; font:600 11px/16px var(--font-mono); }
.mockbar .mb-sp { flex:1; }
.mockbar .mb-lbl { color:#8D9187; display:inline-flex; align-items:center; gap:6px; }
.mockbar select { height:24px; padding:0 8px; border:0; border-radius:999px; background:#2A2C25; color:#E4E5DF; font-size:11.5px; font-weight:700; }
.mb-states { display:flex; flex-wrap:wrap; gap:3px; padding:2px; border-radius:12px; background:#2A2C25; }
.mb-states button { height:22px; padding:0 9px; border:0; border-radius:999px; background:none; color:#C9CBC2; font-size:11px; font-weight:700; }
.mb-states button.on { background:var(--yellow-500); color:#22251F; }
.mb-note { flex-basis:100%; color:#9A9E94; font-weight:600; }

/* ===== 5. App frame ===== */
.app { display:flex; flex-direction:column; min-height:calc(100vh - var(--mb-h, 34px)); min-width:1280px; }
.app.fixed { height:calc(100vh - var(--mb-h, 34px)); }
.imp-bar { flex:none; display:flex; align-items:center; gap:10px; height:32px; padding:0 16px; background:var(--impersonation-bg); color:var(--impersonation-fg); font-size:12.5px; }
.imp-bar b { color:#fff; }
.imp-bar .end { margin-left:auto; display:flex; align-items:center; gap:10px; }
.imp-bar button { height:22px; padding:0 10px; border:1px solid #7FA6FF; border-radius:999px; background:none; color:#DCE7FF; font-size:11.5px; font-weight:800; }

.top { flex:none; position:relative; z-index:30; display:flex; align-items:center; gap:10px; height:var(--topbar-h); padding:0 16px; background:var(--bg-surface); border-bottom:1px solid var(--border-default); }
.logo { display:flex; align-items:center; width:150px; flex:none; }
.logo img { height:28px; width:auto; max-width:200px; display:block; object-fit:contain; }
.app .top .logo { width:auto; min-width:140px; max-width:220px; }
.switch-btn { display:flex; align-items:center; gap:9px; height:38px; padding:0 12px 0 5px; border:1px solid var(--border-default); border-radius:999px; background:var(--bg-raised); font-size:13.5px; font-weight:800; color:var(--fg-strong); box-shadow:var(--shadow-xs); white-space:nowrap; }
.switch-btn .sq { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--brand); color:var(--on-brand); }
.switch-btn .ic-chevron-down { color:var(--fg-subtle); }
.gsearch { display:flex; align-items:center; gap:8px; flex:0 1 420px; height:38px; margin-left:8px; padding:0 12px; border:1px solid var(--border-default); border-radius:999px; background:var(--bg-sunken); color:var(--fg-subtle); font-size:13px; text-align:left; }
kbd, .kbd { display:inline-flex; align-items:center; padding:0 6px; height:18px; border:1px solid var(--border-default); border-radius:var(--radius-xs); background:var(--bg-surface); font:600 11px/16px var(--font-sans); color:var(--fg-subtle); }
.gsearch kbd { margin-left:auto; }
.top .sp { flex:1; }
.presence { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 11px 0 9px; border:1px solid var(--border-default); border-radius:999px; background:var(--bg-raised); font-size:12px; font-weight:700; color:var(--fg-default); white-space:nowrap; }
.dot-p { width:8px; height:8px; border-radius:50%; background:var(--presence-on); flex:none; }
.dot-p.pause { background:var(--presence-pause); } .dot-p.off { background:var(--presence-off); } .dot-p.busy { background:var(--presence-busy); }
.icon-btn { position:relative; display:inline-grid; place-items:center; width:38px; height:38px; border:1px solid var(--border-default); border-radius:999px; background:var(--bg-raised); color:var(--fg-muted); flex:none; }
.icon-btn.sm { width:30px; height:30px; }
.icon-btn .badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--ink-900); color:#fff; font-size:10.5px; font-weight:800; line-height:14px; text-align:center; border:2px solid var(--bg-surface); }
.ai-pill { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 13px; border:1px solid var(--ai-border); border-radius:999px; background:var(--ai-bg); color:var(--ai-fg); font-size:12.5px; font-weight:900; white-space:nowrap; }
.me { display:flex; align-items:center; gap:9px; padding-left:4px; }
.me b { display:block; font-size:12.5px; line-height:16px; color:var(--fg-strong); }
.me small { display:block; font-size:11px; line-height:14px; color:var(--fg-subtle); }

/* Context banners (DESIGN §5.5) */
.cbar { flex:none; display:flex; align-items:center; gap:10px; min-height:36px; padding:6px 20px; border-bottom:1px solid; font-size:12.5px; }
.cbar .end { margin-left:auto; display:flex; gap:8px; align-items:center; }
.cbar.warn { background:var(--warning-bg); border-color:var(--warning-border); color:var(--warning-fg); }
.cbar.danger { background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger-fg); }
.cbar.info { background:var(--info-bg); border-color:var(--info-border); color:var(--info-fg); }
.cbar.ai { background:var(--ai-bg); border-color:var(--ai-border); color:var(--fg-strong); }
.cbar.ai b { color:var(--ai-fg); }
.cbar.neutral { background:var(--bg-sunken); border-color:var(--border-strong); border-bottom-style:dashed; color:var(--fg-default); }
.cbar b { font-weight:800; }
.cbar a { font-weight:900; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* Shell */
.shell { flex:1; min-height:0; display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); }
.side { display:flex; flex-direction:column; min-height:0; padding:18px 12px 12px; background:var(--bg-surface); border-right:1px solid var(--border-default); }
.side-head { display:flex; align-items:center; gap:10px; margin:0 6px; }
.side-head .sq { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--brand); color:var(--on-brand); box-shadow:0 8px 20px rgb(var(--brand-rgb) / .28); flex:none; }
.side-head h2 { font-family:var(--font-display); font-size:21px; line-height:24px; font-weight:900; letter-spacing:-.04em; color:var(--fg-strong); }
.side .sub { margin:6px 8px 0; font-size:12px; line-height:16px; color:var(--fg-subtle); }
.side .side-state { margin:8px 8px 0; display:flex; gap:6px; flex-wrap:wrap; }
.nav-group { margin:16px 10px 6px; font-size:10.5px; font-weight:900; letter-spacing:.16em; color:var(--fg-subtle); text-transform:uppercase; }
.nav-item { position:relative; display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:0 10px; border:0; border-radius:var(--radius-md); background:none; font-size:13.5px; font-weight:600; color:var(--fg-muted); text-align:left; text-decoration:none; }
.nav-item .ic { color:var(--fg-subtle); }
.nav-item:hover { background:var(--bg-hover); color:var(--fg-strong); }
.nav-item.on { background:var(--bg-selected); color:var(--fg-strong); font-weight:800; }
.nav-item.on .ic { color:var(--fg-strong); }
.nav-item.on::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--brand); }
.nav-item .cnt { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--brand); color:var(--on-brand); font-size:11px; font-weight:800; line-height:20px; text-align:center; }
.nav-item .cnt.dark { background:var(--ink-900); color:#fff; }
.nav-item .chip-addon, .nav-item .chip-soon, .nav-item .tag { margin-left:auto; }
.nav-item.locked { color:var(--fg-muted); }
.side .grow { flex:1; min-height:14px; }
.side-card { display:flex; align-items:center; gap:10px; margin-top:8px; padding:10px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-raised); font-size:12px; }
.side-card b { display:block; font-size:12.5px; line-height:16px; color:var(--fg-strong); }
.side-card small { display:block; font-size:11px; line-height:14px; color:var(--fg-subtle); }
.side-card .ico { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:#EFEAFF; color:var(--ch-voice); flex:none; }
.side-card.tenant { background:var(--bg-sunken); border-color:transparent; }
.side-card.tenant .ico { background:var(--ink-900); color:var(--brand); font-weight:900; font-size:12px; }
.side-card .meter { margin-top:5px; }

/* Platform console: "Noite" sidebar, never partner-branded */
body.theme-platform .side { background:var(--night-900); border-color:#FFFFFF1A; }
body.theme-platform .side-head h2, body.theme-platform .nav-item.on { color:#F3F6F2; }
body.theme-platform .side .sub, body.theme-platform .nav-group { color:#8BA096; }
body.theme-platform .nav-item { color:#ADBBB4; }
body.theme-platform .nav-item .ic { color:#8BA096; }
body.theme-platform .nav-item:hover { background:rgba(255,255,255,.05); color:#fff; }
body.theme-platform .nav-item.on { background:rgb(239 205 0 / .10); }
body.theme-platform .nav-item.on .ic { color:var(--yellow-500); }
body.theme-platform .nav-item .cnt { background:var(--yellow-500); color:var(--ink-900); }
body.theme-platform .side-card { background:var(--night-800); border-color:#FFFFFF14; color:#ADBBB4; }
body.theme-platform .side-card b { color:#F3F6F2; } body.theme-platform .side-card small { color:#8BA096; }

.main { position:relative; min-width:0; min-height:0; }
.app.fixed .main { overflow:hidden; }
.page { padding:24px 28px 28px; }
.page.narrow { max-width:1080px; }
.page-head { display:flex; align-items:flex-end; gap:14px; margin-bottom:18px; }
.page-head h1 { margin-top:6px; font-family:var(--font-display); font-size:34px; line-height:36px; font-weight:900; letter-spacing:-.05em; color:var(--fg-strong); }
.page-head p { margin-top:6px; max-width:760px; font-size:13.5px; color:var(--fg-muted); }
.page-head .acts { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.eyebrow { display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:900; letter-spacing:.16em; color:var(--fg-strong); text-transform:uppercase; }
.eyebrow::before { content:""; width:18px; height:4px; border-radius:99px; background:var(--brand); flex:none; }
.eyebrow.ai { color:var(--brand-text); }
.eyebrow.plain::before { display:none; }
.eyebrow em { margin-left:auto; font-style:normal; font-size:11.5px; font-weight:700; letter-spacing:0; color:var(--fg-subtle); text-transform:none; }
.route { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border:1px solid var(--border-default); border-radius:999px; background:var(--bg-raised); font:600 11.5px/16px var(--font-mono); color:var(--fg-muted); }
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--fg-subtle); }
.breadcrumb a { text-decoration:none; font-weight:700; color:var(--fg-muted); }

/* ===== 6. Layout helpers ===== */
.g { display:grid; gap:14px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .g3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .g4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .g5 { grid-template-columns:repeat(5,minmax(0,1fr)); } .g6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.g-main-side { grid-template-columns:minmax(0,1fr) 360px; } .g-side-main { grid-template-columns:300px minmax(0,1fr); } .g-2-1 { grid-template-columns:minmax(0,2fr) minmax(0,1fr); } .g-1-2 { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.span2 { grid-column:span 2; } .span3 { grid-column:span 3; } .span-all { grid-column:1 / -1; }
.row { display:flex; align-items:center; gap:8px; } .row.wrap { flex-wrap:wrap; } .row.top { align-items:flex-start; } .row.between { justify-content:space-between; }
.col { display:flex; flex-direction:column; gap:8px; }
.sp { flex:1; }
.mt4 { margin-top:4px; } .mt8 { margin-top:8px; } .mt { margin-top:14px; } .mt20 { margin-top:20px; } .mt28 { margin-top:28px; } .mb8 { margin-bottom:8px; } .mb { margin-bottom:14px; }
.muted { color:var(--fg-muted); } .subtle { color:var(--fg-subtle); } .strong { color:var(--fg-strong); font-weight:800; }
.small { font-size:12px; line-height:16px; } .xsmall { font-size:11px; line-height:14px; }
.mono { font-family:var(--font-mono); font-size:12px; }
.ok-t { color:var(--success-fg); } .warn-t { color:var(--warning-fg); } .danger-t { color:var(--danger-fg); } .info-t { color:var(--info-fg); } .ai-t { color:var(--ai-fg); }
.up { color:var(--success-fg); font-weight:700; } .down { color:var(--danger-fg); font-weight:700; }
.divider { height:1px; background:var(--border-subtle); margin:12px 0; }
.nowrap { white-space:nowrap; }
.right { text-align:right; } .center-t { text-align:center; }
.mask { letter-spacing:.02em; }

/* ===== 7. Cards & KPIs ===== */
.card { padding:var(--pad-card); border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--bg-surface); box-shadow:var(--shadow-sm); min-width:0; }
.card.flat { box-shadow:none; }
.card.tight { padding:14px 16px; }
.card.raised { background:var(--bg-raised); }
.card.dashed { border-style:dashed; box-shadow:none; background:var(--bg-sunken); }
.card.ai { border-color:var(--ai-border); background:var(--ai-bg); }
.card.danger { border-color:var(--danger-border); background:var(--danger-bg); }
.card.warn { border-color:var(--warning-border); background:var(--warning-bg); }
.card.success { border-color:var(--success-border); background:var(--success-bg); }
.card.info { border-color:var(--info-border); background:var(--info-bg); }
.card-h { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.card-h h3 { font-size:15px; line-height:20px; font-weight:800; letter-spacing:-.01em; color:var(--fg-strong); }
.card-h .acts { margin-left:auto; display:flex; gap:6px; align-items:center; }
.card h3 { font-size:15px; line-height:20px; font-weight:800; color:var(--fg-strong); }
.card > .eyebrow { margin-bottom:12px; }
.card p { font-size:13px; line-height:19px; color:var(--fg-muted); }
.kpi { padding:14px 16px; }
.kpi small { display:block; margin-top:4px; font-size:12px; font-weight:500; letter-spacing:normal; text-transform:none; color:var(--fg-muted); line-height:16px; }
.kpi small a { color:var(--fg-muted); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.kpi small a:hover { color:var(--fg-strong); }
.kpi b { display:block; margin-top:6px; font-family:var(--font-display); font-size:28px; line-height:30px; font-weight:900; letter-spacing:-.04em; color:var(--fg-strong); }
.kpi span { display:block; margin-top:4px; font-size:12px; color:var(--fg-subtle); }
.dl { display:grid; grid-template-columns:150px minmax(0,1fr); gap:8px 14px; font-size:13px; }
.dl dt { color:var(--fg-subtle); font-weight:600; } .dl dd { margin:0; color:var(--fg-strong); font-weight:600; }
.dl.wide { grid-template-columns:200px minmax(0,1fr); }
.callout { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--info-border); border-radius:var(--radius-md); background:var(--info-bg); color:var(--info-fg); font-size:12.5px; line-height:18px; }
.callout.warn { border-color:var(--warning-border); background:var(--warning-bg); color:var(--warning-fg); }
.callout.danger { border-color:var(--danger-border); background:var(--danger-bg); color:var(--danger-fg); }
.callout.ok { border-color:var(--success-border); background:var(--success-bg); color:var(--success-fg); }
.callout.ai { border-color:var(--ai-border); background:var(--ai-bg); color:var(--fg-strong); }
.callout.internal { border-color:var(--internal-border); background:var(--internal-bg); color:var(--internal-fg); }
.callout.neutral { border-color:var(--border-default); background:var(--bg-sunken); color:var(--fg-default); }
.callout b { font-weight:800; }
.callout .end { margin-left:auto; flex:none; }

/* ===== 8. Buttons ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:var(--control-h); padding:0 14px; border:1px solid transparent; border-radius:999px; font-size:13px; font-weight:800; white-space:nowrap; text-decoration:none; background:none; }
.btn .ic { width:15px; height:15px; vertical-align:0; }
.btn.sm { height:30px; padding:0 11px; font-size:12px; }
.btn.xs { height:24px; padding:0 9px; font-size:11.5px; }
.btn.icon { width:var(--control-h); padding:0; } .btn.sm.icon { width:30px; }
.btn-brand { background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-brand); }
.btn-primary { background:var(--action); color:var(--on-action); border:1px solid transparent; }
body[data-brand="suamarca"] .btn-primary,
body[data-brand="fibralitoral"] .btn-primary { background:var(--brand); color:var(--on-brand); }
body[data-brand="vc1"] .btn-primary { background:var(--vc1-graphite); color:#fff; box-shadow:inset 0 -2px 0 var(--vc1-lime); }
.btn-outline { background:var(--bg-raised); border-color:var(--border-default); color:var(--fg-strong); box-shadow:var(--shadow-xs); }
.btn-ghost { background:none; color:var(--fg-muted); }
.btn-ghost:hover { background:var(--bg-hover); color:var(--fg-strong); }
.btn-danger { background:var(--danger-fg); color:#fff; }
.btn-danger-outline { background:var(--bg-raised); border-color:var(--danger-border); color:var(--danger-fg); }
.btn-link { height:auto; padding:0; color:var(--info-fg); text-decoration:underline; text-underline-offset:3px; font-weight:700; }
.btn-ai { background:var(--ai-bg); border-color:var(--ai-border); color:var(--ai-fg); }
.btn[disabled], .btn.disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn.loading::before { content:""; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; flex:none; }
.done-msg { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:999px; background:var(--success-bg); color:var(--success-fg); font-size:13px; font-weight:800; }

/* ===== 9. Tags & chips ===== */
.tag { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border:1px solid var(--border-default); border-radius:999px; background:var(--bg-raised); font-size:11px; line-height:14px; font-weight:700; color:var(--fg-muted); white-space:nowrap; vertical-align:middle; }
.tag i.d { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.tag .ic { width:11px; height:11px; vertical-align:0; }
.tag.ai { border-color:var(--ai-border); background:var(--ai-bg); color:var(--ai-fg); }
.tag.warn { border-color:var(--warning-border); background:var(--warning-bg); color:var(--warning-fg); }
.tag.danger { border-color:var(--danger-border); background:var(--danger-bg); color:var(--danger-fg); }
.tag.ok { border-color:var(--success-border); background:var(--success-bg); color:var(--success-fg); }
.tag.info { border-color:var(--info-border); background:var(--info-bg); color:var(--info-fg); }
.tag.internal { border-color:var(--internal-border); background:var(--internal-bg); color:var(--internal-fg); }
.tag.dark { border-color:var(--ink-900); background:var(--ink-900); color:#fff; }
.tag.dashed { border-style:dashed; border-color:var(--border-strong); background:var(--bg-sunken); color:var(--fg-muted); }
.tag.strike { text-decoration:line-through; color:var(--fg-subtle); }
.tag.lg { height:24px; padding:0 10px; font-size:12px; }
.chip-addon { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border:1px solid var(--ai-border); border-radius:999px; background:var(--ai-bg); color:var(--ai-fg); font-size:10.5px; font-weight:800; white-space:nowrap; }
.chip-addon .ic { width:11px; height:11px; vertical-align:0; }
.chip-soon { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border:1px dashed var(--border-strong); border-radius:999px; background:var(--bg-sunken); color:var(--fg-muted); font-size:10.5px; font-weight:800; white-space:nowrap; }
.chip-soon .ic { width:11px; height:11px; vertical-align:0; }
.readonly { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border:1px dashed var(--border-strong); border-radius:999px; font-size:12px; font-weight:700; color:var(--fg-muted); background:var(--bg-raised); }
.count { display:inline-block; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--brand); color:var(--on-brand); font-size:11px; font-weight:800; line-height:20px; text-align:center; }
.count.dark { background:var(--ink-900); color:#fff; }

/* ===== 10. Avatars & channels ===== */
.av { position:relative; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; font-size:13px; font-weight:800; color:var(--ink-900); flex:none; background:var(--ink-150); }
.av.xs { width:22px; height:22px; font-size:9px; } .av.sm { width:28px; height:28px; font-size:10.5px; } .av.md { width:34px; height:34px; font-size:12px; } .av.lg { width:60px; height:60px; font-size:19px; }
.av.ai { border-radius:12px; background:var(--brand); color:var(--on-brand); }
.av .ch { position:absolute; right:-3px; bottom:-3px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; border:2px solid var(--bg-surface); color:#fff; font-size:8.5px; font-weight:900; }
.av.sm .ch { width:14px; height:14px; font-size:7px; right:-3px; bottom:-3px; }
.av .pr { position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; border:2px solid var(--bg-surface); background:var(--presence-on); }
.av .pr.pause { background:var(--presence-pause); } .av .pr.off { background:var(--presence-off); } .av .pr.busy { background:var(--presence-busy); }
.c-wa { background:var(--ch-whatsapp); } .c-ig { background:var(--ch-instagram); } .c-fb { background:var(--ch-messenger); } .c-mail { background:var(--ch-email); } .c-web { background:var(--ch-webchat); } .c-voice { background:var(--ch-voice); } .c-waha { background:#128C7E; }
.ch-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--fg-default); white-space:nowrap; }
.ch-pill i { display:grid; place-items:center; width:18px; height:18px; border-radius:6px; color:#fff; font-size:8.5px; font-style:normal; font-weight:900; }
.av-stack { display:inline-flex; } .av-stack .av { border:2px solid var(--bg-surface); margin-left:-8px; } .av-stack .av:first-child { margin-left:0; }
.who { display:flex; align-items:center; gap:10px; min-width:0; }
.who b { display:block; color:var(--fg-strong); font-weight:700; }
.who small { display:block; font-size:11.5px; color:var(--fg-subtle); }

/* ===== 11. Tables, toolbars, pagination ===== */
.t-wrap { border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--bg-surface); box-shadow:var(--shadow-sm); overflow:hidden; }
.t-wrap .toolbar { padding:12px 14px; margin:0; border-bottom:1px solid var(--border-default); }
.t-wrap .t-foot { display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--border-default); font-size:12px; color:var(--fg-subtle); }
table.t { width:100%; border-collapse:collapse; font-size:13px; }
.t th { padding:9px 12px; border-bottom:1px solid var(--border-default); background:var(--bg-surface); font-size:10.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-subtle); text-align:left; white-space:nowrap; }
.t td { padding:10px 12px; border-bottom:1px solid var(--border-subtle); color:var(--fg-default); vertical-align:middle; }
.t tr:last-child td { border-bottom:0; }
.t td b { color:var(--fg-strong); font-weight:700; }
.t td small { display:block; font-size:11.5px; line-height:15px; color:var(--fg-subtle); }
.t .r { text-align:right; } .t .c { text-align:center; }
.t tr.sel td { background:var(--bg-selected); }
.t tr.muted-row td { color:var(--fg-subtle); }
.t tr.add td { background:var(--success-bg); } .t tr.del td { background:var(--danger-bg); } .t tr.chg td { background:var(--warning-bg); }
.t.compact td { padding:7px 12px; }
.t .chk { width:34px; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.toolbar .sp { flex:1; }
.search-in { display:inline-flex; align-items:center; gap:8px; width:260px; height:var(--control-h); padding:0 12px; border:1px solid var(--border-input); border-radius:999px; background:var(--bg-raised); color:var(--fg-subtle); font-size:13px; }
.search-in.wide { width:360px; }
.search-in .val { color:var(--fg-strong); }
.fchip { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border:1px solid var(--border-default); border-radius:999px; background:var(--bg-raised); font-size:12px; font-weight:600; color:var(--fg-muted); white-space:nowrap; }
.fchip b { color:var(--fg-strong); font-weight:800; }
.fchip.on { border-color:var(--ink-900); background:var(--ink-900); color:#fff; } .fchip.on b { color:#fff; }
.fchip .ic { width:13px; height:13px; vertical-align:0; }
.seg { display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--bg-sunken); }
.seg button, .seg span { display:inline-flex; align-items:center; justify-content:center; gap:5px; height:28px; padding:0 12px; border:0; border-radius:999px; background:none; font-size:12.5px; font-weight:700; color:var(--fg-muted); white-space:nowrap; }
.seg .on { background:var(--bg-raised); color:var(--fg-strong); box-shadow:var(--shadow-xs); }
.seg b { font-size:11px; font-weight:800; color:var(--fg-subtle); }
.seg.full { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.pager { display:flex; gap:4px; align-items:center; margin-left:auto; }
.pager button { height:28px; min-width:28px; padding:0 8px; border:1px solid var(--border-default); border-radius:8px; background:var(--bg-raised); font-size:12px; font-weight:700; }
.pager button.on { background:var(--ink-900); color:#fff; border-color:var(--ink-900); }
.bulkbar { display:flex; align-items:center; gap:10px; padding:8px 14px; background:var(--ink-900); color:#fff; font-size:12.5px; font-weight:700; }
.bulkbar .btn-outline { background:transparent; color:#fff; border-color:#ffffff40; box-shadow:none; }

/* ===== 12. Forms ===== */
.form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
.form.one { grid-template-columns:minmax(0,1fr); } .form.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field.full { grid-column:1 / -1; }
.field > label, .lbl { font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-subtle); }
.field .req { color:var(--danger-fg); }
.input, .select, .textarea { display:flex; align-items:center; gap:8px; min-height:var(--control-h); padding:0 12px; border:1px solid var(--border-input); border-radius:var(--radius-sm); background:var(--bg-raised); font-size:14px; color:var(--fg-strong); min-width:0; }
.input .ph, .textarea .ph { color:var(--fg-subtle); }
.input .end, .select .end { margin-left:auto; color:var(--fg-subtle); display:inline-flex; align-items:center; gap:6px; }
.select::after { content:""; margin-left:auto; width:14px; height:14px; flex:none; background:currentColor; color:var(--fg-subtle); -webkit-mask:var(--chev) center/contain no-repeat; mask:var(--chev) center/contain no-repeat; }
.select { --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.textarea { align-items:flex-start; min-height:84px; padding:9px 12px; line-height:20px; }
.input.disabled, .select.disabled, .textarea.disabled { background:var(--bg-sunken); color:var(--fg-disabled); border-color:var(--border-default); }
.input.invalid, .select.invalid, .textarea.invalid { border-color:var(--danger-fg); box-shadow:0 0 0 3px var(--danger-bg); }
.input.focus { outline:2px solid var(--ink-900); outline-offset:2px; box-shadow:0 0 0 6px rgb(var(--brand-rgb) / .35); }
.input .prefix { color:var(--fg-subtle); font-weight:600; }
.help { font-size:12px; line-height:16px; color:var(--fg-subtle); }
.err { display:flex; align-items:center; gap:5px; font-size:12px; line-height:16px; color:var(--danger-fg); font-weight:600; }
.check, .radio { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-default); }
.check i, .radio i { display:grid; place-items:center; width:18px; height:18px; border:1.5px solid var(--border-input); border-radius:5px; background:var(--bg-raised); flex:none; }
.radio i { border-radius:50%; }
.check.on i { background:var(--brand); border-color:var(--brand); }
.check.on i::after { content:""; width:10px; height:6px; border-left:2px solid var(--on-brand); border-bottom:2px solid var(--on-brand); transform:translateY(-1px) rotate(-45deg); }
.radio.on i { border-color:var(--ink-900); } .radio.on i::after { content:""; width:8px; height:8px; border-radius:50%; background:var(--ink-900); }
.check.dis, .radio.dis { opacity:.45; }
.switch { position:relative; display:inline-block; width:34px; height:20px; border-radius:999px; background:var(--border-input); flex:none; vertical-align:middle; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:var(--shadow-xs); }
.switch.on { background:var(--brand); } .switch.on::after { left:17px; }
.switch.dis { opacity:.45; }
.opt-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-subtle); }
.opt-row:last-child { border-bottom:0; }
.opt-row b { display:block; font-size:13.5px; color:var(--fg-strong); }
.opt-row small { display:block; font-size:12px; line-height:16px; color:var(--fg-subtle); }
.opt-row .end { margin-left:auto; display:flex; gap:8px; align-items:center; flex:none; }
.choice { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-raised); }
.choice.on { border-color:rgb(var(--brand-rgb) / .7); background:var(--bg-selected); box-shadow:inset 3px 0 0 var(--brand); }
.choice b { display:block; color:var(--fg-strong); font-size:14px; }
.choice small { display:block; margin-top:2px; font-size:12.5px; line-height:18px; color:var(--fg-muted); }
.upload { display:grid; place-items:center; gap:6px; padding:22px; border:1.5px dashed var(--border-input); border-radius:var(--radius-lg); background:var(--bg-raised); text-align:center; font-size:13px; color:var(--fg-muted); }
.color-sw { width:36px; height:36px; border-radius:10px; border:1px solid rgb(0 0 0 / .1); flex:none; }

/* ===== 13. Tabs, steppers, timelines ===== */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border-default); margin-bottom:16px; }
.tabs .tab { position:relative; height:38px; padding:0 14px; border:0; background:none; font-size:13px; font-weight:700; color:var(--fg-muted); white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.tabs .tab.on { color:var(--fg-strong); font-weight:800; }
.tabs .tab.on::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--brand); }
.tabs .tab .count, .tabs .tab .tag, .tabs .tab .chip-soon, .tabs .tab .chip-addon { margin-left:2px; }
.stepper { display:flex; gap:0; align-items:center; margin-bottom:18px; }
.stepper .st { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--fg-subtle); white-space:nowrap; }
.stepper .st i { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--bg-sunken); border:1px solid var(--border-default); font-style:normal; font-size:11.5px; font-weight:800; color:var(--fg-muted); }
.stepper .st.done i { background:var(--success-fg); border-color:var(--success-fg); color:#fff; }
.stepper .st.cur { color:var(--fg-strong); } .stepper .st.cur i { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.stepper .st.err i { background:var(--danger-fg); border-color:var(--danger-fg); color:#fff; }
.stepper .ln { flex:1; height:2px; min-width:24px; margin:0 10px; background:var(--border-default); }
.stepper .ln.done { background:var(--success-fg); }
.step { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--border-subtle); }
.step:last-child { border-bottom:0; }
.step .n { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--bg-sunken); font-size:11.5px; font-weight:800; color:var(--fg-muted); flex:none; }
.step.done .n { background:var(--success-fg); color:#fff; }
.step.cur { margin:2px -10px; padding:10px; border:1px solid rgb(var(--brand-rgb) / .6); border-radius:14px; background:var(--bg-selected); }
.step.cur .n { background:var(--brand); color:var(--on-brand); }
.step b { display:block; font-size:13.5px; line-height:18px; color:var(--fg-strong); }
.step.done b { color:var(--fg-muted); font-weight:600; }
.step small { display:block; font-size:12px; line-height:16px; color:var(--fg-subtle); }
.step .end { margin-left:auto; display:flex; align-items:center; gap:8px; }
.tl { position:relative; display:flex; flex-direction:column; gap:0; }
.tl-i { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:0 0 14px; font-size:13px; }
.tl-i::before { content:""; position:absolute; left:13px; top:26px; bottom:0; width:2px; background:var(--border-subtle); }
.tl-i:last-child::before { display:none; }
.tl-i .d { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--bg-sunken); color:var(--fg-muted); }
.tl-i .d.ok { background:var(--success-bg); color:var(--success-fg); } .tl-i .d.warn { background:var(--warning-bg); color:var(--warning-fg); } .tl-i .d.danger { background:var(--danger-bg); color:var(--danger-fg); } .tl-i .d.ai { background:var(--ai-bg); color:var(--ai-fg); } .tl-i .d.internal { background:var(--internal-bg); color:var(--internal-fg); } .tl-i .d.info { background:var(--info-bg); color:var(--info-fg); }
.tl-i b { color:var(--fg-strong); }
.tl-i small { display:block; font-size:11.5px; color:var(--fg-subtle); }
.tl-i .ba { margin-top:4px; font-size:12px; color:var(--fg-muted); }
.ba del { color:var(--danger-fg); } .ba ins { text-decoration:none; color:var(--success-fg); font-weight:700; }

/* Publish stepper (horizontal labels) */
.steps { display:flex; gap:0; margin-bottom:18px; border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-raised); }
.steps > span { flex:1; padding:12px 14px; font-size:12.5px; font-weight:700; color:var(--fg-subtle); text-align:center; border-right:1px solid var(--border-subtle); }
.steps > span:last-child { border-right:0; }
.steps > span.on { background:var(--bg-selected); color:var(--fg-strong); box-shadow:inset 0 -3px 0 var(--brand); }

/* Checklists (signup, gates, publish validation) */
.checklist { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.checklist li { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:20px; color:var(--fg-default); }
.checklist li .ic-check { color:var(--success-fg); flex:none; margin-top:1px; }
.checklist li.ok { color:var(--success-fg); font-weight:700; }
.checklist li.ok::before { content:"✓"; font-weight:900; flex:none; }
.checklist li.fail { color:var(--danger-fg); font-weight:700; }
.checklist li.fail::before { content:"✗"; font-weight:900; flex:none; }

/* AI run trace */
.trace { margin:0; padding-left:18px; font-size:13px; line-height:22px; color:var(--fg-muted); }
.trace li { margin:4px 0; }
.trace code { font-size:12px; }

/* Marketing wallet chip in page head */
.wallet-pill { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; border:1px solid var(--ai-border); border-radius:999px; background:var(--ai-bg); font-size:12.5px; color:var(--ai-fg); }
.wallet-pill b { font-weight:900; color:var(--fg-strong); }

/* Home hero band */
.hero-home { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:end; padding:24px; border:1px solid var(--border-default); border-radius:var(--radius-2xl); background:var(--bg-surface); }

/* Account picker cards */
.list-cards { display:flex; flex-direction:column; gap:10px; }
.list-cards > a, .list-cards > .card { text-decoration:none; color:inherit; }

/* Public site chrome */
.pub-top { display:flex; align-items:center; gap:16px; min-height:64px; padding:0 32px; background:var(--bg-surface); border-bottom:1px solid var(--border-default); }
.pub-nav { display:flex; gap:20px; margin-left:auto; font-size:14px; font-weight:700; }
.pub-nav a { text-decoration:none; color:var(--fg-muted); }
.pub-nav a.on { color:var(--fg-strong); }
.pub-hero { padding:64px 48px; background:linear-gradient(165deg,#171717 0%,#262626 55%,#0e0e0e 100%); color:#fff; min-height:520px; position:relative; overflow:hidden; }
.pub-hero h1 { font-size:48px; line-height:1.05; margin-top:12px; color:#fff; }
.pub-hero h1 em { color:var(--brand-yellow,#EFCD00); font-style:normal; }
.pub-hero .lead { color:#d9d9d4; margin-top:16px; font-size:18px; }
.pub-hero .help { color:rgba(255,255,255,.65); }
.pub-hero .eyebrow { color:var(--brand-yellow,#EFCD00); }
.pub-hero .hero-inner { max-width:560px; position:relative; z-index:1; }
.pub-hero .hero-art { position:absolute; right:48px; bottom:24px; width:280px; z-index:0; }
.pub-main { max-width:1080px; margin:0 auto; padding:32px 28px 48px; }
.pub-foot { padding:24px 32px; border-top:1px solid var(--border-default); font-size:12.5px; color:var(--fg-subtle); text-align:center; }

/* Plan builder layout */
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.plan-grid .span2 { grid-column:span 2; }

/* Service calendar week */
.cal-week { overflow:auto; border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-raised); }
.cal-week .t.cal td, .cal-week .t.cal th { vertical-align:top; min-width:108px; font-size:12px; }
.cal-ev { display:block; padding:4px 8px; margin:2px 0; border-radius:8px; background:var(--info-bg); color:var(--info-fg); font-size:11.5px; line-height:15px; font-weight:700; }
.cal-ev.ai { background:var(--ai-bg); color:var(--ai-fg); }
.cal-ev.sel { outline:2px solid var(--brand); background:var(--bg-selected); color:var(--fg-strong); }
.cal-ev small { display:block; font-weight:600; color:var(--fg-subtle); }

.ivr-tree .tree { margin-top:8px; }

.dropzone { display:grid; place-items:center; min-height:140px; padding:28px; border:2px dashed var(--border-input); border-radius:var(--radius-xl); background:var(--bg-raised); text-align:center; font-size:14px; color:var(--fg-muted); }

.timeline { margin:0; padding:0; list-style:none; }
.timeline li { position:relative; padding:0 0 16px 20px; border-left:2px solid var(--border-strong); margin-left:6px; font-size:13.5px; color:var(--fg-muted); }
.timeline li:last-child { border-left-color:transparent; padding-bottom:0; }
.timeline li::before { content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--brand); border:2px solid var(--bg-surface); }
.timeline li b { color:var(--fg-strong); }

.phone-panel { max-width:380px; }
.phone-panel .dialpad, .dial .dialpad { margin-top:10px; }

/* Flow canvas (alias + grid mode for builder) */
.flow-canvas, .fb-canvas { position:relative; min-height:480px; overflow:hidden; border:1px solid var(--border-default); border-radius:var(--radius-xl); background-color:var(--bg-surface); background-image:radial-gradient(var(--ink-200) 1px, transparent 1px); background-size:18px 18px; }
.flow-canvas.fb-grid, .fb-canvas.fb-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(108px,1fr)); gap:12px; padding:16px; height:min(520px, calc(100vh - 300px)); align-content:stretch; }
.flow-canvas.fb-grid .node, .flow-canvas.fb-grid .fb-node, .fb-canvas.fb-grid .fb-node { position:relative; left:auto !important; top:auto !important; width:auto; max-width:none; align-self:start; z-index:1; }
.flow-canvas .node, .fb-node { position:absolute; width:190px; padding:10px 12px; border:1px solid var(--border-default); border-radius:14px; background:var(--bg-raised); box-shadow:var(--shadow-sm); font-size:12px; line-height:16px; }
.flow-canvas svg.lines, .fb-canvas svg.lines { position:absolute; inset:16px; width:calc(100% - 32px); height:calc(100% - 32px); pointer-events:none; z-index:0; }
.flow-canvas svg.lines path, .fb-canvas svg.lines path { fill:none; stroke:var(--ink-400); stroke-width:2; }
.flow-canvas svg.lines path.dash, .fb-canvas svg.lines path.dash { stroke-dasharray:5 5; }

/* Cmdk palette (align shell/global-search with cmdk-in / cmdk-i) */
.cmdk > input[type="search"] { display:block; width:100%; height:56px; padding:0 18px; border:0; border-bottom:1px solid var(--border-default); font-size:16px; font-weight:600; color:var(--fg-strong); background:var(--bg-raised); }
.cmdk-h, .cmdk-g { margin:10px 12px 4px; font-size:10.5px; font-weight:900; letter-spacing:.14em; color:var(--fg-subtle); text-transform:uppercase; }
.cmdk-group button { display:flex; align-items:center; gap:10px; width:calc(100% - 16px); margin:2px 8px; padding:8px 10px; border:0; border-radius:12px; background:none; font-size:13.5px; text-align:left; color:var(--fg-default); }
.cmdk-group button:hover { background:var(--bg-hover); }

.overlay .modal.alert .dialog, .overlay .dialog.alertdialog { max-width:520px; }
.modal.alert .dialog-h, .alertdialog .dialog-h { border-bottom-color:var(--danger-border); background:var(--danger-bg); }

/* Index gallery */
.gallery { max-width:1200px; margin:0 auto; padding:28px 32px 48px; }
.gallery h1 { font-family:var(--font-display); font-size:40px; font-weight:900; letter-spacing:-.05em; color:var(--fg-strong); }
.gallery section { margin-top:28px; }
.gallery section h2 { display:flex; align-items:center; gap:10px; font-size:20px; margin:0 0 10px; color:var(--fg-strong); }
.gallery ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 20px; }
.gallery a { display:block; padding:8px 10px; border-radius:10px; text-decoration:none; font-weight:700; color:var(--fg-strong); }
.gallery a:hover { background:var(--bg-hover); }
.gallery a small { display:block; margin-top:2px; font-weight:600; font-size:11.5px; color:var(--fg-subtle); }

/* ===== 14. Meters, charts ===== */
.bar { height:8px; border-radius:99px; background:var(--bg-sunken); overflow:hidden; }
.bar i { display:block; height:100%; border-radius:99px; background:var(--brand); }
.bar.dark i { background:var(--ink-800); } .bar.ok i { background:var(--success-fg); } .bar.warn i { background:var(--warning-fg); } .bar.danger i { background:var(--danger-fg); }
.bar.lg { height:10px; }
.meter { position:relative; height:10px; border-radius:99px; background:var(--bg-sunken); border:1px solid var(--border-default); }
.meter > i { position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:var(--brand); }
.meter.warn > i { background:var(--warning-fg); } .meter.danger > i { background:var(--danger-fg); }
.meter .mk { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink-700); border-radius:2px; }
.meter-l { display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color:var(--fg-subtle); }
.chart { display:flex; align-items:flex-end; gap:8px; height:170px; padding:8px 4px 0; border-bottom:1px solid var(--border-default); }
.chart .c { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:2px; height:100%; }
.chart .c i { display:block; width:100%; border-radius:6px 6px 2px 2px; background:var(--chart-1); }
.chart .c i.hi { background:var(--brand); outline:1px solid var(--fg-strong); outline-offset:-1px; }
.chart .c i.s3 { background:var(--chart-3); } .chart .c i.s4 { background:var(--chart-4); } .chart .c i.s5 { background:var(--chart-5); } .chart .c i.s6 { background:var(--chart-6); }
.chart .c i.ai { background:repeating-linear-gradient(45deg, rgb(var(--brand-rgb) / .75) 0 4px, rgb(var(--brand-rgb) / .3) 4px 8px); outline:1px solid var(--brand-text); outline-offset:-1px; }
.chart .c em { font-style:normal; font-size:10.5px; color:var(--fg-subtle); text-align:center; }
.chart-x { display:flex; gap:8px; padding:6px 4px 0; font-size:11px; color:var(--fg-subtle); }
.chart-x span { flex:1; text-align:center; }
.hbars { display:flex; flex-direction:column; gap:9px; font-size:12.5px; }
.hbars .hb { display:grid; grid-template-columns:130px minmax(0,1fr) 64px; gap:10px; align-items:center; }
.hbars .hb .bar { height:10px; }
.hbars .hb span:last-child { text-align:right; font-weight:700; color:var(--fg-strong); font-variant-numeric:tabular-nums; }
.donut { width:120px; height:120px; border-radius:50%; position:relative; flex:none; }
.donut::after { content:""; position:absolute; inset:22px; border-radius:50%; background:var(--bg-surface); }
.donut b { position:absolute; inset:0; z-index:1; display:grid; place-items:center; font-family:var(--font-display); font-size:20px; font-weight:900; color:var(--fg-strong); }
.legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:12px; color:var(--fg-muted); }
.legend i { display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:3px; vertical-align:-1px; }
.spark { display:block; width:100%; height:44px; }
.stack { display:flex; height:14px; overflow:hidden; border-radius:99px; }
.stack i { display:block; height:100%; }

/* ===== 15. Overlays drawn statically (modals, drawers, popovers, toasts) ===== */
.overlay { position:absolute; inset:0; z-index:40; display:flex; align-items:flex-start; justify-content:center; padding-top:56px; background:rgb(34 37 31 / .16); }
.overlay.right { justify-content:flex-end; padding:0; }
.overlay.center { align-items:center; padding-top:0; }
.dialog { width:600px; max-width:calc(100% - 40px); border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--bg-raised); box-shadow:var(--shadow-xl); overflow:hidden; }
.dialog.lg { width:820px; } .dialog.sm { width:460px; }
.dialog-h { display:flex; align-items:flex-start; gap:10px; padding:18px 22px 12px; border-bottom:1px solid var(--border-default); }
.dialog-h h3 { font-size:20px; line-height:26px; font-weight:900; letter-spacing:-.01em; color:var(--fg-strong); }
.dialog-h small { display:block; margin-top:2px; font-size:12.5px; color:var(--fg-subtle); }
.dialog-h .icon-btn { margin-left:auto; }
.dialog-b { padding:16px 22px; }
.dialog-f { display:flex; align-items:center; gap:8px; padding:12px 22px 18px; border-top:1px solid var(--border-subtle); }
.dialog-f p { flex:1; font-size:12px; line-height:17px; color:var(--fg-subtle); }
.drawer { width:460px; height:100%; border-left:1px solid var(--border-default); background:var(--bg-raised); box-shadow:var(--shadow-xl); display:flex; flex-direction:column; }
.drawer.wide { width:640px; }
.drawer .dialog-b { flex:1; overflow:hidden; }
.popover { position:absolute; z-index:50; border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--bg-raised); box-shadow:var(--shadow-xl); }
.menu { padding:6px; min-width:220px; }
.menu .mi { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; font-size:13px; color:var(--fg-default); }
.menu .mi:hover, .menu .mi.on { background:var(--bg-hover); }
.menu .mi.danger { color:var(--danger-fg); }
.menu .sep { height:1px; margin:4px 6px; background:var(--border-subtle); }
.toast { position:absolute; z-index:60; bottom:22px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; background:var(--ink-900); color:#fff; font-size:13px; font-weight:700; box-shadow:var(--shadow-lg); white-space:nowrap; }
.toast .ic { color:var(--brand); }
.alertdialog .confirm-type { margin-top:10px; }

/* ===== 16. States: empty, error, skeleton, no-permission ===== */
.empty { display:grid; grid-template-columns:200px 1fr; gap:26px; align-items:center; max-width:780px; padding:30px; border:1px solid var(--border-default); border-radius:var(--radius-2xl); background:var(--bg-surface); box-shadow:var(--shadow-lg); }
.empty img { width:190px; }
.empty h2 { margin-top:10px; font-family:var(--font-display); font-size:34px; line-height:36px; font-weight:900; letter-spacing:-.05em; color:var(--fg-strong); }
.empty p { margin-top:10px; color:var(--fg-muted); font-size:14px; line-height:21px; }
.empty .row { margin-top:16px; }
.empty-sm { display:flex; flex-direction:column; align-items:center; gap:8px; padding:36px 20px; text-align:center; color:var(--fg-muted); font-size:13px; }
.empty-sm b { font-size:15px; color:var(--fg-strong); }
.empty-sm .ic { width:28px; height:28px; color:var(--fg-subtle); }
.empty-sm.ok .ic { color:var(--success-fg); }
.error-st { display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--danger-border); border-radius:var(--radius-lg); background:var(--bg-raised); }
.error-st .ic { color:var(--danger-fg); width:22px; height:22px; }
.error-st b { display:block; color:var(--fg-strong); font-size:14px; }
.error-st p { margin-top:4px; font-size:13px; color:var(--fg-muted); }
.sk { display:block; height:12px; border-radius:6px; background:linear-gradient(90deg, var(--ink-150), var(--ink-100)); }
.sk.h20 { height:20px; } .sk.h32 { height:32px; } .sk.h60 { height:60px; } .sk.h120 { height:120px; } .sk.circle { border-radius:50%; }
.center { display:grid; place-items:center; min-height:100%; padding:30px; }
.brand-glyph { display:grid; place-items:center; aspect-ratio:1; border-radius:28px; background:radial-gradient(circle at 35% 30%, rgb(var(--brand-rgb) / .38), rgb(var(--brand-rgb) / .08)); color:var(--brand-text); }
.brand-glyph .ic { width:42%; height:42%; }
.paco-art { width:190px; height:auto; display:block; }

/* ===== 17. Vitrine (DESIGN §6.4) ===== */
.vit-wrap { position:relative; min-height:640px; overflow:hidden; }
.locked-preview { filter:blur(3.5px) saturate(.55); opacity:.5; pointer-events:none; user-select:none; }
.vitrine { position:absolute; inset:0; display:grid; place-items:center; padding:24px; background:linear-gradient(180deg, rgb(248 247 242 / .35), rgb(248 247 242 / .9) 55%); }
.vit { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:16px; width:780px; max-width:100%; padding:30px 30px 26px 34px; border:1px solid var(--border-default); border-radius:var(--radius-2xl); background:var(--bg-surface); box-shadow:var(--shadow-xl); }
.vit h2 { margin-top:12px; font-family:var(--font-display); font-size:34px; line-height:36px; font-weight:900; letter-spacing:-.05em; color:var(--fg-strong); }
.vit p { margin-top:12px; font-size:14.5px; line-height:22px; color:var(--fg-muted); }
.vit ul { margin:14px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }
.vit li { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-default); }
.vit li .ic { width:15px; height:15px; color:var(--success-fg); }
.vit-price { display:flex; align-items:baseline; gap:8px; margin-top:18px; flex-wrap:wrap; }
.vit-price b { font-family:var(--font-display); font-size:30px; font-weight:900; letter-spacing:-.04em; color:var(--fg-strong); }
.vit-price span { font-size:12.5px; color:var(--fg-subtle); }
.vit-acts { display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.vit-note { margin-top:10px !important; font-size:12px !important; line-height:17px !important; color:var(--fg-subtle) !important; }
.vit-art { display:flex; align-items:flex-end; justify-content:center; }
.vit-art img { width:200px; height:auto; }
.vit-art .brand-glyph { width:190px; }
.mini-vit { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px dashed var(--ai-border); border-radius:var(--radius-lg); background:var(--ai-bg); }
.mini-vit b { display:block; font-size:14px; color:var(--fg-strong); }
.mini-vit small { display:block; font-size:12px; color:var(--fg-muted); }
.mini-vit .btn { margin-left:auto; }
.mini-vit.soon { border-color:var(--border-strong); background:var(--bg-sunken); }

/* ===== 18. Area switcher, search, notifications ===== */
.pop-switch { position:absolute; z-index:50; top:8px; left:160px; width:720px; padding:18px; border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--bg-raised); box-shadow:var(--shadow-xl); }
.pop-switch.static { position:relative; top:0; left:0; }
.pop-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pop-head small { font-size:12px; color:var(--fg-subtle); }
.tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.tile { position:relative; display:flex; flex-direction:column; gap:8px; min-height:100px; padding:12px; border:1px solid var(--border-subtle); border-radius:16px; background:var(--bg-surface); text-align:left; }
.tile .ti { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--bg-sunken); color:var(--fg-strong); }
.tile b { font-size:13.5px; line-height:17px; font-weight:800; color:var(--fg-strong); }
.tile .st { font-size:11.5px; line-height:15px; color:var(--fg-subtle); }
.tile.on { border-color:rgb(var(--brand-rgb) / .6); background:var(--bg-selected); }
.tile.on .ti { background:var(--brand); color:var(--on-brand); }
.tile.locked .ti { color:var(--fg-disabled); } .tile.locked b { color:var(--fg-muted); }
.tile.soon { border-style:dashed; background:var(--bg-sunken); }
.tile .corner { position:absolute; top:10px; right:10px; }
.pop-foot { display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border-subtle); font-size:12.5px; color:var(--fg-muted); }
.pop-foot a { margin-left:auto; font-weight:800; color:var(--fg-strong); text-decoration:underline; text-underline-offset:3px; }
.cmdk { width:700px; border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--bg-raised); box-shadow:var(--shadow-xl); overflow:hidden; }
.cmdk-in { display:flex; align-items:center; gap:10px; height:56px; padding:0 18px; border-bottom:1px solid var(--border-default); font-size:16px; color:var(--fg-strong); font-weight:600; }
.cmdk-in .caret { width:2px; height:18px; background:var(--ink-900); margin-left:-8px; }
.cmdk-res { padding:6px 10px 10px; }
.cmdk-g { margin:10px 8px 4px; font-size:10.5px; font-weight:900; letter-spacing:.14em; color:var(--fg-subtle); text-transform:uppercase; }
.cmdk-i { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:12px; font-size:13.5px; }
.cmdk-i.on { background:var(--bg-selected); }
.cmdk-i .ri { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--bg-sunken); color:var(--fg-strong); flex:none; }
.cmdk-i b { color:var(--fg-strong); font-weight:700; } .cmdk-i small { display:block; font-size:12px; color:var(--fg-subtle); }
.cmdk-i .end { margin-left:auto; display:flex; gap:6px; align-items:center; }
.cmdk-i.lockd b { color:var(--fg-muted); }
.cmdk-foot { display:flex; gap:16px; padding:10px 18px; border-top:1px solid var(--border-subtle); font-size:12px; color:var(--fg-subtle); }
.notif { width:400px; border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--bg-raised); box-shadow:var(--shadow-xl); overflow:hidden; }
.notif-h { display:flex; align-items:center; padding:16px 18px 10px; }
.notif-h h3 { font-size:16px; font-weight:900; color:var(--fg-strong); }
.notif-h a { margin-left:auto; font-size:12px; font-weight:700; color:var(--fg-muted); text-decoration:underline; }
.notif .filters { display:flex; gap:6px; flex-wrap:wrap; padding:0 18px 10px; border-bottom:1px solid var(--border-subtle); }
.n-i { display:flex; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border-subtle); font-size:13px; }
.n-i .ri { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--bg-sunken); color:var(--fg-strong); flex:none; }
.n-i b { color:var(--fg-strong); }
.n-i small { display:flex; gap:6px; align-items:center; margin-top:4px; font-size:11.5px; color:var(--fg-subtle); }
.n-i.unread { background:var(--bg-selected); }

/* ===== 19. Home ===== */
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:20px; overflow:hidden; padding:24px 28px 20px; border:1px solid var(--border-default); border-radius:var(--radius-2xl); background:radial-gradient(circle at 92% 0%, rgb(var(--brand-rgb) / .22), transparent 42%), var(--bg-surface); }
.hero h1 { margin-top:10px; font-family:var(--font-display); font-size:42px; line-height:42px; font-weight:900; letter-spacing:-.06em; color:var(--fg-strong); }
.hero p { max-width:640px; margin-top:10px; font-size:14.5px; line-height:22px; color:var(--fg-muted); }
.hero .prog { display:flex; align-items:center; gap:12px; margin-top:14px; font-size:12px; color:var(--fg-subtle); }
.hero .prog .bar { width:320px; height:10px; }
.hero-art { align-self:end; justify-self:end; width:160px; }
.hero-art .brand-glyph { width:150px; }
.shortcut { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--border-subtle); border-radius:16px; background:var(--bg-surface); text-decoration:none; }
.shortcut .ti { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--bg-sunken); color:var(--fg-strong); flex:none; }
.shortcut b { display:block; font-size:13px; color:var(--fg-strong); } .shortcut small { display:block; font-size:11.5px; color:var(--fg-subtle); }

/* ===== 20. Inbox (DESIGN §6.2–6.3) ===== */
.inbox { display:grid; grid-template-columns:var(--queue-w) minmax(0,1fr) var(--contact-w); height:100%; min-height:0; }
.inbox > * { min-height:0; overflow:hidden; }
.q { display:flex; flex-direction:column; background:var(--bg-surface); border-right:1px solid var(--border-default); }
.q-head { padding:16px 14px 10px; }
.q-head .ttl { display:flex; align-items:center; gap:8px; }
.q-head h1 { font-family:var(--font-display); font-size:22px; line-height:26px; font-weight:900; letter-spacing:-.04em; color:var(--fg-strong); }
.q-head .ttl .icon-btn { margin-left:auto; }
.q-head .seg { margin-top:12px; width:100%; }
.q-head .chips { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.rt-pill { display:inline-flex; align-items:center; gap:6px; margin:0 14px 6px; height:24px; padding:0 10px; border:1px solid var(--warning-border); border-radius:999px; background:var(--warning-bg); color:var(--warning-fg); font-size:11.5px; font-weight:800; align-self:flex-start; }
.q-list { flex:1; overflow:hidden; padding:2px 8px 8px; }
.conv { position:relative; display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:2px 10px; min-height:var(--row-conversation); padding:9px 10px 9px 12px; margin-bottom:2px; border:1px solid transparent; border-radius:var(--radius-md); }
.conv:hover { background:var(--bg-hover); }
.conv.sel { background:var(--bg-selected); border-color:rgb(var(--brand-rgb) / .6); }
.conv.sel::before { content:""; position:absolute; left:-1px; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--brand); }
.conv .av { grid-row:span 3; align-self:start; }
.conv-name { overflow:hidden; font-size:13.5px; font-weight:600; color:var(--fg-strong); white-space:nowrap; text-overflow:ellipsis; }
.conv.unread .conv-name { font-weight:800; }
.conv-time { font-size:11.5px; color:var(--fg-subtle); text-align:right; white-space:nowrap; }
.conv-prev { grid-column:2; overflow:hidden; font-size:12.5px; color:var(--fg-muted); white-space:nowrap; text-overflow:ellipsis; }
.conv-side { grid-column:3; grid-row:2; display:flex; justify-content:flex-end; align-items:center; }
.conv-tags { grid-column:2 / span 2; display:flex; gap:5px; margin-top:4px; flex-wrap:wrap; }
html[data-density="compact"] .conv-tags { display:none; }
.chat { display:flex; flex-direction:column; min-width:0; background:var(--bg-canvas); }
.chat-head { display:flex; align-items:center; gap:12px; height:64px; padding:0 16px; background:var(--bg-surface); border-bottom:1px solid var(--border-default); flex:none; }
.chat-head > span:nth-child(2) { min-width:0; }
.chat-head b { display:block; font-size:15px; font-weight:800; color:var(--fg-strong); white-space:nowrap; }
.chat-head small { display:flex; gap:6px; align-items:center; font-size:12px; color:var(--fg-subtle); white-space:nowrap; overflow:hidden; }
.chat-head .acts { margin-left:auto; display:flex; gap:6px; align-items:center; }
.ctx-card { display:grid; grid-template-columns:32px 1fr auto; gap:12px; align-items:start; margin:12px 18px 0; padding:11px 14px; border:1px solid var(--ai-border); border-radius:var(--radius-lg); background:var(--ai-bg); flex:none; }
.ctx-card small { display:block; font-size:10.5px; font-weight:900; letter-spacing:.14em; color:var(--brand-text); }
.ctx-card p { margin-top:3px; font-size:13px; line-height:19px; color:var(--fg-strong); }
.ctx-card .btn-link { font-size:12px; color:var(--fg-muted); }
.ai-glyph { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--brand); color:var(--on-brand); font-size:15px; font-weight:900; box-shadow:0 6px 16px rgb(var(--brand-rgb) / .3); flex:none; }
.thread { flex:1; min-height:0; overflow:hidden; -webkit-mask-image:linear-gradient(transparent, #000 36px); mask-image:linear-gradient(transparent, #000 36px); display:flex; flex-direction:column; justify-content:flex-end; gap:var(--gap-thread); padding:10px 26px; }
.day-sep { align-self:center; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--fg-subtle); text-transform:uppercase; }
.msg { display:flex; flex-direction:column; gap:3px; max-width:70%; }
.msg.in { align-self:flex-start; } .msg.out { align-self:flex-end; align-items:flex-end; }
.bubble { padding:9px 13px; border-radius:16px; font-size:13.5px; line-height:20px; color:var(--fg-strong); }
.msg.in .bubble { border:1px solid var(--border-default); border-bottom-left-radius:5px; background:var(--bg-raised); }
.msg.out .bubble { border-bottom-right-radius:5px; background:var(--bubble-out-bg); color:var(--bubble-out-fg); }
.msg.ai .bubble { border:1px solid var(--ai-border); background:var(--ai-bg); color:var(--fg-strong); }
.msg.failed .bubble { border:1px solid var(--danger-fg); }
.meta { display:flex; align-items:center; gap:5px; padding:0 4px; font-size:11px; color:var(--fg-subtle); }
.meta b { color:var(--brand-text); font-weight:800; }
.meta .ic { width:13px; height:13px; vertical-align:0; }
.meta.read .ic { color:var(--info-fg); }
.media-img { width:220px; height:140px; border-radius:var(--radius-md); background:linear-gradient(135deg,#E9E2D0,#D9E4EC); display:grid; place-items:center; color:var(--fg-subtle); }
.audio { display:flex; align-items:center; gap:10px; min-width:240px; }
.audio .wave { flex:1; height:22px; background:repeating-linear-gradient(90deg, var(--ink-450) 0 2px, transparent 2px 5px); -webkit-mask:linear-gradient(180deg,transparent 20%,#000 20% 80%,transparent 80%); border-radius:4px; opacity:.6; }
.doc { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-raised); min-width:240px; }
.doc .fi { display:grid; place-items:center; width:34px; height:40px; border-radius:6px; background:var(--danger-bg); color:var(--danger-fg); font-size:9.5px; font-weight:900; }
.doc b { display:block; font-size:12.5px; color:var(--fg-strong); } .doc small { font-size:11px; color:var(--fg-subtle); }
.event { align-self:center; display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border:1px dashed var(--border-strong); border-radius:999px; font-size:12px; color:var(--fg-muted); background:var(--bg-canvas); }
.event.ai { border-color:var(--ai-border); color:var(--ai-fg); }
.note { align-self:flex-end; max-width:70%; padding:9px 13px; border:1px dashed var(--internal-border); border-radius:14px; background:var(--internal-bg); color:var(--internal-fg); font-size:13px; line-height:19px; }
.note small { display:block; margin-bottom:2px; font-size:10.5px; font-weight:900; letter-spacing:.12em; }
.note .mention { font-weight:800; }
.composer-wrap { padding:6px 18px 14px; flex:none; }
.comp-banner { display:flex; align-items:center; gap:10px; margin-bottom:8px; padding:8px 12px; border:1px solid var(--danger-border); border-radius:var(--radius-md); background:var(--danger-bg); color:var(--danger-fg); font-size:12.5px; }
.comp-banner.warn { border-color:var(--warning-border); background:var(--warning-bg); color:var(--warning-fg); }
.comp-banner.neutral { border-color:var(--border-default); background:var(--bg-sunken); color:var(--fg-default); }
.comp-banner .end { margin-left:auto; }
.cop { margin-bottom:8px; padding:10px 10px 10px 12px; border:1px solid var(--ai-border); border-radius:var(--radius-md); background:var(--ai-bg); }
.cop-h { display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:900; letter-spacing:.12em; color:var(--brand-text); text-transform:uppercase; }
.cop-h .cost { margin-left:auto; font-size:11.5px; font-weight:700; letter-spacing:0; color:var(--fg-subtle); text-transform:none; }
.cop-t { margin:6px 0 8px; font-size:13.5px; line-height:20px; color:var(--fg-strong); }
.cop-a { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cop-a .src { margin-left:auto; display:flex; gap:5px; }
.cop.off { border-style:dashed; border-color:var(--border-strong); background:var(--bg-sunken); }
.cop.off .cop-h { color:var(--fg-muted); }
.cop.err { border-color:var(--border-default); background:var(--bg-raised); }
.cop.err .cop-h { color:var(--fg-muted); }
.cop .sk { margin-top:8px; }
.composer { border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-raised); box-shadow:var(--shadow-sm); }
.composer.note-mode { border:1px dashed var(--internal-border); background:var(--internal-bg); }
.composer .mode { display:flex; gap:2px; padding:6px 8px 0; }
.composer .mode span { height:24px; padding:0 10px; border-radius:999px; font-size:11.5px; font-weight:800; color:var(--fg-muted); display:inline-flex; align-items:center; }
.composer .mode span.on { background:var(--bg-sunken); color:var(--fg-strong); }
.composer.note-mode .mode span.on { background:var(--internal-fg); color:#fff; }
.composer .in { min-height:44px; padding:9px 14px 4px; color:var(--fg-subtle); font-size:13.5px; line-height:20px; }
.composer .in.filled { color:var(--fg-strong); }
.composer .bar2 { display:flex; align-items:center; gap:6px; padding:6px 8px 8px 10px; font-size:11.5px; color:var(--fg-subtle); }
.composer .bar2 .btn-brand { margin-left:auto; }
.composer .bar2 .hint { margin-left:auto; }
.composer .bar2 .hint + .btn-brand { margin-left:8px; }
.slash-pop { margin:0 0 8px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-raised); box-shadow:var(--shadow-md); padding:6px; }
.readonly-comp { display:flex; align-items:center; gap:10px; padding:14px 16px; border:1px dashed var(--border-strong); border-radius:var(--radius-lg); background:var(--bg-sunken); font-size:13px; color:var(--fg-muted); }
.ctx { overflow:hidden; background:var(--bg-surface); border-left:1px solid var(--border-default); }
.ctx-top { padding:18px 18px 14px; border-bottom:1px solid var(--border-subtle); text-align:center; }
.ctx-top .av { margin:0 auto; }
.ctx-top h2 { margin:10px 0 2px; font-size:16px; font-weight:800; color:var(--fg-strong); }
.ctx-top p { font-size:12.5px; color:var(--fg-subtle); }
.sec { padding:12px 16px; border-bottom:1px solid var(--border-subtle); }
.sec > .eyebrow { margin-bottom:9px; }
.box { display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-raised); font-size:12.5px; }
.box b { display:block; font-size:13px; color:var(--fg-strong); }
.box small { display:block; font-size:11.5px; color:var(--fg-subtle); }
.box .end { margin-left:auto; }
.mini-cal { overflow:hidden; width:48px; border:1px solid var(--border-default); border-radius:10px; background:#fff; text-align:center; flex:none; }
.mini-cal span { display:block; padding:2px 0; background:var(--ink-900); color:var(--brand); font-size:9.5px; font-weight:900; letter-spacing:.1em; }
.mini-cal b { display:block; padding:3px 0 4px; font-family:var(--font-display); font-size:20px; font-weight:900; color:var(--fg-strong); }
.kv { display:grid; grid-template-columns:92px minmax(0,1fr); gap:5px 8px; font-size:12.5px; }
.kv span { color:var(--fg-subtle); } .kv b { color:var(--fg-strong); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== 21. Kanban ===== */
.kanban { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:12px; overflow:hidden; }
.kcol { min-height:420px; padding:10px; border-radius:var(--radius-lg); background:var(--bg-sunken); }
.kcol-h { display:flex; align-items:center; gap:8px; padding:4px 4px 6px; font-size:12.5px; font-weight:800; color:var(--fg-strong); }
.kcol-h span { margin-left:auto; font-size:11.5px; font-weight:700; color:var(--fg-subtle); }
.kcol-sum { padding:0 4px 10px; font-size:11.5px; color:var(--fg-subtle); }
.kcol.won { background:var(--success-bg); } .kcol.lost { background:var(--danger-bg); }
.kcol.drop { outline:2px dashed var(--ink-700); outline-offset:-2px; }
.deal { margin-bottom:8px; padding:11px 12px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-raised); box-shadow:var(--shadow-xs); }
.deal b { display:block; font-size:13px; line-height:18px; color:var(--fg-strong); }
.deal .v { margin-top:4px; font-family:var(--font-display); font-size:17px; font-weight:900; letter-spacing:-.02em; color:var(--fg-strong); }
.deal .f { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:11.5px; color:var(--fg-subtle); }
.deal .f .av { margin-left:auto; }
.deal.drag { transform:rotate(-2.5deg); border-style:dashed; border-color:var(--ink-700); box-shadow:var(--shadow-lg); }

/* ===== 22. Telephony ===== */
.softphone { width:300px; border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--bg-raised); box-shadow:var(--shadow-md); overflow:hidden; }
.sp-h { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border-subtle); font-size:12.5px; }
.sp-h b { color:var(--fg-strong); }
.sp-b { padding:16px; text-align:center; }
.sp-b .num { font-family:var(--font-display); font-size:24px; font-weight:900; letter-spacing:-.02em; color:var(--fg-strong); }
.sp-b .tm { font-size:13px; color:var(--fg-subtle); }
.dialpad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.dialpad span { display:grid; place-items:center; height:42px; border:1px solid var(--border-default); border-radius:12px; background:var(--bg-surface); font-size:17px; font-weight:800; color:var(--fg-strong); }
.call-acts { display:flex; justify-content:center; gap:12px; margin-top:14px; }
.call-btn { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid var(--border-default); background:var(--bg-surface); color:var(--fg-strong); }
.call-btn.hang { background:var(--danger-fg); border-color:var(--danger-fg); color:#fff; }
.call-btn.answer { background:var(--success-fg); border-color:var(--success-fg); color:#fff; }
.play { display:inline-grid; place-items:center; width:28px; height:28px; border:1px solid var(--border-default); border-radius:50%; background:var(--bg-raised); color:var(--fg-strong); }
.play .ic { width:12px; height:12px; }
.tree { display:flex; flex-direction:column; gap:8px; font-size:12.5px; }
.tree .node { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border-default); border-radius:12px; background:var(--bg-raised); }
.tree .node .k { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:var(--ink-900); color:var(--yellow-500); font-size:11px; font-weight:900; flex:none; }
.tree .root { border-color:rgb(var(--brand-rgb) / .6); background:var(--bg-selected); font-weight:700; }
.tree .kids { display:flex; flex-direction:column; gap:6px; margin-left:18px; padding-left:12px; border-left:2px dashed var(--border-strong); }

/* ===== 23. AI, flow builder ===== */
.agent-card { display:flex; flex-direction:column; gap:12px; }
.agent-card .top2 { display:flex; align-items:center; gap:12px; }
.ai-av { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--brand); color:var(--on-brand); font-weight:900; font-size:18px; box-shadow:0 8px 18px rgb(var(--brand-rgb) / .3); flex:none; }
.ai-av.flow { background:var(--ink-900); color:var(--yellow-500); box-shadow:none; }
.ai-av.draft { background:var(--bg-sunken); color:var(--fg-muted); box-shadow:none; }
.stats3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px; border-radius:12px; background:var(--bg-sunken); }
.stats3 b { display:block; font-family:var(--font-display); font-size:18px; font-weight:900; color:var(--fg-strong); }
.stats3 small { font-size:11px; color:var(--fg-subtle); }
.gate { display:grid; grid-template-columns:minmax(0,1fr) 80px 80px 70px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border-subtle); font-size:12.5px; }
.gate:last-child { border-bottom:0; }
.fb { display:grid; grid-template-columns:200px minmax(0,1fr) 280px; gap:14px; }
.fb-pal .pi { display:flex; align-items:center; gap:8px; margin-bottom:6px; padding:8px 10px; border:1px solid var(--border-default); border-radius:10px; background:var(--bg-raised); font-size:12.5px; font-weight:700; color:var(--fg-strong); }
.fb-pal .pi .k { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:var(--bg-sunken); }
.fb-pal .pi.soon { border-style:dashed; color:var(--fg-muted); background:var(--bg-sunken); }
.fb-canvas { position:relative; height:560px; overflow:hidden; border:1px solid var(--border-default); border-radius:var(--radius-xl); background-color:var(--bg-surface); background-image:radial-gradient(var(--ink-200) 1px, transparent 1px); background-size:18px 18px; }
.fb-canvas svg.lines { position:absolute; inset:0; width:100%; height:100%; }
.fb-canvas svg.lines path { fill:none; stroke:var(--ink-400); stroke-width:2; }
.fb-canvas svg.lines path.dash { stroke-dasharray:5 5; }
.fb-node { position:absolute; width:190px; padding:10px 12px; border:1px solid var(--border-default); border-radius:14px; background:var(--bg-raised); box-shadow:var(--shadow-sm); font-size:12px; line-height:16px; }
.fb-node small { display:block; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-subtle); }
.fb-node b { display:block; margin-top:2px; font-size:13px; color:var(--fg-strong); }
.fb-node .opt { display:flex; align-items:center; gap:6px; margin-top:6px; padding:4px 8px; border-radius:8px; background:var(--bg-sunken); font-size:11.5px; }
.fb-node.start { border-color:rgb(var(--brand-rgb) / .7); background:var(--bg-selected); }
.fb-node.sel { outline:2px solid var(--ink-900); outline-offset:2px; }
.fb-node.soon { border-style:dashed; background:var(--bg-sunken); box-shadow:none; }
.fb-node.err { border-color:var(--danger-fg); }
.fb-hint { position:absolute; right:14px; bottom:12px; padding:6px 12px; border-radius:999px; background:var(--ink-900); color:#fff; font-size:12px; font-weight:700; }
.chat-sim { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-canvas); }

/* ===== 24. Store, roles matrix, builder, brand ===== */
.store { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.ad { display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--border-default); border-radius:20px; background:var(--bg-surface); box-shadow:var(--shadow-sm); }
.ad .top3 { display:flex; align-items:center; gap:10px; }
.ad .ti { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--bg-sunken); color:var(--fg-strong); flex:none; }
.ad b { font-size:14px; line-height:18px; color:var(--fg-strong); }
.ad p { font-size:12.5px; line-height:18px; color:var(--fg-muted); min-height:36px; }
.ad .foot { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--border-subtle); flex-wrap:wrap; }
.ad .price { font-family:var(--font-display); font-size:16px; font-weight:900; color:var(--fg-strong); }
.ad .price small { font-family:var(--font-sans); font-size:11px; font-weight:600; color:var(--fg-subtle); }
.ad .foot .btn { margin-left:auto; }
.ad.active { border-color:var(--success-border); } .ad.active .ti { background:var(--success-bg); color:var(--success-fg); }
.ad.trial { border-color:var(--ai-border); } .ad.trial .ti { background:var(--ai-bg); color:var(--ai-fg); }
.ad.soon { border-style:dashed; background:var(--bg-sunken); box-shadow:none; } .ad.soon .ti { color:var(--fg-disabled); }
.lv { display:inline-flex; align-items:center; justify-content:center; min-width:74px; height:24px; padding:0 8px; border-radius:999px; font-size:11.5px; font-weight:800; }
.lv-none { color:var(--fg-disabled); border:1px dashed var(--border-default); }
.lv-view { color:var(--info-fg); background:var(--info-bg); }
.lv-op { color:var(--success-fg); background:var(--success-bg); }
.lv-cfg { color:var(--on-brand); background:var(--brand); }
.lv-part { color:var(--warning-fg); background:var(--warning-bg); }
.lv-imp { color:var(--impersonation-fg); background:var(--impersonation-bg); }
.mx th, .mx td { text-align:center; } .mx th:first-child, .mx td:first-child { text-align:left; }
.diffrow { display:grid; grid-template-columns:22px minmax(0,1fr) minmax(0,1fr); gap:10px; padding:7px 10px; border-radius:8px; font-size:12.5px; align-items:center; }
.diffrow.add { background:var(--success-bg); } .diffrow.del { background:var(--danger-bg); } .diffrow.chg { background:var(--warning-bg); }
.diffrow .sym { font-weight:900; text-align:center; }
.swatch { display:inline-block; width:22px; height:22px; border-radius:7px; vertical-align:middle; border:1px solid rgb(0 0 0 / .08); }
.tokens { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.tokens div { padding:8px; border:1px solid var(--border-default); border-radius:10px; background:var(--bg-raised); font-size:11.5px; }
.tokens span { display:block; height:26px; margin-bottom:6px; border-radius:7px; border:1px solid rgb(0 0 0 / .06); }
.tokens b { display:block; color:var(--fg-strong); }
.tokens small { color:var(--fg-subtle); font-family:var(--font-mono); font-size:10.5px; }
.contrast { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--success-border); border-radius:999px; background:var(--success-bg); color:var(--success-fg); font-size:12px; font-weight:800; }
.wl-prev { overflow:hidden; border:1px solid var(--border-default); border-radius:16px; background:var(--bg-canvas); }
.wl-prev .bar3 { display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; background:#fff; border-bottom:1px solid var(--border-default); font-size:11.5px; }
.wl-prev .pill { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px 0 4px; border:1px solid var(--border-default); border-radius:999px; font-weight:800; }
.wl-prev .pill i { display:grid; place-items:center; width:18px; height:18px; border-radius:6px; font-style:normal; font-size:10px; }
.wl-prev .body3 { display:grid; grid-template-columns:100px 1fr; height:150px; }
.wl-prev .body3 .s { padding:10px 8px; background:#FFFEFA; border-right:1px solid var(--border-default); }
.wl-prev .body3 .s i { display:block; height:8px; margin-bottom:8px; border-radius:4px; background:var(--ink-150); }
.wl-prev .body3 .m { padding:12px; }
.wl-prev .body3 .m i { display:block; height:10px; margin-bottom:8px; border-radius:5px; background:var(--ink-150); }

/* ===== 25. Code, phone frames, misc ===== */
.code { margin:0; padding:12px 14px; border-radius:var(--radius-md); background:#1B1D18; color:#E4E5DF; font:12px/18px var(--font-mono); white-space:pre; overflow:hidden; }
.code .k { color:#F1DF84; } .code .s { color:#9FE3C1; } .code .c { color:#878B81; } .code .n { color:#9DB8FF; }
.keybox { display:flex; align-items:center; gap:8px; padding:0 10px; height:36px; border:1px solid var(--border-input); border-radius:var(--radius-sm); background:var(--bg-sunken); font:13px var(--font-mono); color:var(--fg-strong); }
.phones { display:flex; gap:28px; align-items:flex-start; justify-content:center; padding:24px; }
.phone { width:390px; height:844px; flex:none; border:10px solid #1B1D18; border-radius:46px; background:var(--bg-canvas); overflow:hidden; position:relative; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; }
.phone .status { flex:none; display:flex; justify-content:space-between; padding:10px 22px 4px; font-size:12px; font-weight:800; color:var(--fg-strong); }
.phone-cap { margin-top:10px; text-align:center; font-size:12px; font-weight:800; color:var(--fg-muted); }
.bottom-nav { flex:none; display:grid; grid-template-columns:repeat(5,1fr); height:64px; border-top:1px solid var(--border-default); background:var(--bg-surface); }
.bottom-nav span { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:10.5px; font-weight:700; color:var(--fg-muted); position:relative; }
.bottom-nav span.on { color:var(--fg-strong); }
.bottom-nav span.on::before { content:""; position:absolute; top:0; left:30%; right:30%; height:3px; border-radius:0 0 3px 3px; background:var(--brand); }
.bottom-nav .count { position:absolute; top:6px; right:18%; min-width:16px; height:16px; line-height:16px; font-size:9.5px; padding:0 4px; }
.sheet { position:absolute; left:0; right:0; bottom:0; border-radius:24px 24px 0 0; background:var(--bg-raised); box-shadow:var(--shadow-xl); padding:10px 16px 20px; }
.sheet::before { content:""; display:block; width:40px; height:5px; margin:0 auto 12px; border-radius:99px; background:var(--ink-300); }
.browser { border:1px solid var(--border-default); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow-md); }
.browser .bh { display:flex; align-items:center; gap:8px; height:34px; padding:0 12px; background:var(--bg-sunken); border-bottom:1px solid var(--border-default); font-size:11.5px; color:var(--fg-subtle); }
.browser .bh i { width:10px; height:10px; border-radius:50%; background:var(--ink-300); }
.browser .bh .url { margin-left:10px; flex:1; height:22px; display:flex; align-items:center; padding:0 10px; border-radius:999px; background:#fff; font-family:var(--font-mono); }
.email-prev { border:1px solid var(--border-default); border-radius:var(--radius-lg); background:#fff; overflow:hidden; font-size:13px; }
.email-prev .eh { padding:10px 14px; border-bottom:1px solid var(--border-subtle); font-size:12px; color:var(--fg-subtle); }
.email-prev .eb { padding:16px 18px; line-height:20px; color:var(--fg-default); }
.wa-prev { padding:12px; border-radius:var(--radius-lg); background:#E5DDD5; }
.wa-prev .wb { max-width:85%; padding:8px 10px; border-radius:10px; background:#fff; font-size:12.5px; line-height:18px; color:#111; box-shadow:0 1px 1px rgb(0 0 0 / .08); }

/* Auth & public pages (no app shell) */
.auth { min-height:calc(100vh - var(--mb-h, 34px)); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.auth-side { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:40px 48px; background:radial-gradient(circle at 85% 10%, rgb(var(--brand-rgb) / .28), transparent 45%), var(--bg-surface); border-right:1px solid var(--border-default); overflow:hidden; }
.auth-side h2 { font-family:var(--font-display); font-size:44px; line-height:44px; font-weight:900; letter-spacing:-.06em; color:var(--fg-strong); }
.auth-side p { margin-top:12px; max-width:440px; font-size:15px; line-height:23px; color:var(--fg-muted); }
.auth-main { display:grid; grid-template-columns:minmax(0,1fr); place-items:center; padding:40px; }
.auth-card { width:min(420px,100%); min-width:0; }
.auth-card h1 { margin-top:10px; font-family:var(--font-display); font-size:32px; line-height:34px; font-weight:900; letter-spacing:-.05em; color:var(--fg-strong); }
.auth-card .lead { margin-top:8px; font-size:14px; line-height:21px; color:var(--fg-muted); }
.auth-card .form { margin-top:20px; }
.auth-card .btn { width:100%; }
.auth-card .btn.sm, .auth-card .btn-link, .auth-card .btn-row .btn { width:auto; }
button.btn-link { border:0; background:none; cursor:pointer; font-family:inherit; font-size:inherit; }
.btn-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.btn-row.center { justify-content:center; }
.qr { width:168px; height:168px; border-radius:var(--radius-lg); border:8px solid #fff; box-shadow:0 0 0 1px var(--border-default);
  background:repeating-conic-gradient(#22251F 0 25%, #fff 0 50%) 0 0/24px 24px; }
.auth-foot { font-size:12px; color:var(--fg-subtle); }

/* RF footer (mockup coverage, DESIGN audit aid) */
.rf-footer { margin:24px 28px 20px; padding:10px 14px; border:1px dashed var(--border-strong); border-radius:var(--radius-md); background:var(--bg-surface); font-size:12px; color:var(--fg-muted); }
.rf-footer summary { font-weight:800; color:var(--fg-strong); cursor:pointer; }
.rf-footer ul { margin:8px 0 0; padding-left:18px; columns:2; column-gap:28px; }
.rf-footer li { margin:3px 0; break-inside:avoid; cursor:pointer; }
.rf-footer code { font-size:11px; font-weight:800; color:var(--fg-strong); }
.rf-hl { outline:3px solid var(--danger-fg) !important; outline-offset:2px; }

/* ===== 26. Interaction layer (behaviour in assets/mockups.js; see KIT.md §10) ===== */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:12px; top:-80px; z-index:300; padding:10px 18px; border-radius:999px; background:var(--ink-900); color:#fff; font-weight:800; text-decoration:none; box-shadow:var(--shadow-lg); }
.skip-link:focus { top:10px; }
.session-off, .filtered-out { display:none !important; }
.removing { opacity:0; transform:translateX(8px); transition:opacity var(--dur-2), transform var(--dur-2); }
.mockbar :focus-visible, body.theme-platform .side :focus-visible, .toast-i :focus-visible, .pub-hero :focus-visible { outline-color:#F1DF84; }
.mb-states button { min-height:24px; }
.mb-states button:hover { color:#fff; }
.mb-reset { height:24px; min-width:24px; padding:0 7px; border:1px solid #3A3D34; border-radius:999px; background:none; color:#E4E5DF; font-size:11px; font-weight:800; }
.mb-reset:hover { background:#2A2C25; }
a.nav-item, .nav-item { cursor:pointer; }
.nav-item.locked .chip-soon, .nav-item.locked .chip-addon { opacity:1; }
[data-row-href], [data-pick] { cursor:pointer; }
tr[data-row-href]:hover td { background:var(--bg-hover); }
.t td a.row-link { font-weight:800; color:var(--fg-strong); text-decoration:none; }
.t td a.row-link:hover { text-decoration:underline; text-underline-offset:3px; }
.drag { opacity:.55; }
.kcol.drop { outline:2px dashed rgb(var(--brand-rgb) / .8); outline-offset:-4px; }
@keyframes hp-spin { to { transform:rotate(360deg); } }
@keyframes hp-in { from { opacity:0; transform:translateY(8px); } }
@keyframes hp-fade { from { opacity:0; } }
.btn.loading { pointer-events:none; }
.btn.loading::before { animation:hp-spin .8s linear infinite; }
.spin, .spinner { display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; vertical-align:-2px; animation:hp-spin .8s linear infinite; flex:none; }
.spinner { width:22px; height:22px; }

/* Real form controls (inputs are real elements, styled like .input) */
.field > input:not([type=checkbox]):not([type=radio]), .field > select, .field > textarea,
.field .input-row > input, input.input, select.select, textarea.textarea {
  display:block; width:100%; min-height:var(--control-h); padding:0 12px; border:1px solid var(--border-input); border-radius:var(--radius-sm);
  background:var(--bg-raised); font-size:14px; line-height:20px; color:var(--fg-strong); min-width:0; }
.field > textarea, textarea.textarea { min-height:84px; padding:9px 12px; resize:vertical; }
.field > select, select.select { appearance:none; padding-right:34px; background:var(--bg-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7066' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; }
.field > input[readonly], .field > textarea[readonly], input.input[readonly] { background:var(--bg-sunken); color:var(--fg-muted); }
input::placeholder, textarea::placeholder { color:var(--fg-subtle); opacity:1; }
input.invalid, select.invalid, textarea.invalid, [aria-invalid="true"] { border-color:var(--danger-fg) !important; box-shadow:0 0 0 3px var(--danger-bg); }
input[type=checkbox], input[type=radio] { width:18px; height:18px; margin:0; accent-color:var(--ink-900); flex:none; }
.field .input-row { display:flex; gap:8px; align-items:center; }
.field .input-row > input { flex:1; }
.check, .radio { min-height:24px; cursor:pointer; }
.otp { font:700 24px/1 var(--font-mono) !important; letter-spacing:.5em; text-align:center; min-height:52px !important; }
.search-in { position:relative; }
.search-in:focus-within { outline:2px solid var(--ink-900); outline-offset:2px; }
.search-in input { flex:1; min-width:0; height:100%; padding:0; border:0; background:transparent; font-size:13px; color:var(--fg-strong); }
.search-in input:focus-visible { outline:none; box-shadow:none; }
.search-in input::-webkit-search-cancel-button { cursor:pointer; }
button.switch { padding:0; border:0; cursor:pointer; }
.switch { width:40px; height:24px; }
.switch::after { width:18px; height:18px; }
.switch.on::after { left:19px; }
button.fchip, span.fchip[role=button] { cursor:pointer; }
button.presence, button.me, button.ai-pill { cursor:pointer; font-family:inherit; }
button.presence { background:var(--bg-raised); }
button.me { border:0; background:none; padding:2px 4px; border-radius:999px; text-align:left; color:inherit; }
button.me:hover { background:var(--bg-hover); }
button.ai-pill { font-size:12.5px; font-weight:900; }
.choice[role=radio], .choice > input { cursor:pointer; }

/* Dialogs opened by JS escape the main box and cover the viewport */
.overlay.is-open { position:fixed; inset:0; z-index:90; animation:hp-fade var(--dur-2) ease-out; }
.overlay.is-open:not(.right):not(.center) { padding-top:8vh; }
.overlay.is-open .dialog, .overlay.is-open .modal, .overlay.is-open .modal-card { display:flex; flex-direction:column; max-height:calc(100vh - 12vh - 24px); animation:hp-in var(--dur-3) var(--ease-materialize); }
.overlay.is-open .dialog-b { overflow:auto; }
.overlay.is-open .drawer, .overlay.is-open .drawer-panel { height:100vh; animation:hp-in var(--dur-3) var(--ease-materialize); }
.overlay.is-open .drawer .dialog-b { overflow:auto; }
body.has-dialog { overflow:hidden; }
.dialog-f .sp { flex:1; }
.dialog-h h2 { font-size:20px; line-height:26px; font-weight:900; letter-spacing:-.01em; color:var(--fg-strong); }
.alertdialog .dialog-h h2 { color:var(--danger-fg); }
.alertdialog .dialog-b p { font-size:13.5px; line-height:20px; color:var(--fg-default); }
.modal, .modal-card { width:560px; max-width:calc(100% - 40px); padding:22px; border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--bg-raised); box-shadow:var(--shadow-xl); }
.modal h2, .modal-card h2 { font-size:20px; line-height:26px; font-weight:900; color:var(--fg-strong); margin-bottom:10px; }
.modal p, .modal-card p { margin-top:6px; font-size:13.5px; color:var(--fg-muted); }
.drawer-panel { width:460px; height:100%; margin-left:auto; border-left:1px solid var(--border-default); background:var(--bg-raised); box-shadow:var(--shadow-xl); display:flex; flex-direction:column; }
.drawer-head { display:flex; align-items:center; gap:10px; padding:18px 22px 12px; border-bottom:1px solid var(--border-default); }
.drawer-body { flex:1; overflow:auto; padding:16px 22px; }
.drawer-foot { display:flex; gap:8px; justify-content:flex-end; padding:12px 22px 18px; border-top:1px solid var(--border-subtle); }

/* Menus */
.popover.menu { min-width:240px; max-width:min(340px, calc(100vw - 16px)); max-height:70vh; overflow:auto; animation:hp-in var(--dur-2) var(--ease-materialize); }
.popover.is-open { z-index:95; }
.menu .mi { width:100%; min-height:36px; border:0; background:none; text-align:left; text-decoration:none; cursor:pointer; font:inherit; font-size:13px; }
.menu .mi:focus-visible { outline:2px solid var(--ink-900); outline-offset:-2px; box-shadow:none; background:var(--bg-hover); }
.menu .mi.on { font-weight:800; background:var(--bg-selected); }
.menu .mi .ic { color:var(--fg-subtle); }
.menu .mi.danger .ic { color:var(--danger-fg); }
.menu .mi[aria-checked="true"] { font-weight:800; }
.menu .mi[aria-checked="true"]::after { content:"✓"; margin-left:auto; color:var(--success-fg); font-weight:900; }
.menu .mi-sub { margin-left:auto; padding-left:12px; font-size:11.5px; color:var(--fg-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.menu .menu-h { padding:8px 10px 4px; font-size:10.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-subtle); }

/* Palette (Ctrl K) */
.js-palette .cmdk { max-width:calc(100% - 24px); animation:hp-in var(--dur-3) var(--ease-materialize); }
.cmdk-input { display:block; width:100%; height:56px; padding:0 18px; border:0; border-bottom:1px solid var(--border-default); font-size:16px; font-weight:600; color:var(--fg-strong); background:var(--bg-raised); }
.cmdk-input:focus-visible { outline:none; box-shadow:inset 0 -2px 0 var(--brand); }
.cmdk-res { max-height:52vh; overflow:auto; }
a.cmdk-i { text-decoration:none; color:inherit; }
.cmdk-empty { padding:24px 10px; text-align:center; color:var(--fg-muted); }
.cmdk-foot a { margin-left:auto; font-weight:800; color:var(--fg-strong); }

/* Toasts */
.toast-region { position:fixed; z-index:120; left:50%; bottom:20px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; width:max-content; max-width:calc(100vw - 24px); }
.toast-i { pointer-events:auto; display:flex; align-items:center; gap:10px; max-width:600px; padding:8px 8px 8px 16px; border-radius:999px; background:var(--ink-900); color:#fff; font-size:13px; font-weight:700; line-height:18px; box-shadow:var(--shadow-lg); animation:hp-in var(--dur-3) var(--ease-materialize); }
.toast-i .ic { color:#7DDBA9; } .toast-i.info .ic { color:#9CC3F0; } .toast-i.danger .ic { color:#FF9C92; } .toast-i.warn .ic { color:#F6C77E; }
.toast-x { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:50%; background:none; color:#C9CBC2; flex:none; }
.toast-x:hover { background:rgb(255 255 255 / .1); color:#fff; }

/* Aliases for components authored with other names */
.skel { display:block; height:14px; border-radius:8px; background:linear-gradient(90deg, var(--ink-150), var(--ink-100)); }
.skel.h-lg { height:120px; } .skel.h-md { height:60px; } .skel + .skel { margin-top:12px; }
.err-box { display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:18px; border:1px solid var(--danger-border); border-radius:var(--radius-lg); background:var(--bg-raised); max-width:640px; }
.err-box b { color:var(--fg-strong); }
.btn-sm { height:30px; padding:0 11px; font-size:12px; }
.blur { filter:blur(3.5px) saturate(.55); opacity:.5; pointer-events:none; user-select:none; }
.ic-git-branch { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%226%22 cy=%226%22 r=%223%22/%3E%3Ccircle cx=%226%22 cy=%2218%22 r=%223%22/%3E%3Ccircle cx=%2218%22 cy=%226%22 r=%223%22/%3E%3Cpath d=%22M6 9v6M18 9a9 9 0 0 1-9 9%22/%3E%3C/svg%3E"); }
.matrix { width:100%; border-collapse:collapse; font-size:13px; }
.matrix th, .matrix td { padding:8px 10px; border-bottom:1px solid var(--border-subtle); text-align:center; }
.matrix th:first-child, .matrix td:first-child { text-align:left; }
.st-dot, .ok-dot, .warn-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--presence-off); vertical-align:middle; }
.ok-dot { background:var(--success-fg); } .warn-dot { background:var(--warning-fg); }
.list-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-subtle); }
.soft { color:var(--fg-muted); }

/* Page anatomy helpers */
.page-head .breadcrumb { margin-bottom:6px; }
.breadcrumb a:hover { color:var(--fg-strong); text-decoration:underline; text-underline-offset:3px; }
.breadcrumb .sep { color:var(--fg-disabled); }
.section-h { display:flex; align-items:center; gap:10px; margin:22px 0 10px; }
.section-h h2 { font-size:16px; line-height:22px; font-weight:900; color:var(--fg-strong); }
.section-h .acts { margin-left:auto; display:flex; gap:8px; }
.card-h h2, .card > h2 { font-size:15px; line-height:20px; font-weight:800; color:var(--fg-strong); }
.card-h h2 { margin:0; }
.demo-hint { margin-top:14px; padding:10px 12px; border:1px dashed var(--border-strong); border-radius:var(--radius-md); background:var(--bg-sunken); font-size:12px; line-height:17px; color:var(--fg-muted); }
.demo-hint b { color:var(--fg-strong); }
.demo-hint .row { margin-top:6px; gap:6px; flex-wrap:wrap; }

/* Mobile navigation toggle (hidden on desktop) */
.nav-toggle { display:none; }
.nav-scrim { display:none; }

/* ===== 27. Index navigator ===== */
.gx { max-width:1240px; margin:0 auto; padding:28px 32px 56px; }
.gx-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:end; }
.gx-head h1 { font-family:var(--font-display); font-size:40px; line-height:42px; font-weight:900; letter-spacing:-.05em; color:var(--fg-strong); margin-top:8px; }
.gx-head p { margin-top:8px; max-width:720px; color:var(--fg-muted); }
.gx-stats { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.gx-tools { position:sticky; top:0; z-index:20; display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:20px -8px 0; padding:10px 8px; background:rgb(248 247 242 / .94); backdrop-filter:blur(6px); border-bottom:1px solid var(--border-default); }
.gx-tools .search-in { width:340px; }
.gx-toc { display:flex; gap:6px; flex-wrap:wrap; }
.gx-toc a { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border:1px solid var(--border-default); border-radius:999px; background:var(--bg-raised); font-size:12px; font-weight:700; color:var(--fg-muted); text-decoration:none; }
.gx-toc a:hover { color:var(--fg-strong); border-color:var(--border-strong); }
.gx-sec { margin-top:30px; scroll-margin-top:70px; }
.gx-sec > h2 { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:24px; line-height:28px; font-weight:900; letter-spacing:-.03em; color:var(--fg-strong); margin-bottom:12px; }
.gx-flows { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.gx-flow-card { display:flex; flex-direction:column; gap:10px; padding:16px 16px 14px; border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--bg-surface); box-shadow:var(--shadow-sm); }
.gx-flow-head { display:flex; gap:12px; align-items:flex-start; }
.gx-flow-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-lg); background:var(--bg-raised); border:1px solid var(--border-subtle); flex:none; }
.gx-flow-icon .ic { opacity:.85; }
.gx-flow-card h3 { font-size:16px; line-height:21px; font-weight:900; color:var(--fg-strong); margin:0; }
.gx-flow-audience { margin:4px 0 0; font-size:12px; line-height:17px; color:var(--fg-muted); }
.gx-flow-summary { font-size:13px; line-height:19px; color:var(--fg-muted); margin:0; }
.gx-flow-outcome { font-size:12.5px; line-height:18px; color:var(--fg-strong); margin:0; }
.gx-step-strip { display:flex; gap:10px; overflow-x:auto; padding:4px 2px 8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.gx-step { flex:0 0 168px; scroll-snap-align:start; display:flex; flex-direction:column; gap:6px; padding:8px; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--bg-raised); text-decoration:none; color:var(--fg-strong); min-height:100%; }
.gx-step:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.gx-step.is-missing { opacity:.72; }
.gx-step-num { font-size:11px; font-weight:800; color:var(--fg-subtle); letter-spacing:.02em; }
.gx-step-title { font-size:11.5px; font-weight:800; line-height:15px; }
.gx-step-happens { font-size:11px; line-height:15px; color:var(--fg-muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.gx-thumb { position:relative; display:block; width:100%; aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; background:linear-gradient(145deg,var(--bg-surface),var(--bg-raised)); border:1px dashed var(--border-default); }
.gx-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; z-index:1; }
.gx-thumb-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; letter-spacing:.06em; color:var(--fg-subtle); z-index:0; }
.gx-thumb-sm { aspect-ratio:16/9; max-height:72px; }
.gx-flow-card .btn { align-self:flex-start; margin-top:2px; }
.gx-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; list-style:none; margin:0; padding:0; }
.gx-grid a { display:flex; flex-direction:row; gap:10px; align-items:flex-start; height:100%; padding:10px 12px; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--bg-raised); text-decoration:none; color:var(--fg-strong); }
.gx-grid .gx-thumb-sm { flex:0 0 96px; width:96px; max-height:none; }
.gx-grid .gx-card-body { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.gx-grid a:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.gx-grid a b { font-size:13.5px; font-weight:800; }
.gx-grid a small { display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:11.5px; color:var(--fg-subtle); }
.gx-grid code { font-size:11px; }
.gx-sec:not(.gx-flows-sec):not(:has(li:not(.filtered-out))) { display:none; }

/* ===== 28. Responsive (1440 · 1024 · 390) ===== */
.app { min-width:0; }
.t-wrap { overflow-x:auto; }
.thread { overflow-y:auto; justify-content:flex-start; }
.thread > :first-child { margin-top:auto; }
.q-list { overflow-y:auto; }
.kanban { overflow-x:auto; padding-bottom:4px; }
@media (max-width: 1279px) {
  :root { --sidebar-w:208px; --queue-w:290px; }
  .gsearch { flex:1 1 180px; min-width:0; overflow:hidden; white-space:nowrap; }
  .gsearch kbd { display:none; }
  .me > span:not(.av) { display:none; }
  .inbox { grid-template-columns:var(--queue-w) minmax(0,1fr); position:relative; }
  .inbox > .ctx { display:none; }
  .inbox.show-ctx > .ctx { display:block; position:absolute; top:0; right:0; bottom:0; width:320px; z-index:25; overflow:auto; box-shadow:var(--shadow-xl); }
  .g5, .g6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .store { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .g-main-side { grid-template-columns:minmax(0,1fr) 300px; }
  .kanban { grid-auto-columns:minmax(230px,260px); }
  .gx-flows, .gx-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1280px) { .ctx-toggle { display:none !important; } }
@media (max-width: 860px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .side { position:fixed; top:0; bottom:0; left:0; z-index:86; width:min(300px, 86vw); overflow-y:auto; transform:translateX(-105%); visibility:hidden; transition:transform var(--dur-3) var(--ease-brand), visibility var(--dur-3); box-shadow:var(--shadow-xl); }
  body.nav-open .side { transform:none; visibility:visible; }
  body.nav-open .nav-scrim { display:block; position:fixed; inset:0; z-index:85; background:rgb(34 37 31 / .38); }
  .nav-toggle { display:inline-grid; }
  .top { gap:6px; padding:0 10px; }
  .logo { width:auto; } .logo img { height:20px; }
  .switch-btn { font-size:0; gap:0; padding:0 5px; }
  .switch-btn .ic-chevron-down { display:none; }
  .gsearch { flex:0 0 38px; width:38px; padding:0; margin-left:0; justify-content:center; font-size:0; }
  .presence { font-size:0; gap:0; padding:0 11px; }
  .presence .ic { display:none; }
  .ai-pill { display:none; }
  .cbar { flex-wrap:wrap; padding:8px 12px; }
  .imp-bar { height:auto; flex-wrap:wrap; padding:6px 12px; }
  .page { padding:16px 14px 22px; }
  .page-head { flex-direction:column; align-items:stretch; }
  .page-head h1 { font-size:28px; line-height:30px; }
  .page-head .acts { margin-left:0; justify-content:flex-start; }
  .g2, .g3, .g-main-side, .g-side-main, .g-2-1, .g-1-2, .form, .form.three, .tiles, .plan-grid, .gx-flows, .gx-grid, .gx-head { grid-template-columns:minmax(0,1fr); }
  .g4, .g5, .g6, .store { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .span2, .span3, .plan-grid .span2 { grid-column:auto; }
  .toolbar .search-in, .search-in.wide, .gx-tools .search-in { width:100%; }
  .card, .t-wrap { overflow-x:auto; }
  table.t { min-width:560px; }
  .tabs, .stepper, .steps { overflow-x:auto; }
  .app.fixed { height:auto; min-height:calc(100vh - var(--mb-h, 34px)); }
  .app.fixed .main { overflow:visible; }
  .inbox { grid-template-columns:minmax(0,1fr); height:auto; }
  .inbox > .q { max-height:46vh; border-right:0; border-bottom:1px solid var(--border-default); }
  .inbox > .chat { min-height:72vh; }
  .inbox.show-ctx > .ctx { position:fixed; width:100%; top:0; z-index:88; }
  .chat-head { height:auto; min-height:56px; flex-wrap:wrap; padding:8px 12px; }
  .chat-head .acts { flex-wrap:wrap; }
  .msg, .note { max-width:88%; }
  .kanban { grid-auto-columns:78vw; }
  .dialog, .dialog.lg, .dialog.sm, .modal, .modal-card, .cmdk, .notif { width:auto; max-width:calc(100% - 20px); }
  .drawer, .drawer.wide, .drawer-panel { width:100%; }
  .overlay { padding-top:16px; }
  .empty { grid-template-columns:minmax(0,1fr); padding:20px; gap:12px; }
  .empty img { width:120px; } .empty .brand-glyph { width:110px; }
  .empty h2, .vit h2 { font-size:26px; line-height:28px; }
  .vit { grid-template-columns:minmax(0,1fr); padding:20px; }
  .vit-art { display:none; } .vit ul { grid-template-columns:minmax(0,1fr); }
  .vit-wrap { min-height:760px; }
  .auth { grid-template-columns:minmax(0,1fr); }
  .auth-side { display:none; }
  .auth-main { padding:24px 16px; place-items:start center; }
  .pub-top { flex-wrap:wrap; padding:10px 16px; gap:10px; }
  .pub-nav { width:100%; margin-left:0; gap:8px 14px; flex-wrap:wrap; }
  .pub-hero { padding:32px 20px; min-height:0; }
  .pub-hero h1 { font-size:34px; }
  .pub-hero .hero-art { display:none; }
  .pub-main { padding:24px 16px 36px; }
  .hero { grid-template-columns:minmax(0,1fr); padding:18px; }
  .hero-art { display:none; }
  .hero h1 { font-size:30px; line-height:32px; }
  .hero .prog { flex-wrap:wrap; } .hero .prog .bar { width:100%; }
  .mb-states { flex-wrap:nowrap; overflow-x:auto; max-width:100%; }
  .rf-footer { margin:16px 12px; }
  .rf-footer ul { columns:1; }
  .gx { padding:18px 14px 40px; }
  .gx-head h1 { font-size:30px; line-height:32px; }
  .gx-stats { justify-content:flex-start; }
}
@media (max-width: 480px) {
  .g5, .g6, .store { grid-template-columns:minmax(0,1fr); }
  .g4 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .kpi b { font-size:22px; }
  .top { gap:4px; padding:0 8px; }
  .top .logo img { height:16px; }
  .top .wallet-pill { display:none; }
  .top .icon-btn, .top .gsearch, .top .switch-btn { width:34px; height:34px; flex-basis:34px; }
  .pop-switch { left:8px; right:8px; width:auto; }
}

/* ===== 29. Integration fixes (requests from the per-area passes) ===== */
.overlay.right { text-align:left; }
.fb-node.err { display:block; }
.toolbar select.select, .toolbar > select { width:auto; min-width:140px; }
.code { overflow:auto; }
a.box, a.tile, a.side-card, a.card, a.conv, a.kpi, a.list-row, .kcol .deal a, .wallet-pill { text-decoration:none; color:inherit; }
a.box:hover, a.tile:hover, a.card:hover, a.kpi:hover { border-color:var(--border-strong); }
.brand-partner .side-card.tenant .ico { color:#fff; background:#1E40AF; }
.btn[aria-disabled="true"], .btn:disabled { opacity:.55; cursor:not-allowed; }
.row.end { align-items:flex-end; }
.composer .mode button { height:24px; padding:0 10px; border:0; border-radius:999px; background:none; font:inherit; font-size:11.5px; font-weight:800; color:var(--fg-muted); cursor:pointer; }
.composer .mode button.on { background:var(--bg-sunken); color:var(--fg-strong); }
.composer.note-mode .mode button.on { background:var(--internal-fg); color:#fff; }
.composer textarea { display:block; width:100%; min-height:44px; max-height:160px; padding:9px 14px 4px; border:0; background:none; resize:vertical; font:inherit; font-size:13.5px; line-height:20px; color:var(--fg-strong); }
.composer textarea:focus { outline:none; }
.composer:focus-within { box-shadow:0 0 0 3px rgb(var(--brand-rgb) / .35); }
form.row > input:not([type=checkbox]):not([type=radio]) { flex:1; min-width:0; height:38px; padding:0 12px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--bg-raised); font:inherit; font-size:13.5px; color:var(--fg-strong); }
button.cal-ev { width:100%; border:0; text-align:left; font-family:inherit; cursor:pointer; }
.dialpad button { display:grid; place-items:center; height:42px; border:1px solid var(--border-default); border-radius:12px; background:var(--bg-surface); font:inherit; font-size:17px; font-weight:800; color:var(--fg-strong); cursor:pointer; }
.dialpad button:hover { background:var(--bg-hover); }
.bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:10.5px; font-weight:700; color:var(--fg-muted); position:relative; text-decoration:none; }
.bottom-nav a.on, .bottom-nav a[aria-current] { color:var(--fg-strong); }
.t-scroll { overflow-x:auto; }
button.choice { width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.choice.on { border-color:rgb(var(--brand-rgb) / .7); background:var(--bg-selected); box-shadow:0 0 0 1px rgb(var(--brand-rgb) / .7); }
.cbar.ok { background:var(--success-bg); border-color:var(--success-border); color:var(--success-fg); }
.menu .mi[aria-disabled="true"], .menu .mi:disabled { color:var(--fg-disabled); cursor:not-allowed; }
.c-sms { background:#6B7066; } .c-tg { background:#229ED9; }

/* ===== Icons (Lucide-style strokes as CSS masks; generated by _tools/icons.py) ===== */
.ic { display:inline-block; width:18px; height:18px; flex:none; vertical-align:-4px; background:currentColor; -webkit-mask:var(--i) center / contain no-repeat; mask:var(--i) center / contain no-repeat; }
.ic.s { width:14px; height:14px; vertical-align:-2px; } .ic.xs { width:12px; height:12px; vertical-align:-1px; } .ic.l { width:22px; height:22px; } .ic.xl { width:28px; height:28px; }
.ic-home { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22/%3E%3Cpath d=%22M9 22V12h6v10%22/%3E%3C/svg%3E"); }
.ic-inbox { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 12h-6l-2 3h-4l-2-3H2%22/%3E%3Cpath d=%22M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z%22/%3E%3C/svg%3E"); }
.ic-message { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z%22/%3E%3C/svg%3E"); }
.ic-users { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22/%3E%3Cpath d=%22M22 21v-2a4 4 0 0 0-3-3.87%22/%3E%3Cpath d=%22M16 3.13a4 4 0 0 1 0 7.75%22/%3E%3C/svg%3E"); }
.ic-user { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E"); }
.ic-user-plus { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22/%3E%3Cpath d=%22M19 8v6M22 11h-6%22/%3E%3C/svg%3E"); }
.ic-calendar { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2218%22 rx=%222%22/%3E%3Cpath d=%22M16 2v4M8 2v4M3 10h18%22/%3E%3C/svg%3E"); }
.ic-zap { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 2 3 14h9l-1 8 10-12h-9l1-8z%22/%3E%3C/svg%3E"); }
.ic-clock { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 6v6l4 2%22/%3E%3C/svg%3E"); }
.ic-kanban { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/%3E%3Cpath d=%22M8 7v7M12 7v4M16 7v9%22/%3E%3C/svg%3E"); }
.ic-trending { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m22 7-8.5 8.5-5-5L2 17%22/%3E%3Cpath d=%22M16 7h6v6%22/%3E%3C/svg%3E"); }
.ic-lifebuoy { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22m4.93 4.93 4.24 4.24M14.83 14.83l4.24 4.24M14.83 9.17l4.24-4.24M4.93 19.07l4.24-4.24%22/%3E%3C/svg%3E"); }
.ic-phone { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z%22/%3E%3C/svg%3E"); }
.ic-phone-missed { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z%22/%3E%3Cpath d=%22m22 2-6 6M16 2l6 6%22/%3E%3C/svg%3E"); }
.ic-bot { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%228%22 width=%2218%22 height=%2212%22 rx=%222%22/%3E%3Cpath d=%22M12 8V4H8%22/%3E%3Cpath d=%22M2 14h2M20 14h2M15 13v2M9 13v2%22/%3E%3C/svg%3E"); }
.ic-megaphone { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m3 11 18-5v12L3 14v-3z%22/%3E%3Cpath d=%22M11.6 16.8a3 3 0 1 1-5.8-1.6%22/%3E%3C/svg%3E"); }
.ic-chart { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v18h18%22/%3E%3Cpath d=%22M18 17V9M13 17V5M8 17v-3%22/%3E%3C/svg%3E"); }
.ic-settings { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3Cpath d=%22M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z%22/%3E%3C/svg%3E"); }
.ic-code { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m16 18 6-6-6-6M8 6l-6 6 6 6%22/%3E%3C/svg%3E"); }
.ic-building { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z%22/%3E%3Cpath d=%22M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4M10 10h4M10 14h4M10 18h4%22/%3E%3C/svg%3E"); }
.ic-grid { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%2214%22 y=%223%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%223%22 y=%2214%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3C/svg%3E"); }
.ic-layers { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 2 10 5-10 5L2 7z%22/%3E%3Cpath d=%22m2 17 10 5 10-5M2 12l10 5 10-5%22/%3E%3C/svg%3E"); }
.ic-search { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/svg%3E"); }
.ic-bell { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9%22/%3E%3Cpath d=%22M10.3 21a1.94 1.94 0 0 0 3.4 0%22/%3E%3C/svg%3E"); }
.ic-chevron-down { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E"); }
.ic-chevron-up { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m18 15-6-6-6 6%22/%3E%3C/svg%3E"); }
.ic-chevron-right { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 18 6-6-6-6%22/%3E%3C/svg%3E"); }
.ic-chevron-left { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m15 18-6-6 6-6%22/%3E%3C/svg%3E"); }
.ic-lock { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%2211%22 width=%2218%22 height=%2211%22 rx=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 10 0v4%22/%3E%3C/svg%3E"); }
.ic-unlock { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%2211%22 width=%2218%22 height=%2211%22 rx=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 9.9-1%22/%3E%3C/svg%3E"); }
.ic-check { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); }
.ic-check-double { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 7 17l-5-5%22/%3E%3Cpath d=%22m22 10-7.5 7.5L13 16%22/%3E%3C/svg%3E"); }
.ic-x { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18M6 6l12 12%22/%3E%3C/svg%3E"); }
.ic-plus { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5v14M5 12h14%22/%3E%3C/svg%3E"); }
.ic-minus { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3C/svg%3E"); }
.ic-filter { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 3H2l8 9.46V19l4 2v-8.54L22 3z%22/%3E%3C/svg%3E"); }
.ic-download { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22m7 10 5 5 5-5M12 15V3%22/%3E%3C/svg%3E"); }
.ic-upload { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22m17 8-5-5-5 5M12 3v12%22/%3E%3C/svg%3E"); }
.ic-paperclip { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48%22/%3E%3C/svg%3E"); }
.ic-send { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m22 2-7 20-4-9-9-4z%22/%3E%3Cpath d=%22M22 2 11 13%22/%3E%3C/svg%3E"); }
.ic-more { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%2219%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%225%22 cy=%2212%22 r=%221%22/%3E%3C/svg%3E"); }
.ic-more-v { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%2212%22 cy=%225%22 r=%221%22/%3E%3Ccircle cx=%2212%22 cy=%2219%22 r=%221%22/%3E%3C/svg%3E"); }
.ic-refresh { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8%22/%3E%3Cpath d=%22M21 3v5h-5%22/%3E%3C/svg%3E"); }
.ic-alert { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z%22/%3E%3Cpath d=%22M12 9v4M12 17h.01%22/%3E%3C/svg%3E"); }
.ic-info { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4M12 8h.01%22/%3E%3C/svg%3E"); }
.ic-wallet { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12V7H5a2 2 0 0 1 0-4h14v4%22/%3E%3Cpath d=%22M3 5v14a2 2 0 0 0 2 2h16v-5%22/%3E%3Cpath d=%22M18 12a2 2 0 0 0 0 4h4v-4z%22/%3E%3C/svg%3E"); }
.ic-card { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%225%22 width=%2220%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22M2 10h20%22/%3E%3C/svg%3E"); }
.ic-receipt { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 2v6h6M16 13H8M16 17H8M10 9H8%22/%3E%3C/svg%3E"); }
.ic-file { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 2v6h6%22/%3E%3C/svg%3E"); }
.ic-store { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z%22/%3E%3Cpath d=%22M3 6h18M16 10a4 4 0 0 1-8 0%22/%3E%3C/svg%3E"); }
.ic-key { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%227.5%22 cy=%2215.5%22 r=%225.5%22/%3E%3Cpath d=%22m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3%22/%3E%3C/svg%3E"); }
.ic-shield { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z%22/%3E%3C/svg%3E"); }
.ic-shield-check { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
.ic-globe { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z%22/%3E%3C/svg%3E"); }
.ic-mail { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%224%22 width=%2220%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22m22 7-10 5L2 7%22/%3E%3C/svg%3E"); }
.ic-tag { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2H2v10l9.29 9.29a1 1 0 0 0 1.41 0l8.59-8.59a1 1 0 0 0 0-1.41z%22/%3E%3Ccircle cx=%227%22 cy=%227%22 r=%221.5%22/%3E%3C/svg%3E"); }
.ic-droplet { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5S5 13 5 15a7 7 0 0 0 7 7z%22/%3E%3C/svg%3E"); }
.ic-plug { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22v-5M9 8V2M15 8V2M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8z%22/%3E%3C/svg%3E"); }
.ic-database { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%2212%22 cy=%225%22 rx=%229%22 ry=%223%22/%3E%3Cpath d=%22M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5%22/%3E%3Cpath d=%22M3 12c0 1.66 4 3 9 3s9-1.34 9-3%22/%3E%3C/svg%3E"); }
.ic-server { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%222%22 width=%2220%22 height=%228%22 rx=%222%22/%3E%3Crect x=%222%22 y=%2214%22 width=%2220%22 height=%228%22 rx=%222%22/%3E%3Cpath d=%22M6 6h.01M6 18h.01%22/%3E%3C/svg%3E"); }
.ic-cpu { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%224%22 width=%2216%22 height=%2216%22 rx=%222%22/%3E%3Crect x=%229%22 y=%229%22 width=%226%22 height=%226%22/%3E%3Cpath d=%22M15 2v2M15 20v2M2 15h2M2 9h2M20 15h2M20 9h2M9 2v2M9 20v2%22/%3E%3C/svg%3E"); }
.ic-history { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8%22/%3E%3Cpath d=%22M3 3v5h5M12 7v5l4 2%22/%3E%3C/svg%3E"); }
.ic-eye { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E"); }
.ic-eye-off { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9.88 9.88a3 3 0 1 0 4.24 4.24M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61M2 2l20 20%22/%3E%3C/svg%3E"); }
.ic-copy { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%229%22 width=%2213%22 height=%2213%22 rx=%222%22/%3E%3Cpath d=%22M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1%22/%3E%3C/svg%3E"); }
.ic-trash { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2%22/%3E%3C/svg%3E"); }
.ic-edit { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z%22/%3E%3C/svg%3E"); }
.ic-external { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6%22/%3E%3C/svg%3E"); }
.ic-arrow-right { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M12 5l7 7-7 7%22/%3E%3C/svg%3E"); }
.ic-arrow-left { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 12H5M12 19l-7-7 7-7%22/%3E%3C/svg%3E"); }
.ic-arrow-up-right { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 17 17 7M7 7h10v10%22/%3E%3C/svg%3E"); }
.ic-transfer { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4%22/%3E%3C/svg%3E"); }
.ic-logout { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9%22/%3E%3C/svg%3E"); }
.ic-play { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 3 14 9-14 9z%22/%3E%3C/svg%3E"); }
.ic-pause { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 4h4v16H6zM14 4h4v16h-4z%22/%3E%3C/svg%3E"); }
.ic-mic { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%222%22 width=%226%22 height=%2212%22 rx=%223%22/%3E%3Cpath d=%22M19 10v2a7 7 0 0 1-14 0v-2M12 19v3%22/%3E%3C/svg%3E"); }
.ic-mic-off { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 2l20 20M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V5a3 3 0 0 0-5.94-.6M17 16.95A7 7 0 0 1 5 12v-2M19 10v2a7 7 0 0 1-.11 1.23M12 19v3%22/%3E%3C/svg%3E"); }
.ic-volume { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 5 6 9H2v6h4l5 4z%22/%3E%3Cpath d=%22M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14%22/%3E%3C/svg%3E"); }
.ic-book { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5z%22/%3E%3Cpath d=%22M6.5 17H20v5H6.5a2.5 2.5 0 0 1 0-5z%22/%3E%3C/svg%3E"); }
.ic-flow { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%228%22 height=%228%22 rx=%222%22/%3E%3Crect x=%2213%22 y=%2213%22 width=%228%22 height=%228%22 rx=%222%22/%3E%3Cpath d=%22M7 11v4a2 2 0 0 0 2 2h4%22/%3E%3C/svg%3E"); }
.ic-branch { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%226%22 cy=%226%22 r=%223%22/%3E%3Ccircle cx=%226%22 cy=%2218%22 r=%223%22/%3E%3Ccircle cx=%2218%22 cy=%226%22 r=%223%22/%3E%3Cpath d=%22M6 9v6M18 9a9 9 0 0 1-9 9%22/%3E%3C/svg%3E"); }
.ic-sliders { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6%22/%3E%3C/svg%3E"); }
.ic-activity { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 12h-4l-3 9L9 3l-3 9H2%22/%3E%3C/svg%3E"); }
.ic-star { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z%22/%3E%3C/svg%3E"); }
.ic-smile { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01%22/%3E%3C/svg%3E"); }
.ic-image { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/%3E%3Ccircle cx=%229%22 cy=%229%22 r=%222%22/%3E%3Cpath d=%22m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21%22/%3E%3C/svg%3E"); }
.ic-link { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71%22/%3E%3Cpath d=%22M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71%22/%3E%3C/svg%3E"); }
.ic-check-circle { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
.ic-x-circle { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m15 9-6 6M9 9l6 6%22/%3E%3C/svg%3E"); }
.ic-help { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01%22/%3E%3C/svg%3E"); }
.ic-monitor { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%223%22 width=%2220%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22M8 21h8M12 17v4%22/%3E%3C/svg%3E"); }
.ic-smartphone { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%222%22 width=%2214%22 height=%2220%22 rx=%222%22/%3E%3Cpath d=%22M12 18h.01%22/%3E%3C/svg%3E"); }
.ic-qr { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%227%22 height=%227%22/%3E%3Crect x=%2214%22 y=%223%22 width=%227%22 height=%227%22/%3E%3Crect x=%223%22 y=%2214%22 width=%227%22 height=%227%22/%3E%3Cpath d=%22M14 14h3v3h-3zM20 14v.01M14 20h.01M17 17h4v4h-4%22/%3E%3C/svg%3E"); }
.ic-list { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01%22/%3E%3C/svg%3E"); }
.ic-terminal { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m4 17 6-6-6-6M12 19h8%22/%3E%3C/svg%3E"); }
.ic-flask { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 2v7.31L4.2 19a2 2 0 0 0 1.73 3h12.14a2 2 0 0 0 1.73-3L14 9.31V2M8.5 2h7M7 16h10%22/%3E%3C/svg%3E"); }
.ic-coins { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%226%22/%3E%3Cpath d=%22M18.09 10.37A6 6 0 1 1 10.34 18M7 6h1v4M16.71 13.88l.7.71-2.82 2.82%22/%3E%3C/svg%3E"); }
.ic-headphones { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 18v-6a9 9 0 0 1 18 0v6%22/%3E%3Cpath d=%22M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z%22/%3E%3C/svg%3E"); }
.ic-grip { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%229%22 cy=%225%22 r=%221%22/%3E%3Ccircle cx=%229%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%229%22 cy=%2219%22 r=%221%22/%3E%3Ccircle cx=%2215%22 cy=%225%22 r=%221%22/%3E%3Ccircle cx=%2215%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%2215%22 cy=%2219%22 r=%221%22/%3E%3C/svg%3E"); }
.ic-power { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18.36 6.64a9 9 0 1 1-12.73 0M12 2v10%22/%3E%3C/svg%3E"); }
.ic-badge-check { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
.ic-move { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20%22/%3E%3C/svg%3E"); }
.ic-menu { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 6h16M4 12h16M4 18h16%22/%3E%3C/svg%3E"); }
.ic-sidebar { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/%3E%3Cpath d=%22M9 3v18%22/%3E%3C/svg%3E"); }
.ic-hash { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 9h16M4 15h16M10 3 8 21M16 3l-2 18%22/%3E%3C/svg%3E"); }
.ic-at { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94%22/%3E%3C/svg%3E"); }
.ic-keyboard { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%224%22 width=%2220%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M7 16h10%22/%3E%3C/svg%3E"); }
.ic-map-pin { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E"); }
.ic-gauge { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 14 4-4%22/%3E%3Cpath d=%22M3.34 19a10 10 0 1 1 17.32 0%22/%3E%3C/svg%3E"); }
.ic-target { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%226%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222%22/%3E%3C/svg%3E"); }
.ic-sparkle-none { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3v18M3 12h18%22/%3E%3C/svg%3E"); }
.ic-box { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z%22/%3E%3Cpath d=%22m3.3 7 8.7 5 8.7-5M12 22V12%22/%3E%3C/svg%3E"); }
.ic-scale { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1ZM2 16l3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1ZM7 21h10M12 3v18M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2%22/%3E%3C/svg%3E"); }
.ic-rocket { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09zM12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z%22/%3E%3Cpath d=%22M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5%22/%3E%3C/svg%3E"); }
.ic-pin { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 17v5M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z%22/%3E%3C/svg%3E"); }
.ic-dial { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%225%22 cy=%225%22 r=%221.5%22/%3E%3Ccircle cx=%2212%22 cy=%225%22 r=%221.5%22/%3E%3Ccircle cx=%2219%22 cy=%225%22 r=%221.5%22/%3E%3Ccircle cx=%225%22 cy=%2212%22 r=%221.5%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221.5%22/%3E%3Ccircle cx=%2219%22 cy=%2212%22 r=%221.5%22/%3E%3Ccircle cx=%225%22 cy=%2219%22 r=%221.5%22/%3E%3Ccircle cx=%2212%22 cy=%2219%22 r=%221.5%22/%3E%3Ccircle cx=%2219%22 cy=%2219%22 r=%221.5%22/%3E%3C/svg%3E"); }

/* ===== commerce-vc1 · VC1 Telecom brand overrides (vcone) ===== */
:root {
  --vc1-lime:#BDCC02; --vc1-lime-soft:#F3F7CC; --vc1-lime-text:#5B6400;
  --vc1-graphite:#0B0B0C; --vc1-panel:#17181B; --vc1-panel-2:#232428;
  --bg-canvas:#F5F5F7; --bg-surface:#FFFFFF; --bg-raised:#FFFFFF; --bg-sunken:#F5F5F7; --bg-hover:#F0F0F2;
  --fg-strong:#1D1D1F; --fg-default:#1D1D1F; --fg-muted:#6E6E73; --fg-subtle:#6E6E73;
  --border-subtle:#E8E8ED; --border-default:#D2D2D7; --border-strong:#C7C7CC;
  --brand:var(--vc1-lime); --brand-hover:#A8B602; --on-brand:#0B0B0C; --brand-text:var(--vc1-lime-text); --brand-rgb:189 204 2;
  --bg-selected:var(--vc1-lime-soft); --action:var(--vc1-graphite); --action-hover:#232428;
  --info-fg:#1F4FB8; --info-bg:#EEF3FD; --info-border:#C7DAF0;
  --font-sans:Inter, "Segoe UI", system-ui, Arial, sans-serif;
}
.mockbar { background:var(--vc1-graphite); color:#ADADAD; flex-wrap:nowrap; gap:5px 8px; padding:5px 12px; }
.mockbar .mb-states button { padding:0 7px; font-size:10.5px; }
.mockbar .mb-lbl select { max-width:110px; }
.mb-credit { flex:none; white-space:nowrap; }
.mockbar .mk { background:var(--vc1-lime); color:#0B0B0C; }
.mockbar a { color:var(--vc1-lime); }
.mockbar .mb-states button.on { background:var(--vc1-lime); color:#0B0B0C; }
.mb-credit { display:inline-flex; align-items:center; gap:6px; margin-left:8px; color:#ADADAD; font-size:10.5px; font-weight:600; }
.mb-credit img { height:24px; width:auto; display:block; }
body[data-brand="suamarca"] {
  --brand:#1F4FB8; --brand-hover:#1A449E; --on-brand:#FFFFFF; --brand-text:#1F4FB8; --brand-rgb:31 79 184;
  --bg-selected:#EEF3FD; --side-bg:#0F1B3D;
}
body[data-brand="fibralitoral"] {
  --brand:#0F766E; --brand-hover:#0D655E; --on-brand:#FFFFFF; --brand-text:#0F766E; --brand-rgb:15 118 110;
  --bg-selected:#ECFDF5; --side-bg:#0B2E2B;
}
body[data-brand="vc1"] {
  --brand:var(--vc1-lime); --brand-hover:#A8B602; --on-brand:#0B0B0C; --brand-text:var(--vc1-lime-text);
  --side-bg:var(--vc1-panel);
}
body[data-brand="suamarca"] .only-fibralitoral, body[data-brand="suamarca"] .only-vc1,
body[data-brand="fibralitoral"] .only-suamarca, body[data-brand="fibralitoral"] .only-vc1,
body[data-brand="vc1"] .only-suamarca, body[data-brand="vc1"] .only-fibralitoral { display:none !important; }
body[data-brand="suamarca"] .side, body[data-brand="fibralitoral"] .side {
  background:var(--side-bg, var(--vc1-panel)); border-color:#FFFFFF14; color:#C9CBC2;
}
body[data-brand="suamarca"] .side-head h2, body[data-brand="fibralitoral"] .side-head h2,
body[data-brand="suamarca"] .nav-item.on, body[data-brand="fibralitoral"] .nav-item.on { color:#fff; }
body[data-brand="suamarca"] .side .sub, body[data-brand="fibralitoral"] .side .sub,
body[data-brand="suamarca"] .nav-group, body[data-brand="fibralitoral"] .nav-group { color:#8A9BB8; }
body[data-brand="suamarca"] .nav-item, body[data-brand="fibralitoral"] .nav-item { color:#B8C4DC; }
body[data-brand="suamarca"] .nav-item:hover, body[data-brand="fibralitoral"] .nav-item:hover { background:rgb(255 255 255 / .06); color:#fff; }
body[data-brand="suamarca"] .nav-item.on, body[data-brand="fibralitoral"] .nav-item.on { background:rgb(255 255 255 / .08); }
body[data-brand="suamarca"] .nav-item.on::before, body[data-brand="fibralitoral"] .nav-item.on::before { background:var(--brand); }
body[data-brand="suamarca"] .nav-item .ic, body[data-brand="fibralitoral"] .nav-item .ic { color:#8A9BB8; }
body[data-brand="suamarca"] .nav-item.on .ic, body[data-brand="fibralitoral"] .nav-item.on .ic { color:#fff; }
body[data-brand="vc1"] .side { background:var(--vc1-panel); border-color:#FFFFFF14; }
body[data-brand="vc1"] .side-head h2, body[data-brand="vc1"] .nav-item.on { color:#F5F5F7; }
body[data-brand="vc1"] .side .sub, body[data-brand="vc1"] .nav-group { color:#8A8A90; }
body[data-brand="vc1"] .nav-item { color:#ADADAD; }
body[data-brand="vc1"] .nav-item.on { background:rgb(189 204 2 / .12); }
body[data-brand="vc1"] .nav-item.on::before { background:var(--vc1-lime); }
body[data-brand="vc1"] .nav-item .cnt { background:var(--vc1-lime); color:#0B0B0C; }
.gx-tools { background:rgb(245 245 247 / .94); }
.gx-foot { margin-top:40px; padding:24px 0; border-top:1px solid var(--border-default); font-size:12.5px; color:var(--fg-muted); }
.gx-foot .beesy-credit { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.gx-foot .beesy-credit img { height:36px; width:auto; }
footer.mock-foot { max-width:1080px; margin:0 auto; padding:0 28px 48px; box-sizing:border-box; }
body:has(.doc-page) > footer.mock-foot { max-width:1240px; padding:0 20px 40px; }
.mock-foot .ref-footer { margin-top:12px; font-size:12px; color:var(--fg-muted); }
.ref-footer { margin-top:12px; font-size:12px; color:var(--fg-muted); }
.ref-footer summary { cursor:pointer; font-weight:800; color:var(--fg-strong); }

.summary-live { position:sticky; top:calc(var(--mb-h, 34px) + var(--topbar-h, 56px) + 12px); align-self:start; background:var(--night-900); color:#E4E5DF; border-color:#FFFFFF14; box-shadow:var(--shadow-md); }
.summary-live h2, .summary-live b, .summary-live dt { color:#fff; }
.summary-live .muted, .summary-live small, .summary-live dd { color:#ADADAD; }
.summary-live .kv { border-color:#FFFFFF14; }
.summary-live .tag.ok { background:var(--success-bg); color:var(--success-fg); }
.summary-live .tag.warn { background:var(--warning-bg); color:var(--warning-fg); }
.summary-live .tag.danger { background:var(--danger-bg); color:var(--danger-fg); }

.pin-boxes { display:flex; gap:8px; justify-content:center; margin:12px 0; }
.pin-boxes span { display:grid; place-items:center; width:44px; height:52px; border:1px solid var(--border-input); border-radius:var(--radius-md); background:var(--bg-raised); font:700 22px/1 var(--font-mono); color:var(--fg-strong); }
.pin-boxes span.on { border-color:var(--brand); box-shadow:0 0 0 3px rgb(var(--brand-rgb) / .25); }

.auth-side.dark { background:var(--vc1-graphite); border-color:#2a2b30; color:#ADADAD; }
.auth-side.dark h2 { color:#fff; }
.auth-side.dark p, .auth-side.dark .auth-foot { color:#8A8A90; }
.auth-side.dark code { color:#BDCC02; }

.form .field-span { grid-column:1 / -1; }
.form-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--border-subtle); grid-column:1 / -1; }

.state-page { min-height:calc(100vh - var(--mb-h, 34px)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:32px 28px 48px; box-sizing:border-box; }
.state-page-brand { display:flex; justify-content:center; width:100%; max-width:520px; }
.state-page-brand img { height:32px; width:auto; max-width:240px; object-fit:contain; }
.state-page-card { width:min(520px,100%); }

.t tbody tr.row-warn { background:var(--warning-bg); }
.t tbody tr.row-warn td { border-color:var(--warning-border); }

.gx-head .beesy-credit { display:none; }
.gx-stats { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px 16px; }
.gx-stats-tags { display:flex; flex-wrap:wrap; gap:8px; }
.beesy-credit.compact { display:inline-flex; align-items:center; gap:8px; margin:0; font-size:12px; font-weight:600; color:var(--fg-muted); }
.beesy-credit.compact img { height:40px; width:auto; display:block; }
.gx-jump { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:8px; padding-top:10px; border-top:1px dashed var(--border-default); font-size:12.5px; }
.gx-jump > span { font-weight:800; color:var(--fg-subtle); margin-right:4px; }
.gx-jump a { color:var(--fg-muted); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.gx-jump a:hover { color:var(--fg-strong); }
.meter.meter-stack { height:auto; border:none; background:transparent; padding:0; display:flex; flex-direction:column; gap:10px; }
.meter.meter-stack .meter-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.meter.meter-stack .track { position:relative; display:block; height:10px; margin:2px 0 4px; border-radius:999px; background:var(--bg-sunken); border:1px solid var(--border-subtle); overflow:visible; }
.meter.meter-stack .track > i { display:block; height:100%; border-radius:999px; background:var(--brand); max-width:100%; }
.meter.meter-stack .track > em { position:absolute; top:-4px; width:2px; height:calc(100% + 8px); background:var(--fg-strong); border-radius:1px; transform:translateX(-1px); pointer-events:none; }
.meter.meter-stack .meter-note { margin:0; font-size:12px; line-height:18px; color:var(--fg-muted); }
.state-empty { display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; max-width:560px; margin:20px auto 18px; padding:32px 28px; border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--bg-raised); box-shadow:var(--shadow-sm); }
.state-empty .ic { width:40px; height:40px; color:var(--brand); margin-bottom:10px; }
.state-empty h2 { margin:0; font-family:var(--font-display); font-size:20px; line-height:26px; font-weight:800; letter-spacing:-.02em; color:var(--fg-strong); }
.state-empty p { margin:10px 0 0; font-size:14px; line-height:21px; color:var(--fg-muted); max-width:46ch; }
.state-empty .row { margin-top:18px; justify-content:center; flex-wrap:wrap; }

/* Document mockups (DOC-*): A4 stack + e-mail frame */
.doc-page { min-height:calc(100vh - var(--mb-h, 34px)); background:var(--bg-sunken); }
.doc-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 20px; border-bottom:1px solid var(--border-default); background:var(--bg-surface); font-size:13px; }
.doc-toolbar h1 { margin:0; font-family:var(--font-display); font-size:16px; line-height:22px; font-weight:800; color:var(--fg-strong); }
.doc-stage { display:grid; gap:24px; justify-content:center; padding:28px 20px 40px; }
.doc-sheet { width:794px; max-width:100%; min-height:1123px; padding:56px 60px; display:flex; flex-direction:column; gap:18px; background:#fff; border:1px solid var(--border-default); border-radius:4px; box-shadow:var(--shadow-md); font-size:13px; line-height:20px; color:var(--fg-default); }
.doc-sheet .doc-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-bottom:12px; border-bottom:2px solid var(--fg-strong); }
.doc-sheet .doc-foot { margin-top:auto; display:flex; justify-content:space-between; gap:12px; padding-top:10px; border-top:1px solid var(--border-subtle); font-size:11px; color:var(--fg-muted); }
.doc-sheet h1 { font-family:var(--font-display); font-size:28px; line-height:32px; font-weight:900; letter-spacing:-.04em; color:var(--fg-strong); }
.doc-sheet h2 { font-size:18px; font-weight:800; color:var(--fg-strong); }
.doc-email-wrap { display:flex; justify-content:center; padding:28px 20px 40px; }
.doc-email-wrap .email-prev { width:min(640px,100%); }
.side-card.tenant .ico { font-weight:800; font-size:11px; }
.dl-kv, dl.kv { display:grid; grid-template-columns:1fr auto; gap:6px 16px; font-size:13px; }
dl.kv dt { color:var(--fg-muted); } dl.kv dd { margin:0; font-weight:700; text-align:right; }
.ic-swap { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22%3E%3Cpath d=%22M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4%22/%3E%3C/svg%3E"); }
.ic-package { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22%3E%3Cpath d=%22M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z%22/%3E%3Cpath d=%22m3.3 7 8.7 5 8.7-5M12 22V12%22/%3E%3C/svg%3E"); }
.ic-palette { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22%3E%3Cpath d=%22M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z%22/%3E%3Ccircle cx=%2213.5%22 cy=%226.5%22 r=%22.5%22/%3E%3Ccircle cx=%2217.5%22 cy=%2210.5%22 r=%22.5%22/%3E%3Ccircle cx=%226.5%22 cy=%2212.5%22 r=%22.5%22/%3E%3Ccircle cx=%228.5%22 cy=%227.5%22 r=%22.5%22/%3E%3C/svg%3E"); }
.ic-signature { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22%3E%3Cpath d=%22M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z%22/%3E%3C/svg%3E"); }
.ic-ban { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m4.9 4.9 14.2 14.2%22/%3E%3C/svg%3E"); }
.ic-sim { --i:var(--i-hash); }
.ic-transfer { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22%3E%3Cpath d=%22M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4%22/%3E%3C/svg%3E"); }
.ic-box { --i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.9%22%3E%3Cpath d=%22M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z%22/%3E%3Cpath d=%22m3.3 7 8.7 5 8.7-5M12 22V12%22/%3E%3C/svg%3E"); }