/* GTM OS console — calm, light, card-based. */
@font-face { font-family: "InterVar"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "InterVar"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --bg: #ffffff;
  --canvas: #f4f4f5;
  --panel: #ffffff;
  --line: #ececef;
  --line-2: #e4e4e7;
  --ink: #18181b;
  --ink-2: #3f3f46;
  --muted: #71717a;
  --faint: #a1a1aa;
  --accent: #3b82f6;
  --accent-soft: #eaf1fe;
  --accent-ink: #2563eb;
  --brand: #6366f1;
  --ok: #16a34a; --ok-soft: #e9f7ee;
  --warn: #d97706; --warn-soft: #fdf3e2;
  --bad: #dc2626; --bad-soft: #fdecec;
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(24, 24, 27, .06);
  --shadow: 0 1px 2px rgba(24, 24, 27, .05), 0 8px 24px -12px rgba(24, 24, 27, .12);
  --font: "InterVar", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01", "ss03"; letter-spacing: -.003em; }
body, .main, .card, .kpi, .ap, .input, .pill, .btn, .table-wrap, th, td { transition: background-color .25s, border-color .25s, color .25s; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hidden { display: none !important; }

/* ── shell ── */
.shell { display: grid; grid-template-rows: 64px 1fr; height: 100vh; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 0 20px 0 20px; }
.logo { width: 40px; height: 40px; border-radius: 12px; background: var(--canvas); display: grid; place-items: center; overflow: hidden; }
.logo img { width: 26px; height: 26px; object-fit: contain; }
.logo b { font-size: 15px; }
.pill-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r); background: var(--canvas); border: 1px solid transparent;
  cursor: pointer; color: var(--ink-2); font-weight: 500; transition: background .15s, border-color .15s; white-space: nowrap; }
.pill-btn:hover { background: #ececee; }
.pill-btn .k { font-size: 11px; color: var(--faint); border: 1px solid var(--line-2); border-radius: 6px; padding: 0 5px; margin-left: 18px; background: #fff; }
.topbar .spacer { flex: 1; }
.badge-btn { height: 40px; min-width: 40px; padding: 0 12px; border-radius: var(--r); background: var(--canvas); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; border: 0; }
.badge-btn svg { color: #f59e0b; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #a855f7); color: #fff; display: grid; place-items: center; font-weight: 600; cursor: pointer; border: 0; }

.frame { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 12px; background: var(--canvas); border-radius: var(--r-xl) var(--r-xl) 0 0; margin: 0 12px; padding: 12px 12px 0; min-height: 0; }
.side { overflow-y: auto; padding: 10px 6px 24px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink-2); font-size: 15px; margin-bottom: 2px; border: 1px solid transparent; }
.nav a:hover { background: rgba(255,255,255,.6); }
.nav a.on { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); color: var(--ink); }
.nav a svg.i { color: var(--ink-2); }
.nav .count { margin-left: auto; font-size: 12px; font-weight: 600; background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 8px; color: var(--ink-2); }
.nav a.on .count { background: var(--canvas); }
.tag { font-size: 11px; font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; padding: 1px 7px; }
.nav-label { display: flex; align-items: center; gap: 10px; margin: 22px 12px 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nav-label::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

.main { background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow-y: auto; min-width: 0; }
.page { max-width: 1180px; padding: 36px 36px 64px; animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .grow { flex: 1; min-width: 0; }
h1 { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.sub { color: var(--muted); font-size: 15px; margin: 0; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.section { margin-top: 34px; }
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-head .grow { flex: 1; }
.link { color: var(--accent-ink); font-weight: 500; cursor: pointer; }

/* ── pills / tabs ── */
.pills { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.pill { height: 38px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; cursor: pointer; color: var(--ink-2); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.pill:hover { background: #fafafa; }
.pill.on { background: var(--canvas); border-color: var(--canvas); color: var(--ink); }
.pill .n { color: var(--faint); font-weight: 500; }

/* ── buttons ── */
.btn { height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); transition: background .15s, transform .08s; white-space: nowrap; }
.btn:hover { background: #fafafa; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: #27272a; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.danger { color: var(--bad); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── cards ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.grid.k { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: #fff; transition: box-shadow .2s, border-color .2s, transform .2s; }
.card.click { cursor: pointer; }
.card.click:hover { box-shadow: var(--shadow); border-color: var(--line-2); transform: translateY(-1px); }
.ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px; flex: none; aspect-ratio: 1; }
.ico svg.i { width: 22px; height: 22px; stroke-width: 1.8; }
.t-indigo { background: #eef0ff; color: #4f46e5; } .t-amber { background: #fff4e0; color: #d97706; } .t-rose { background: #ffecef; color: #e11d48; }
.t-emerald { background: #e7f8ef; color: #059669; } .t-sky { background: #e6f4fd; color: #0284c7; } .t-violet { background: #f3ecff; color: #7c3aed; }
.t-slate { background: #f1f2f4; color: #475569; } .t-teal { background: #e3f7f5; color: #0d9488; }
.card h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.01em; }
.card p.d { color: var(--muted); margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }
.meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }
.meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.meta svg.i { width: 14px; height: 14px; }
.bar { width: 78px; height: 6px; border-radius: 99px; background: #e9eaee; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.bar.wide { width: 100%; }

.kpi { border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 12px; }
.kpi .l { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.kpi .v { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 2px; }
.kpi .s { font-size: 12px; color: var(--faint); }
.kpi svg.spark { width: 100%; height: 28px; margin-top: 6px; }

.status { font-size: 12px; font-weight: 500; border-radius: 6px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 5px; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-active, .s-sent, .s-approved, .s-scheduled, .s-published, .s-customer, .s-trial { color: var(--ok); background: var(--ok-soft); }
.s-draft, .s-idea, .s-drafted, .s-new, .s-enriched, .s-manual { color: var(--ink-2); background: var(--canvas); }
.s-paused, .s-pending, .s-contacted, .s-meeting { color: var(--warn); background: var(--warn-soft); }
.s-done, .s-skipped { color: var(--muted); background: var(--canvas); }
.s-failed, .s-bounced, .s-unsubscribed, .s-lost { color: var(--bad); background: var(--bad-soft); }
.s-replied { color: var(--accent-ink); background: var(--accent-soft); }
.tier { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-weight: 700; font-size: 12px; }
.tier-A { background: #e7f8ef; color: #059669; } .tier-B { background: #eef0ff; color: #4f46e5; } .tier-C { background: var(--canvas); color: var(--muted); }

/* ── tables ── */
.table-wrap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12.5px; padding: 11px 16px; background: #fafafa; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: #fafafa; }
td .name { font-weight: 500; }
td .muted, .muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; border: 1px dashed var(--line-2); border-radius: 14px; }
.empty .ico { margin: 0 auto 12px; }

/* ── forms ── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--ink-2); }
.field .hint { font-size: 12px; color: var(--faint); margin-top: 4px; }
.input, select.input, textarea.input { width: 100%; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
textarea.input { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; line-height: 1.55; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(59,130,246,.14); }
.search { position: relative; }
.search svg.i { position: absolute; left: 12px; top: 11px; color: var(--faint); }
.search .input { padding-left: 38px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toggle { position: relative; width: 38px; height: 22px; border-radius: 99px; background: #d4d4d8; border: 0; cursor: pointer; transition: background .2s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s; }
.toggle.on { background: var(--ok); }
.toggle.on::after { transform: translateX(16px); }

/* ── approvals ── */
.ap { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 12px; transition: opacity .3s, transform .3s, box-shadow .2s, border-color .2s; }
.ap:focus { outline: none; border-color: #c7d7fb; box-shadow: 0 0 0 4px rgba(59,130,246,.10); }
.ap.gone { opacity: 0; transform: translateX(16px); }
.ap-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ap-head .who { flex: 1; min-width: 0; }
.ap-head .who b { font-weight: 600; }
.ap .subject { font-weight: 600; margin-bottom: 6px; }
.ap .body { white-space: pre-wrap; color: var(--ink-2); background: #fafafa; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.ap textarea.input { margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 99px; background: var(--canvas); color: var(--ink-2); }
.chip svg.i { width: 13px; height: 13px; }

/* ── drawer / modal / toast ── */
.scrim { position: fixed; inset: 0; background: rgba(24,24,27,.24); animation: fadein .2s both; z-index: 20; }
@keyframes fadein { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: #fff; z-index: 21; box-shadow: -12px 0 40px -12px rgba(0,0,0,.2); overflow-y: auto; animation: slide .25s cubic-bezier(.2,.8,.2,1) both; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.drawer .inner { padding: 28px; }
.modal { position: fixed; z-index: 21; left: 50%; top: 10vh; transform: translateX(-50%); width: min(560px, 94vw); max-height: 80vh; overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.35); padding: 26px; animation: pop .22s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes pop { from { transform: translateX(-50%) scale(.97); opacity: 0; } }
.close { position: absolute; right: 16px; top: 16px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 12px; z-index: 40; box-shadow: var(--shadow); animation: up .25s both; max-width: 90vw; }
.toast.bad { background: var(--bad); }
@keyframes up { from { transform: translate(-50%, 10px); opacity: 0; } }
.timeline { border-left: 2px solid var(--line); margin-left: 8px; padding-left: 18px; }
.timeline .ev { position: relative; padding-bottom: 14px; }
.timeline .ev::before { content: ""; position: absolute; left: -24px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); }
.timeline .ev.in::before { border-color: var(--accent); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }

/* ── chart ── */
.chart { border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 10px; }
.chart svg { width: 100%; height: 190px; display: block; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.two { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.list .li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list .li:last-child { border-bottom: 0; }
.list .li .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.mini-ico svg.i { width: 16px; height: 16px; }

/* ── auth ── */
.auth { min-height: 100vh; display: grid; place-items: center; background: var(--canvas); padding: 24px; }
.auth .box { width: min(420px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow); animation: fade .3s both; }
.auth .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-weight: 600; font-size: 16px; }
.auth h1 { font-size: 24px; }
.auth .btn { width: 100%; justify-content: center; height: 44px; margin-top: 6px; }
.auth .alt { text-align: center; margin-top: 18px; color: var(--muted); }
.err { color: var(--bad); font-size: 13px; min-height: 18px; margin: 4px 0 6px; }
.note { background: var(--accent-soft); color: var(--accent-ink); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 16px; }

.cmdk { position: fixed; z-index: 30; left: 50%; top: 12vh; transform: translateX(-50%); width: min(560px, 94vw); background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.35); overflow: hidden; animation: pop .18s both; }
.cmdk input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; font-size: 16px; outline: none; }
.cmdk .res { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmdk .res a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; }
.cmdk .res a.sel, .cmdk .res a:hover { background: var(--canvas); }
.menu { position: fixed; z-index: 30; right: 16px; top: 60px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; min-width: 220px; animation: pop2 .15s both; }
@keyframes pop2 { from { opacity: 0; transform: translateY(-4px); } }
.menu a, .menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: none; border: 0; cursor: pointer; text-align: left; }
.menu a:hover, .menu button:hover { background: var(--canvas); }
.menu .who { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }

.menu-btn { display: none !important; }
@media (max-width: 960px) {
  .frame { grid-template-columns: minmax(0, 1fr); margin: 0; border-radius: 0; padding: 8px; }
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar .pill-btn span { display: none; }
  .topbar .pill-btn { padding: 0 11px; }
  .grid.k { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .table-wrap { overflow-x: auto; }
  h1 { font-size: 26px; }
  .side { display: none; }
  .side.open { display: block; position: fixed; inset: 64px 0 0 0; background: var(--canvas); z-index: 15; padding: 12px; }
  .page { padding: 24px 18px 48px; }
  .two { grid-template-columns: 1fr; }
  .menu-btn { display: inline-flex !important; }
  .pill-btn .k, .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ───────────── premium layer ───────────── */
:root { --ease: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.2,1.4,.4,1); --glow: rgba(99,102,241,.16); --skel: #eeeef1; --skel-hi: #f7f7f9; --tooltip: #18181b; }
[data-theme="dark"] {
  --bg: #0c0c0e; --canvas: #141417; --panel: #18181b; --line: #26262b; --line-2: #2e2e34; --ink: #f4f4f5; --ink-2: #d4d4d8; --muted: #a1a1aa; --faint: #71717a;
  --accent: #60a5fa; --accent-soft: rgba(96,165,250,.14); --accent-ink: #93c5fd; --ok: #22c55e; --ok-soft: rgba(34,197,94,.14); --warn: #f59e0b; --warn-soft: rgba(245,158,11,.14);
  --bad: #f87171; --bad-soft: rgba(248,113,113,.14); --skel: #1f1f23; --skel-hi: #27272c; --tooltip: #27272a; --glow: rgba(129,140,248,.22);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6); color-scheme: dark; }
[data-theme="dark"] .nav a.on, [data-theme="dark"] .card, [data-theme="dark"] .kpi, [data-theme="dark"] .ap, [data-theme="dark"] .pill, [data-theme="dark"] .btn,
[data-theme="dark"] .input, [data-theme="dark"] .modal, [data-theme="dark"] .drawer, [data-theme="dark"] .cmdk, [data-theme="dark"] .menu, [data-theme="dark"] .auth .box,
[data-theme="dark"] .col, [data-theme="dark"] .kcard, [data-theme="dark"] .nav .count, [data-theme="dark"] .pill-btn .k { background-color: var(--panel); }
[data-theme="dark"] th, [data-theme="dark"] .ap .body, [data-theme="dark"] tbody tr.click:hover td { background: #1d1d21; }
[data-theme="dark"] .btn.primary { background: #f4f4f5; color: #18181b; border-color: #f4f4f5; }
[data-theme="dark"] .nav a:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .pill-btn:hover, [data-theme="dark"] .menu a:hover, [data-theme="dark"] .menu button:hover, [data-theme="dark"] .cmdk .res a.sel { background: #222227; }
[data-theme="dark"] .t-indigo, [data-theme="dark"] .t-amber, [data-theme="dark"] .t-rose, [data-theme="dark"] .t-emerald, [data-theme="dark"] .t-sky,
[data-theme="dark"] .t-violet, [data-theme="dark"] .t-slate, [data-theme="dark"] .t-teal { background: rgba(255,255,255,.06); }
[data-theme="dark"] .logo img { filter: invert(1); }
[data-theme="dark"] .bar { background: #2a2a30; }
[data-theme="dark"] .cmdk input { background: transparent; }

/* nav: sliding active indicator */
.nav { position: relative; }
.nav .ind { position: absolute; left: 0; right: 0; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .38s var(--spring), height .3s var(--ease), opacity .2s; pointer-events: none; z-index: 0; }
[data-theme="dark"] .nav .ind { background: var(--panel); }
.nav a { position: relative; z-index: 1; transition: color .2s; }
.nav.has-ind a.on { background: transparent; border-color: transparent; box-shadow: none; }
.nav a svg.i { transition: transform .25s var(--spring); }
.nav a:hover svg.i { transform: scale(1.08); }

/* entrance + stagger */
.stagger > * { animation: rise .5s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .02s } .stagger > *:nth-child(2) { animation-delay: .06s } .stagger > *:nth-child(3) { animation-delay: .1s }
.stagger > *:nth-child(4) { animation-delay: .14s } .stagger > *:nth-child(5) { animation-delay: .18s } .stagger > *:nth-child(6) { animation-delay: .22s }
.stagger > *:nth-child(7) { animation-delay: .26s } .stagger > *:nth-child(8) { animation-delay: .3s } .stagger > *:nth-child(n+9) { animation-delay: .34s }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.bar > i { transform-origin: left; animation: grow 1s var(--ease) both .15s; }
@keyframes grow { from { transform: scaleX(0); } }

/* premium cards */
.card.click, .kpi.click { position: relative; isolation: isolate; }
.card.click::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(99,102,241,.55), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card.click:hover::before { opacity: 1; }
.card.click:hover { box-shadow: 0 1px 2px rgba(24,24,27,.04), 0 16px 40px -18px var(--glow); }

.ico { transition: transform .35s var(--spring); }
.btn { transition: background .15s, transform .12s var(--spring), box-shadow .2s, border-color .15s; }
.btn:active { transform: scale(.97); }
.btn.primary:hover { box-shadow: 0 8px 22px -10px rgba(24,24,27,.6); }
.btn.ok:hover { box-shadow: 0 8px 22px -10px rgba(22,163,74,.7); }
.kpi { transition: border-color .2s, box-shadow .25s, transform .25s var(--ease); }
.kpi:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.kpi .delta { font-size: 12px; font-weight: 600; margin-left: 6px; }
.kpi .delta.up { color: var(--ok); } .kpi .delta.down { color: var(--bad); }

/* skeletons */
.sk { position: relative; overflow: hidden; background: var(--skel); border-radius: 10px; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skel-hi), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* interactive chart */
.chart { position: relative; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .xhair { stroke: var(--line-2); stroke-dasharray: 3 3; opacity: 0; transition: opacity .15s; }
.chart .pt { opacity: 0; transition: opacity .15s; }
.chart.hovering .xhair, .chart.hovering .pt.on { opacity: 1; }
.chart polyline { transition: opacity .25s; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.4s var(--ease) forwards .1s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart .area { opacity: .08; }
.legend button { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 2px 4px; border-radius: 6px; font-size: 12.5px; transition: opacity .2s; }
.legend button.off { opacity: .35; text-decoration: line-through; }
.legend button:hover { background: var(--canvas); }
.tip { position: absolute; pointer-events: none; background: var(--tooltip); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 12px; min-width: 130px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; z-index: 2; }
.chart.hovering .tip { opacity: 1; transform: none; }
.tip b { display: block; margin-bottom: 4px; font-weight: 600; }
.tip div { display: flex; justify-content: space-between; gap: 14px; } .tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

/* toasts */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 50; align-items: center; }
.toast2 { display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--bg); border-radius: 14px; padding: 10px 12px 10px 14px; min-width: 280px; max-width: 92vw;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.45); animation: tin .35s var(--spring) both; position: relative; overflow: hidden; }
[data-theme="dark"] .toast2 { background: #f4f4f5; color: #18181b; }
.toast2.out { animation: tout .25s var(--ease) forwards; }
@keyframes tin { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes tout { to { opacity: 0; transform: translateY(8px) scale(.97); } }
.toast2 .msg { flex: 1; }
.toast2 svg.i { width: 18px; height: 18px; }
.toast2.bad svg.i { color: #f87171; } .toast2.good svg.i { color: #4ade80; }
.toast2 button { background: rgba(255,255,255,.12); color: inherit; border: 0; border-radius: 8px; padding: 6px 10px; font-weight: 600; cursor: pointer; }
[data-theme="dark"] .toast2 button { background: rgba(0,0,0,.08); }
.toast2 .life { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; opacity: .35; animation: life linear forwards; }
@keyframes life { from { width: 100%; } to { width: 0; } }

/* approvals focus mode */
.focusbar { position: sticky; top: 0; z-index: 3; background: var(--panel); margin: -8px -36px 14px; padding: 14px 36px 12px; box-shadow: 0 10px 14px -12px rgba(24,24,27,.12); display: flex; align-items: center; gap: 14px; }
.focusbar .bar { flex: 1; width: auto; height: 6px; }
.focusbar .bar > i { animation: none; transition: width .5s var(--ease); }
.kbd { font: 600 11px/1 var(--font); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 3px 6px; color: var(--muted); background: var(--panel); }
.ap { position: relative; }
.ap.cur { border-color: #c7d2fe; box-shadow: 0 0 0 4px var(--glow); }
.ap.gone { opacity: 0; transform: translateX(28px) scale(.98); height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; overflow: hidden; transition: all .35s var(--ease); }
.counter { font-size: 12px; color: var(--muted); text-align: right; margin: -8px 0 12px; }
.counter.over { color: var(--bad); font-weight: 600; }
.done-state { text-align: center; padding: 64px 16px; }
.done-state .burst { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); animation: pop3 .6s var(--spring) both; }
.done-state .burst svg.i { width: 34px; height: 34px; stroke-width: 2.2; }
@keyframes pop3 { from { transform: scale(.3); opacity: 0; } }

/* score ring + tabs */
.ring { width: 64px; height: 64px; flex: none; position: relative; }
.ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .track { stroke: var(--canvas); }
.ring .val { stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; letter-spacing: -.02em; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0 18px; position: relative; }
.tabs button { background: none; border: 0; padding: 10px 12px; cursor: pointer; color: var(--muted); font-weight: 500; position: relative; }
.tabs button.on { color: var(--ink); }
.tabs button.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); animation: grow .3s var(--ease); }
.copy { cursor: pointer; border: 0; background: none; color: var(--faint); padding: 2px; border-radius: 6px; vertical-align: middle; }
.copy:hover { color: var(--ink); background: var(--canvas); }
.copy svg.i { width: 14px; height: 14px; }

/* pipeline board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; min-height: 60vh; }
.col { background: var(--canvas); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; min-height: 200px; transition: background .2s, box-shadow .2s; }
.col.over { background: color-mix(in srgb, var(--accent) 10%, var(--canvas)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-weight: 600; }
.col-head .n { color: var(--muted); font-weight: 500; margin-left: auto; font-size: 12px; }
.col-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: grab; transition: transform .2s var(--ease), box-shadow .2s, opacity .2s; user-select: none; }
.kcard:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.kcard.dragging { opacity: .4; transform: rotate(2deg) scale(.98); }
.kcard.landed { animation: land .5s var(--spring); }
@keyframes land { from { transform: scale(.92); box-shadow: 0 0 0 4px var(--glow); } }
.kcard .t { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kcard .s { color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* funnel */
.funnel { display: grid; gap: 8px; }
.fstep { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 12px; }
.fstep .lbl { color: var(--muted); font-size: 13px; }
.fstep .track { height: 30px; background: var(--canvas); border-radius: 8px; overflow: hidden; position: relative; }
.fstep .fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, #6366f1, #8b5cf6); transform-origin: left; animation: grow 1s var(--ease) both; display: flex; align-items: center; padding-left: 10px; color: #fff; font-weight: 600; font-size: 13px; min-width: 34px; }
.fstep .conv { font-size: 12px; color: var(--muted); text-align: right; }

/* wizard */
.steps { display: flex; gap: 8px; margin-bottom: 22px; }
.steps .st { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); cursor: pointer; transition: all .25s var(--ease); }
.steps .st .num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); font-weight: 600; font-size: 12px; transition: all .25s var(--ease); }
.steps .st.on { border-color: var(--ink); color: var(--ink); box-shadow: var(--shadow-sm); }
.steps .st.on .num { background: var(--ink); color: var(--bg); }
.steps .st.done .num { background: var(--ok); color: #fff; }
.wiz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.wiz .pane { animation: rise .35s var(--ease) both; }
.preview { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--canvas); position: sticky; top: 12px; }
.preview .chrome { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--muted); }
.preview .chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); display: inline-block; }
.preview .chrome span { margin-left: 8px; flex: 1; background: var(--canvas); border-radius: 8px; padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview .device { display: flex; justify-content: center; padding: 18px; }
.preview iframe { width: 390px; max-width: 100%; height: 680px; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.35); transition: opacity .25s; }
.preview iframe.loading { opacity: .5; }
.review dt { color: var(--muted); }
.theme-switch { display: flex; gap: 4px; padding: 6px 12px 8px; }
.theme-switch button { flex: 1; justify-content: center; }
@media (max-width: 960px) { .wiz { grid-template-columns: minmax(0, 1fr); } .preview { position: static; } .steps .st span.lbl { display: none; } .fstep { grid-template-columns: 80px 1fr 56px; } }

[data-theme="dark"] .tier-A { background: rgba(16,185,129,.16); color: #34d399; }
[data-theme="dark"] .tier-B { background: rgba(99,102,241,.2); color: #a5b4fc; }
[data-theme="dark"] .tier-C { background: rgba(255,255,255,.06); color: var(--muted); }
[data-theme="dark"] .tag { background: rgba(96,165,250,.14); }
@media (max-width: 960px) { .focusbar { margin: -8px -18px 14px; padding: 12px 18px; } }

/* ───────────── brand marks + integrations ───────────── */
.bm { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--t, var(--canvas)); flex: none; margin-bottom: 18px;
  transition: transform .4s var(--spring), box-shadow .3s; }
.bm svg { width: 24px; height: 24px; fill: var(--c, var(--ink)); }
.bm.mini { width: 32px; height: 32px; border-radius: 10px; margin: 0; }
.bm.mini svg { width: 16px; height: 16px; }
.bm.lg { width: 52px; height: 52px; border-radius: 16px; margin: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.bm.lg svg { width: 26px; height: 26px; }
.bm.neutral { background: var(--canvas); color: var(--ink-2); } .bm.neutral svg.i { fill: none; stroke: currentColor; width: 22px; height: 22px; }
.bm.fav { background: var(--canvas); } .bm.fav img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
[data-theme="dark"] .bm { background: rgba(255,255,255,.06); }
[data-theme="dark"] .bm.bm-dark svg { fill: #f4f4f5; }
[data-theme="dark"] .bglyph { filter: brightness(1.3); }
/* tiles stay put on hover: the card lifts, its contents keep their alignment */
svg.bglyph { width: 13px; height: 13px; }
.integ-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; padding: 4px 10px 4px 8px; border-radius: 99px; background: var(--canvas); color: var(--muted); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; position: relative; }
.live.ok { color: var(--ok); background: var(--ok-soft); } .live.warn { color: var(--warn); background: var(--warn-soft); } .live.bad { color: var(--bad); background: var(--bad-soft); }
.live.ok i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: ping 2s var(--ease) infinite; }
.live.bad i { animation: blink 1.2s steps(2) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .7; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes blink { 50% { opacity: .3; } }
.integ-card { display: flex; flex-direction: column; }
.integ-card h3 { margin: 0 0 4px; }

/* badge bump when the queue changes */
.badge-btn.bump span { display: inline-block; animation: bump .5s var(--spring); }
@keyframes bump { 30% { transform: translateY(-4px) scale(1.25); } }

/* page transitions (View Transitions API): content slides in the direction you navigate, shared elements morph */
.main { view-transition-name: main; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(main), ::view-transition-new(main) { animation-duration: .32s; animation-timing-function: var(--ease); }
[data-nav="in"]::view-transition-old(main) { animation-name: vt-out-left; }
[data-nav="in"]::view-transition-new(main) { animation-name: vt-in-right; }
[data-nav="out"]::view-transition-old(main) { animation-name: vt-out-right; }
[data-nav="out"]::view-transition-new(main) { animation-name: vt-in-left; }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-20px); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(20px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(20px); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-20px); } }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2,.9,.25,1); }

/* ───────────── identity, onboarding, previews, mobile, a11y ───────────── */
:root { --faint: #8b8b94; }                                         /* 4.5:1 on white for small text */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.btn:focus-visible, .pill:focus-visible, .input:focus-visible { outline-offset: 1px; }
.skip:focus { position: fixed; left: 12px; top: 12px; z-index: 99; }
.product { font-weight: 650; letter-spacing: -.02em; font-size: 15px; margin-right: 6px; white-space: nowrap; }
.btn.primary { background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.06); }
.pill.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }

/* illustrations */
.art { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; flex: none; }
.art svg { width: 100%; height: 100%; display: block; }
.empty svg.scene, .empty > svg, .done-state > svg { width: 150px; height: auto; margin: 0 auto 10px; display: block; }
.empty h3 { margin: 0 0 4px; color: var(--ink); }
.empty p { margin: 0 0 14px; }
.empty > svg, .done-state > svg { animation: float-in .6s var(--spring, cubic-bezier(.2,.9,.3,1.2)) both; }
@keyframes float-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }

/* company logos */
.org { width: 32px; height: 32px; border-radius: 9px; background: var(--canvas); border: 1px solid var(--line); flex: none; display: inline-grid; place-items: center; overflow: hidden; position: relative; vertical-align: middle; }
.org b { font-size: 11px; font-weight: 650; color: var(--muted); }
.org img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; opacity: 0; transition: opacity .25s; }
.org.has-img img { opacity: 1; }
.org.has-img b { visibility: hidden; }
.org.sm { width: 28px; height: 28px; border-radius: 8px; }
.org.xs { width: 20px; height: 20px; border-radius: 6px; }
.org.xs b { font-size: 8.5px; }
.who-cell { display: flex; align-items: center; gap: 10px; }
.drawer-co { display: flex; align-items: center; gap: 6px; }
.kcard .t { display: flex; align-items: center; gap: 8px; }
.kcard .t .tier { margin-left: auto; }
.note-meta { font-size: 12px; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.note-meta .mini-ico { width: 18px; height: 18px; border-radius: 5px; }
.note-meta .mini-ico svg.i { width: 11px; height: 11px; }
.list button.li { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; border-radius: 10px; }
.list button.li:hover { background: var(--canvas); }

/* dashboard */
.seg { display: inline-flex; background: var(--canvas); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; color: var(--muted); font-weight: 550; font-size: 13px; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); }
.delta { font-weight: 650; font-size: 11.5px; padding: 1px 6px; border-radius: 99px; margin-right: 4px; }
.delta.up { color: var(--ok); background: var(--ok-soft); }
.delta.down { color: var(--bad); background: var(--bad-soft); }
.delta.flat { color: var(--muted); background: var(--canvas); }
.card-spark { margin: 10px 0 2px; height: 28px; }
.card-spark .spark { width: 100%; height: 28px; }

/* setup checklist */
.setup { padding: 20px 22px; margin-bottom: 22px; background: linear-gradient(135deg, var(--accent-soft), var(--panel) 60%); }
.setup-head { display: flex; align-items: center; gap: 16px; }
.setup-head h2 { margin: 0; font-size: 18px; }
.setup-head p { margin: 2px 0 0; }
.ring.sm, .ring.sm svg { width: 52px; height: 52px; }
.ring.sm circle { stroke-width: 5; }
.ring.sm b { font-size: 12.5px; }
.steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; }
.steps li { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; }
.steps li:hover { background: color-mix(in srgb, var(--panel) 60%, transparent); }
.steps li .muted { font-size: 12.5px; }
.steps .tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; display: grid; place-items: center; background: var(--panel); }
.steps li.done .tick { background: var(--ok); border-color: var(--ok); color: #fff; animation: pop3 .4s both; }
.steps li.done .tick svg.i { width: 13px; height: 13px; stroke-width: 3; }
.steps li.done b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }

/* notifications */
.bell { position: relative; }
.bell .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--canvas); }
.menu.notes { width: min(380px, calc(100vw - 24px)); padding: 0; right: 70px; }
.notes-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notes-list { max-height: 60vh; overflow-y: auto; padding: 6px; }
.menu .note { align-items: flex-start; gap: 10px; padding: 10px; line-height: 1.4; position: relative; }
.menu .note.unread::after { content: ""; position: absolute; right: 10px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* channel-native previews */
.pv { margin-bottom: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.ap .pv .body { background: none; border: 0; padding: 0; margin: 0; border-radius: 0; color: var(--ink); }
.pv .counter { margin: 0; padding: 0 14px 10px; }
.pv-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.pv-top b { font-weight: 600; font-size: 13.5px; }
.pv-sub { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.pv-sub svg.i { width: 12px; height: 12px; }
.pv-av { width: 36px; height: 36px; border-radius: 50%; background: var(--canvas); display: grid; place-items: center; font-size: 12px; font-weight: 650; color: var(--muted); object-fit: cover; flex: none; }
.pv-email .pv-mail { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--canvas); font-size: 13px; display: grid; gap: 2px; }
.pv-email .pv-mail .muted { display: inline-block; width: 38px; }
.pv-email .subject { font-size: 15px; margin: 6px 0 0 !important; }
.pv-email .body { padding: 16px !important; font-size: 14px; line-height: 1.6; }
.pv-foot { font-size: 11.5px; padding: 0 16px 12px; }
.pv-post .body { padding: 2px 14px 12px !important; }
.pv-acts { display: flex; justify-content: space-around; border-top: 1px solid var(--line); padding: 8px; color: var(--muted); font-size: 14px; }
.pv-thread { padding: 6px 14px 14px; display: flex; justify-content: flex-end; }
.pv-dm .bubble { max-width: 88%; padding: 10px 14px !important; border-radius: 18px 18px 4px 18px; background: #0a66c2 !important; color: #fff !important; font-size: 13.5px; line-height: 1.5; }
.pv-instagram .bubble { background: linear-gradient(135deg, #7c3aed, #db2777 60%, #f59e0b) !important; }
.pv-whatsapp { background: #efeae2; }
.pv-whatsapp .bubble { background: #d9fdd3 !important; color: #111b21 !important; border-radius: 10px 10px 2px 10px; box-shadow: 0 1px .5px rgba(0,0,0,.13); }
.pv-telegram .bubble { background: #effdde !important; color: #000 !important; }
.ap textarea.input.body { margin: 0 0 14px; }

/* swipe */
.swipe-hint { position: absolute; top: 18px; display: none; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; padding: 5px 10px; border-radius: 99px; letter-spacing: .02em; text-transform: uppercase; z-index: 2; }
.swipe-hint.ok { left: 16px; color: var(--ok); background: var(--ok-soft); }
.swipe-hint.no { right: 16px; color: var(--bad); background: var(--bad-soft); }
.ap.sw-ok .swipe-hint.ok, .ap.sw-no .swipe-hint.no { display: inline-flex; }
.ap.sw-ok { border-color: var(--ok); }
.ap.sw-no { border-color: var(--bad); }
.ap { touch-action: pan-y; transition: transform .25s var(--ease), opacity .3s, box-shadow .2s, border-color .2s; }

/* settings */
.set-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.set-nav { display: grid; gap: 2px; position: sticky; top: 0; }
.set-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--muted); font-weight: 500; }
.set-nav a:hover { background: var(--canvas); color: var(--ink); }
.set-nav a.on { background: var(--accent-soft); color: var(--accent-ink); }
.set-group { padding: 20px 22px; margin-bottom: 14px; }
.set-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.set-head h3 { margin: 0; font-size: 15px; }
.set-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; margin-bottom: 16px; }
.set-fields .field { display: grid; gap: 6px; }
.set-fields .field > span { font-weight: 550; font-size: 13px; }
.set-fields small { font-size: 12px; }
.color-in { display: flex; gap: 8px; }
.color-in input[type=color] { width: 42px; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; padding: 3px; background: var(--panel); cursor: pointer; }
.test-out { font-size: 12.5px; }
.test-out.ok { color: var(--ok); }
.test-out.bad { color: var(--bad); }
.brand-pv { padding: 18px 22px; margin-bottom: 14px; }
.bp-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 16px; }
.bp-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--canvas); display: grid; place-items: center; overflow: hidden; font-weight: 700; }
.bp-logo img { width: 100%; height: 100%; object-fit: contain; }
.bp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* mobile: tab bar, sheets */
.tabbar { display: none; }
.grab { display: none; }
@media (max-width: 960px) {
  .product { display: none; }
  .shell { height: 100dvh; }
  .frame { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 18; background: color-mix(in srgb, var(--panel) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar button { display: grid; justify-items: center; gap: 2px; font-size: 10.5px; font-weight: 550; color: var(--muted); background: none; border: 0; padding: 4px 0; position: relative; cursor: pointer; }
  .tabbar a.on { color: var(--accent); }
  .tabbar svg.i { width: 22px; height: 22px; }
  .tabbar a.on svg.i { stroke-width: 2.1; }
  .tb-count { position: absolute; top: 0; left: calc(50% + 6px); font-style: normal; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--bad); color: #fff; display: grid; place-items: center; }
  .side.open { inset: 64px 0 calc(64px + env(safe-area-inset-bottom)) 0; }
  .menu-btn, .badge-btn { display: none !important; }
  .modal { left: 0; right: 0; bottom: 0; top: auto; transform: none; width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); animation: sheet .3s cubic-bezier(.2,.8,.2,1) both; }
  .drawer { width: 100vw; top: 6dvh; border-radius: 20px 20px 0 0; animation: sheet .3s cubic-bezier(.2,.8,.2,1) both; }
  .drawer .inner { padding: 18px 18px 40px; }
  .grab { display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--line-2); margin: -6px auto 12px; }
  .set-wrap { grid-template-columns: 1fr; gap: 12px; }
  .set-nav { position: static; grid-auto-flow: column; overflow-x: auto; grid-auto-columns: max-content; }
  .page-head { flex-wrap: wrap; }
  .menu.notes { right: 8px; left: 8px; width: auto; }
  .focusbar { margin: -8px -18px 14px; padding: 12px 18px; }
  .ap .btn-row .btn { flex: 1; justify-content: center; min-height: 42px; }
}
@keyframes sheet { from { transform: translateY(100%); } }

/* dark everywhere */
[data-theme="dark"] .org img { background: #f4f4f5; }
[data-theme="dark"] .pv-email .pv-mail { background: #1d1d21; }
[data-theme="dark"] .pv-whatsapp { background: #0b141a; }
[data-theme="dark"] .pv-whatsapp .bubble { background: #005c4b !important; color: #e9edef !important; }
[data-theme="dark"] .setup { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel) 60%); }
[data-theme="dark"] .steps .tick, [data-theme="dark"] .seg button.on, [data-theme="dark"] .set-group, [data-theme="dark"] .brand-pv, [data-theme="dark"] .pv { background-color: var(--panel); }
[data-theme="dark"] .set-nav a.on { background: color-mix(in srgb, var(--accent) 20%, transparent); color: #fff; }
[data-theme="dark"] .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="dark"] .ap.cur { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
[data-theme="dark"] .notes-head { border-color: var(--line); }
.menu .note { color: var(--ink); }
.menu .note b { color: var(--ink); }
.notes-head .btn { width: auto; }
@media (max-width: 960px) {
  .page-head > .grow { flex: 1 1 100%; }
  .ap-head .who .muted:last-child { font-size: 12px; }
}
.steps li .grow, .setup-head .grow, .note .grow, .set-head .grow { flex: 1; min-width: 0; }
@media (max-width: 960px) { .ap .btn-row { flex-wrap: nowrap; } .ap .btn-row .btn { min-width: 0; padding-inline: 8px; } }
.org.on-dark, .org.on-dark img { background: #18181b; border-color: #18181b; }

/* ── growth features ── */
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--canvas); margin-bottom: 14px; font-size: 13.5px; }
.banner.bad { background: var(--bad-soft); color: var(--ink); }
.banner.bad > svg.i { color: var(--bad); }
.bad-t { color: var(--bad); font-weight: 600; }
.ok-t { color: var(--ok); font-weight: 550; }
.card.sender.is-paused { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.warm { margin: 2px 0 12px; }
.warm-l { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.warm-l svg.i { width: 15px; height: 15px; color: var(--warn); }
.health { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hb { font-size: 11.5px; font-weight: 550; padding: 2px 8px; border-radius: 99px; background: var(--canvas); color: var(--muted); white-space: nowrap; }
.hb.ok { background: var(--ok-soft); color: var(--ok); }
.hb.warn { background: var(--warn-soft); color: var(--warn); }
.hb.bad { background: var(--bad-soft); color: var(--bad); }
.sm-link { background: none; border: 0; padding: 0; margin-top: 10px; font-size: 12.5px; cursor: pointer; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.dns-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.dns-row b { margin-right: 6px; }
.dns-note { font-size: 13px; color: var(--ink-2); margin: 4px 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin: 6px 0 14px; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.check .hint { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.grid.k.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dnc-add { padding: 20px 22px; margin: 4px 0 8px; }
.dnc-add h3 { margin: 0 0 4px; font-size: 15px; }
.dnc-add > p { margin: 0 0 12px; font-size: 13px; }
.drop { position: relative; margin-bottom: 12px; }
.drop textarea { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.drop-hint { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--faint); pointer-events: none; }
.drop.over textarea { border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.ab { padding: 16px 20px; margin-bottom: 12px; }
.ab-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ab-row:last-of-type { border-bottom: 0; }
.ab-v { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--canvas); font-weight: 700; font-size: 13px; flex: none; }
.ab-row.win .ab-v { background: var(--accent); color: #fff; }
.ab-s { font-weight: 550; margin-bottom: 6px; }
.ab-bar { height: 6px; border-radius: 99px; background: var(--canvas); overflow: hidden; }
.ab-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .8s var(--ease); }
.ab-row:not(.win) .ab-bar i { background: var(--faint); }
.ab-n { text-align: right; display: grid; min-width: 150px; }
.ab-n b { font-size: 18px; letter-spacing: -.02em; }
.ab-n .muted { font-size: 12px; }
.win-chip { background: var(--accent-soft); color: var(--accent-ink); }
.ab-chip { font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); vertical-align: middle; margin-left: 6px; }
.bulk-list { max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.bulk-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.bulk-item:last-child { border-bottom: 0; }
.bulk-item:hover { background: var(--canvas); }
.bulk-item input { margin-top: 4px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.bulk-item b { display: block; font-weight: 600; font-size: 13.5px; }
.bulk-item .muted { font-size: 12.5px; display: block; }
.intent { font-size: 12px; font-weight: 600; }
.i-interested { background: var(--ok-soft); color: var(--ok); }
.i-not_now, .i-out_of_office { background: var(--warn-soft); color: var(--warn); }
.i-wrong_person, .i-unsubscribe { background: var(--bad-soft); color: var(--bad); }
.cap-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cap { padding: 22px; }
.cap .field { margin-bottom: 12px; }
.cap .input { height: 46px; font-size: 16px; }
.cap textarea.input { height: auto; }
.btn.big { width: 100%; height: 52px; font-size: 16px; justify-content: center; margin-top: 6px; }
.seg.wide { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.seg.wide button { padding: 10px; font-size: 14px; }
.cap-side .card { padding: 18px 20px; margin-bottom: 12px; }
.cap-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.cap-stat .v { font-size: 28px; font-weight: 650; letter-spacing: -.02em; }
.cap-stat .muted { font-size: 12.5px; }
.cap-net { font-size: 13px; margin-bottom: 10px; }
.cap-item { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.cap-item b { font-weight: 600; }
.cap-item .muted { flex: 1; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.digest pre { margin: 0; white-space: pre-wrap; font: 14px/1.6 var(--font); color: var(--ink-2); }
.digest { padding: 20px 22px; }
@media (max-width: 960px) {
  .cap-wrap { grid-template-columns: 1fr; }
  .cap-side { order: -1; }
  .grid.k.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-n { min-width: 0; }
}

/* ── motion learned from AgentSDR's film, in our language ── */
.rise-in { animation: rise18 .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise18 { from { opacity: 0; transform: translateY(18px); } }
tbody tr.rise-in { animation-name: rise18tr; }
@keyframes rise18tr { from { opacity: 0; transform: translateY(10px); } }
.reveal .rw { display: inline-block; color: var(--faint); animation: ink .5s var(--ease) forwards; animation-delay: calc(.15s + var(--i) * 120ms); }
@keyframes ink { to { color: var(--ink); } }
.uline { position: relative; display: inline-block; }
.uline svg { position: absolute; left: -2%; right: -2%; bottom: -.28em; width: 104%; height: .42em; overflow: visible; }
.uline path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 120; animation: drawline .7s var(--ease) forwards .75s; vector-effect: non-scaling-stroke; }
@keyframes drawline { to { stroke-dashoffset: 0; } }
.ap-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.apk { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; }
.apk .muted { font-size: 12px; }
.apk b { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: inline-block; }
b.tick, .tick { animation: tick .45s var(--spring); }
@keyframes tick { 40% { transform: translateY(-3px) scale(1.06); } }
.done-pill { position: absolute; top: -14px; right: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px;
  background: var(--ok); color: #fff; font-weight: 600; font-size: 12.5px; box-shadow: 0 8px 20px -8px rgba(22,163,74,.6); animation: pillpop .4s var(--spring) both; }
.done-pill svg.i { width: 14px; height: 14px; stroke-width: 2.4; }
.done-pill.skip { background: var(--ink-2); box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); }
@keyframes pillpop { from { opacity: 0; transform: translateY(8px) scale(.85); } }
.ap.flash-ok { border-color: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); background: color-mix(in srgb, var(--ok-soft) 55%, var(--panel)); }
.ap.flash-skip { opacity: .7; }
.cell-shimmer { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px; color: var(--faint);
  background: linear-gradient(90deg, var(--canvas) 0%, var(--line) 50%, var(--canvas) 100%); background-size: 200% 100%; animation: cellsh 1.4s linear infinite; }
@keyframes cellsh { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.stage-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip.pop { animation: chippop .45s var(--spring) both; animation-delay: calc(.3s + var(--i, 0) * 60ms); }
@keyframes chippop { from { opacity: 0; transform: scale(.7); } }
.hot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 0 var(--warn); animation: hot 2s infinite; }
@keyframes hot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 50%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.hot-t { color: var(--warn); font-weight: 600; }
.board.lanes { grid-auto-columns: minmax(270px, 1fr); }
.lanes .col-head { align-items: flex-start; }
.lane-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--panel); flex: none; }
.lane-ico svg.i { width: 15px; height: 15px; }
.lane-needs_action .lane-ico { background: var(--accent); color: #fff; }
.lane-sub { font-size: 12px; font-weight: 400; line-height: 1.35; }
.kname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard .chip.intent { margin: 6px 0 2px; display: inline-flex; }
.kq { font-size: 12.5px; color: var(--ink-2); margin: 6px 0 4px; padding-left: 8px; border-left: 2px solid var(--line-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lane-empty { font-size: 12.5px; color: var(--muted); text-align: center; padding: 26px 10px; border: 1px dashed var(--line-2); border-radius: 12px; }
@media (max-width: 960px) { .ap-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .reveal .rw { color: var(--ink); } .uline path { stroke-dashoffset: 0; } }
/* no emoji: labels carry a small colour dot instead */
.chip.intent::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; display: inline-block; vertical-align: middle; }
.hb svg.i, .test-out svg.i { width: 12px; height: 12px; stroke-width: 2.4; vertical-align: -1px; margin-right: 3px; }
.pv-acts svg.i { width: 17px; height: 17px; color: var(--faint); }
.sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }

/* ── inbox ── */
.apk-sub { font-size: 11.5px; color: var(--faint); }
.apk.bad b { color: var(--bad); }
.pill-group { display: inline-flex; gap: 6px; }
.pill-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 6px; align-self: center; }
.pills .pill svg.bglyph, .pills .pill svg.i { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.inbox { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ib-head, .ib-row { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(130px, .8fr) minmax(0, 2fr) minmax(0, 1.4fr) 110px; gap: 16px; align-items: center; }
.ib-head { padding: 10px 18px; font-size: 12px; color: var(--muted); background: var(--canvas); border-bottom: 1px solid var(--line); font-weight: 550; }
.ib-row { padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; transition: background .2s, opacity .35s, transform .35s var(--ease); }
.ib-row:last-child { border-bottom: 0; }
.ib-row:hover { background: color-mix(in srgb, var(--canvas) 55%, transparent); }
.ib-row.open { background: var(--panel); box-shadow: inset 3px 0 0 var(--accent); }
.ib-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ib-row.gone { opacity: 0; transform: translateX(28px); }
.ib-row.flash-ok { background: color-mix(in srgb, var(--ok-soft) 70%, var(--panel)); }
.ib-row .done-pill { top: 10px; }
.ib-c { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ib-c .min { display: grid; min-width: 0; }
.ib-c b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-c .muted { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-why { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ib-msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: start; font-size: 13.5px; }
.ib-chan svg { width: 15px; height: 15px; margin-top: 2px; }
.clamp { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--ink-2); }
.ib-when { grid-column: 2; font-size: 11.5px; }
.ib-draft { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.ds { font-weight: 600; font-size: 12.5px; }
.ds.ok { color: var(--ok); } .ds.warn { color: var(--warn); } .ds.bad { color: var(--bad); }
.dl { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.due { font-size: 12px; font-weight: 600; }
.due.hot { color: var(--bad); background: var(--bad-soft); padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.ib-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; padding: 14px 0 4px; cursor: default; animation: rise18 .35s var(--ease) both; }
.ib-thread { display: grid; gap: 10px; align-content: start; }
.bub { border-radius: 14px; padding: 10px 14px; font-size: 13.5px; white-space: pre-wrap; line-height: 1.5; max-width: 92%; }
.bub .muted { display: block; font-size: 11.5px; margin-bottom: 4px; }
.bub.us { background: var(--canvas); justify-self: end; border-bottom-right-radius: 4px; }
.bub.them { background: var(--accent-soft); border-bottom-left-radius: 4px; }
.ib-compose { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--panel); box-shadow: var(--shadow); }
.ib-ai { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.ib-ai svg.i { width: 15px; height: 15px; color: var(--accent); }
.ib-ai span { flex: 1; } .ib-ai b { color: var(--ink); font-weight: 600; }
.ib-compose textarea { margin-bottom: 10px; font-size: 14px; line-height: 1.55; }
.sm-select { width: auto; height: 34px; font-size: 13px; padding: 0 30px 0 10px; }
.lpick { display: grid; gap: 2px; margin-top: 6px; }
.lp { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: none; border-radius: 9px; cursor: pointer; text-align: left; }
.lp:hover { background: var(--canvas); }
.lp .muted { font-size: 12.5px; }
.count.hidden, .tb-count.hidden { display: none; }
@media (max-width: 960px) {
  .ib-head { display: none; }
  .ib-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .ib-row > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .ib-msg, .ib-draft { grid-column: 1 / -1; }
  .ib-due { grid-column: 1 / -1; }
  .ib-panel { grid-template-columns: 1fr; }
  .pill-sep { display: none; }
}
[data-theme="dark"] .bub.them { background: color-mix(in srgb, var(--accent) 18%, var(--panel)); }
[data-theme="dark"] .ib-head { background: #1d1d21; }
.input.sm-select { width: auto; flex: none; }
.ib-compose .btn-row { flex-wrap: wrap; align-items: center; }
.ib-compose .btn-row .grow { flex: 1; }
@media (max-width: 960px) { .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pills::-webkit-scrollbar { display: none; } .pills > * { flex: none; } }
/* ── social ── */
.social { display: grid; gap: 8px; margin-bottom: 20px; }
.soc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.soc-row > svg { width: 16px; height: 16px; }
.soc-row > b { font-weight: 600; font-size: 13px; width: 78px; }
.soc-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.soc { font-size: 12px; padding: 3px 10px; border-radius: 99px; border: 1px dashed var(--line-2); background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
button.soc:hover { border-color: var(--accent); color: var(--accent-ink); }
.soc.on { border: 0; background: var(--ok-soft); color: var(--ok); font-weight: 600; cursor: default; }
.soc.on svg.i { width: 12px; height: 12px; stroke-width: 2.6; }
.soc.on .muted { font-weight: 400; }
.soc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.rewards { padding: 18px 20px; }
.rw-head h3 { margin: 0; font-size: 15px; } .rw-head p { margin: 2px 0 12px; font-size: 13px; }
.rw-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.rw-on { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding-top: 8px; }
@media (max-width: 960px) { .rw-row { grid-template-columns: 1fr; } .soc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rw-row textarea { min-height: 64px; resize: vertical; }

/* ── analytics: categorical slots 1-5 (dataviz reference palette), stepped separately for dark ── */
:root { --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; }
[data-theme="dark"] { --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; }
.s-interested { fill: var(--c1); background: var(--c1); } .s-not_now { fill: var(--c2); background: var(--c2); } .s-other { fill: var(--c3); background: var(--c3); }
.s-wrong_person { fill: var(--c4); background: var(--c4); } .s-unsubscribe { fill: var(--c5); background: var(--c5); }
.grid.k.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.section.two.wide-left { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.chartc { padding: 16px 18px 10px; }
.slegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-size: 12.5px; color: var(--ink-2); }
.lg { display: inline-flex; align-items: center; gap: 6px; } .lg b { font-weight: 600; color: var(--ink); }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.sb-wrap { position: relative; }
.sbars { width: 100%; height: auto; display: block; }
.sbars .gl { stroke: var(--line); stroke-width: 1; }
.sbars .ax { font-size: 10.5px; fill: var(--faint); font-family: var(--font); }
.sbars .hit { fill: transparent; cursor: default; }
.sbars .hit.on { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
.sbars g { animation: barin .6s var(--ease) both; transform-origin: bottom; transform-box: fill-box; }
@keyframes barin { from { transform: scaleY(0); opacity: 0; } }
.stip { position: absolute; top: 0; width: 190px; background: var(--tooltip); color: #fff; border-radius: 10px; box-shadow: 0 12px 28px -12px rgba(0,0,0,.4); padding: 8px 10px; font-size: 12px; pointer-events: none; z-index: 2; }
.stip > b { display: block; margin-bottom: 4px; font-weight: 600; }
.stip .tr { display: flex; align-items: center; gap: 6px; } .stip .tr b { margin-left: auto; font-weight: 600; }
.stip .muted { color: rgba(255,255,255,.6); }
.chart-note { font-size: 11.5px; margin: 6px 0 0; }
.needs { padding: 6px; }
.need { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; }
.need:hover { background: var(--canvas); }
.need .grow { display: grid; flex: 1; } .need b { font-weight: 600; } .need .muted { font-size: 12px; }
.need .nv { font-size: 20px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.need.warn .nv { color: var(--warn); } .need.bad .nv { color: var(--bad); }
.need svg.i { width: 15px; height: 15px; color: var(--faint); }
.chan-cell { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; } .chan-cell svg { width: 16px; height: 16px; }
.rate { display: flex; align-items: center; gap: 8px; } .rate .bar { width: 90px; } .rate span { font-variant-numeric: tabular-nums; font-size: 13px; }
@media (max-width: 960px) { .grid.k.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .section.two.wide-left { grid-template-columns: 1fr; } }

/* ── tables ── */
.starts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.start { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); cursor: pointer; transition: border-color .2s, box-shadow .25s, transform .25s var(--ease); }
.start:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.start .ico { width: 36px; height: 36px; margin: 0 0 4px; } .start .ico svg.i { width: 18px; height: 18px; }
.start b { font-weight: 600; } .start .muted { font-size: 12.5px; line-height: 1.4; }
.sheet-wrap { border: 1px solid var(--line); border-radius: 14px; overflow: auto; max-height: calc(100vh - 250px); }
table.sheet { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13px; }
.sheet th, .sheet td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 7px 10px; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.sheet thead th { position: sticky; top: 0; z-index: 2; background: var(--canvas); font-weight: 550; color: var(--ink-2); font-size: 12.5px; }
.sheet .th { display: flex; align-items: center; gap: 6px; } .sheet .th svg.i { width: 14px; height: 14px; color: var(--faint); flex: none; }
.sheet th.k-waterfall .th svg.i, .sheet th.k-provider .th svg.i, .sheet th.k-ai .th svg.i, .sheet th.k-http .th svg.i { color: var(--accent); }
.thm { margin-left: auto; border: 0; background: none; padding: 2px; border-radius: 6px; cursor: pointer; color: var(--faint); display: grid; }
.thm:hover { background: var(--line); color: var(--ink); } .thm svg.i { width: 15px; height: 15px; }
.sheet .ck, .sheet .rn { position: sticky; left: 0; background: var(--panel); z-index: 1; width: 36px; text-align: center; padding: 7px 6px; }
.sheet .rn { left: 36px; color: var(--faint); font-variant-numeric: tabular-nums; width: 46px; position: sticky; }
.sheet thead .ck, .sheet thead .rn { z-index: 3; background: var(--canvas); }
.sheet td.ed { cursor: text; } .sheet td.ed[contenteditable="true"] { outline: 2px solid var(--accent); outline-offset: -2px; white-space: normal; background: var(--panel); }
.sheet tbody tr:hover td { background: color-mix(in srgb, var(--canvas) 60%, var(--panel)); }
.sheet td.flash { animation: cellin .9s var(--ease); }
@keyframes cellin { from { background: var(--accent-soft); } }
.cerr { color: var(--bad); display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } .cerr svg.i { width: 13px; height: 13px; }
.sent-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-left: 4px; vertical-align: middle; }
.tname[contenteditable="true"]:focus { outline: none; border-bottom: 2px solid var(--accent); }
.modal.wide { width: min(860px, 96vw); }
.kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.kind { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; font-size: 13px; }
.kind svg.i { width: 16px; height: 16px; color: var(--muted); } .kind .muted { font-size: 11.5px; line-height: 1.35; }
.kind.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); } .kind.on svg.i { color: var(--accent); }
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .var-chips .chip { cursor: pointer; border: 0; font-size: 12px; }
.var-chips .chip:hover { background: var(--accent-soft); color: var(--accent-ink); }
.colmenu { position: fixed; min-width: 230px; }
.find-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.find-sum { font-weight: 550; margin: 4px 0 12px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-bottom: 12px; }
.fg .muted { font-size: 12px; display: block; margin-bottom: 4px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 10px; min-height: 40px; }
.fchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; animation: chippop .3s var(--spring) both; }
.fchip button { border: 0; background: none; padding: 0; cursor: pointer; display: grid; color: var(--faint); } .fchip svg.i { width: 12px; height: 12px; }
.fadd { border: 0; outline: none; background: none; font: inherit; font-size: 12.5px; min-width: 60px; flex: 1; }
.find-head { display: flex; gap: 10px; align-items: baseline; margin: 16px 0 8px; flex-wrap: wrap; } .find-head .muted { font-size: 12.5px; }
.fres { max-height: 300px; overflow: auto; }
.err { color: var(--bad); font-size: 13px; }
@media (max-width: 960px) { .starts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fgrid { grid-template-columns: 1fr; } .find-in { grid-template-columns: 1fr; } }
.fields-list { display: grid; gap: 8px; margin-bottom: 12px; }
.frow { display: grid; grid-template-columns: minmax(0, 1.2fr) 170px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cfields .cf-in { height: 32px; font-size: 13px; padding: 0 8px; }
@media (max-width: 960px) { .frow { grid-template-columns: 1fr 1fr; } }

/* ── meetings, referrals, signals ── */
.mt-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; } .mt-head h3 { font-size: 14px; margin: 0; }
.meetings { display: grid; gap: 10px; margin-bottom: 20px; }
.mt { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.mt-top { display: flex; gap: 12px; align-items: center; } .mt-top .muted { font-size: 12.5px; }
.mt-date { display: grid; justify-items: center; min-width: 52px; padding: 6px 8px; border-radius: 10px; background: var(--canvas); font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.mt-date b { font-size: 13px; color: var(--ink); }
.mt-brief { margin-top: 10px; } .mt-brief summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--accent-ink); }
.mt-brief pre { white-space: pre-wrap; font: 13px/1.55 var(--font); color: var(--ink-2); margin: 8px 0 0; background: var(--canvas); border-radius: 10px; padding: 10px 12px; }
.mt-acts { margin-top: 10px; display: grid; gap: 8px; }
.meet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt-card { display: flex; gap: 12px; align-items: flex-start; text-align: left; font: inherit; color: inherit; }
.mt-card .muted { font-size: 12.5px; } .mt-card b { font-weight: 600; }
.mt-flag { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 6px; } .mt-flag.ok { color: var(--ok); }
.chip.sig { font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); }
@media (max-width: 960px) { .meet-grid { grid-template-columns: 1fr; } }

/* ── emails ── */
.em-wrap { display: grid; grid-template-columns: 290px 1fr; gap: 20px; align-items: start; }
.em-list { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; max-height: calc(100vh - 140px); overflow-y: auto; padding-right: 4px; }
.em-list .nav-label { margin: 14px 0 6px; }
.em-list .nav-label:first-child { margin-top: 0; }
.em-item { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid transparent; background: none; border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.em-item:hover { background: var(--canvas); }
.em-item.on { background: var(--panel); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.em-item .tile { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.em-item .tile svg.i { width: 16px; height: 16px; }
.em-item .grow { display: flex; flex-direction: column; min-width: 0; }
.em-item b { font-weight: 550; font-size: 13.5px; }
.em-item .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-view { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 22px; min-width: 0; }
.em-head h2 { margin: 8px 0 2px; font-size: 20px; letter-spacing: -.01em; }
.em-head .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.em-head .chips:first-child { margin-top: 0; }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.em-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 12px; }
.em-tools .seg button { display: inline-flex; align-items: center; gap: 6px; }
.em-tools .seg svg.i { width: 15px; height: 15px; }
.em-tools .spacer { flex: 1; }
.em-tools select.input { width: auto; max-width: 260px; height: 34px; padding: 0 10px; }
.em-note { font-size: 13px; margin: 0 0 12px; }
.em-frame { background: var(--canvas); border-radius: var(--r); padding: 14px; margin: 0 auto; transition: max-width .35s var(--ease, cubic-bezier(.2,.8,.2,1)); max-width: 100%; }
.em-frame.phone { max-width: 400px; }
.em-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; padding: 2px 4px 12px; }
.em-frame iframe { display: block; width: 100%; height: 520px; border: 0; border-radius: 10px; background: #fff; }
.em-prompt { margin-top: 16px; font-size: 13px; }
.em-prompt summary { cursor: pointer; color: var(--muted); font-weight: 500; }
.em-prompt p { white-space: pre-wrap; color: var(--ink-2); margin: 8px 0 0; }
@media (max-width: 860px) { .em-wrap { grid-template-columns: 1fr; } .em-list { position: static; max-height: none; flex-direction: row; overflow-x: auto; } .em-list .nav-label { display: none; } .em-item { flex: none; } .em-item .muted { display: none; } .em-view { padding: 14px; } }

/* ── copilot ── */
.copilot { position: fixed; top: 76px; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); z-index: 30; display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: 0 24px 60px -20px rgba(24,24,27,.28); animation: cpIn .28s cubic-bezier(.2,.8,.2,1) both; }
.copilot.out { animation: cpOut .2s ease both; }
@keyframes cpIn { from { opacity: 0; transform: translateX(16px) scale(.98); } }
@keyframes cpOut { to { opacity: 0; transform: translateX(16px) scale(.98); } }
.cp-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 18px; border-bottom: 1px solid var(--line); }
.cp-head > svg.i { color: var(--brand); }
.cp-log { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.cp-msg { max-width: 100%; font-size: 14px; line-height: 1.55; animation: cpMsg .25s ease both; }
@keyframes cpMsg { from { opacity: 0; transform: translateY(6px); } }
.cp-msg.me { align-self: flex-end; max-width: 85%; background: var(--canvas); padding: 9px 13px; border-radius: 14px 14px 4px 14px; }
.cp-steps { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.cp-steps svg.i { width: 13px; height: 13px; }
.cp-table { margin-top: 10px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; }
.cp-table table { width: 100%; border-collapse: collapse; }
.cp-table th, .cp-table td { padding: 6px 9px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cp-table th { color: var(--muted); font-weight: 550; }
.cp-table .muted { padding: 6px 9px; }
.cp-act { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; font-size: 13px; }
.cp-act.done { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.cp-dots { display: inline-flex; gap: 4px; padding: 6px 0; }
.cp-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: cpDot 1s infinite ease-in-out; }
.cp-dots i:nth-child(2) { animation-delay: .15s; } .cp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cpDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.cp-empty { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cp-empty p { margin: 0 0 6px; font-size: 13.5px; }
.chip-btn { border: 1px solid var(--line-2); background: var(--panel); border-radius: 99px; padding: 6px 12px; font-size: 13px; cursor: pointer; text-align: left; color: var(--ink-2); transition: border-color .2s, background .2s; }
.chip-btn:hover { border-color: var(--faint); background: var(--canvas); }
.cp-in { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--line); }
.cp-in textarea { flex: 1; resize: none; border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 12px; background: var(--bg); min-height: 40px; outline: none; }
.cp-in textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cp-in .btn { height: 40px; width: 40px; padding: 0; justify-content: center; border-radius: 12px; }
@media (max-width: 720px) { .copilot { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 86vh; border-radius: 20px 20px 0 0; } #copilotBtn span { display: none; } }
@media (prefers-reduced-motion: reduce) { .copilot, .cp-msg, .em-frame { animation: none; transition: none; } }
.cp-head b { flex: 1; }
.note.em-tip { display: flex; gap: 8px; align-items: flex-start; }
.note.em-tip svg.i { width: 16px; height: 16px; margin-top: 1px; }
.em-tools select.input { max-width: 220px; }

/* ── language row in the lead drawer ── */
.lang-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); margin: 0 0 20px; }
.lang-row .tile { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.lang-row .tile svg.i { width: 17px; height: 17px; }
.lang-row .grow { display: flex; flex-direction: column; min-width: 0; }
.lang-row b { font-weight: 550; font-size: 14px; }
.lang-row .muted { font-size: 12.5px; }
.lang-row select.input { width: auto; max-width: 190px; height: 34px; padding: 0 10px; }

/* ── workflows ── */
.wf-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.wf-card .d { margin: 0; color: var(--muted); font-size: 13.5px; }
.wf-top { display: flex; align-items: center; gap: 8px; }
.wf-top h3 { margin: 0; font-size: 15.5px; }
.wf-card .chips, .em-head .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-card .btn-row { margin-top: auto; }
.wf-mini { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 8px 0 2px; }
.wf-dot { position: relative; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line-2); display: grid; place-items: center; background: var(--panel); }
.wf-dot svg { width: 15px; height: 15px; }
.wf-if { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); }
.wf-gap { font-size: 11px; color: var(--muted); padding: 0 2px; }
.wf-gap::before { content: ''; display: inline-block; width: 10px; height: 1px; background: var(--line-2); vertical-align: middle; margin-right: 3px; }
.wf-custom { position: absolute; right: 14px; top: 14px; opacity: 0; transition: opacity .2s; }
.card.click { position: relative; }
.card.click:hover .wf-custom, .card.click:focus-within .wf-custom { opacity: 1; }
@media (hover: none) { .wf-custom { opacity: 1; } }
.wf-empty { padding: 8px; }
.wf-title { font: inherit; font-size: 26px; font-weight: 650; letter-spacing: -.02em; border: 1px solid transparent; background: none; border-radius: 10px; padding: 2px 8px; margin-left: -9px; width: min(640px, 100%); color: var(--ink); }
.wf-title:hover { border-color: var(--line-2); }
.wf-title:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wf-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.wf-side { position: sticky; top: 0; }
.wf-side h3 { margin: 0 0 12px; font-size: 15px; }
.wf-step { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; animation: cpMsg .25s ease both; }
.wf-rail { display: flex; justify-content: center; padding-top: 16px; }
.wf-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--panel); font-size: 13px; font-weight: 600; }
.wf-body { padding: 16px 18px; }
.wf-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wf-row select.input { width: auto; min-width: 220px; height: 36px; }
.wf-row .spacer { flex: 1; }
.wf-row .down svg, .wf-row [data-mv="-1"] svg { transform: rotate(-90deg); }
.wf-row .down svg { transform: rotate(90deg); }
.wf-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--canvas); flex: none; }
.wf-ico svg.i { width: 17px; height: 17px; }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; }
.wf-when { display: flex; align-items: center; gap: 8px; }
.wf-when input[type=number] { width: 72px; }
.wf-when select { flex: 1; min-width: 0; }
.wf-when .muted { font-size: 12.5px; white-space: nowrap; }
.field.wf-check { flex-direction: row; display: flex; align-items: center; gap: 8px; align-self: end; padding-bottom: 10px; }
.field.wf-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.wf-link { margin: 0 0 0 18px; padding: 8px 0 8px 30px; border-left: 2px dashed var(--line-2); font-size: 12.5px; color: var(--muted); }
.wf-add { margin: 2px 0 6px 48px; opacity: .6; transition: opacity .2s; }
.wf-add:hover, .wf-add:focus-within { opacity: 1; }
.wf-end { display: flex; gap: 8px; align-items: center; margin: 12px 0 0 48px; font-size: 13px; }
.wf-pv-row { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.wf-pv { width: 100%; background: var(--canvas); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; }
.wf-pv p { margin: 6px 0 0; }
.wf-pv-h { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 6px; }
.wf-pv-h svg.i { width: 13px; height: 13px; }
.wf-res { margin-bottom: 14px; }
.wf-res-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.wf-res-h h3 { flex: 1; }
.wf-res h3 { margin: 0; font-size: 15px; text-transform: capitalize; }
.wf-res tr.win td { background: var(--ok-soft); }
.wf-bar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--canvas); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.wf-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.split-pick { margin: 0 0 16px; }
.grid.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-side { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.split-side.cur { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.split-side.win { border-color: var(--ok); }
.split-n { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.split-n > div { display: flex; flex-direction: column; }
.split-n b { font-size: 18px; }
.split-n .muted { font-size: 12px; }
@media (max-width: 960px) { .wf-wrap { grid-template-columns: 1fr; } .wf-side { position: static; } .grid.split { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .wf-title { font-size: 21px; } .wf-row select.input { min-width: 0; flex: 1; } .wf-step { grid-template-columns: 28px minmax(0,1fr); gap: 6px; } .wf-link { margin-left: 13px; } .wf-add, .wf-end { margin-left: 34px; } .split-n { grid-template-columns: repeat(3, 1fr); } }

/* ── connectors ── */
.conn-cat { margin: 0 0 22px; }
.conn-head { display: flex; gap: 16px; align-items: flex-end; margin-bottom: 10px; }
.conn-head h3 { margin: 0 0 2px; font-size: 15.5px; }
.conn-head p { margin: 0; font-size: 13px; }
.conn-use { display: flex; align-items: center; gap: 8px; }
.conn-use select.input { width: auto; min-width: 200px; height: 34px; }
.conn-note { font-size: 12.5px; white-space: nowrap; }
.conn-list { display: flex; flex-direction: column; gap: 8px; }
.conn-item { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.conn-item.active { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.conn-item > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.conn-item > summary::-webkit-details-marker { display: none; }
.conn-item > summary b { font-weight: 550; white-space: nowrap; }
.conn-about { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.conn-item > summary .chip { white-space: nowrap; }
.conn-dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--canvas); flex: none; }
.conn-dot svg.i { width: 14px; height: 14px; }
.conn-item .set-group { border: 0; box-shadow: none; margin: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); }
.conn-item .set-group .set-head { display: none; }
@media (max-width: 720px) { .conn-head { flex-direction: column; align-items: stretch; } .conn-about, .conn-item > summary .chip { display: none; } }
.fsrc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.fsrc-b { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line-2); background: var(--panel); border-radius: 12px; padding: 8px 12px; cursor: pointer; color: var(--ink); }
.fsrc-b span { display: flex; flex-direction: column; }
.fsrc-b b { font-weight: 550; font-size: 13.5px; }
.fsrc-b small { font-size: 11.5px; }
.fsrc-b.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fsrc-b:disabled { opacity: .5; cursor: default; }
.fsrc-b > svg { width: 18px; height: 18px; flex: none; }
.fsrc-more { font-size: 12.5px; margin: 0 0 10px; }
.conn-item .status { white-space: nowrap; }

/* ── go-live check ── */
.gl-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.gl-head h3 { margin: 0 0 4px; font-size: 17px; }
.gl-head p { margin: 0; font-size: 13px; }
.gl-group { margin-bottom: 18px; }
.gl-group h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.gl-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: 6px; }
.gl-row .tile { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.gl-row .tile svg.i { width: 15px; height: 15px; }
.gl-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gl-row b { font-weight: 550; font-size: 13.5px; }
.gl-row .muted { font-size: 12.5px; overflow-wrap: anywhere; }
.gl-fix { display: flex; gap: 4px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.gl-fix svg.i { width: 13px; height: 13px; margin-top: 2px; flex: none; }
.gl-ms { font-size: 11.5px; white-space: nowrap; }
.gl-fail { border-color: color-mix(in srgb, var(--danger, #e11d48) 35%, var(--line)); }
@media (max-width: 720px) { .gl-head { flex-direction: column; align-items: stretch; } .gl-ms { display: none; } }
.gl-row .grow { flex: 1; }

/* ── videos and calls ── */
.grid.vids { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card.vid { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.vid-thumb { border: 0; padding: 0; background: var(--canvas); aspect-ratio: 16 / 9; cursor: pointer; display: grid; place-items: center; overflow: hidden; }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.vid-thumb:hover img { transform: scale(1.03); }
.vid-thumb span svg.i { width: 28px; height: 28px; color: var(--muted); }
.vid-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.vid-b b[contenteditable="true"] { outline: none; border-radius: 6px; }
.vid-b b[contenteditable="true"]:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.vid-b > .muted { font-size: 12.5px; }
.vid-n { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 0; }
.vid-n > div { display: flex; flex-direction: column; }
.vid-n b { font-size: 17px; }
.vid-n .muted { font-size: 11.5px; }
.rec { border-radius: 14px; overflow: hidden; background: #0b0b0f; }
.rec.v video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rec.a { background: var(--canvas); padding: 22px; }
.rec.a audio { width: 100%; }
.rec-a { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 22px; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #e11d48; animation: cpDot 1.2s infinite; }
.btn.danger { background: #e11d48; color: #fff; border-color: #e11d48; }
.sv-res { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.sv-opt { display: flex; justify-content: space-between; gap: 10px; text-align: left; border: 0; background: var(--canvas); border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--ink); }
.calls { margin: 0 0 20px; }
.call { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; font-size: 13.5px; }
.call p { margin: 6px 0; }
.call ul { margin: 2px 0 6px; padding-left: 18px; }
.call-h { font-size: 12px; margin-top: 6px; }
.tx { max-height: 60vh; overflow: auto; font-size: 13.5px; line-height: 1.6; background: var(--canvas); border-radius: 12px; padding: 14px; }
.sso-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; margin: 16px 0 10px; }
.sso-or::before, .sso-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sso-btn { width: 100%; justify-content: center; margin-bottom: 8px; }
.sso-btn > svg { width: 16px; height: 16px; }
.ai-about { font-size: 13px; margin: -4px 0 12px; }
.ai-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 14px; }

/* ── section tabs: the pages of one sidebar item ── */
.subnav { display: flex; gap: 2px; margin: -6px 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px 11px; color: var(--muted); font-weight: 500; font-size: 14px; white-space: nowrap; border-radius: 8px 8px 0 0; transition: color .15s, background .15s; }
.subnav a:hover { color: var(--ink); background: var(--canvas); }
.subnav a.on { color: var(--ink); }
.subnav a.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.subnav .count { font-size: 11.5px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); display: inline-grid; place-items: center; }
.subnav .count.hidden { display: none; }

/* ── today: what needs you ── */
.todo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.todo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.todo:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.todo > svg.i { width: 20px; height: 20px; color: var(--faint); flex: none; }
.todo .grow { display: flex; flex-direction: column; min-width: 0; }
.todo .grow .muted { font-size: 12.5px; }
.todo-n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--faint); }
.todo.has { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.todo.has > svg.i, .todo.has .todo-n { color: var(--accent); }
@media (max-width: 760px) { .todo-row { grid-template-columns: 1fr; gap: 8px; } }

/* ── agents ── */
.ag-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ag-card { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.ag-top { display: flex; gap: 12px; align-items: flex-start; }
.ag-top h3 { margin: 0 0 2px; font-size: 16px; }
.ag-top p { margin: 0; font-size: 13px; }
.ag-ask { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); background: var(--canvas); border-radius: 10px; padding: 9px 11px; }
.ag-ask svg.i, .ap-why svg.i { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--accent); }
.ag-stat { font-size: 12.5px; margin-top: auto; }
.sk-row { display: flex; align-items: center; gap: 10px; }
.sk-row.off .grow { opacity: .55; }
.sk-row .chips { margin-top: 6px; }
.ag-pick { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ag-pick.col { flex-direction: column; gap: 8px; }
.ag-pick .wf-check.locked { opacity: .8; }
.ag-pick .wf-check.locked svg.i { width: 12px; height: 12px; vertical-align: -1px; }
.ag-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ag-main h3, .wf-side h3 { display: flex; align-items: center; gap: 8px; }
.ag-main h3 svg.i { width: 17px; height: 17px; color: var(--accent); }
.ag-main h3 + .muted { margin: -6px 0 14px; font-size: 13px; }
.ag-mode { display: grid; gap: 8px; margin-bottom: 14px; }
.ag-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.ag-opt input { margin-top: 3px; }
.ag-opt div { display: flex; flex-direction: column; gap: 2px; }
.ag-opt .muted { font-size: 12.5px; }
.ag-opt.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.ag-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ag-on { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; }
.ag-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.ag-kpis .apk { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ag-kpis .apk .muted { font-size: 12px; }
.ag-kpis .apk b { font-size: 20px; font-variant-numeric: tabular-nums; }
.ag-out { margin-top: 12px; }
.ag-verdict { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.ag-verdict svg.i { width: 16px; height: 16px; }
.ag-verdict.ok { background: var(--ok-soft); color: var(--ok); }
.ag-verdict.hold { background: var(--warn-soft); color: var(--warn); }
.ag-verdict.no { background: var(--bad-soft); color: var(--bad); }
.ag-issues { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ag-issues li { display: flex; gap: 8px; align-items: baseline; }
.ag-rec { display: flex; gap: 10px; align-items: flex-start; }
.ag-body { font-size: 12.5px; margin-top: 2px; }
.ag-why { font-size: 12px; margin-top: 4px; color: var(--warn); }
.ag-how { font-size: 11.5px; font-weight: 600; white-space: nowrap; padding: 2px 8px; border-radius: 99px; background: var(--canvas); color: var(--ink-2); }
.ag-how.auto { background: var(--accent-soft); color: var(--accent-ink); }
.ag-how.pending { background: var(--warn-soft); color: var(--warn); }
.ag-how.ok { background: var(--ok-soft); color: var(--ok); }
.ap-why { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); background: var(--canvas); border-radius: 10px; padding: 8px 11px; margin: 10px 0 2px; }
.btn-row.nowrap { flex-wrap: nowrap; }
@media (max-width: 760px) { .ag-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ag-two { grid-template-columns: 1fr; } }
.wf-side .card + .card { margin-top: 16px; }
.ag-top .ico { flex: none; }
.field > small.muted { display: block; margin-top: 5px; font-size: 12px; }
.ib-sum { margin: -8px 0 16px; font-size: 13.5px; }
.ib-sum b { color: var(--ink); }
.bad-text { color: var(--bad); font-weight: 500; }
.ag-top .ico { margin-bottom: 0; width: 44px; height: 44px; }

/* ── one rule for every form field: label row, control, help ──
   Labels are one fixed-height row (a "server" tag never makes it taller), controls are all 40px,
   so fields side by side line up whatever their labels and help text say. */
.field > span:first-child { display: flex; align-items: center; gap: 6px; min-height: 20px; margin-bottom: 6px; font-size: 13px; font-weight: 550; color: var(--ink-2); line-height: 1.3; }
.set-fields .field { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 0; }
.set-fields .field > span:first-child { margin-bottom: 6px; }
.field .chip.src { height: 18px; padding: 0 7px; font-size: 11px; line-height: 18px; font-weight: 500; }
.input, select.input { box-sizing: border-box; }
.color-in { display: flex; gap: 8px; align-items: stretch; }
.color-in input[type=color] { box-sizing: border-box; flex: none; width: 40px; height: 40px; padding: 4px; }
.color-in .input { flex: 1; min-width: 0; }
.field > small.muted, .set-fields small { display: block; margin-top: 6px; line-height: 1.4; }
.ag-two, .wf-grid { align-items: start; }
.ag-main .field { margin-bottom: 18px; } .ag-main .field:last-child { margin-bottom: 0; }
[data-theme="dark"] .bglyph.full { filter: none; }
.bm .bm-img { width: 26px; height: 26px; object-fit: contain; display: block; }
.bm.mini .bm-img { width: 18px; height: 18px; }
img.bimg { object-fit: contain; display: inline-block; vertical-align: -2px; }
[data-theme="dark"] img.bglyph { filter: none; }
img.bglyph { width: 13px; height: 13px; }
.pills .pill img.bglyph { width: 15px; height: 15px; margin-right: 4px; vertical-align: -3px; }
img.i.bimg:not(.bglyph) { width: 16px; height: 16px; }
.bm.lg .bm-img { width: 30px; height: 30px; }
.bm-img[src*="whatsapp"] { transform: scale(1.2); }
.integ-card .d { margin: 0; }
.integ-card .meta { margin-top: auto; padding-top: 16px; }
.grid.integ > .card { height: 100%; }
/* tables: short columns never wrap, long ones truncate instead of breaking mid-word */
td.muted:last-child, td .nowrap { white-space: nowrap; }
.table-wrap td.trunc { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* <label class="field"> is inline by default, so its spacing collapsed in places: make every field a block */
.field { display: block; }
.field.wf-check { margin-bottom: 12px; }

/* ── mailbox warm-up ── */
.banner.warn { background: var(--warn-soft); color: var(--ink); }
.banner.warn > svg.i { color: var(--warn); flex: none; }
.wu { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0; background: var(--panel); }
.wu-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.wu-head svg.i { width: 16px; height: 16px; color: var(--accent); }
.wu-head .muted { margin-left: auto; font-size: 12px; }
.wu-tip { font-size: 12.5px; margin: 6px 0 10px; line-height: 1.45; }
.wu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wu-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.wu-list li .grow { display: flex; flex-direction: column; min-width: 0; }
.wu-list small { font-size: 12px; }
.wu-tick { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; }
.wu-list li.done .wu-tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.wu-tick svg.i { width: 11px; height: 11px; stroke-width: 3; }
.wu-svc { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.wu-svc > span { display: flex; flex-direction: column; gap: 2px; }
.wu-svc small { font-size: 12px; }
.wu-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wu-main { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--warn); margin: 6px 0 0; }
.wu-main svg.i { width: 14px; height: 14px; }