/* ── Shared component styles (SSR base) ──
   ANARI Design System (anari-design-system skill): brand blue #1877f2 and
   charcoal #342e2c; warm-gray neutrals derived from the charcoal hue; system
   font stack (SF Pro / PingFang / Segoe UI); light + dark via
   prefers-color-scheme (theme-init.js sets data-theme before first paint);
   manual override persists in localStorage('anari-theme').
   Token NAMES stay stable for page-CSS compatibility; values follow the ANARI
   spec, and ANARI-named aliases (--brand/--ink/--canvas/--line) are provided. */
:root{
  color-scheme:light;
  /* §5: the shell fills the viewport — capped only at 1920px — with a gutter
     that grows with it. A fixed 1280px cap wasted ~27% of a 1920px screen.
     Reading-width limits belong on prose (--measure), never on the shell. */
  --content-max:1920px;
  --gutter:16px;              /* mobile-first; bumped at the 768/1200/1600/1920 breakpoints */
  --content-pad:var(--gutter);
  --measure:78ch;             /* long-form text only */

  /* Brand — ANARI blue is the single brand color (no second blue, no gradient buttons) */
  --color-primary:#1877f2;--color-primary-hover:#1464cc;
  --color-primary-bg:rgba(24,119,242,.10);

  /* Neutrals — warm grays derived from the charcoal hue (#342e2c) */
  --bg-root:#f5f5f7;--bg-surface:#ffffff;--bg-elevated:#ffffff;--bg-input:#ffffff;
  --surface-2:#eeedeb;
  --border-subtle:rgba(52,46,44,.07);--border-default:#e6e3df;
  --text-primary:#342e2c;--text-secondary:#6b6560;--text-muted:#6f6862;

  /* Semantic state (never brand colors) */
  --color-success:#15803d;--color-warning:#d97706;--color-danger:#dc2626;
  --color-success-bg:rgba(21,128,61,.10);
  --color-warning-bg:rgba(217,119,6,.12);
  --color-danger-bg:rgba(220,38,38,.10);
  /* Text-safe state colors (§7 contrast >=4.5:1 on the matching -bg step).
     The base --color-warning/--danger/--success stay as FILL colors; these are
     the shades used whenever the color carries text. */
  --color-warning-ink:#9a5303;--color-danger-ink:#b91c1c;--color-success-ink:#12693a;

  /* Radius — control 8 / card 12 / modal 16 / badge full */
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;

  /* Depth — layered + warm-tinted; never decorative */
  --shadow-sm:0 1px 3px rgba(52,46,44,.08),0 4px 14px rgba(52,46,44,.06);
  --shadow-md:0 4px 12px rgba(52,46,44,.10),0 12px 32px rgba(52,46,44,.08);
  --shadow-up:rgba(52,46,44,.06);

  /* Type — ANARI system stack (display fonts are banned for data UI) */
  --font-sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC','Segoe UI',system-ui,sans-serif;

  /* Type ladder — the single source for sizes (§4 names the scale; §2.3 bans
     hardcoded values). Everything on one of these steps:
       12 min · 13 helper · 14 dense body · 15 body (spec) · 16 body (this repo:
       the user asked for larger type, so the base is 16 not 15) ·
       17–20 headings (spec band 17–22) · 22 page title · 28/34 data hero
     Sub-12px and fractional sizes are banned — 11px hid text from anyone over
     40 and .5px steps were pure drift, not a decision. */
  --fs-2xs:12px;--fs-xs:13px;--fs-sm:14px;--fs-body-s:15px;--fs-body:16px;
  --fs-h3:17px;--fs-h2:20px;--fs-h1:22px;--fs-display:28px;--fs-hero:34px;

  /* Motion — spec §4: 150–250ms, ease-out, zeroed under prefers-reduced-motion */
  --motion-fast:150ms;--motion:200ms;--motion-slow:250ms;
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ── ANARI-named aliases (spec vocabulary) ── */
  --brand:var(--color-primary);--brand-press:var(--color-primary-hover);
  --brand-soft:var(--color-primary-bg);--brand-link:#1464cc;
  --ink:var(--text-primary);--ink-2:var(--text-secondary);--ink-3:var(--text-muted);
  --canvas:var(--bg-root);--surface:var(--bg-surface);--line:var(--border-default);
  --shadow-card:var(--shadow-sm);
  --danger-soft:var(--color-danger-bg);--warning-soft:var(--color-warning-bg);--success-soft:var(--color-success-bg);

  /* Interaction tints, skeleton, overlay, touch target (spec §3/§4/§7).
     Components must consume these instead of raw hex/rgba (§2.3). */
  --on-brand:#fff;
  /* Solid fills that carry text. #1877f2 with white is only 4.23:1, and the
     dark-theme state colors are LIGHT (#4ade80/#fbbf24/#f87171) so white on
     them is 1.7-2.8:1 — hence a dedicated fill + foreground pair instead of
     reusing the indicator colors for button backgrounds (§7). */
  --brand-fill:#1464cc;--on-brand-fill:#fff;
  /* semantic fills: dark in light theme, light in dark theme */
  --on-fill:#fff;
  --skeleton:#e8e7e5;--skeleton-shine:#dcdad6;
  --overlay:rgba(20,17,16,.55);--scrim:var(--overlay);
  --brand-line:rgba(24,119,242,.18);--brand-tint:rgba(24,119,242,.06);
  --line-success:rgba(21,128,61,.4);--line-danger:rgba(220,38,38,.4);--line-warning:rgba(154,83,3,.4);
  --press-success:#0b7a53;--press-warning:#a85b04;--press-danger:#a71d1d;
  --topbar-bg:rgba(255,255,255,.82);

  /* Categorical chart / analytics series (§2.3/§4.2).
     MOVED HERE from pages/cms.css, which is where they were defined as literal
     hex. Two things were wrong with that: a page file is not a token file, and
     fixed hex cannot adapt — so every chart series kept its LIGHT-theme value on
     a dark background. These are all references to semantic tokens now, which
     adapt for free and leave the ANARI palette intact (brand blue, the charcoal
     neutral ramp, and the three state colours; no second blue, no invented hue).
     Channel identity is carried by the label, not by hue. */
  --chart-views:var(--color-primary); --chart-clicks:var(--color-primary-hover);
  --chart-shares:var(--color-success); --chart-leads:var(--color-warning);
  --chart-comments:var(--text-secondary); --chart-likes:var(--color-danger);
  --chart-conversions:var(--text-muted); --chart-default:var(--text-muted);
  --tap:44px;--tap-dense:40px;

  /* Compatibility aliases — page CSS / legacy inline styles resolve here */
  --bg: var(--bg-root); --surface-raised: var(--surface-2);
  --text: var(--text-primary); --text2: var(--text-secondary); --text3: var(--text-muted);
  --muted: var(--text-muted); --primary: var(--color-primary); --accent: var(--color-primary);
  --accent-dim: var(--color-primary); --accent-hover: var(--color-primary-hover); --primary-dim: var(--color-primary-hover);
  --danger: var(--color-danger); --danger-dim: var(--color-danger); --danger-hover: var(--color-danger);
  --success: var(--color-success); --warning: var(--color-warning); --warn: var(--color-warning);
  --border: var(--border-default); --border-hover: rgba(52,46,44,.22); --border-active: var(--color-primary);
  --r: var(--radius-md); --r2: var(--radius-sm); --radius-full: 999px;
  --shadow: var(--shadow-md); --font: var(--font-sans);
  --bg-hover: rgba(24,119,242,.05);
  --radius: var(--radius-md); --radius-xl: 16px;
  --primary-hover: var(--color-primary-hover);
  --success-hover: var(--press-success);
  --success-dim: var(--color-success-bg);
  --shadow-lg: 0 16px 48px rgba(52,46,44,.16);
  --transition: all .2s cubic-bezier(.16,1,.3,1); --transition-fast: all .15s cubic-bezier(.16,1,.3,1);
  --bg-kanban-col: #f0f0ee;
}
/* ── Dark theme — ANARI dark-first tokens (canvas #0d0f12, surface #15181d).
     Brand blue stays #1877f2; links lift to --brand-link for contrast. ── */
[data-theme="dark"]{
  color-scheme:dark;
  --bg-root:#0d0f12;--bg-surface:#15181d;--bg-elevated:#15181d;--bg-input:#1a1e24;
  --surface-2:#1d2127;
  --border-subtle:rgba(255,255,255,.06);--border-default:#272c33;
  --text-primary:#f2f1ef;--text-secondary:#a8a29b;--text-muted:#8f8981;
  --color-primary:#1877f2;--color-primary-hover:#2f7dff;
  --color-primary-bg:rgba(77,148,247,.16);
  --color-success:#4ade80;--color-warning:#fbbf24;--color-danger:#f87171;
  --color-success-bg:rgba(74,222,128,.14);
  --color-warning-bg:rgba(251,191,36,.14);
  --color-danger-bg:rgba(248,113,113,.14);
  /* Dark state colors already clear 4.5:1, so the ink alias is the base color. */
  --color-warning-ink:var(--color-warning);--color-danger-ink:var(--color-danger);--color-success-ink:var(--color-success);
  --brand-link:#6ea8ff;
  --skeleton:#22262d;--skeleton-shine:#2a2f37;
  --overlay:rgba(0,0,0,.62);--scrim:var(--overlay);
  --brand-line:rgba(77,148,247,.24);--brand-tint:rgba(77,148,247,.06);
  --press-success:#166534;--press-warning:#b45309;--press-danger:#b91c1c;
  --topbar-bg:rgba(21,24,29,.82);
  --on-fill:#0d0f12;
  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.35);
  --shadow-md:0 4px 12px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.4);

  --surface-raised:#1d2127;
  --accent-dim:#6ea8ff; --primary-dim:#6ea8ff;
  --danger-dim:#fca5a5; --danger-hover:#fca5a5;
  --border-hover:#3a4149; --border-active:var(--color-primary);
  --success-hover:#86efac;
  --success-dim:rgba(74,222,128,.16);
  --shadow-lg:0 16px 48px rgba(0,0,0,.55);
  --bg-hover:rgba(77,148,247,.10);
  --bg-kanban-col:#1a1e24;
}
/* §7 touch targets: primary controls use --tap (44px). Densely packed in-row
   controls use --tap-dense, which lifts to 44px on coarse-pointer (touch)
   devices so the desktop layout stays dense without failing the spec. */
@media(pointer:coarse){:root{--tap-dense:44px}}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-size:16px;background:var(--bg-root);color:var(--text-primary);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit;border:none}
/* Visible focus state (WCAG 2.2 AA) */
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}
/* Skip-to-content link (WCAG 2.4.1) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;display:inline-flex;align-items:center;min-height:var(--tap);background:var(--brand-fill);color:var(--on-brand-fill);padding:10px 16px;border-radius:0 0 8px 0;font-size:14px;font-weight:600}
.skip-link:focus{left:0}
/* Shared buttons — anariev gradient, hover to brand dark */
/* Buttons — solid brand fill (no gradient), hover to brand-press.
   anari-design-system §2/§4: 主操作实色填充, 不做渐变/异形圆角. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--tap);background:var(--brand-fill);color:var(--on-brand-fill);border:none;padding:10px 18px;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,box-shadow .2s,transform .15s}
.btn[hidden]{display:none}
.btn:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px)}
.btn.success{background:var(--color-success);color:var(--on-fill)}
.btn.success:hover{background:var(--press-success)}
.btn.warn{background:var(--color-warning-ink);color:var(--on-fill)}
.btn.warn:hover{background:var(--press-warning)}
.btn.danger{background:var(--color-danger);color:var(--on-fill)}
.btn.danger:hover{background:var(--press-danger)}
.btn.outline{background:transparent;color:var(--brand-link);border:1.5px solid var(--color-primary)}
.btn.outline:hover{background:var(--color-primary-bg);box-shadow:none}
.btn-sm{padding:8px 14px;font-size:13px;min-height:var(--tap-dense)}
/* Shared table styles */
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--brand-soft)}
/* position:relative keeps an absolutely-positioned .sr-only (used inside <th>)
   inside this scroll container instead of letting it escape and widen the page. */
.table-wrap{position:relative;overflow-x:auto;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border-subtle);white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
th{font-weight:600;color:var(--text-muted);font-size:13px;text-transform:uppercase;letter-spacing:.04em;background:var(--surface-2)}
tr:hover td{background:var(--brand-tint)}
/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:12px 16px;box-shadow:var(--shadow-md);font-size:14px;color:var(--text-primary);z-index:200;transform:translateY(100px);opacity:0;transition:var(--motion-slow)}
.toast.show{transform:translateY(0);opacity:1}
.toast[style*="display: block"]{transform:translateY(0);opacity:1}
.toast.ok{border-color:var(--line-success);color:var(--color-success-ink)}
.toast.err{border-color:var(--line-danger);color:var(--color-danger-ink)}
/* width:100% is load-bearing: `.main-area` is a flex column, and `margin:0 auto`
   on a column-flex item suppresses the default stretch — the shell would
   shrink-wrap its widest child (measured 1232px inside a 1688px area) instead
   of filling. width:100% + the cap fills up to 1920px, then centres beyond it. */
.container{width:100%;max-width:min(var(--content-max),100%);margin:0 auto;padding:24px var(--gutter)}
/* §5 gutter ladder — the shell fills the viewport, so the breathing room grows
   with it instead of a fixed cap leaving dead space on wide monitors. */
@media(min-width:768px){:root{--gutter:24px}}
@media(min-width:1200px){:root{--gutter:32px}}
@media(min-width:1600px){:root{--gutter:40px}}
@media(min-width:1920px){:root{--gutter:48px}}
/* Long-form text keeps a readable measure even though the shell is full-bleed. */
.page-sub,.prose{max-width:var(--measure)}
/* ── Shared Topbar — ANARI glass, theme-aware (spec §4/§5) ──
   Was a hardcoded cold-navy bar (#b8c2d4 / #141b2e / rgba(10,16,30,.92)) that
   ignored the theme and introduced non-ANARI hues. Now: sticky translucent
   surface + blur, warm-charcoal ink, brand blue reserved for the active item's
   2px bar + soft fill. Interactive targets are >= --tap (44px, §7). */
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;min-height:56px;background:var(--topbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-sizing:border-box}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0}
.topbar .logo{font-size:17px;font-weight:700;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
/* §1.1: light theme shows the official horizontal lockup; dark theme swaps to
   the official icon (blue hexagon reads on dark — the charcoal wordmark would
   vanish). No brightness-invert hack. */
.topbar .logo.brand .brand-logo-light{height:24px;width:auto;display:block}
.topbar .logo.brand .brand-logo-dark{height:24px;width:auto;display:none}
html[data-theme="dark"] .topbar .logo.brand .brand-logo-light{display:none}
html[data-theme="dark"] .topbar .logo.brand .brand-logo-dark{display:block}
.topbar .topbar-brand{display:none;min-height:var(--tap);align-items:center}
@media(max-width:1024px){.topbar .topbar-brand{display:flex}}
@media(min-width:1025px){.topbar .topbar-brand{display:none!important}}
.topbar .theme-btn{font-size:15px;line-height:1}
.topbar .logo-dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.topbar nav{display:flex;gap:4px;min-width:0}
.topbar nav a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:6px 14px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;text-decoration:none;transition:background .2s,color .2s;color:var(--ink-2);white-space:nowrap}
.topbar nav a:hover{color:var(--ink);background:var(--surface-2)}
.topbar nav a.active{color:var(--brand-link);background:var(--brand-soft);box-shadow:inset 2px 0 0 var(--brand)}
.topbar-right{display:flex;align-items:center;gap:8px}
.topbar .user-info{color:var(--ink-2);font-size:13px;white-space:nowrap}
.topbar .icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);color:var(--ink-2);font-size:17px;text-decoration:none;padding:6px 8px;border-radius:var(--radius-sm);background:transparent;border:none;cursor:pointer;transition:background .2s,color .2s}
.topbar .icon-btn:hover{color:var(--ink);background:var(--surface-2)}
.topbar .icon-btn .icon,.icon{width:18px;height:18px;display:inline-block;vertical-align:middle}
.topbar .btn-outline{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink-2);font-size:14px;font-weight:500;padding:6px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);background:transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s;text-decoration:none;white-space:nowrap}
.topbar .btn-outline:hover{color:var(--brand-link);border-color:var(--brand-line);background:var(--brand-soft)}
.topbar .show-mobile{display:none}
.topbar .lang-btn{font-size:13px;font-weight:700;min-width:var(--tap);min-height:var(--tap);padding:4px 8px;border-radius:var(--radius-sm);border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.topbar .lang-btn:hover{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-link)}

@media(max-width:768px){
  .topbar{padding:0 12px}
  .topbar-left{flex:1;min-width:0;gap:14px}
  .topbar .logo{font-size:15px;max-width:110px}
  .topbar nav{overflow-x:auto;gap:0;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{padding:6px 10px;font-size:13px}
  .topbar-right{gap:4px;flex-shrink:0}
  .topbar .btn-outline{padding:5px 10px;font-size:13px}
  .topbar .icon-btn{font-size:15px;padding:5px 6px}
  .topbar .user-info{display:none}
  .topbar .hide-mobile{display:none}
  .topbar .show-mobile{display:inline-flex}
}
/* ── Shared Password Dialog ── */
.pw-overlay{display:none;position:fixed;inset:0;background:var(--overlay);z-index:9999;align-items:center;justify-content:center}
.pw-overlay.show{display:flex}
.pw-dialog{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:16px;padding:28px;width:100%;max-width:400px;box-shadow:var(--shadow-md)}
.pw-dialog h3{margin-bottom:20px;font-size:17px;font-weight:600;color:var(--text-primary)}
.pw-dialog .field{margin-bottom:14px}
.pw-dialog .field label{display:block;margin-bottom:6px;font-size:14px;color:var(--text-secondary);font-weight:500}
.pw-dialog .field input{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-default);border-radius:8px;color:var(--text-primary);font-size:15px;transition:border-color .2s}
.pw-dialog .field input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-bg)}
.pw-dialog .actions{display:flex;gap:10px;margin-top:20px}
.pw-dialog .actions button{flex:1;padding:10px;border-radius:8px;font-weight:600;font-size:15px;cursor:pointer;transition:.2s;border:none}
.pw-dialog .btn-save{background:var(--brand-fill);color:var(--on-brand-fill)}
.pw-dialog .btn-save:hover{background:var(--color-primary-hover)}
.pw-dialog .btn-cancel{background:var(--surface-2);color:var(--text-secondary);border:1px solid var(--border-default)}
.pw-dialog .btn-cancel:hover{background:var(--brand-soft);color:var(--text-primary)}
.pw-dialog .pw-msg{padding:10px 14px;border-radius:8px;font-size:14px;margin-top:14px;display:none}
.pw-dialog .pw-msg.show{display:block}
.pw-dialog .pw-msg.ok{background:var(--color-success-bg);color:var(--color-success-ink);border:1px solid var(--line-success)}
.pw-dialog .pw-msg.err{background:var(--color-danger-bg);color:var(--color-danger-ink);border:1px solid var(--line-danger)}

/* Visually hidden label (WCAG 1.3.1) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Card lift hover (anariev pattern: translateY + deeper shadow) */
.card-hover{transition:transform .25s,box-shadow .25s}
.card-hover:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}


/* ── AI Insight Panel (v0.2 Phase 0) — mirrors the CRM verdict card ── */
.ai-panel{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);box-shadow:var(--shadow-sm);padding:14px 16px;margin-bottom:14px}
.ai-panel-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:700;font-size:14px;color:var(--text-primary)}
.ai-panel-header .spark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--radius-sm);background:var(--brand-fill);color:var(--on-brand-fill);font-size:13px}
.ai-panel-header .spark .icon{width:14px;height:14px}
.ai-card{border:1px solid var(--border-default);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:10px;background:var(--bg-surface);transition:opacity .2s}
.ai-card.accepted{border-color:var(--line-success)}
.ai-card.dismissed{opacity:.55}
.ai-card-toprow{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.engine-tag{display:inline-flex;align-items:center;gap:4px;background:var(--brand-soft);color:var(--brand-link);padding:2px 9px;border-radius:var(--radius-full);font-size:13px;font-weight:600;white-space:nowrap}
.engine-tag.rules{background:var(--surface-2);color:var(--text-secondary)}
.ai-badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-full);font-size:13px;font-weight:700;color:var(--on-fill)}
.ai-badge.act_now{background:var(--color-danger);color:var(--on-fill)}
.ai-badge.opportunity{background:var(--brand-fill)}
.ai-badge.at_risk{background:var(--color-warning-ink);color:var(--on-fill)}
.ai-badge.wait{background:var(--ink-3)}
.ai-badge.positive{background:var(--color-success);color:var(--on-fill)}
.ai-conf-label{font-size:12px;color:var(--text-muted)}
.ai-conf-bar{display:block;height:2px;width:100%;border-radius:var(--radius-full);background:var(--line);overflow:hidden;margin:6px 0 8px}
.ai-conf-fill{display:block;height:100%;border-radius:var(--radius-full);background:var(--brand);transition:width var(--motion-slow) ease-out}
/* fill 是 span：没有 display:block 时 width:N% 被忽略，置信条永远空白（视觉评审实测） */
.ai-conf-fill.mid{background:var(--color-warning)}
.ai-conf-fill.low{background:var(--color-danger)}
.ai-statement{font-size:14px;font-weight:600;color:var(--text-primary);margin:2px 0 6px}
.ai-reasoning{margin-bottom:6px}
.ai-reasoning summary{cursor:pointer;font-size:12px;color:var(--text-muted)}
.ai-reasoning p{margin:6px 0 0;padding:8px 10px;background:var(--bg-root);border-radius:8px;font-size:13px;color:var(--text-secondary)}
.ai-evidence{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 8px}
.ai-evidence span{font-size:13px;padding:2px 8px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.ai-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ai-actions .state{font-size:13px;color:var(--color-success-ink);display:inline-flex;gap:4px;align-items:center}
.ai-corr{width:100%;margin-top:8px;display:none;font-size:13px}
.ai-corr.show{display:block}
.ai-corr textarea{width:100%;min-height:56px;padding:8px;border:1px solid var(--border-default);border-radius:8px;font:inherit;font-size:13px;color:var(--text-primary);background:var(--bg-input)}
.ai-not-configured{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px dashed var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-secondary);font-size:13px}
.ai-not-configured[hidden]{display:none}
.ai-skeleton{border-radius:var(--radius-md);background:linear-gradient(90deg,var(--skeleton) 25%,var(--skeleton-shine) 50%,var(--skeleton) 75%);background-size:200% 100%;animation:aiShimmer 1.4s infinite;height:72px;margin-bottom:10px}
@keyframes aiShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ai-empty{padding:16px;text-align:center;color:var(--text-muted);font-size:13px;border:1px dashed var(--border-default);border-radius:var(--radius-md)}

/* ── Global AI agent dock (v5 upgrade #3) ── */
.topbar .agent-dock-btn{color:var(--brand-link);font-size:15px}
.agent-dock{position:fixed;top:64px;right:16px;bottom:16px;width:380px;max-width:calc(100vw - 32px);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:none;flex-direction:column;z-index:220;overflow:hidden}
.agent-dock.open{display:flex}
.agent-dock-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border-subtle);font-size:15px;color:var(--text-primary)}
.agent-dock-head .spark{color:var(--brand-link)}
.agent-dock-log{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.agent-dock-hint{color:var(--text-muted);font-size:14px;line-height:1.5;padding:8px 10px;background:var(--color-primary-bg);border-radius:var(--radius-sm)}
.agent-dock-log .agent-step{font-size:14px;color:var(--text-secondary);line-height:1.5;word-break:break-word}
.agent-dock-log .agent-step a{color:var(--brand-link);text-decoration:underline}
.agent-dock-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border-subtle)}
.agent-dock-input input{flex:1;padding:9px 12px;border:1px solid var(--border-default);border-radius:var(--radius-sm);font:inherit;font-size:14px;background:var(--bg-input);color:var(--text-primary)}
.agent-dock-input input:focus{outline:2px solid var(--color-primary);outline-offset:0}
@media (max-width:640px){.agent-dock{left:16px;width:auto}}

/* ── AI status banner (truth about degraded mode) ── */
/* Restraint: surface background + neutral text + thin dividers, so the banner
   informs without dominating the page (anari-design-system §4 "界面退后"). */
/* 全局 tab 基类（Wave 12d）：部分页面（leads/sdr/social 顶栏）没有页面级 .tab 定义，
   19-21px 的"隐形小按钮"由此而来。§7 要求可点元素 ≥44px，所以基类直接取 --tap
   （旧值 36px 是"看着还行"的折中，实测点不中；页面级仍可覆盖）。 */
.tab{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:6px 16px}
.ai-status-banner{background:var(--bg-surface);color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);padding:6px 24px;font-size:13px;display:flex;gap:6px;align-items:center;letter-spacing:.01em}
.ai-status-banner[hidden]{display:none}
.ai-status-banner b{color:var(--text-primary);font-weight:600}
/* 行内文字链接适用 WCAG 2.5.8 的 inline 例外：保持最小 24px 可点带，不做 44px 撑高 */
.ai-status-banner a{color:var(--brand-link);text-decoration:none;font-weight:600;margin-left:4px;display:inline-flex;align-items:center;min-height:24px;padding:2px 4px}
.ai-status-banner a:hover{text-decoration:underline}

/* ── Page content entry (anari-design-system §4: 150-250ms ease-out) ── */
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
main#main{animation:pageIn .2s ease-out}
main#main>*{animation:pageIn .25s ease-out both}
main#main>*:nth-child(2){animation-delay:.03s}
main#main>*:nth-child(3){animation-delay:.06s}
main#main>*:nth-child(4){animation-delay:.09s}
main#main>*:nth-child(5){animation-delay:.12s}

/* a11y: honor reduced motion (anari-design-system) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  /* The controls carry `transition:all … !important` further down the file, and a
     class selector out-specifies the universal reset even when both are
     !important — and when specificity ties, later-in-file wins, which that rule
     also does. `html` prefix raises this above it so source order stops
     mattering. Bare a/button are covered too, since page CSS animates them
     directly. */
  html .btn,html .btn-sm,html .tab,html .icon-btn,html a,html button{transition:none!important}
  .ai-skeleton{animation:none;background:var(--skeleton)}
  .card-hover:hover{transform:none}
}

/* ── Multi-site matrix (site switcher) ── */
.page-head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head-row h1{margin:0}
.site-switch-label{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary)}
.site-switch-label select{padding:6px 10px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-primary);font:inherit;font-size:14px;max-width:260px}
.site-switch-label select:focus{outline:2px solid var(--color-primary);outline-offset:0}

/* ══════════════════════════════════════════════════════════════════
   ANARI design-system branding pass (2026-09-05)
   §2-§4: typography hierarchy, light-surface cards, focus rings,
   44px touch targets, tabular-nums for data — applied globally without
   touching page-specific CSS (that lives in pages/*.css).
   ══════════════════════════════════════════════════════════════════ */

/* Data figures: tabular numerics + slightly larger for legibility */
.tabular-nums, .kpi .value, .stat .value, .card .value{font-variant-numeric:tabular-nums}
.kpi .value, .stat .value, .card .value{font-weight:600;letter-spacing:-.02em}

/* Page header: eyebrow + title + subtitle (hierarchy, whitespace) */
.page-head, .page-header, .page-title{font-weight:700;letter-spacing:-.02em;line-height:1.2}
h1{font-size:22px}h2{font-size:17px}h3{font-size:15px}
h1,h2,h3{letter-spacing:-.015em;color:var(--text-primary)}
.subtitle{color:var(--text-secondary);font-size:14px;margin-top:4px}

/* Cards: light elevation via shadow, not hard borders (frontend-design §6) */
.card,.section,.panel,table.table-wrap{border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.card,.section,.panel{background:var(--bg-surface);border:1px solid var(--border-subtle)}
.card{padding:20px 24px}
.section{padding:20px 24px;margin-bottom:24px}

/* Inputs: theme-aware; generous tap target; focus ring */
input:not([type=checkbox]):not([type=radio]),select,textarea{border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--bg-input);color:var(--text-primary);padding:9px 12px;font:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}
/* iOS Safari 在输入字号 <16px 时会自动放大页面（聚焦瞬间跳版）——触屏环境一律 16px */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;border:none;background:none}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-bg)}
input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:var(--tap)}
/* WCAG 2.5.8 Target Size (Minimum, AA): 24x24px for pointer targets. */
input[type=checkbox],input[type=radio]{width:24px;height:24px;min-height:24px;accent-color:var(--color-primary);cursor:pointer}
button.btn{min-height:var(--tap)}

/* Status pills: soft background + contrasting text (both themes) */
.status-badge,.pill{border-radius:var(--radius-full);padding:3px 10px;font-size:12px;font-weight:600}
.status-badge.ok,.pill.ok{background:var(--color-success-bg);color:var(--color-success-ink)}
.status-badge.warn,.pill.warn{background:var(--color-warning-bg);color:var(--color-warning-ink)}
.status-badge.err,.pill.err{background:var(--color-danger-bg);color:var(--color-danger-ink)}
.status-badge.info,.pill.info{background:var(--color-primary-bg);color:var(--brand-link)}

/* Table header: quiet surface, not tinted (restraint) */
th{background:var(--surface-2);color:var(--text-muted);font-weight:600}

/* Subtle empty state affordance */
/* §7: an empty state is icon (or the vertical lockup) + one line + an action —
   never a blank region. The children are optional, so a bare text node still
   renders correctly. */
.empty,.empty-state{padding:48px 24px;text-align:center;color:var(--text-muted);border:1px dashed var(--border-default);border-radius:var(--radius-md);font-size:14px}
.empty-state .empty-icon{display:flex;justify-content:center;margin-bottom:12px;color:var(--ink-3)}
.empty-state .empty-icon .icon{width:32px;height:32px}
.empty-state .empty-icon img{width:96px;max-width:40%;height:auto}
.empty-state .empty-title{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--text-primary)}
.empty-state .empty-body{margin:0 auto;max-width:var(--measure);line-height:1.6}
.empty-state .empty-action{margin-top:16px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════════════
   ANARI utility + component primitives (deep UI refactor, 2026-09-06)
   Replace scattered inline styles and per-page redefinitions with these
   single-source classes. Design: frontend-design + anari-design-system.
   ══════════════════════════════════════════════════════════════════ */

/* ── Spacing (4px grid) ── */
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-6{padding:24px}
.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}
.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-auto{margin-top:auto}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}

/* ── Layout ── */
.flex{display:flex}.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}
.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.grid{display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}}
.w-full{width:100%}.flex-1{flex:1}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none}.block{display:block}.inline-flex{display:inline-flex}
.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}

/* ── Typography ── */
.text-xs{font-size:12px}.text-sm{font-size:14px}.text-md{font-size:15px}
.text-lg{font-size:17px}.text-xl{font-size:22px}.text-2xl{font-size:28px}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}
.text-muted{color:var(--text-muted)}.text-brand{color:var(--brand-link)}
.text-success{color:var(--color-success-ink)}.text-warning{color:var(--color-warning-ink)}
.text-danger{color:var(--color-danger-ink)}
.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.04em}
.leading-tight{line-height:1.25}

/* ── Surfaces / borders ── */
.bg-surface{background:var(--bg-surface)}.bg-root{background:var(--bg-root)}
.bg-muted{background:var(--bg-hover)}
.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}
.rounded-lg{border-radius:var(--radius-lg)}.rounded-full{border-radius:var(--radius-full)}
.border{border:1px solid var(--border-default)}.border-subtle{border:1px solid var(--border-subtle)}
.border-0{border:none}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}

/* ── Page header block (consistent across pages) ── */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0}
.page-head .page-sub{color:var(--text-secondary);font-size:14px;margin-top:4px;max-width:720px}

/* ── Stat card (number-forward, per design-system §4) ── */
.stat-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:16px 20px}
.stat-card .stat-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:6px}
.stat-card .stat-value{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-primary)}

/* ── Icon button (SVG, brand hover) ── */
.icon-btn-ghost{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:var(--radius-sm);color:var(--text-secondary);background:transparent;border:none;cursor:pointer;transition:.15s}
.icon-btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}
.icon-btn-ghost .icon{width:18px;height:18px}

/* ── CMS/editor utility additions (migrated from inline styles) ──
   Fills the small gaps needed to express the editor's inline styles with
   semantic classes: typographic scales at 10/12px, 4px-grid spacing, and
   input/elevated surfaces. (anari-design-system §2.2 token architecture.) */
.text-10{font-size:12px}.text-12{font-size:13px}
.text-13{font-size:14px}.text-15{font-size:15px}.text-17{font-size:17px}.text-22{font-size:22px}.text-28{font-size:28px}
.mt-1{margin-top:4px}.mt-3{margin-top:12px}.mt-5{margin-top:20px}
.mb-1{margin-bottom:4px}.mb-3{margin-bottom:12px}.mb-5{margin-bottom:20px}
.gap-1{gap:4px}.gap-5{gap:20px}.gap-6{gap:24px}
.p-1{padding:4px}.px-2{padding-left:8px;padding-right:8px}.py-2{padding-top:8px;padding-bottom:8px}
.bg-input{background:var(--bg-input)}.bg-elevated{background:var(--bg-elevated)}
.self-center{align-self:center}
.ml-2{margin-left:8px}.mr-2{margin-right:8px}.ml-1{margin-left:4px}.ml-3{margin-left:12px}.ml-4{margin-left:16px}
.pl-4{padding-left:16px}.pr-4{padding-right:16px}
.icon-xs{width:12px;height:12px;display:inline-block;vertical-align:-1px}
.icon-sm{width:14px;height:14px;display:inline-block;vertical-align:-1px}

/* ── Modal scrim token — page CSS must reference tokens, never raw rgba ──
   --scrim now lives in the theme token blocks above (warm charcoal overlay). */

/* ── Form grid (multi-column, responsive) ── */
/* sites_admin and other form pages use .form-grid; previously its
   grid-template-columns was either undefined or inline (dead code). This is
   the single-source responsive definition. */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-secondary);font-weight:500}
.form-grid input:not([type=checkbox]):not([type=radio]),.form-grid select,.form-grid textarea{width:100%;min-height:var(--tap)}
.form-grid .actions,.form-grid .form-actions{grid-column:1/-1;display:flex;gap:10px;align-items:center}
.form-grid label.check-row{flex-direction:row;align-items:center;gap:8px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ── Unified workbench page head (Marketing OS, anari §5) ── */
.page-eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-link);margin-bottom:4px}
.page-head h1.page-title{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0}
.page-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-head .page-sub{color:var(--text-secondary);font-size:14px;margin-top:4px;max-width:720px}

/* Mobile: single-line compact banner (S6-UX) */
@media (max-width: 640px){
  .ai-status-banner{padding:4px 12px;font-size:12px}
  .ai-status-banner b{display:inline}
}
/* Focus ring refinement (Apple-style: subtle double ring) */
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}
.btn:focus-visible{outline-offset:3px}
/* Micro-transition: buttons and cards respond with subtle lift */
.btn{transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.card{transition:box-shadow .25s ease, transform .2s ease}

/* ── Apple-polish: unified motion, focus, and depth (S6-UX R2) ── */
:root{
  --ease-out-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
}
.btn, .tab, .icon-btn{transition:all var(--duration-fast) var(--ease-out-apple) !important}
.card, .ai-panel, .apv-empty, .section{transition:box-shadow var(--duration-normal) var(--ease-out-apple)}
.kanban-item{transition:transform var(--duration-fast) var(--ease-out-apple), box-shadow var(--duration-fast) var(--ease-out-apple)}
.kanban-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
/* Toast: slide-in from top instead of fade */
.toast{transition:transform var(--duration-normal) var(--ease-out-apple), opacity var(--duration-normal) var(--ease-out-apple)}
/* Table rows: subtle hover */
tbody tr{transition:background var(--duration-fast) ease}
/* Inputs: consistent focus ring */
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--color-primary);outline-offset:0;border-color:var(--color-primary)
}
/* Reduced motion: honor user preference everywhere */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}


/* ── Mobile tabbar (v2 audit §47-50/§69): action-first 5-tab bottom nav.
   Hidden ≥769px where the topbar navigation exists. ── */
.mobile-tabbar{display:none}
@media (max-width: 768px){
  .mobile-tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;justify-content:space-around;align-items:stretch;
    background:var(--bg-surface);border-top:1px solid var(--border-subtle);
    box-shadow:0 -2px 12px var(--shadow-up);
    padding:4px 0 max(4px, env(safe-area-inset-bottom));
  }
  .tabbar-item{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    flex:1;padding:6px 0;color:var(--text-secondary);
    font-size:12px;text-decoration:none;border-radius:var(--radius-sm);
    border:none;background:none;font-family:var(--font-sans);cursor:pointer;
  }
  .tabbar-item .icon{width:20px;height:20px}
  .tabbar-item.active{color:var(--brand-link);font-weight:600}
  body{padding-bottom:64px}
}

/* ── AI-native component cards (§53): shared visual language ── */
.ai-card{
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:12px 14px;margin:0 0 10px;
  box-shadow:var(--shadow-sm);
}
.ai-card header{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;font-weight:600;margin-bottom:6px}
.ai-card p{margin:0 0 6px;font-size:14px;color:var(--text-primary)}
/* §4: the card's primary line leads — 15px semibold above the 13px body. */
.ai-card-title{margin:0 0 6px;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)}
.ai-card-meta{color:var(--text-secondary)!important;font-size:13px!important}
/* §7.1 entity link on shared cards — styled in the shell so it renders on
   every page that hosts the card, not only where a page css happens to define it */
.ai-card-title .mc-entity{color:inherit;text-decoration:none;font-weight:600}
.ai-card-title .mc-entity:hover{color:var(--brand-link);text-decoration:underline}
.ai-card-conf{font-size:13px;color:var(--brand-link);background:var(--brand-soft);border-radius:var(--radius-full);padding:2px 8px;font-weight:500}
.ai-card-evidence{margin:6px 0;padding-left:18px;font-size:13px;color:var(--text-secondary)}
.ai-card-evidence li{margin-bottom:2px}
.ai-card footer{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.ai-card-more{display:inline-flex;align-items:center;min-height:24px;margin-left:auto;font-size:13px;color:var(--brand-link);text-decoration:none}
.ai-card-chip{font-size:13px;background:var(--surface-2);color:var(--ink-2);border-radius:var(--radius-sm);padding:2px 8px}
.ai-card-value{font-weight:700}
.ai-card--evidence{border-left:3px solid var(--color-primary)}
.ai-card--opportunity.hot{border-left:3px solid var(--color-danger)}
.ai-card--opportunity.warm{border-left:3px solid var(--color-warning)}
.ai-card--agent_run{border-left:3px solid var(--border-default)}
.ai-card--approval{border-left:3px solid var(--color-warning)}
.ai-card--experiment.concluded{opacity:.75}
.ai-card--outcome .ai-card-rev{font-size:22px;font-weight:700;color:var(--color-success-ink)}
.ai-card-status{font-size:13px;border-radius:var(--radius-full);padding:2px 8px;background:var(--surface-2);color:var(--ink-2)}
.ai-card-status.st-done{background:var(--color-success-bg);color:var(--color-success-ink)}
.ai-card-status.st-error{background:var(--color-danger-bg);color:var(--color-danger-ink)}
.ai-card-status.st-needs_human{background:var(--warning-soft);color:var(--color-warning-ink)}
.ai-card-pre{background:var(--bg-root);border-radius:var(--radius-sm);padding:8px;font-size:12px;overflow-x:auto;max-height:120px}
.ai-card--error{border-left:3px solid var(--color-danger);color:var(--color-danger-ink);font-size:13px}

/* ── §6 AI panel four-piece set, shared by every AI-surfaced card ──
   1 AI mark (brand square + ✨) · 2 engine badge · 3 confidence number + 2px
   bar · 4 📎 source citations · 5 feedback loop written to the audit chain. */
.ai-mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;border-radius:var(--radius-sm);background:var(--brand-fill);color:var(--on-brand-fill);font-size:12px;line-height:1}
.ai-card-headright{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.ai-conf-wrap{display:inline-flex;align-items:center;gap:6px;min-width:104px}
.ai-conf-wrap .ai-conf-bar{margin:0;flex:1;min-width:44px}
.ai-card-src{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.src-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 8px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);font-size:13px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-card-approval-note{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-full);background:var(--warning-soft);color:var(--color-warning-ink);font-size:13px;font-weight:600}
.ai-fb{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.ai-fb-label{font-size:13px;color:var(--ink-3)}
.ai-fb-btn{display:inline-flex;align-items:center;gap:5px;min-height:var(--tap-dense);padding:4px 10px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.ai-fb-btn:hover:not(:disabled){border-color:var(--brand-line);color:var(--brand-link);background:var(--brand-soft)}
.ai-fb-btn:disabled{opacity:.5;cursor:default}
.ai-fb-btn.is-chosen{border-color:var(--brand);color:var(--brand-link);background:var(--brand-soft);opacity:1}
.ai-fb-done{font-size:13px;color:var(--color-success-ink)}
@media(max-width:640px){.ai-fb{margin-left:0;width:100%}.ai-fb-done{width:100%}}

/* ── Account Brief overlay (v2 audit §43/§44) — self-contained so any
   page can open the agentic sales brief without page-scoped CSS. ── */
.brief-overlay{display:none;position:fixed;inset:0;background:var(--overlay);z-index:998;align-items:center;justify-content:center;padding:24px}
.brief-overlay.show{display:flex}
.brief-box{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:560px;width:100%;max-height:86vh;overflow-y:auto}
.brief-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-subtle)}
.brief-body{padding:16px 18px 20px}
.brief-body h3{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);margin:14px 0 6px}
.brief-body p,.brief-body li{font-size:14px}
.brief-grid{display:flex;gap:24px;flex-wrap:wrap}
.brief-grid>div{display:flex;flex-direction:column;gap:2px}
.brief-k{font-size:12px;color:var(--text-muted)}
.brief-why,.brief-ev{margin:0;padding-left:18px}
.brief-why li,.brief-ev li{margin-bottom:4px}
@media (max-width:768px){
  .brief-box{max-width:none;margin:0 8px}
}

/* ── Topbar AI Agent CTA (v2 UX pass) ── */
.agent-cta{
  display:inline-flex;align-items:center;gap:7px;
  margin-right:6px;padding:7px 16px;min-height:var(--tap);border:none;border-radius:var(--radius-full);
  background:var(--brand-fill);color:var(--on-brand-fill);
  font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;box-shadow:var(--shadow-sm);
  transition:transform .15s cubic-bezier(.25,.1,.25,1),box-shadow .15s;
}
.agent-cta:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.agent-cta .icon{width:16px;height:16px}
.agent-cta-label{white-space:nowrap}
@media (max-width:900px){
  .agent-cta-label{display:none}
  .agent-cta{padding:7px 10px}
}

/* ── Sidebar shell (v2 UX pass: HubSpot-style grouped sidebar + Linear
   collapsible rail; mobile = off-canvas drawer + bottom tabbar) ── */
.shell{min-height:100vh}
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:232px;z-index:70;
  display:flex;flex-direction:column;
  background:var(--bg-surface);border-right:1px solid var(--border-subtle);
  transition:width .18s cubic-bezier(.25,.1,.25,1),transform .18s cubic-bezier(.25,.1,.25,1);
}
.sidebar-brand{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;text-decoration:none}
/* §1.1 brand lockup. Sidebar is a wide (>=180px) surface, so light theme uses
   the official horizontal lockup; dark theme swaps to the official icon (the
   charcoal wordmark is invisible on dark, and a white container is banned).
   The collapsed rail always falls back to the icon. */
.sidebar-brand-logo{display:block;height:22px;width:auto}
.sidebar-brand-logo--dark{display:none;height:26px}
html[data-theme="dark"] .sidebar-brand-logo--light{display:none}
html[data-theme="dark"] .sidebar-brand-logo--dark{display:block}
.sidebar.collapsed .sidebar-brand{justify-content:center;padding:14px 8px 10px}
.sidebar.collapsed .sidebar-brand-logo--light{display:none}
.sidebar.collapsed .sidebar-brand-logo--dark{display:block}
/* Jump-to 检索（Linear/Notion 模式）：静默行——常态透明融入侧栏，hover 微底，
   仅在输入时升为卡片并显示聚焦环；右侧 ⌘K 提示聚焦后隐藏。
   旧样式（bg-root 底 + 常驻描边的大白框）被评审标记为"突兀的大框"。 */
.sidebar-filter{
  display:flex;align-items:center;gap:8px;margin:2px 10px 8px;padding:4px 8px;
  min-height:34px;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);
  color:var(--text-muted);
  transition:background var(--motion) ease-out,border-color var(--motion) ease-out;
}
.sidebar-filter:hover{background:var(--bg-root)}
.sidebar-filter:focus-within{
  background:var(--bg-surface);border-color:var(--border-subtle);
  box-shadow:0 0 0 3px var(--color-primary-bg);
}
.sidebar-filter .icon{width:14px;height:14px;flex:0 0 14px}
/* 全局 input 规则 (0,2,1) 会压过类选择器——用 #navFilter (1,0,0) 提权 */
#navFilter{
  border:none;outline:none;background:transparent;width:100%;
  min-height:0;height:26px;padding:0;border-radius:0;box-shadow:none;
  font-family:var(--font-sans);font-size:13px;color:var(--text-primary);
}
#navFilter::placeholder{color:var(--text-muted)}
.sidebar-filter input::placeholder{color:var(--text-muted)}
.sidebar-filter-kbd{
  flex:0 0 auto;font-size:12px;line-height:1;color:var(--text-muted);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:3px 5px;
}
.sidebar-filter:focus-within .sidebar-filter-kbd,
.sidebar-filter.kbd-hidden .sidebar-filter-kbd{display:none}
.sidebar-nav{flex:1;overflow-y:auto;padding:0 8px 8px}
.nav-group{margin-bottom:2px}
/* 组头是可点按钮（Linear/Notion 模式）：默认折叠、活跃组自动展开。 */
.nav-group-label{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:10px 10px;border-radius:var(--radius-sm);
  background:none;border:none;cursor:pointer;
  font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap;
  transition:background .15s,color .15s;
}
.nav-group-label:hover{background:var(--bg-root);color:var(--text-primary)}
.nav-group-label:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}
.nav-group-label .icon{width:15px;height:15px;flex:0 0 15px}
.nav-group-label .chev{margin-left:auto;width:13px;height:13px;opacity:.7;transition:transform .15s}
.nav-group.open .nav-group-label .chev{transform:rotate(90deg)}
.nav-group.has-active .nav-group-label{color:var(--brand-link)}
.nav-group-items{display:none}
.nav-group.open .nav-group-items{display:block}
.nav-item{
  display:flex;align-items:center;
  position:relative;padding:8px 10px;margin:1px 0 1px 6px;border-radius:var(--radius-sm);
  min-height:var(--tap);color:var(--text-secondary);font-size:14px;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-item:hover{background:var(--bg-root);color:var(--text-primary)}
.nav-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
.nav-item.active{
  background:var(--color-primary-bg);color:var(--brand-link);font-weight:600;
}
.nav-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;background:var(--color-primary)}
.sidebar-collapse{
  display:flex;align-items:center;gap:8px;margin:6px 12px 12px;padding:7px 10px;
  min-height:var(--tap);
  background:none;border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  color:var(--text-muted);font-family:var(--font-sans);font-size:13px;cursor:pointer;
  white-space:nowrap;overflow:hidden;
}
.sidebar-collapse:hover{color:var(--text-primary);background:var(--bg-root)}
.main-area{
  margin-left:232px;min-height:100vh;display:flex;flex-direction:column;
  transition:margin-left .18s cubic-bezier(.25,.1,.25,1);
}
.sidebar-scrim{display:none}

/* Collapsed rail (Linear-style): icons only, labels hidden */
.sidebar.collapsed{width:64px}
.sidebar.collapsed .nav-group-label span,
.sidebar.collapsed .nav-group-label .chev,
.sidebar.collapsed .nav-group-items,
.sidebar.collapsed .sidebar-collapse span,
.sidebar.collapsed .sidebar-filter input{display:none}
.sidebar.collapsed .nav-group{margin-bottom:4px}
.sidebar.collapsed .nav-group-label{justify-content:center;padding:10px 4px}
.sidebar.collapsed .sidebar-filter{justify-content:center;padding:6px 8px}
.sidebar.collapsed .nav-group-label{justify-content:center;padding:10px 4px 4px}
.sidebar.collapsed .nav-item{justify-content:center;padding:9px 4px}
.sidebar.collapsed .sidebar-collapse{justify-content:center}
.main-area.rail{margin-left:64px}
.sidebar.collapsed .nav-item.active{background:var(--color-primary-bg)}

/* Mobile: off-canvas drawer */
.nav-hamburger{display:none}
@media (max-width:1024px){
  .sidebar{transform:translateX(-100%);width:232px;box-shadow:var(--shadow-lg)}
  /* 抽屉是临时导航：全部展开（在手机上折叠组只会增加点击成本） */
  .nav-group-items{display:block}
  .nav-group-label .chev{display:none}
  .sidebar.open{transform:none}
  .sidebar.collapsed{width:232px}
  .sidebar.collapsed .nav-group-label span,
  .sidebar.collapsed .nav-item,
  .sidebar.collapsed .sidebar-collapse span,
  .sidebar.collapsed .sidebar-filter input{display:flex}
  .sidebar.collapsed .sidebar-filter input{display:block}
  .sidebar.collapsed .nav-group-label span{display:inline}
  .main-area{margin-left:0}
  .main-area.rail{margin-left:0}
  .nav-hamburger{display:inline-flex}
  .sidebar-scrim.show{
    display:block;position:fixed;inset:0;z-index:65;
    background:var(--overlay);
  }
}
/* (The .main-area > main.container rule that used to live here is gone: it set
   width:auto, which is what stopped the shell from filling. `.container` now
   carries width:100% + the same max-width cap, so a wide child like the kanban
   board can still scroll inside .table-wrap instead of stretching the page.) */


/* page-level Ask Agent (workbench page-head) */
.agent-ask{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--color-primary);color:var(--brand-link);
  background:var(--color-primary-bg);border-radius:var(--radius-full);
  padding:7px 16px;min-height:var(--tap);font-family:var(--font-sans);font-size:14px;font-weight:600;cursor:pointer;
  transition:transform .15s cubic-bezier(.25,.1,.25,1),box-shadow .15s;
  white-space:nowrap;
}
.agent-ask:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.agent-ask .icon{width:14px;height:14px}
.page-head-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* collapsible nav groups: fold to just the group label, chevron affords it */
.nav-group-label{cursor:pointer;user-select:none;border-radius:var(--radius-sm)}
.nav-group-label:hover{color:var(--text-secondary)}
.sidebar.collapsed 
/* 去 SaaS 化：页级数据源与新鲜度声明（V4 Wave 4.3） */
.page-meta{font-size:13px;color:var(--text-muted);margin:6px 0 14px;padding:6px 10px;background:var(--bg-root);border-radius:var(--radius-sm);display:inline-block}
.mc-exp-group{margin-bottom:8px}
.mc-exp-label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:6px 0 4px}

/* Agent dock: page context strip. The drawer is opened from a page, so it must
   say which page it is reasoning about. */
.agent-dock-context{display:flex;align-items:baseline;gap:8px;padding:8px 16px;
  border-bottom:1px solid var(--border-subtle);background:var(--bg-root);
  font-size:13px;color:var(--text-secondary)}
.agent-dock-context[hidden]{display:none}
.agent-dock-context-label{font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-muted);flex:0 0 auto}
#agentDockContextValue{overflow-wrap:anywhere}

/* ── Command palette (⌘K) ─────────────────────────────────────────────────── */
.cmd-scrim{position:fixed;inset:0;z-index:200;background:var(--scrim);
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.cmd-scrim[hidden]{display:none}
.cmd-panel{width:100%;max-width:560px;background:var(--bg-elevated);
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);overflow:hidden}
.cmd-input-row{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--border-subtle)}
.cmd-input-row .icon{color:var(--text-muted);flex:0 0 auto}
.cmd-input-row input{flex:1;min-width:0;border:none;background:none;outline:none;
  font:inherit;font-size:15px;color:var(--text)}
.cmd-input-row input::placeholder{color:var(--text-muted)}
.cmd-kbd{font-size:12px;color:var(--text-muted);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);padding:2px 6px}
.cmd-list{margin:0;padding:6px;list-style:none;max-height:52vh;overflow-y:auto}
.cmd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;
  min-height:var(--tap-dense);border-radius:var(--radius-sm);cursor:pointer;
  color:var(--text)}
.cmd-item .icon{color:var(--text-muted);flex:0 0 auto}
.cmd-item.is-active,.cmd-item[aria-selected="true"]{background:var(--color-primary-bg);color:var(--text)}
.cmd-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-hint{font-size:12px;color:var(--text-muted);flex:0 0 auto;max-width:46%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-empty{padding:18px 14px;font-size:14px;color:var(--text-muted);text-align:center}
@media (prefers-reduced-motion: reduce){.cmd-item{transition:none}}