/* AD8 client app — design system v2 (client, sign-in and onboarding pages only; the operator dashboard does not load
   this file). ui.css provides the shared base; everything here re-themes it for the client and adds client components.
   Page-specific rules live in public/client/pages/<page>.css, pushed with @push('styles').

   Principles: content first (numbers, ads, actions before explanations); caveats live in a collapsed .data-note;
   14px body text, 12px only for metadata; one accent colour for action, amber only for "new / attention". */

/* ============================================================ 0. tokens */

:root{
  --ink:#0F172A;--ink-2:#1E293B;--muted:#556074;--faint:#677186;
  --canvas:#F5F6F8;--surface:#FFFFFF;--surface-2:#F9FAFB;
  --line:#E3E6EC;--line-soft:#EEF0F4;--line-strong:#CDD3DD;
  --accent:#3347D9;--accent-strong:#2535B3;--accent-soft:#EEF1FD;--accent-line:#CDD5F8;
  --highlight:#B45309;--highlight-soft:#FEF3C7;--highlight-line:#FCD98A;
  --pos:#067A57;--pos-soft:#E7F6EF;--warn:#9A5B00;--warn-soft:#FFF4DB;--crit:#C0263E;--crit-soft:#FDECEF;
  --c1:#3347D9;--c2:#0E8A8A;--c3:#C77700;--c4:#A8327D;--c5:#64748B;
  --font-ui:"Inter var",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r-ctl:8px;--r-card:14px;--r-pill:999px;
  --shadow-card:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.05);
  --shadow-hover:0 10px 28px rgba(15,23,42,.10),0 2px 6px rgba(15,23,42,.05);
  --shadow-pop:0 18px 48px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.08);
  --side-bg:#0B1220;--side-ink:#D5DBE7;--side-muted:#8E99AF;--side-hover:#151F35;--side-active:#1C2A4A;--side-line:#1B2539;
  --sidebar-width:248px;--topbar-height:56px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ============================================================ 1. base */
body{font-size:14px;line-height:1.55;font-feature-settings:"cv11","ss01";background:var(--canvas)}
h1{font-size:26px;line-height:1.2;font-weight:650;letter-spacing:-.022em}
h2{font-size:18px;line-height:1.3;font-weight:620;letter-spacing:-.012em}
h3{font-size:15px;line-height:1.35;font-weight:600}
h4{font-size:14px;font-weight:600}
p{line-height:1.6}
small,.small,.tiny{font-size:12px}
.medium{font-size:13px}
::selection{background:#D6DDFB}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
button:disabled{opacity:.46;cursor:not-allowed}
input::placeholder,textarea::placeholder{color:var(--faint)}
a{color:var(--accent)}
a:hover{color:var(--accent-strong)}
.eyebrow{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.01em;margin-bottom:6px}
.num,td.num,th.num{font-variant-numeric:tabular-nums}
.block{display:block}
.w-full{width:100%}
.grow{flex:1;min-width:0}

/* ============================================================ 2. shell */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-width);background:var(--side-bg);color:var(--side-ink);border-right:0;position:fixed;top:0;bottom:0;display:flex;flex-direction:column;z-index:50}
.brand-head{padding:18px 18px 10px}
.wordmark{display:inline-flex;gap:10px;align-items:center;text-decoration:none;color:inherit;border-radius:8px}
.wordmark:hover{text-decoration:none}
.wordmark .mark{width:30px;height:30px;flex-shrink:0;display:block;background:none;border-radius:0;box-shadow:none}
.wordmark-text{font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1}
.wordmark-tld{font-weight:500;font-size:15px;letter-spacing:0;margin-left:1px}
.wordmark--light,.wordmark--light:hover{color:#FBF7F4}
.wordmark--light .wordmark-tld{color:rgba(251,247,244,.6)}
.wordmark--dark,.wordmark--dark:hover{color:var(--ink)}
.wordmark--dark .wordmark-tld{color:var(--muted)}
.brand-sub{font-size:12px;color:var(--side-muted);margin:4px 0 0 40px}
.workspace{display:flex;align-items:center;gap:10px;margin:8px 12px 6px;padding:9px 10px;background:var(--side-hover);border:1px solid var(--side-line);border-radius:10px;color:#fff;cursor:default;width:auto}
.workspace .grow{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-sub{font-size:12px;color:var(--side-muted);font-weight:400;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#E8ECF7;color:#3A4A6B;font-weight:700;font-size:12px;flex-shrink:0;position:relative;overflow:hidden}
.avatar.small{width:28px;height:28px;border-radius:8px;font-size:11px}
.avatar.own{background:#9b1732;color:#fff}
.nav-scroll{overflow-y:auto;flex:1;padding:4px 10px 10px;scrollbar-width:thin;scrollbar-color:#2A3550 transparent}
.nav-label{font-size:11px;color:var(--side-muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin:18px 10px 6px}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;padding:7px 10px;min-height:36px;margin:1px 0;color:var(--side-ink);font-size:14px;border-radius:8px;text-decoration:none;transition:background .15s var(--ease),color .15s var(--ease)}
a.nav-item{text-decoration:none}
.nav-item .icon{width:18px;height:18px;color:var(--side-muted);transition:color .15s var(--ease)}
.nav-item:hover{background:var(--side-hover);color:#fff;text-decoration:none}
.nav-item:hover .icon{color:#C9D3E8}
.nav-item.active{background:var(--side-active);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 #6E80FF}
.nav-item.active .icon{color:#AFBBFF}
.nav-item .nav-text{flex:1;min-width:0;line-height:1.25}
.nav-item .num{background:#F59E0B;color:#1F1300;border-radius:var(--r-pill);padding:0 7px;line-height:19px;font-size:11px;font-weight:700}
.nav-item .preview{font-size:11px;color:var(--side-muted);border:1px solid #2A3550;border-radius:6px;padding:0 6px;white-space:nowrap}
.nav-item:focus-visible{outline-color:#8EA0FF}
.sidebar-bottom{padding:12px;border-top:1px solid var(--side-line)}
.sidebar .plan-meter{background:var(--side-hover);border:1px solid var(--side-line);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--side-ink);margin:0}
.sidebar .plan-meter strong{color:#fff}
.sidebar .allow-sub{color:var(--side-muted)}
.sidebar .allow-link{color:#AFBBFF}
.sidebar .allow-warn{display:none}
.sidebar .track{background:#25304A}
.allow-line{font-size:12px;margin-bottom:7px}
.allow-sub{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.5}
.allow-warn{color:var(--warn)}
.allow-link{display:inline-block;margin-top:6px;font-size:12px;font-weight:600}
.allowance.warn .track span{background:#F59E0B}
.track{display:block;height:6px;border-radius:var(--r-pill);background:var(--line-soft);overflow:hidden}
.track span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.sidebar .track span{background:#6E80FF}

.main{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));min-width:0}
.topbar{height:var(--topbar-height);padding:0 28px;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:35}
.crumb{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;min-width:0}
.crumb>span:first-child{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb strong{font-weight:600;color:var(--ink)}
.top-search{display:flex;align-items:center;gap:8px;flex:1 1 280px;max-width:440px;margin-left:8px;color:var(--faint);background:var(--canvas);border:1px solid var(--line);padding:0 12px;height:36px;border-radius:9px;transition:border-color .15s,box-shadow .15s,background .15s}
.top-search:focus-within{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.top-search input{border:0;background:transparent;padding:0;font-size:13px;width:100%;min-width:0;min-height:0;outline:0}
.top-search input:focus-visible{outline:0}
.top-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.vline{height:22px;border-left:1px solid var(--line)}
.role-chip{display:none}
.topbar-meter{display:none}
.ws-switch select{font-size:13px;padding:5px 8px;max-width:170px;min-height:34px}
.icon-btn{display:inline-grid;place-items:center;min-width:36px;min-height:36px;padding:7px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);position:relative}
.icon-btn:hover{background:var(--line-soft);color:var(--ink)}
.icon-btn.bare{border:0}
.bell-badge{position:absolute;top:-3px;right:-4px;min-width:18px;height:18px;padding:0 5px;background:#F59E0B;color:#1F1300;border-radius:9px;font-size:11px;font-weight:700;line-height:18px;text-align:center;border:2px solid #fff;box-sizing:content-box}
.user-menu{position:relative}
.user-button{display:flex;align-items:center;gap:9px;border:1px solid transparent;border-radius:10px;padding:4px 8px 4px 4px;background:transparent;width:auto;text-align:left}
.user-button:hover{background:var(--line-soft)}
.user-meta{display:flex;flex-direction:column;line-height:1.25}
.user-meta strong{font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-meta small{font-size:12px;color:var(--muted)}
.user-panel{position:absolute;right:0;top:calc(100% + 8px);width:260px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:14px;z-index:60}
.user-panel[hidden]{display:none}
.user-panel-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.user-panel-head small{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.scrim{position:fixed;inset:0;background:rgba(11,18,32,.45);z-index:45}
.scrim[hidden]{display:none}
.mobile-menu{display:none}
.drawer-search{display:none}
.content{max-width:1520px;margin:0 auto;padding:28px 32px 48px}

/* ============================================================ 3. shared components, re-themed */
.btn{gap:7px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);padding:8px 14px;min-height:36px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:560;box-shadow:0 1px 1px rgba(15,23,42,.03);transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),color .15s var(--ease)}
.btn:hover{background:var(--surface-2);border-color:#B7BFCC;color:var(--ink);text-decoration:none}
.btn:active{transform:translateY(.5px)}
.btn.primary,.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(37,53,179,.25)}
.btn.primary:hover,.btn--primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.btn.soft{background:var(--accent-soft);color:var(--accent-strong);border-color:transparent;box-shadow:none}
.btn.soft:hover{background:#E2E7FC}
.btn.ghost{background:transparent;border-color:transparent;color:var(--accent);box-shadow:none}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.danger{color:var(--crit);background:#fff;border-color:#F1C7CF;box-shadow:none}
.btn.danger:hover{background:var(--crit-soft)}
.btn.small,.btn--small,.btn.sm{padding:5px 10px;min-height:30px;font-size:12px;border-radius:7px}
.btn-lg{padding:11px 18px;min-height:44px;font-size:14px}
.text-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:550;color:var(--accent);padding:0}

.pill,.badge{border-radius:6px;padding:2px 8px;font-size:12px;font-weight:560;background:var(--line-soft);color:#3F4A5E}
.badge.new,.pill.new{background:var(--highlight-soft);color:var(--highlight)}
.chip,.chip-sm{border-color:var(--line);color:#3F4A5E;padding:3px 11px;font-size:12.5px}
.chip.active,.chip-sm.active{background:var(--accent-soft);color:var(--accent-strong);border-color:var(--accent-line)}
a.chip:hover{border-color:var(--line-strong);text-decoration:none;color:var(--ink)}

.panel,.card{border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);margin-bottom:20px}
.card{margin-bottom:0}
.card.pad,.panel-pad{padding:20px 22px}
.panel--quiet{background:transparent;border:0;box-shadow:none}
.panel--key{border-color:var(--line);box-shadow:var(--shadow-card)}
.subhead,.panel__head{padding:16px 22px;border-bottom:1px solid var(--line-soft)}
.subhead h2,.panel__head h2{font-size:16px}
.subhead small{font-size:13px}
.panel-note,.panel-footer{padding:10px 22px;font-size:12px}
.section-top{margin:6px 0 14px}
.section-title{font-size:17px;font-weight:620;letter-spacing:-.01em}
.section-sub{font-size:13px}
.grid-2,.grid-3,.grid-4{gap:18px}

.page-heading,.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:2px 0 22px}
.page-head .eyebrow,.page-heading .eyebrow{color:var(--accent);font-weight:600}
.page-head h1,.page-heading h1{font-size:28px}
.page-head .sub,.page-heading p{color:var(--muted);font-size:14.5px;margin-top:6px;max-width:68ch}
.heading-actions,.actions{gap:8px}

.notice,.info-strip,.preview-banner{background:var(--accent-soft);border:1px solid var(--accent-line);border-left-width:1px;border-radius:12px;padding:12px 16px;font-size:13.5px;color:#22306E}
.notice.warning,.info-strip.amber,.preview-banner{background:var(--warn-soft);border-color:#F2D9A2;color:#5B3A00}
.notice.danger,.notice.error{background:var(--crit-soft);border-color:#F1C7CF;color:#7d1a2b}
.flash{border-radius:12px;border-left-width:1px;font-size:13.5px}

/* KPI band → stat tiles */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;background:transparent;border:0;border-radius:0;overflow:visible;margin-bottom:22px}
.kpi,.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:16px 18px;margin:0}
.kpi-label,.metric-label{font-size:13px;font-weight:560;color:var(--muted)}
.kpi-value,.metric-value{font-size:30px;font-weight:680;letter-spacing:-.025em;margin:6px 0 4px}
.kpi-value small,.metric-value small{font-size:15px}
.kpi-note,.metric-foot{font-size:12.5px;color:var(--muted)}
.kpi--good,.kpi--warn,.kpi--bad,.kpi--blue{box-shadow:var(--shadow-card)}
.grid-4.kpi-band{gap:14px;background:transparent;border:0;overflow:visible}
.grid-4.kpi-band>.card.metric{border:1px solid var(--line);border-radius:var(--r-card);margin:0}
.delta{font-size:12.5px;padding:1px 7px;border-radius:6px}
.delta--up{color:var(--pos);background:var(--pos-soft)}.delta--down{color:var(--crit);background:var(--crit-soft)}.delta--flat{color:var(--muted);background:var(--line-soft)}

/* tabs & segmented */
.tabs{gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs a,.tabs button{padding:8px 12px 11px;font-size:14px;font-weight:550;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:6px 6px 0 0}
.tabs a:hover,.tabs button:hover{color:var(--ink);background:var(--line-soft)}
.tabs a[aria-current],.tabs a.active,.tabs button.active{color:var(--ink);border-color:var(--accent);font-weight:620;background:transparent}
.tabs .num,.tabs small,.tab-count{font-size:12px;font-weight:600;color:var(--muted);background:var(--line-soft);border-radius:var(--r-pill);padding:0 7px}
.seg,.segmented{background:var(--line-soft);border:1px solid var(--line);padding:3px;border-radius:10px;gap:2px}
.seg a,.seg button,.segmented a,.segmented button{font-size:13px;font-weight:550;color:var(--muted);border-radius:7px;padding:5px 12px;min-height:30px}
.seg a[aria-current],.seg a.active,.seg button.active,.segmented a.active,.segmented button.active{background:#fff;color:var(--ink);font-weight:620;box-shadow:0 1px 2px rgba(15,23,42,.08),0 0 0 1px rgba(15,23,42,.04)}

/* forms */
input,select,textarea{border:1px solid var(--line-strong);border-radius:var(--r-ctl);padding:7px 11px;font-size:13.5px;min-height:38px;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:#B7BFCC}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
select{appearance:none;-webkit-appearance:none;padding-right:32px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23677186' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center}
select[multiple]{background-image:none;padding-right:11px}
.form-field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.form-field small{font-size:12.5px}
.field-error{color:#7d1a2b !important;font-weight:500}
[aria-invalid=true]{border-color:#c4364c !important}

/* tables */
table.data,.data-table{font-size:13.5px}
table.data th,.data-table th{background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:600;padding:10px 16px}
table.data td,.data-table td{padding:12px 16px;height:48px}
table.data tbody tr:hover,.data-table tbody tr:hover{background:#F7F8FC}
.cell-brand strong{font-size:13.5px}

/* empty / loading */
.empty{border:1px dashed var(--line-strong);border-radius:var(--r-card);padding:44px 24px;background:var(--surface)}
.panel .empty,.card .empty{border:0;background:transparent}
.empty .empty-icon{display:inline-flex;padding:12px;background:var(--accent-soft);color:var(--accent);border-radius:12px;margin-bottom:12px}
.empty h3,.empty strong{font-size:16px}
.empty p{font-size:14px}

/* charts */
.chart text{font-size:12px}
.bars li{font-size:13.5px}
.bars .bar-track{height:8px}

/* ============================================================ 4. new client components */
/* "About this data" — every methodology caveat lives here, collapsed. Partial: client.partials.data-note */
.data-note{margin:0 0 18px;font-size:13px;color:var(--muted)}
.data-note>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-weight:560;color:var(--muted);padding:4px 8px;margin-left:-8px;border-radius:7px;user-select:none}
.data-note>summary::-webkit-details-marker{display:none}
.data-note>summary:hover{background:var(--line-soft);color:var(--ink)}
.data-note>summary .icon{width:15px;height:15px}
.data-note>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px;transition:transform .15s var(--ease)}
.data-note[open]>summary::after{transform:rotate(225deg) translateY(-1px)}
.data-note .data-note-body{margin-top:8px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;line-height:1.6;max-width:90ch}
.data-note .data-note-body p+p,.data-note .data-note-body ul{margin-top:8px}
.data-note .data-note-body ul{padding-left:18px}
.data-note.inline{display:inline-block;margin:0}

/* Insight callout: the one sentence that matters */
.callout{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;background:linear-gradient(180deg,#F4F6FF,#EEF1FD);border:1px solid var(--accent-line);border-radius:var(--r-card);margin-bottom:20px}
.callout .callout-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;color:var(--accent);box-shadow:var(--shadow-card);flex-shrink:0}
.callout h2,.callout h3{font-size:16px;margin-bottom:4px}
.callout p,.callout li{font-size:14px;color:#26314F}
.callout ul{margin:6px 0 0;padding-left:18px}

/* Toolbar row above lists: count left, controls right */
.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;font-size:13px;color:var(--muted)}
.list-toolbar strong{color:var(--ink)}

/* Filter bar: one primary row; secondary filters disclosed */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 14px;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.filterbar input{min-width:200px;flex:1}
.filterbar select{max-width:210px;min-width:0}
.filter-more{width:100%}
.filter-more>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:13px;font-weight:560;color:var(--accent);padding:5px 8px;border-radius:7px}
.filter-more>summary::-webkit-details-marker{display:none}
.filter-more>summary:hover{background:var(--accent-soft)}
.filter-more .filter-more-body{display:flex;flex-wrap:wrap;gap:10px;padding-top:10px}
.filter-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:700}
.filter-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-4px 0 14px;font-size:13px}
.search-wrap{position:relative;flex:1;min-width:220px}
.search-wrap input{width:100%;padding-left:36px}
.search-wrap>.icon,.search-wrap>.ico{position:absolute;top:50%;transform:translateY(-50%);left:12px;color:var(--faint);width:16px;height:16px}

/* Brand avatar row / identity */
.identity{display:flex;align-items:center;gap:12px;min-width:0}
.identity strong{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.identity small{display:block;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================ 5. ad cards (image first) */
.ad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
.ad-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;min-width:0;display:flex;flex-direction:column;box-shadow:var(--shadow-card);transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.ad-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:#D5DAE3}
.ad-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-card)}
.ad-top{padding:10px 12px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line-soft)}
.ad-brand{font-size:13px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-top .muted{font-size:12px}
.ad-select{display:flex;align-items:center;gap:6px;min-height:28px;font-size:12px;color:var(--muted);cursor:pointer}
.ad-select input{width:16px;height:16px;min-height:0}
.ad-art{width:100%;display:block;position:relative;background:#EDF0F6;overflow:hidden;cursor:pointer;padding:0;text-align:left;border:0}
.ad-art img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .35s var(--ease)}
.ad-card:hover .ad-art img{transform:scale(1.025)}
.ad-art:focus-visible{outline-offset:-3px}
.ad-art>svg{display:block;width:100%;height:auto}
.ad-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:4/5;color:var(--faint);font-size:12.5px;background:repeating-linear-gradient(135deg,#EEF1F6 0 12px,#E9EDF4 12px 24px)}
.ad-ph .icon{width:26px;height:26px;opacity:.7}
.ad-art .video-label{position:absolute;bottom:10px;left:10px;background:rgba(15,23,42,.78);color:#fff;padding:3px 8px;border-radius:6px;font-size:12px;display:flex;gap:5px;align-items:center;backdrop-filter:blur(4px)}
.ad-art .video-label .icon{width:12px;height:12px}
.ad-art .art-badge{position:absolute;right:10px;top:10px;font-size:12px;background:rgba(255,255,255,.92);padding:3px 7px;border-radius:6px;color:var(--ink-2)}
.ad-content{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.ad-chips{display:flex;gap:5px;flex-wrap:wrap;min-height:0}
.ad-chips .badge{font-size:11.5px}
.ad-title{font-size:13.5px;font-weight:560;line-height:1.5;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;min-height:0}
.ad-dates{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:12px}
.ad-dates dt{color:var(--faint);font-size:11.5px}
.ad-dates dd{margin:0;color:var(--ink-2);font-weight:560}
.ad-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding-top:10px;margin-top:auto;border-top:1px solid var(--line-soft)}
.ad-meta>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-save[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-strong);border-color:var(--accent-line)}
.save-btn{padding:4px;color:var(--faint);display:flex}
.save-btn.saved{color:var(--accent)}
.status-dot{width:7px;height:7px}

/* ============================================================ 6. existing page components (ported) */
.hero{background:linear-gradient(180deg,#F4F6FF,#EEF1FD);border:1px solid var(--accent-line);border-radius:var(--r-card);padding:20px 22px;display:flex;gap:16px;margin-bottom:20px;align-items:center}
.hero-icon{width:36px;height:36px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;box-shadow:var(--shadow-card)}
.hero h2{font-size:18px;margin-bottom:4px}
.hero p{font-size:14px;color:#33416B;max-width:70ch}
.hero-actions{align-self:center;margin-left:auto;flex-shrink:0}
.scopebar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px;font-size:13px;color:var(--muted)}
.scopebar select{min-height:34px;font-size:13px}
.scope-note{margin-left:auto;font-size:12.5px}
.stat-group{display:flex;gap:18px}
.trend-note{padding-top:10px;margin-top:8px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.trend-note .icon{width:13px;height:13px}
.insight-row{padding:14px 0;border-top:1px solid var(--line-soft);display:flex;gap:12px;align-items:flex-start}
.insight-row:first-of-type{border:0}
.insight-num{color:var(--accent);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--accent-soft);border-radius:8px;flex-shrink:0}
.insight-row h4{font-size:14px;font-weight:620;margin-bottom:3px}
.insight-row p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.insight-row .text-link{margin-top:6px}
.footnote{font-size:12.5px;color:var(--muted);padding:22px 0 4px;display:flex;justify-content:space-between;gap:15px}
.footnote .icon{width:12px;height:12px}
.brand-card{padding:18px;display:flex;flex-direction:column}
.brand-card .brand-title{font-size:16px;font-weight:640;letter-spacing:-.01em}
.brand-card .brand-desc{font-size:13px;color:var(--muted);margin:10px 0 14px;line-height:1.6}
.brand-kpis{display:flex;gap:20px;margin-bottom:14px}
.brand-kpis strong{display:block;font-size:20px;letter-spacing:-.02em;font-weight:660}
.brand-kpis small{font-size:12px;color:var(--muted)}
.brand-card .actions{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft)}
.brand-card .actions .btn{flex:1}
.brand-card .mini-art{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 14px}
.mini-art>div{border-radius:8px;overflow:hidden}
.mini-art svg,.mini-art img{width:100%;height:auto;display:block}
.cell-brand{display:flex;align-items:center;gap:10px}
.cell-brand small{color:var(--muted);font-size:12px}
.coverage-cell{display:inline-flex;min-width:65px;justify-content:center;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:560}
.coverage-cell.complete{background:var(--pos-soft);color:var(--pos)}
.coverage-cell.empty-state{background:#F1F5ED;color:#5B6B44}
.coverage-cell.partial{background:var(--warn-soft);color:var(--warn)}
.coverage-cell.unknown{background:var(--line-soft);color:var(--muted)}
.breakdown-row{display:grid;grid-template-columns:120px 1fr 40px;gap:12px;align-items:center;font-size:13px;padding:8px 0}
.breakdown-row .track{height:8px}
.detail-header{padding:22px;display:flex;gap:18px;align-items:center}
.detail-logo{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:750;font-size:20px;position:relative;overflow:hidden}
.detail-logo img,.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:#fff}
.split-detail{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.quote{font-size:20px;line-height:1.45;color:#2E3A58;margin:16px 0}
.gap-card{padding:20px 22px;display:flex;gap:20px;align-items:flex-start}
.gap-number{font-size:24px;font-weight:700;color:#B9C4EE;line-height:1}
.gap-card .compare-row{display:flex;gap:22px;font-size:13px;margin:12px 0}
.mini-bars{display:flex;gap:3px;align-items:flex-end;height:35px;width:58px}
.mini-bars span{width:7px;background:#B7C2EA;border-radius:3px 3px 0 0}
.gap-card p{font-size:13.5px;color:var(--muted);max-width:70ch}
.gap-card .test{padding:11px 14px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px;font-size:13px;margin-top:12px;color:#3A4767}
.idea-label{font-size:12px;font-weight:700;color:var(--accent);display:block;margin-bottom:4px}
.board-card{padding:16px}
.board-cover{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-radius:10px;overflow:hidden;background:#EDF0F6;min-height:120px;margin-bottom:14px}
.board-cover svg,.board-cover img{width:100%;height:100%;object-fit:cover;display:block}
.board-cover.empty-cover{display:flex;align-items:center;justify-content:center;color:#AEB8D0}
.board-cover.empty-cover .icon{width:30px;height:30px}
.board-card h3{margin-bottom:3px}
.report-cover{padding:26px;background:linear-gradient(160deg,#121A30,#24346B);color:#fff;position:relative;overflow:hidden;min-height:210px;border-radius:var(--r-card) var(--r-card) 0 0}
.report-cover>*{position:relative;z-index:1}
.report-cover .eyebrow,.report-cover .muted,.report-cover small{color:#B9C3DE}
.report-cover h2{font-size:28px;line-height:1.15;letter-spacing:-.02em;max-width:16ch;font-weight:600;margin:16px 0;color:#fff}
.report-content{padding:22px}
.report-section{padding:20px 0;border-bottom:1px solid var(--line-soft)}
.report-section h3{font-size:16px;margin-bottom:8px}
.report-section p{font-size:14px;color:var(--muted)}
.schedule-card{padding:18px;border:1px solid var(--line);border-radius:12px;margin-top:16px}
.brief-layout{display:grid;grid-template-columns:280px 1fr;gap:20px}
.brief-item{padding:14px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;text-align:left;width:100%;background:#fff;transition:border-color .15s,background .15s}
.brief-item:hover{border-color:var(--line-strong)}
.brief-item.active{background:var(--accent-soft);border-color:var(--accent-line)}
.brief-item strong{display:block;font-size:13.5px}
.brief-item small{color:var(--muted)}
.brief-document{padding:30px}
.brief-document h2{font-size:24px;margin-bottom:6px}
.document-label{font-size:12px;font-weight:650;color:var(--accent);margin:24px 0 8px;letter-spacing:.02em;text-transform:uppercase}
.brief-document p{font-size:14px;color:#3A4767}
.brief-document textarea{font-size:14px;margin-top:8px;line-height:1.7;background:var(--surface-2)}
.brief-hook{padding:10px 14px;border-left:3px solid var(--accent-line);background:var(--surface-2);margin-bottom:7px;font-size:14px;border-radius:0 8px 8px 0}
.settings-layout{display:grid;grid-template-columns:200px 1fr;gap:24px}
.settings-menu button,.settings-menu a{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--muted);margin:2px 0;text-decoration:none}
.settings-menu button:hover,.settings-menu a:hover{background:var(--line-soft);color:var(--ink)}
.settings-menu button.active,.settings-menu a.active,.settings-menu a[aria-current]{color:var(--accent-strong);background:var(--accent-soft);font-weight:600}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.toggle-row strong{font-size:14px;display:block}
.toggle-row p{font-size:13px;color:var(--muted)}
.switch{width:36px;height:21px;background:#C7CEDB;border-radius:12px;position:relative;flex-shrink:0;transition:background .2s}
.switch:after{content:'';width:15px;height:15px;position:absolute;background:#fff;border-radius:50%;left:3px;top:3px;transition:left .2s var(--ease);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch.on{background:var(--accent)}
.switch.on:after{left:18px}
.role{font-size:12px;border:1px solid var(--line);border-radius:6px;padding:4px 7px;background:#fff}
.alert-row{padding:16px 20px;border-bottom:1px solid var(--line-soft);display:flex;gap:14px;align-items:flex-start;transition:background .15s}
.alert-row:hover{background:var(--surface-2)}
.alert-row.unread{background:#FAFBFF;box-shadow:inset 3px 0 0 var(--accent)}
.alert-row:last-child{border-bottom:0}
.alert-row h4{font-size:14px}
.alert-row p{font-size:13.5px;color:var(--muted);margin-top:3px}
.alert-dot{background:var(--accent-soft);border-radius:10px;padding:8px;color:var(--accent);display:inline-grid;place-items:center}
.alert-row small{font-size:12px;color:var(--muted)}
.comparison th,.comparison td{text-align:center}
.comparison td:first-child,.comparison th:first-child{text-align:left}
.heat{display:inline-flex;border-radius:6px;background:var(--accent-soft);color:var(--accent-strong);min-width:45px;justify-content:center;padding:6px;font-weight:600}
.source-tabs{display:flex;gap:6px;margin-bottom:14px}
.source-card{padding:20px}
.source-card p{font-size:13.5px;color:var(--muted);margin:10px 0}
.source-card .quote-text{font-size:18px;line-height:1.5;color:#2E3A58;margin:14px 0}
.page-preview{height:210px;background:#F4EEE1;border:1px solid #E3DBCE;border-radius:10px;overflow:hidden;margin-bottom:15px}
.browser-chrome{display:flex;gap:3px;padding:8px;background:#FFFCF8;border-bottom:1px solid #E4DFD5}
.browser-chrome i{width:4px;height:4px;border-radius:50%;background:#C7BEB0}
.mock-site{padding:20px;text-align:center;position:relative;height:175px;overflow:hidden}
.mock-site h3{font-size:22px;margin-bottom:10px;color:#556E51}
.mock-site small{font-size:12px;color:#838978}
.mock-site .mini-product{position:absolute;right:22px;bottom:10px;width:60px;height:87px;background:#345448;color:#fff;border-radius:3px 3px 12px 12px;display:flex;align-items:center;justify-content:center;font-size:12px;transform:rotate(8deg)}
.obs-card{display:flex;flex-direction:column;gap:14px}
.obs-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.obs-scope{font-size:12.5px;color:var(--muted);margin-top:-8px}
.obs-label{font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:650}
.obs-sec p,.obs-list{font-size:13.5px;line-height:1.65}
.obs-list{margin:0;padding-left:18px}
.obs-interp{background:var(--accent-soft);border-radius:12px;padding:12px 14px}
.obs-interp .obs-label{color:var(--accent)}
.obs-card form{display:inline}
.coverage{font-size:12px}
.compact-heading{display:flex;gap:10px;align-items:center}
.fullscreen-note{border:1px solid var(--accent-line);background:var(--accent-soft);padding:12px 16px;font-size:13px;border-radius:12px;color:#33416B;margin-top:18px}
.search-results button{display:flex;width:100%;text-align:left;padding:12px;border-radius:10px;gap:10px;align-items:center}
.search-results button:hover{background:var(--canvas)}
.search-results strong{display:block;font-size:13.5px}
.search-results small{color:var(--muted)}

/* overlays: modal, drawer, toast, selection bar, board picker */
.overlay{position:fixed;inset:0;background:rgba(11,18,32,.5);backdrop-filter:blur(3px);z-index:100;display:flex;justify-content:center;align-items:center;padding:25px;opacity:0;animation:fade .16s var(--ease) forwards}
.overlay[hidden]{display:none}
.overlay.drawer-wrap{justify-content:flex-end;padding:0}
.modal{background:#fff;border-radius:18px;width:590px;max-width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-pop)}
.modal.wide{width:820px}
.modal-head{padding:22px 24px 16px;border-bottom:1px solid var(--line-soft);display:flex;align-items:flex-start;gap:15px}
.modal-head h2{font-size:18px}
.modal-head p{font-size:13.5px;color:var(--muted);margin-top:4px}
.modal-body{padding:22px 24px}
.modal-foot{padding:16px 24px;border-top:1px solid var(--line-soft);display:flex;justify-content:flex-end;gap:8px;align-items:center}
.drawer{display:flex;flex-direction:column;background:#fff;width:880px;max-width:94vw;height:100vh;overflow:auto;box-shadow:-20px 0 60px rgba(11,18,32,.18);animation:slide-in .22s var(--ease)}
.drawer-body{padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.drawer-content{padding:22px 26px 30px;overflow:auto;flex:1}
.drawer-art{border-radius:12px;overflow:hidden;align-self:start}
.drawer-art svg{width:100%;height:auto;display:block}
.detail-p{font-size:13.5px;color:var(--muted);line-height:1.7}
.detail-block{margin-bottom:18px}
.detail-block h4{font-size:13px;margin-bottom:6px}
.evidence-row{display:grid;grid-template-columns:110px 1fr;gap:8px;font-size:13px;margin-bottom:6px}
.evidence-row span:first-child{color:var(--muted)}
.source-preview{padding:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;font-size:13px;word-break:break-word}
.dr-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px}
.dr-imgs img{width:100%;display:block;border-radius:12px;border:1px solid var(--line);margin-bottom:8px;background:#EDF0F6}
.dr-sec{margin-bottom:18px}
.dr-sec h3{font-size:12px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.dr-dates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dr-dates div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px}
.dr-dates div.src{border-style:dashed;background:var(--surface-2)}
.dr-dates dt,.dr-dates small{display:block;font-size:12px;color:var(--muted)}
.dr-obs{border-left:3px solid var(--line);padding-left:12px}
.dr-interp{background:var(--accent-soft);border-radius:12px;padding:12px 14px;border:1px solid var(--accent-line)}
.dr-interp h3{color:var(--accent)}
.dr-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin:8px 0 0}
.dr-kv dt{color:var(--muted)}
.dr-kv dd{margin:0;overflow-wrap:anywhere}
.dr-state{padding:50px 10px;text-align:center;color:var(--muted);font-size:13.5px}
.dr-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.dr-note textarea{min-height:90px;font-size:13.5px}
.dr-note-status{font-size:12px;color:var(--muted);margin-left:8px}
.dr-body{white-space:pre-wrap;font-size:13.5px;line-height:1.65}
.toast{position:fixed;bottom:26px;left:calc(50% + var(--sidebar-width) / 2);transform:translateX(-50%);padding:12px 18px;border-radius:12px;background:#111827;color:#fff;box-shadow:var(--shadow-pop);z-index:300;font-size:13.5px;max-width:85vw;animation:fade .16s;display:flex;gap:8px;align-items:center}
.toast .icon{color:#86EFAC}
.selection-bar{position:fixed;bottom:26px;left:calc(50% + var(--sidebar-width) / 2);transform:translateX(-50%);z-index:45;background:#111827;color:#fff;border-radius:14px;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-pop);font-size:13.5px}
.selection-bar .btn{background:#fff;color:var(--ink);border-color:#fff}
.selection-bar .btn.primary{background:#6E80FF;color:#fff;border-color:#6E80FF}
.selection-bar .text-link{color:#C7D0FF}
.picker-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto;margin-bottom:14px}
.picker-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px;cursor:pointer;transition:background .15s,border-color .15s}
.picker-row:hover{background:var(--surface-2);border-color:var(--line-strong)}
.picker-row small{margin-left:auto;color:var(--muted)}
.picker-result{font-size:13px;padding:10px 12px;border-radius:10px;margin-bottom:10px;background:var(--pos-soft);color:var(--pos)}
.picker-result.err{background:var(--crit-soft);color:var(--crit)}
.error{font-size:13px;color:var(--crit);background:var(--crit-soft);padding:9px 12px;border-radius:8px;margin:10px 0}
body.no-scroll{overflow:hidden}

/* ad lifespan timeline (show page + evidence drawer) */
.lifespan{margin:4px 0 0}
.ls-track{position:relative;height:34px;margin:6px 8px 0}
.ls-track::before{content:"";position:absolute;left:0;right:0;top:15px;height:4px;border-radius:2px;background:var(--line-soft)}
.ls-span{position:absolute;top:15px;height:4px;border-radius:2px;background:var(--accent)}
.ls-mark,.ls-key{display:inline-block;width:14px;height:14px;background:var(--surface);border:3px solid var(--accent);flex-shrink:0}
.ls-mark{position:absolute;top:10px;margin-left:-7px}
.ls-circle{border-radius:50%}
.ls-square{border-radius:2px;border-color:var(--ink)}
.ls-diamond{transform:rotate(45deg);border-radius:2px;border-color:#C77700;width:12px;height:12px}
.ls-mark.ls-diamond{top:11px;margin-left:-6px}
.ls-list{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;font-size:13px}
.ls-list li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.ls-list .ls-key{margin-top:3px}
.ls-list b{font-weight:600}

/* onboarding */
.select-brand{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer}
.select-brand.checked{border-color:var(--accent-line);background:var(--accent-soft)}
.select-brand strong{font-size:13.5px}
.steps{display:flex;gap:8px;margin-bottom:22px}
.steps span{height:4px;flex:1;background:var(--line);border-radius:3px}
.steps span.on{background:var(--accent)}
.check-country{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;margin:0 7px 8px 0;font-size:13.5px}
.progress-ring{width:140px;height:140px;position:relative;display:flex;align-items:center;justify-content:center;margin:14px auto}
.progress-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.progress-ring strong{font-size:29px;color:var(--accent);font-weight:680}
.ob-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.ob-grid .form-field input{max-width:none}
.rev-row{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:12px;align-items:start}
.rev-row .form-field select,.rev-row .form-field input{max-width:none}
.rev-other{padding-top:4px;border-top:1px solid var(--line-soft)}
.ob-summary{display:grid;gap:10px;margin:0 0 12px}
.ob-summary>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;font-size:13.5px}
.ob-summary dt{color:var(--muted)}.ob-summary dd{margin:0;font-weight:600}
.ob-chip{display:inline-block;padding:3px 10px;margin:0 6px 6px 0;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:999px;font-weight:600;font-size:12.5px}

/* sign in / register / guest */
.auth-body{min-height:100vh;margin:0;background:var(--canvas)}
.auth-split{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.auth-pitch{position:relative;overflow:hidden;background:radial-gradient(700px 420px at 20% 10%,#24346B 0,transparent 70%),linear-gradient(160deg,#0B1220,#121A30);color:#E4E9F5;padding:56px clamp(32px,6vw,88px);display:flex;flex-direction:column;justify-content:center;gap:26px}
.auth-pitch .wordmark{color:#fff}
.auth-pitch h2{font-size:34px;line-height:1.2;font-weight:650;letter-spacing:-.025em;max-width:22ch;color:#fff}
.auth-points{list-style:none;margin:0;padding:0;display:grid;gap:16px;max-width:46ch;font-size:14.5px;color:#AEB9D2}
.auth-points li{padding-left:16px;border-left:2px solid #3B4C86}
.auth-points b{display:block;color:#fff;font-size:15px;margin-bottom:2px}
.auth-card{align-self:center;justify-self:center;width:100%;max-width:400px;padding:40px 24px}
.auth-card h1{margin-bottom:4px}
.auth-card .btn-lg{width:100%}
.check-row{display:flex;align-items:center;gap:8px;font-size:13.5px;margin:4px 0 16px;cursor:pointer}
.auth-divider{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--muted);margin:18px 0}
.auth-divider:before,.auth-divider:after{content:'';height:1px;background:var(--line);flex:1}
.auth-note{margin:0;text-align:center}
.auth-alt{margin:18px 0 0;text-align:center}
.guest-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(900px 500px at 50% -10%,#E6EBFD,transparent),var(--canvas)}
.guest-wrap{width:100%;max-width:440px;padding:24px}
.guest-brand{margin-bottom:22px}
.guest-brand .wordmark{color:var(--ink)}
.guest-card{padding:30px;border-radius:18px}
.guest-title{font-size:24px;margin-bottom:6px}
.guest-sub{font-size:14px;margin-bottom:20px}
.guest-form .form-field{margin-bottom:14px}
.guest-form input{width:100%}
.guest-form input[type=checkbox]{width:14px;padding:0}
.guest-foot{text-align:center;font-size:12.5px;color:var(--faint);margin-top:18px}

/* ============================================================ 7. motion, responsive, print */
@keyframes fade{to{opacity:1}}
@keyframes slide-in{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:1200px){
  .content{padding:24px}
  .topbar{padding:0 24px}
  .brief-layout{grid-template-columns:240px 1fr}
  .hero-actions{max-width:200px}
  .hero-actions .btn{white-space:normal}
}
@media(max-width:1000px){
  .user-meta{display:none}
  .brief-layout{grid-template-columns:1fr}
  .brief-list{display:flex;overflow-x:auto;gap:10px}
  .brief-item{min-width:200px}
  .settings-layout{grid-template-columns:170px 1fr}
  .split-detail{grid-template-columns:1fr}
  .crumb>span:first-child,.crumb>span[aria-hidden]{display:none}
}
@media(max-width:860px){
  .auth-split{grid-template-columns:1fr}
  .auth-pitch{padding:28px 24px}
  .auth-pitch h2{font-size:24px}
  .auth-points{display:none}
}
@media(max-width:760px){
  :root{--topbar-height:54px}
  .sidebar{transform:translateX(-100%);visibility:hidden;width:272px;transition:transform .22s var(--ease),visibility 0s linear .22s}
  .sidebar.open{transform:none;visibility:visible;transition:transform .22s var(--ease),visibility 0s;box-shadow:20px 0 50px rgba(11,18,32,.35)}
  .main{margin-left:0;width:100%}
  .mobile-menu{display:inline-grid;min-width:40px;min-height:40px}
  .drawer-search{display:flex;align-items:center;gap:8px;margin:4px 12px 8px;padding:0 10px;height:38px;background:var(--side-hover);border:1px solid var(--side-line);border-radius:9px;color:var(--side-muted)}
  .drawer-search input{border:0;background:transparent;padding:0;min-height:0;font-size:14px;width:100%;min-width:0;color:#fff}
  .drawer-search input:focus-visible{outline:0;box-shadow:none}
  .topbar{padding:0 12px;gap:8px}
  .top-search,.vline,.ws-switch{display:none}
  .content{padding:18px 14px 36px}
  .page-head,.page-heading{flex-direction:column;align-items:stretch;gap:12px}
  .page-head h1,.page-heading h1{font-size:23px}
  .page-head .actions,.page-heading .heading-actions{justify-content:flex-start}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi,.metric{padding:14px}
  .kpi-value,.metric-value{font-size:24px}
  .ad-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ad-content{padding:10px}
  .ad-top{padding:8px 10px}
  .ad-dates{grid-template-columns:1fr}
  .hero{padding:16px;gap:10px;flex-wrap:wrap}
  .hero-actions{margin-left:0}
  .scope-note{width:100%;margin:2px 0 0}
  .footnote{flex-wrap:wrap}
  .settings-layout{grid-template-columns:1fr}
  .settings-menu{display:flex;overflow:auto;gap:6px}
  .settings-menu button,.settings-menu a{white-space:nowrap;width:auto}
  .drawer{max-width:100vw}
  .drawer-body,.dr-grid,.dr-dates{grid-template-columns:1fr}
  .drawer-content{padding:16px}
  .drawer-art{max-width:360px;margin:auto;width:100%}
  .modal-head,.modal-body,.modal-foot{padding:16px}
  .overlay{padding:12px}
  .gap-card{padding:16px;gap:12px}
  .selection-bar,.toast{left:50%;bottom:14px;max-width:95vw}
  .detail-header{padding:18px;gap:12px;flex-wrap:wrap}
  .detail-header .actions{width:100%;margin-top:6px}
  .brand-kpis{justify-content:space-between}
  .report-cover{min-height:170px}
  .report-cover h2{font-size:24px}
  .brief-document{padding:20px}
  .tabs{gap:0}
  .tabs a,.tabs button{padding:8px 10px 10px}
  .filterbar input,.filterbar select{max-width:none;flex:1 1 140px}
  .guest-wrap{padding:14px}
  .ob-grid{grid-template-columns:1fr}
  .rev-row{grid-template-columns:minmax(0,1fr) 100px}
  .ob-summary>div{grid-template-columns:1fr;gap:2px}
}
@media(min-width:1700px){
  .content{padding-left:40px;padding-right:40px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .overlay{opacity:1}
  .ad-card:hover,.ad-card:hover .ad-art img{transform:none}
}
@media print{
  .sidebar,.topbar,.actions,.scopebar,.footnote,.toast,.selection-bar,.data-note>summary{display:none!important}
  .main{margin:0;width:100%}
  .content{max-width:none;padding:0}
  .data-note .data-note-body{display:block}
}

/* ============================================================ plans: shell (every client page)
   The plan bar (Free workspaces), the account-menu links and the over-limit notice appear in the shared layout, so they live here.
   Kept at the end of this file so they still come after every other rule of it, as when they were a separate stylesheet. The Billing
   tab and the Plan & usage summary are styled by pages/billing.css, which only those two settings tabs load. */
/* ------------------------------------------------------------ plan bar: second row of the sticky top bar (Free workspaces) */
/* The bar is absolutely positioned at the bottom of .topbar, so the first row keeps its own height. --topbar-height grows by the
   bar's height so everything that sticks below the top bar (top:var(--topbar-height)) stays aligned. */
body.has-plan-bar{--planbar-height:38px;--topbar-height:calc(56px + var(--planbar-height))}
body.has-plan-bar .topbar{padding-bottom:var(--planbar-height)}
.planbar{position:absolute;left:0;right:0;bottom:0;height:var(--planbar-height);display:flex;align-items:center;gap:8px;padding:0 28px;background:var(--surface-2);border-top:1px solid var(--line-soft)}
.planbar-plan,.planbar-demo{position:relative;display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:2px 9px;border-radius:6px;font-size:12px;font-weight:560;line-height:1.4;white-space:nowrap;text-decoration:none}
.planbar-plan{background:#fff;border:1px solid var(--line-strong);color:var(--ink-2)}
.planbar-plan:hover{background:var(--line-soft);color:var(--ink);text-decoration:none}
.planbar-demo{border:1px solid var(--highlight-line);cursor:pointer}
.planbar-demo:hover{border-color:#D99A2B}
.planbar-demo .icon{width:13px;height:13px}
/* Taller hit area than the pill itself (touch), without making the pills taller. */
.planbar-plan::after,.planbar-demo::after{content:"";position:absolute;inset:-8px -3px}
.planbar-cta{margin:0 0 0 auto;display:flex;align-items:center;gap:8px;min-width:0}
.planbar-cta .btn{position:relative;white-space:nowrap}
.planbar-cta .btn::after{content:"";position:absolute;inset:-5px -2px}
.planbar-ask{font-size:12px;color:var(--muted);white-space:nowrap}
/* "Demo data" explanation: a popover (opens on click or Enter, closes on Esc or outside click). A browser without the Popover API
   keeps it hidden and still exposes the same text through the button's title and aria-describedby. */
.planbar-pop{display:none;position:fixed;inset:auto;top:calc(var(--topbar-height) + 6px);left:calc(var(--sidebar-width) + 28px);margin:0;width:min(360px,calc(100vw - 24px));padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);box-shadow:var(--shadow-pop);font-size:13px;line-height:1.55;overflow:visible}
.planbar-pop:popover-open{display:block}

/* ------------------------------------------------------------ account menu links (every plan) */
.user-links{display:flex;flex-direction:column;gap:2px;margin:-6px -6px 8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.user-link{display:flex;align-items:center;gap:10px;min-height:38px;padding:7px 10px;border-radius:8px;color:var(--ink);font-size:13.5px;font-weight:560;text-decoration:none}
.user-link:hover{background:var(--line-soft);color:var(--ink);text-decoration:none}
.user-link .icon{width:17px;height:17px;color:var(--faint)}
.user-link-label{flex:1;min-width:0}
.user-link-meta{font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap}

/* ------------------------------------------------------------ over-limit notice and sidebar note (every plan) */
.plan-notice{align-items:flex-start;gap:10px;margin:0 0 16px;padding:10px 14px}
.plan-notice .icon{margin-top:2px;flex-shrink:0}
.plan-notice p{margin:0;line-height:1.55;min-width:0}
.plan-notice a{font-weight:600}
.allow-over{color:var(--warn)}
.sidebar .allow-over{color:#F6C778}

@media(max-width:1200px){
  .planbar{padding:0 24px}
}
@media(max-width:760px){
  body.has-plan-bar{--planbar-height:40px;--topbar-height:calc(54px + var(--planbar-height))}
  .planbar{padding:0 12px}
  /* No room for the hint beside the disabled button; it stays available to screen readers and in the button's title. */
  .planbar-ask{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .planbar-pop{left:12px}
  .user-link{min-height:44px}
}
@media(max-width:380px){
  .planbar{gap:6px;padding:0 8px}
  .planbar-plan,.planbar-demo{padding:2px 7px;font-size:11px}
  .planbar-demo .icon{display:none}
  .planbar-cta .btn{padding:4px 8px;font-size:11px}
}