/* Optio design system: tokens + components + responsive. Generated by docs/design-system/src/build.py; do not edit. */
:root, [data-theme="light"] {
  /* Shell ground */
  --bg-solid: #dfe3ea;
  --bg: linear-gradient(180deg, #e9edf3 0%, #d6dde8 45%, #cfd6e3 100%);
  --bg-glow: radial-gradient(900px 600px at 15% 0%, rgba(255,255,255,.75), transparent 60%), radial-gradient(700px 500px at 100% 20%, rgba(120,150,210,.35), transparent 60%), radial-gradient(800px 600px at 40% 110%, rgba(255,200,150,.28), transparent 60%);

  /* One ink, one neutral triplet, one glass triplet, one shadow triplet */
  --ink: #1d1d1f;
  --mute-rgb: 60,60,67;
  --glass-rgb: 255,255,255;
  --shadow-rgb: 30,40,70;
  --on-accent: #fff;

  /* Accents */
  --blue: #0071e3;
  --indigo: #5e5ce6;
  --green: #248a3d;
  --orange: #c93400;
  --amber: #e07800;
  --blue-tint: rgba(0,113,227,.12);
  --indigo-tint: rgba(94,92,230,.12);
  --green-tint: rgba(52,199,89,.16);
  --orange-tint: rgba(201,52,0,.12);
  --amber-tint: rgba(255,149,0,.16);

  /* Semantic */
  --danger: #a2191f;
  --danger-tint: rgba(218,30,40,.11);
  --find: #0043ce;
  --find-tint: rgba(0,67,206,.10);
  --ok: #1f7a34;
  --tier-gold: #a86b00;
  --notice: #c98a00;
  --badge: #ff3b30;

  /* Audience editor section colours */
  --c-profile: #0071e3;
  --c-activity: #5e5ce6;
  --c-purchases: #248a3d;
  --c-products: #0a84a0;
  --c-predictions: #a24bd6;
  --c-reach: #d1366b;
  --c-lists: #6e6e73;

  /* People avatars (initials discs); index = stable hash of the person id */
  --av-1: #ff9500; --av-2: #5e5ce6; --av-3: #248a3d; --av-4: #0071e3;
  --av-5: #af52de; --av-6: #c93400; --av-7: #30b0c7;

  /* Agent thread */
  --bubble: #e6e7f7;
  --bubble-line: rgba(94,92,230,.14);
  --chip: rgba(255,255,255,.82);
  --toast: rgba(29,29,31,.92);
  --toast-action: #8ec5ff;

  /* Customer devices: what the recipient sees, so these never follow the app theme */
  --device-frame: #1d1d1f;
  --device-paper: #fff;
  --device-ink: #1d1d1f;
  --device-text: #2a2a2e;
  --device-muted: rgba(60,60,67,.55);
  --device-line: rgba(60,60,67,.12);
  --device-bubble: #e9e9eb;
  --device-head: #f6f6f8;
  --email-canvas: #eef1f5;
  --email-soft: #f3f5f8;
  --email-footer: #8a8f98;
  --placeholder-a: #e9ecf1;
  --placeholder-b: #e1e5eb;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg-solid: #14171f;
  --bg: linear-gradient(180deg, #1c2029 0%, #151923 45%, #10131b 100%);
  --bg-glow: radial-gradient(900px 600px at 15% 0%, rgba(90,110,160,.28), transparent 60%), radial-gradient(700px 500px at 100% 20%, rgba(94,92,230,.22), transparent 60%), radial-gradient(800px 600px at 40% 110%, rgba(255,150,80,.10), transparent 60%);
  --ink: #f5f5f7;
  --mute-rgb: 235,235,245;
  --glass-rgb: 110,120,150;
  --shadow-rgb: 0,0,0;
  --blue: #3d9bff;
  --indigo: #8e8bff;
  --green: #4fd66f;
  --orange: #ff8a5b;
  --amber: #ffb340;
  --blue-tint: rgba(61,155,255,.22);
  --indigo-tint: rgba(142,139,255,.22);
  --green-tint: rgba(79,214,111,.20);
  --orange-tint: rgba(255,138,91,.22);
  --amber-tint: rgba(255,179,64,.22);
  --danger: #ff7b7b;
  --danger-tint: rgba(255,123,123,.22);
  --find: #8ab9ff;
  --find-tint: rgba(138,185,255,.22);
  --ok: #5fd37f;
  --tier-gold: #f0b440;
  --notice: #f0c040;
  --c-profile: #3d9bff;
  --c-activity: #8e8bff;
  --c-purchases: #4fd66f;
  --c-products: #4cc9e0;
  --c-predictions: #c98bff;
  --c-reach: #ff7aa2;
  --c-lists: #aeaeb2;
  --bubble: #2b2d45;
  --bubble-line: rgba(160,158,255,.18);
  --chip: rgba(48,53,66,.9);
  color-scheme: dark;
} }
[data-theme="dark"] {
  --bg-solid: #14171f;
  --bg: linear-gradient(180deg, #1c2029 0%, #151923 45%, #10131b 100%);
  --bg-glow: radial-gradient(900px 600px at 15% 0%, rgba(90,110,160,.28), transparent 60%), radial-gradient(700px 500px at 100% 20%, rgba(94,92,230,.22), transparent 60%), radial-gradient(800px 600px at 40% 110%, rgba(255,150,80,.10), transparent 60%);
  --ink: #f5f5f7;
  --mute-rgb: 235,235,245;
  --glass-rgb: 110,120,150;
  --shadow-rgb: 0,0,0;
  --blue: #3d9bff;
  --indigo: #8e8bff;
  --green: #4fd66f;
  --orange: #ff8a5b;
  --amber: #ffb340;
  --blue-tint: rgba(61,155,255,.22);
  --indigo-tint: rgba(142,139,255,.22);
  --green-tint: rgba(79,214,111,.20);
  --orange-tint: rgba(255,138,91,.22);
  --amber-tint: rgba(255,179,64,.22);
  --danger: #ff7b7b;
  --danger-tint: rgba(255,123,123,.22);
  --find: #8ab9ff;
  --find-tint: rgba(138,185,255,.22);
  --ok: #5fd37f;
  --tier-gold: #f0b440;
  --notice: #f0c040;
  --c-profile: #3d9bff;
  --c-activity: #8e8bff;
  --c-purchases: #4fd66f;
  --c-products: #4cc9e0;
  --c-predictions: #c98bff;
  --c-reach: #ff7aa2;
  --c-lists: #aeaeb2;
  --bubble: #2b2d45;
  --bubble-line: rgba(160,158,255,.18);
  --chip: rgba(48,53,66,.9);
  color-scheme: dark;
}
:root, [data-theme] {
  --o-symbol: url("/static/assets/symbol.png");
  /* ---- Text: ink plus four graded neutrals (replaces the 12 ad-hoc alphas of v0) ---- */
  --fg: var(--ink);
  --fg-2: rgba(var(--mute-rgb),.65);   /* secondary: subtitles, notes, deltas */
  --fg-3: rgba(var(--mute-rgb),.55);   /* meta: timestamps, column heads, captions */
  --fg-4: rgba(var(--mute-rgb),.42);   /* faint: placeholders, separators, idle icons */
  --fg-5: rgba(var(--mute-rgb),.28);   /* ghost: row chevrons, empty ticks */

  /* ---- Lines and washes ---- */
  --line: rgba(var(--mute-rgb),.1);          /* section dividers, card edges */
  --line-strong: rgba(var(--mute-rgb),.16);  /* row rules on glass, control rings */
  --line-faint: rgba(var(--mute-rgb),.07);   /* table row rules */
  --wash: rgba(var(--mute-rgb),.07);         /* segmented tracks, bar tracks, tags */
  --wash-hover: rgba(var(--mute-rgb),.1);    /* hover on transparent controls */
  --ring-control: inset 0 0 0 .5px rgba(var(--mute-rgb),.2);
  --ring-control-hover: inset 0 0 0 .5px rgba(var(--mute-rgb),.34);
  --ring-outline: inset 0 0 0 1px rgba(var(--mute-rgb),.2);

  /* ---- Selection and tones, derived so dark mode follows (v0 hard-coded these) ---- */
  --sel: color-mix(in srgb, var(--blue) 8%, transparent);
  --sel-strong: color-mix(in srgb, var(--blue) 12%, transparent);
  --sel-ring: color-mix(in srgb, var(--blue) 35%, transparent);
  --exclude-sel: color-mix(in srgb, var(--orange) 8%, transparent);
  --exclude-ring: color-mix(in srgb, var(--orange) 35%, transparent);
  --danger-wash: color-mix(in srgb, var(--danger) 9%, transparent);
  --merge-tag: color-mix(in srgb, var(--indigo) 10%, transparent);
  --merge-tag-ring: color-mix(in srgb, var(--indigo) 24%, transparent);

  /* ---- Surfaces (liquid glass) ---- */
  --surface-nav: linear-gradient(160deg, rgba(var(--glass-rgb),.42), rgba(var(--glass-rgb),.18));
  --surface-main: linear-gradient(160deg, rgba(var(--glass-rgb),.30), rgba(var(--glass-rgb),.12));
  --surface-agent: rgba(var(--glass-rgb),.55);
  --surface-card: var(--surface-nav);
  --surface-block: rgba(var(--glass-rgb),.6);
  --surface-section: rgba(var(--glass-rgb),.55);
  --surface-well: rgba(var(--glass-rgb),.5);
  --surface-field: rgba(var(--glass-rgb),.82);
  --surface-field-focus: rgba(var(--glass-rgb),.97);
  --surface-raised: rgba(var(--glass-rgb),.96);
  --surface-hover: rgba(var(--glass-rgb),.6);
  --surface-popover: rgba(var(--glass-rgb),.97);
  --surface-dialog: rgba(var(--glass-rgb),.9);
  --surface-strip: rgba(var(--glass-rgb),.22);

  --edge-panel: inset 0 1px 0 rgba(var(--glass-rgb),.85), inset 0 -1px 0 rgba(var(--glass-rgb),.25), inset 0 0 0 .5px rgba(var(--glass-rgb),.5);
  --edge-soft: inset 0 1px 0 rgba(var(--glass-rgb),.7), inset 0 0 0 .5px rgba(var(--glass-rgb),.55);
  --edge-block: inset 0 1px 0 rgba(var(--glass-rgb),.85), inset 0 0 0 .5px rgba(var(--mute-rgb),.1);
  --shadow-panel: 0 14px 40px -20px rgba(var(--shadow-rgb),.3);
  --shadow-control: 0 10px 30px -18px rgba(var(--shadow-rgb),.4);
  --shadow-block: var(--edge-block), 0 14px 34px -26px rgba(var(--shadow-rgb),.4);
  --shadow-card: var(--edge-panel), var(--shadow-panel);
  --shadow-button: var(--edge-soft), var(--shadow-control);
  --shadow-raised: 0 1px 3px rgba(var(--shadow-rgb),.14), inset 0 0 0 .5px rgba(var(--mute-rgb),.1);
  --shadow-lift: 0 18px 36px -24px rgba(var(--shadow-rgb),.5);
  --shadow-popover: 0 0 0 .5px rgba(var(--mute-rgb),.14), 0 2px 6px -2px rgba(var(--shadow-rgb),.12), 0 16px 36px -16px rgba(var(--shadow-rgb),.35);
  --shadow-dialog: inset 0 1px 0 rgba(var(--glass-rgb),.95), inset 0 0 0 .5px rgba(var(--mute-rgb),.12), 0 40px 90px -30px rgba(var(--shadow-rgb),.6);
  --shadow-primary: 0 10px 24px -14px var(--blue);
  --shadow-toast: 0 14px 30px -14px rgba(0,0,0,.5);
  --scrim: rgba(20,25,40,.26);
  --blur-glass: blur(22px) saturate(170%);
  --blur-strong: blur(28px) saturate(180%);
  --blur-dialog: blur(40px) saturate(180%);
  --blur-scrim: blur(12px) saturate(120%);

  /* ---- Focus: one ring for fields, one outline for everything else ---- */
  --focus-field: inset 0 0 0 1.5px var(--blue), 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent);
  --focus-outline: 2px solid color-mix(in srgb, var(--blue) 70%, transparent);

  /* ---- Type ---- */
  --font-sans: "IBM Plex Sans", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-hero: 56px;  --text-display: 42px; --text-h1: 32px;  --text-h2: 24px;
  --text-title: 22px; --text-lead: 21px;    --text-step: 17px; --text-agent: 16px;
  --text-body-lg: 15.5px; --text-row: 15px; --text-body: 14px; --text-body-sm: 13.5px;
  --text-caption: 13px; --text-micro: 12.5px; --text-nano: 11.5px;
  --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --leading-tight: 1.1; --leading-heading: 1.25; --leading-body: 1.43; --leading-relaxed: 1.5; --leading-agent: 1.7;
  --tracking-body: .16px; --tracking-display: -.2px; --tracking-hero: -1.6px; --tracking-eyebrow: .6px;

  /* ---- Space (px) ---- */
  --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px;
  --space-7: 14px; --space-8: 16px; --space-9: 18px; --space-10: 22px; --space-11: 24px; --space-12: 40px;

  /* ---- Radii: actions are pills (height / 2); fields are soft rectangles ---- */
  --radius-panel: 28px; --radius-dialog: 28px; --radius-card: 24px; --radius-block: 24px;
  --radius-section: 22px; --radius-well: 18px; --radius-row: 16px; --radius-menu: 14px;
  --radius-tile: 11px; --radius-chiptile: 10px; --radius-field: 10px; --radius-token: 10px;
  --radius-option: 9px; --radius-check: 6px; --radius-bubble: 18px 18px 6px 18px; --radius-bubble-in: 18px 18px 18px 6px;

  /* ---- Sizes ---- */
  --h-control-xs: 24px; --h-control-sm: 28px; --h-control: 36px; --h-control-lg: 38px; --h-control-xl: 40px; --h-field-xl: 44px;
  --h-row: 56px; --h-row-lg: 64px; --h-nav-item: 36px; --h-step-node: 34px;
  --w-sidebar: 224px; --w-sidebar-collapsed: 64px;
  --w-agent: 340px; --w-agent-wide: 560px; --w-agent-max: 840px;
  --w-dialog-lg: 980px; --w-dialog-md: 504px; --w-dialog-sm: 420px; --w-drawer: 820px;
  --w-prose: 64ch; --w-sentence: 920px;
  --w-setup-aside: 300px; --h-setup-log: 240px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.32,.72,0,1);
  --ease-reveal: cubic-bezier(.16,1,.3,1);
  --dur-press: .15s; --dur-fast: .15s; --dur-base: .2s; --dur-state: .3s; --dur-fold: .45s;
  --dur-land: .5s; --dur-agent: .36s; --dur-desk: .6s; --dur-spin: 1s; --dur-shimmer: 1.5s; --dur-pulse: 1.6s;
  --press-scale: .97;
  --shimmer: linear-gradient(90deg, rgba(var(--mute-rgb),.08) 25%, rgba(var(--mute-rgb),.16) 50%, rgba(var(--mute-rgb),.08) 75%);

  /* ---- Stacking ---- */
  --z-sticky: 4; --z-menu: 30; --z-drawer: 35; --z-editor: 40; --z-dialog: 80; --z-toast: 90; --z-tour: 95;
}

/* ===================== data in CSS: data-o-vars (no style attributes) =====================
   The product's content security policy allows no style attributes. A component that needs a
   value in CSS (a bar's width, a grid's columns, a word's delay, a swatch's colour) renders
   data-o-vars="--o-value:51;--o-cols:minmax(0,1fr) auto" (Go: ui.Var / ui.Vars), and ui.js sets
   each pair through the CSSOM on load and on every swap. Names must start with --o-; values
   may use letters, digits, spaces and # % . , ( ) ' " _ - only, and never url(, image(,
   expression or @import; anything else is ignored. CSS reads them as usual: var(--o-value). */
/* ===================== keyframes (names kept from v0) ===================== */
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes land { from { opacity: 0; transform: translateY(18px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ddin { from { opacity: 0; transform: translateY(-4px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes slidein { from { opacity: 0; transform: translateX(24px) } to { opacity: 1; transform: none } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes shimmer { 0% { background-position: 150% 0 } 100% { background-position: -50% 0 } }
@keyframes ring { 0%,100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--indigo) 16%, transparent) } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--indigo) 6%, transparent) } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent) } 50% { box-shadow: 0 0 0 6px transparent } }
@keyframes glow { 0% { background: color-mix(in srgb, var(--green) 16%, transparent) } 100% { background: transparent } }
@keyframes grow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
@keyframes wordIn { 0% { opacity: 0; transform: translateY(14px); filter: blur(5px) } 100% { opacity: 1; transform: none; filter: blur(0) } }
@keyframes orbIn { 0% { opacity: 0; transform: scale(.4) rotate(-40deg) } 100% { opacity: 1; transform: scale(1) rotate(0) } }
@keyframes orbOut { 0% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0) } 100% { opacity: 0; transform: scale(2.2) rotate(90deg); filter: blur(10px) } }
@keyframes symSpin { 0% { transform: rotate(0deg) scale(1) } 50% { transform: rotate(180deg) scale(1.12) } 100% { transform: rotate(360deg) scale(1) } }
@keyframes symGlow { 0%,100% { opacity: .35; transform: scale(.9) } 50% { opacity: .9; transform: scale(1.35) } }
@keyframes avBlink { 0%,91%,100% { transform: scaleY(1) } 94% { transform: scaleY(.1) } }
@keyframes avWander { 0%,28%,100% { transform: translate(0,0) } 36%,50% { transform: translate(1.7px,-.7px) } 58%,72% { transform: translate(-1.7px,.3px) } 80% { transform: translate(0,0) } }
@keyframes avScan { 0%,100% { transform: translate(-1.9px,.5px) } 50% { transform: translate(1.9px,.5px) } }
@keyframes avRock { 0%,100% { transform: rotate(-4deg) } 50% { transform: rotate(4deg) } }
@keyframes avBreath { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

/* ===================== base ===================== */
.o-root, .o-root *, .o-root *::before, .o-root *::after { box-sizing: border-box }
.o-root { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--fg); -webkit-font-smoothing: antialiased }
.o-root :where(button, input, select, textarea) { font: inherit; letter-spacing: inherit; color: inherit }
.o-root :where(input, textarea)::placeholder { color: var(--fg-4) }
.o-root :where(a) { color: var(--blue); text-decoration: none }
html, body { height: 100%; margin: 0 }
body { background: var(--bg-solid) }
:where(.o-root) :focus-visible { outline: var(--focus-outline); outline-offset: 2px }
/* Inputs that sit inside a styled field draw no outline of their own: the field shows focus. */
:where(.o-search, .o-affix, .o-composer__field, .o-menu__search) :is(input, textarea):focus-visible, .o-rich:focus-visible, .o-input:focus-visible { outline: none }
.o-root ::selection { background: color-mix(in srgb, var(--blue) 20%, transparent) }
.o-num { font-variant-numeric: tabular-nums }
.o-spin { animation: spin var(--dur-spin) linear infinite }
.o-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.o-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color var(--dur-state) ease }
.o-scroll:hover { scrollbar-color: rgba(var(--mute-rgb),.22) transparent }
.o-glass { -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass) }
.o-collapse { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 0fr; transition: grid-template-rows var(--dur-fold) var(--ease-out) }
.o-collapse > * { min-height: 0; min-width: 0; overflow: hidden }
.o-collapse[data-open] { grid-template-rows: 1fr }
.o-sep { opacity: .45 }

/* ===================== tones: one attribute drives ink, tint and solid ===================== */
[data-tone] { --tone: var(--fg-2); --tone-tint: var(--wash); --tone-solid: rgba(var(--mute-rgb),.45) }
[data-tone="blue"]   { --tone: var(--blue);   --tone-tint: var(--blue-tint);   --tone-solid: var(--blue) }
[data-tone="indigo"] { --tone: var(--indigo); --tone-tint: var(--indigo-tint); --tone-solid: var(--indigo) }
[data-tone="green"]  { --tone: var(--ok);     --tone-tint: var(--green-tint);  --tone-solid: var(--green) }
[data-tone="orange"] { --tone: var(--orange); --tone-tint: var(--orange-tint); --tone-solid: var(--orange) }
[data-tone="amber"]  { --tone: var(--amber);  --tone-tint: var(--amber-tint);  --tone-solid: var(--amber) }
[data-tone="danger"] { --tone: var(--danger); --tone-tint: var(--danger-tint); --tone-solid: var(--danger) }
[data-tone="find"]   { --tone: var(--find);   --tone-tint: var(--find-tint);   --tone-solid: var(--find) }
[data-tone="muted"]  { --tone: var(--fg-2);   --tone-tint: var(--wash);        --tone-solid: rgba(var(--mute-rgb),.45) }
[data-tone="profile"]     { --tone: var(--c-profile);     --tone-solid: var(--c-profile) }
[data-tone="activity"]    { --tone: var(--c-activity);    --tone-solid: var(--c-activity) }
[data-tone="purchases"]   { --tone: var(--c-purchases);   --tone-solid: var(--c-purchases) }
[data-tone="products"]    { --tone: var(--c-products);    --tone-solid: var(--c-products) }
[data-tone="predictions"] { --tone: var(--c-predictions); --tone-solid: var(--c-predictions) }
[data-tone="reach"]       { --tone: var(--c-reach);       --tone-solid: var(--c-reach) }
[data-tone="lists"]       { --tone: var(--c-lists);       --tone-solid: var(--c-lists) }
[data-tone="profile"],[data-tone="activity"],[data-tone="purchases"],[data-tone="products"],[data-tone="predictions"],[data-tone="reach"],[data-tone="lists"] { --tone-tint: color-mix(in srgb, var(--tone) 13%, transparent) }

/* ===================== surfaces ===================== */
.o-panel { position: relative; min-width: 0; border-radius: var(--radius-panel); background: var(--surface-main); box-shadow: var(--shadow-card); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass) }
.o-panel--nav { background: var(--surface-nav) }
.o-panel--agent { background: var(--surface-agent); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); box-shadow: inset 0 1px 0 rgba(var(--glass-rgb),.75), inset 0 0 0 .5px rgba(var(--glass-rgb),.6), 0 14px 40px -20px rgba(var(--shadow-rgb),.35) }
.o-card { min-width: 0; border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-card); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass) }
.o-card--list { padding: 6px; display: flex; flex-direction: column }
.o-block { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-block); background: var(--surface-block); box-shadow: var(--shadow-block); animation: land var(--dur-land) var(--ease-out) both }
.o-section { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 16px; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block) }
.o-section__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-height: 24px }
.o-section__title { font-size: var(--text-caption); color: var(--fg-2) }
.o-section__title--strong { font-size: 16px; font-weight: var(--weight-medium); color: var(--fg) }
.o-section__note { font-size: 12px; color: var(--fg-4) }
.o-section__link { margin-left: auto; font-size: var(--text-micro); color: var(--blue); cursor: pointer; background: none; border: 0; padding: 0 }
.o-well { display: flex; flex-direction: column; border-radius: var(--radius-well); background: var(--surface-well); box-shadow: inset 0 0 0 .5px var(--line) }
.o-strip { display: flex; align-items: center; flex-wrap: wrap; column-gap: 14px; row-gap: 4px; min-height: 38px; padding: 9px 16px; border-radius: 19px; background: var(--surface-strip); box-shadow: inset 0 0 0 .5px rgba(var(--glass-rgb),.5) }
@media (prefers-reduced-transparency: reduce) { .o-panel, .o-card, .o-glass, .o-dialog, .o-menu, .o-drawer__panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--bg-solid) !important } }

/* ===================== icons ===================== */
.o-tileicon { --s: 30px; flex: none; width: var(--s); height: var(--s); border-radius: var(--radius-chiptile); display: inline-flex; align-items: center; justify-content: center; color: var(--tone); background: var(--tone-tint) }
.o-tileicon .ti { font-size: 15px }
.o-tileicon--sm { --s: 24px; border-radius: 8px } .o-tileicon--sm .ti { font-size: 13px }
.o-tileicon--md { --s: 32px; border-radius: var(--radius-tile) } .o-tileicon--md .ti { font-size: 16px }
.o-tileicon--lg { --s: 44px; border-radius: 14px; background: rgba(var(--glass-rgb),.8); box-shadow: 0 8px 20px -12px rgba(var(--shadow-rgb),.4) } .o-tileicon--lg .ti { font-size: 22px }
.o-tileicon--round { border-radius: 50% }
.o-tileicon--solid { color: var(--on-accent); background: var(--tone-solid) }

/* ===================== buttons ===================== */
.o-btn { --h: var(--h-control); flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h); padding: 0 14px; border: 0; border-radius: calc(var(--h) / 2); background: transparent; color: var(--fg); font-size: var(--text-body-sm); font-weight: var(--weight-regular); letter-spacing: 0; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; transition: transform var(--dur-press) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, color var(--dur-fast) ease, filter var(--dur-fast) ease }
.o-btn .ti { font-size: 15px }
.o-btn:active { transform: scale(var(--press-scale)) }
.o-btn:disabled, .o-btn[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; pointer-events: none }
.o-btn--xs { --h: var(--h-control-xs); padding: 0 9px; font-size: var(--text-micro); gap: 4px } .o-btn--xs .ti { font-size: 13px }
.o-btn--sm { --h: var(--h-control-sm); padding: 0 11px; font-size: var(--text-caption); gap: 5px } .o-btn--sm .ti { font-size: 14px }
.o-btn--lg { --h: var(--h-control-lg); padding: 0 18px; font-size: var(--text-body); gap: 7px }
.o-btn--block { width: 100% }
.o-btn--primary { color: var(--on-accent); background: var(--blue); font-weight: var(--weight-medium); box-shadow: var(--shadow-primary) }
.o-btn--primary:hover { filter: brightness(1.06) }
.o-btn--confirm { color: var(--on-accent); background: var(--green); font-weight: var(--weight-medium) }
.o-btn--danger { color: var(--on-accent); background: var(--danger); font-weight: var(--weight-medium) }
.o-btn--danger:hover, .o-btn--confirm:hover { filter: brightness(1.06) }
.o-btn--glass { background: rgba(var(--glass-rgb),.7); box-shadow: inset 0 1px 0 rgba(var(--glass-rgb),.7), var(--ring-control), 0 8px 20px -14px rgba(var(--shadow-rgb),.4) }
.o-btn--glass:hover { background: rgba(var(--glass-rgb),.92) }
.o-btn--soft { background: rgba(var(--glass-rgb),.5); box-shadow: var(--ring-control) }
.o-btn--soft:hover { background: rgba(var(--glass-rgb),.75) }
.o-btn--ghost { color: var(--blue) }
.o-btn--ghost:hover { background: var(--sel) }
.o-btn--muted { color: var(--fg-2) }
.o-btn--muted:hover { color: var(--fg); background: var(--wash-hover) }
.o-btn--danger-ghost { color: var(--danger) }
.o-btn--danger-ghost:hover { background: var(--danger-wash) }
.o-btn--outline { box-shadow: var(--ring-outline) }
.o-btn--outline:hover { color: var(--blue); background: var(--chip); box-shadow: inset 0 0 0 1px var(--sel-ring), 0 4px 10px -6px rgba(var(--shadow-rgb),.3); transform: translateY(-1px) }
.o-btn--outline-primary { color: var(--blue); font-weight: var(--weight-medium); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent) }
.o-btn--outline-primary:hover { background: var(--sel); transform: translateY(-1px) }
.o-btn--chip { --h: 32px; padding: 0 13px 0 11px; gap: 7px; font-size: var(--text-body); background: var(--chip); box-shadow: inset 0 0 0 1px rgba(var(--mute-rgb),.14), 0 1px 2px rgba(var(--shadow-rgb),.06) }
.o-btn--chip:hover { background: rgba(var(--glass-rgb),.9); transform: translateY(-1px) }
.o-btn__lead { color: var(--tone, currentColor) }
.o-btn__trail { font-size: 13px !important; opacity: .8 }
.o-btn[aria-busy="true"] { pointer-events: none }
.o-btn[aria-busy="true"] .ti { animation: spin var(--dur-spin) linear infinite }

.o-iconbtn { --s: 32px; flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fg-3); cursor: pointer; transition: transform var(--dur-press) ease, background var(--dur-base) ease, color var(--dur-base) ease, box-shadow var(--dur-base) ease }
.o-iconbtn .ti { font-size: 17px }
.o-iconbtn:hover { color: var(--fg); background: var(--surface-hover) }
.o-iconbtn:active { transform: scale(.94) }
.o-iconbtn[aria-pressed="true"], .o-iconbtn[aria-expanded="true"] { color: var(--indigo); background: var(--indigo-tint) }
.o-iconbtn--sm { --s: 28px } .o-iconbtn--sm .ti { font-size: 15px }
.o-iconbtn--sm:hover { background: var(--wash-hover) }
.o-iconbtn--md { --s: 36px } .o-iconbtn--md .ti { font-size: 18px }
.o-iconbtn--square { border-radius: 14px }
.o-iconbtn--glass { --s: 40px; color: rgba(var(--mute-rgb),.75); background: rgba(var(--glass-rgb),.5); box-shadow: var(--shadow-button); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong) }
.o-iconbtn--glass .ti { font-size: 18px }
.o-iconbtn--glass:hover { background: rgba(var(--glass-rgb),.75) }
.o-iconbtn--glass[aria-pressed="true"] { color: var(--fg); background: rgba(var(--glass-rgb),.85); box-shadow: inset 0 0 0 1px rgba(var(--mute-rgb),.35) }
.o-iconbtn--outline { color: var(--fg-2); background: rgba(var(--glass-rgb),.6); box-shadow: inset 0 0 0 .5px var(--line-strong) }
.o-iconbtn--danger:hover { color: var(--danger); background: var(--danger-wash) }
.o-iconbtn--accent { color: var(--blue) } .o-iconbtn--accent:hover { background: var(--sel) }
.o-count { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--on-accent); background: var(--badge); box-shadow: 0 0 0 2px var(--bg-solid) }

.o-capsule { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 20px; background: color-mix(in srgb, var(--green) 9%, transparent); animation: fade var(--dur-fast) ease both }
.o-capsule__q { padding: 0 6px 0 10px; font-size: var(--text-caption); color: var(--ok) }
.o-capsule--danger { background: color-mix(in srgb, var(--danger) 8%, transparent) } .o-capsule--danger .o-capsule__q { color: var(--danger) }

/* ===================== avatar ===================== */
.o-avatar { --s: 32px; flex: none; width: var(--s); height: var(--s); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--s) * .36); font-weight: var(--weight-semibold); letter-spacing: 0; color: var(--on-accent); background: var(--av-4) }
.o-avatar--xs { --s: 18px; font-size: 8.5px } .o-avatar--sm { --s: 22px; font-size: 9.5px } .o-avatar--md { --s: 26px; font-size: 10px }
.o-avatar--lg { --s: 40px; font-size: 13px } .o-avatar--xl { --s: 64px; font-size: 21px; font-weight: var(--weight-medium); background: linear-gradient(145deg, color-mix(in srgb, var(--indigo) 70%, white), var(--indigo)); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--indigo) 70%, transparent) }
.o-avatar--system { color: var(--fg-2); background: var(--wash-hover) }
.o-avatar[data-av="1"] { background: var(--av-1) } .o-avatar[data-av="2"] { background: var(--av-2) } .o-avatar[data-av="3"] { background: var(--av-3) }
.o-avatar[data-av="4"] { background: var(--av-4) } .o-avatar[data-av="5"] { background: var(--av-5) } .o-avatar[data-av="6"] { background: var(--av-6) } .o-avatar[data-av="7"] { background: var(--av-7) }
.o-wstile { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--weight-semibold); color: var(--on-accent); background: var(--blue) }

/* ===================== pills, tags, badges ===================== */
.o-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: var(--text-micro); white-space: nowrap; color: var(--tone); background: var(--tone-tint); transition: background var(--dur-state) ease, color var(--dur-state) ease }
.o-pill .ti { font-size: 12px }
.o-pill--sm { height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px }
.o-pill__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tone-solid) }
.o-pill--live .o-pill__dot { animation: pulse 2s ease infinite; color: var(--tone-solid) }
.o-tag { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; font-size: 11px; color: var(--tone, var(--blue)); background: var(--tone-tint, var(--blue-tint)) }
.o-tag--md { height: 20px; padding: 0 8px; border-radius: 10px; font-size: var(--text-nano) }
.o-tag--neutral { color: var(--fg-2); background: var(--wash); height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px }
.o-tag--outline { color: var(--fg); background: none; height: 26px; padding: 0 11px; border-radius: 13px; font-size: var(--text-micro); box-shadow: inset 0 0 0 1px var(--line-strong) }
.o-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; color: var(--fg-2); background: var(--wash-hover) }
.o-badge--alert { color: var(--on-accent); background: var(--orange) }
.o-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tone-solid, var(--fg-4)) }
.o-dot--ring { background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--mute-rgb),.3) }
.o-live { display: inline-flex; align-items: center; gap: 9px } .o-live .o-dot { background: var(--ok); animation: avBreath var(--dur-pulse) ease-in-out infinite }
.o-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tone) } .o-status .ti { font-size: 13px }

/* ===================== form fields ===================== */
.o-field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.o-label { font-size: var(--text-micro); color: var(--fg-2) }
.o-hint { font-size: 12px; line-height: 1.45; color: var(--fg-3) }
.o-error { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--danger) } .o-error .ti { font-size: 13px }
.o-input { height: var(--h-control); width: 100%; min-width: 0; padding: 0 12px; border: 0; outline: none; border-radius: var(--radius-field); font-size: var(--text-body-sm); color: var(--fg); background: var(--surface-field); box-shadow: var(--ring-control), 0 1px 2px rgba(var(--shadow-rgb),.06); transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease }
.o-input:hover { box-shadow: var(--ring-control-hover), 0 1px 2px rgba(var(--shadow-rgb),.08) }
.o-input:focus, .o-input:focus-within { background: var(--surface-field-focus); box-shadow: var(--focus-field); outline: none }
.o-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--danger) }
.o-input:disabled { opacity: .45 }
textarea.o-input { height: auto; min-height: 80px; padding: 10px 12px; line-height: 1.55; resize: vertical }
.o-input--auto { width: auto }
.o-input--title { height: 28px; max-width: 380px; margin-left: -8px; padding: 0 8px; border-radius: 8px; font-size: var(--text-body-lg); background: transparent; box-shadow: none; text-overflow: ellipsis }
.o-input--title:hover { background: var(--surface-hover); box-shadow: none }
.o-input--title:focus { background: var(--surface-field-focus); box-shadow: inset 0 0 0 1.5px var(--blue) }
.o-input--hero { height: auto; padding: 9px 14px; border-radius: 14px; font-size: var(--text-title); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); line-height: 1.3; background: rgba(var(--glass-rgb),.5); box-shadow: inset 0 0 0 .5px var(--line-strong) }
.o-affix { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: var(--h-control) } .o-affix input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: var(--text-body-sm); height: 100% } .o-affix span { color: var(--fg-3); font-size: var(--text-caption) }
.o-search { display: flex; align-items: center; gap: 9px; height: 38px; min-width: 0; padding: 0 14px; border-radius: 19px; background: rgba(var(--glass-rgb),.55); box-shadow: inset 0 0 0 .5px rgba(var(--mute-rgb),.14); transition: box-shadow var(--dur-fast) ease }
.o-search:focus-within { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 50%, transparent) }
.o-search > .ti { flex: none; font-size: 16px; color: var(--fg-3) }
.o-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; font-size: var(--text-body-sm) }
.o-search--sm { height: 34px; padding: 0 12px; border-radius: 17px; background: var(--surface-field); box-shadow: var(--ring-control), 0 1px 2px rgba(var(--shadow-rgb),.06) }
.o-search--global { height: var(--h-field-xl); border-radius: 22px; padding: 0 14px; gap: 10px; background: rgba(var(--glass-rgb),.5); box-shadow: var(--shadow-button); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong) }
.o-search--global > .ti { font-size: 18px } .o-search--global input { font-size: 15px }
.o-kbd { flex: none; padding: 2px 7px; border-radius: 7px; font-size: 11px; color: var(--fg-4); box-shadow: inset 0 0 0 .5px rgba(var(--mute-rgb),.25) }

.o-select { width: 320px; max-width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--h-control); padding: 0 12px 0 14px; border: 0; border-radius: var(--radius-field); cursor: pointer; font-size: var(--text-body-sm); text-align: left; color: var(--fg); background: var(--surface-field); box-shadow: var(--ring-control), 0 1px 2px rgba(var(--shadow-rgb),.06); transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease }
.o-select:hover { box-shadow: var(--ring-control-hover), 0 1px 2px rgba(var(--shadow-rgb),.08) }
.o-select[aria-expanded="true"] { background: var(--surface-field-focus); box-shadow: var(--focus-field) }
.o-select > .ti { font-size: 13px; opacity: .45 }
.o-select--empty > span:first-child { color: var(--blue) }
.o-select--auto { width: auto }

.o-check { flex: none; appearance: none; -webkit-appearance: none; margin: 0; width: 18px; height: 18px; border-radius: var(--radius-check); cursor: pointer; display: inline-grid; place-content: center; background: rgba(var(--glass-rgb),.8); box-shadow: inset 0 0 0 1px rgba(var(--mute-rgb),.28); transition: background var(--dur-fast) ease }
.o-check::before { content: ""; width: 10px; height: 6px; border: solid var(--on-accent); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--dur-fast) ease }
.o-check:checked, .o-check:indeterminate { background: var(--blue); box-shadow: none }
.o-check:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1) }
.o-check:indeterminate::before { width: 9px; height: 0; border-width: 0 0 2px 0; transform: none }
.o-check--round { width: 22px; height: 22px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(var(--mute-rgb),.3) }
.o-switch { flex: none; appearance: none; -webkit-appearance: none; margin: 0; position: relative; width: 44px; height: 26px; border-radius: 13px; cursor: pointer; background: rgba(var(--mute-rgb),.2); transition: background var(--dur-base) ease }
.o-switch::before { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px -2px rgba(var(--shadow-rgb),.6); transition: transform var(--dur-base) var(--ease-out) }
.o-switch:checked { background: var(--green) }
.o-switch:checked::before { transform: translateX(18px) }
.o-switch--sm { width: 34px; height: 20px; border-radius: 10px } .o-switch--sm::before { top: 2px; left: 2px; width: 16px; height: 16px }
.o-switch--sm:checked::before { transform: translateX(14px) }
.o-switch--danger:checked { background: var(--danger) }
.o-switch:disabled { opacity: .45; cursor: default }
.o-togglerow { display: flex; align-items: center; gap: 12px; min-height: 58px; cursor: pointer; border-bottom: .5px solid var(--line-faint) }
.o-togglerow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px } .o-togglerow__label { font-size: var(--text-body-sm) } .o-togglerow__hint { font-size: 12px; color: var(--fg-3) }

.o-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; cursor: pointer; font-size: var(--text-caption); white-space: nowrap; color: var(--fg); background: rgba(var(--glass-rgb),.85); box-shadow: inset 0 0 0 .5px rgba(var(--mute-rgb),.22), 0 1px 2px rgba(var(--shadow-rgb),.05); transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, color var(--dur-fast) ease }
.o-chip .ti { font-size: 14px }
.o-chip:hover { background: rgba(var(--glass-rgb),.95) }
.o-chip[aria-pressed="true"], .o-chip[aria-checked="true"] { color: var(--blue); background: var(--sel-strong); box-shadow: inset 0 0 0 1px var(--sel-ring) }
.o-chip--exclude[aria-pressed="true"] { color: var(--orange); background: var(--exclude-sel); box-shadow: inset 0 0 0 1px var(--exclude-ring) }
.o-chip__count { font-size: var(--text-nano); opacity: .6; font-variant-numeric: tabular-nums }
.o-chip--quiet { color: var(--fg-2); background: rgba(var(--glass-rgb),.4); box-shadow: inset 0 0 0 .5px var(--line) }
.o-chip--quiet[aria-pressed="true"] { color: var(--fg); background: var(--surface-raised); box-shadow: var(--shadow-raised) }
.o-chip--menu { height: var(--h-control); padding: 0 12px 0 14px; border-radius: 18px; font-size: var(--text-body-sm); gap: 6px; background: var(--surface-field) }
.o-chip--menu > .ti:last-child { font-size: 13px; opacity: .45 }
.o-chip--menu.has-value { color: var(--blue); background: var(--sel); box-shadow: inset 0 0 0 .5px var(--sel-ring) }
.o-chip--menu[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent), inset 0 0 0 1px var(--blue) }
.o-chip--merge { height: 28px; padding: 0 11px 0 9px; border-radius: 14px; font-size: var(--text-micro); color: var(--indigo); background: color-mix(in srgb, var(--indigo) 8%, transparent); box-shadow: none }
.o-chip--merge:hover { background: color-mix(in srgb, var(--indigo) 15%, transparent) } .o-chip--merge .ti { font-size: 12px }
.o-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px }

.o-stepper { display: inline-flex; align-items: center; gap: 2px; height: var(--h-control); padding: 0 4px; border-radius: var(--radius-field); background: var(--surface-field); box-shadow: var(--ring-control), 0 1px 2px rgba(var(--shadow-rgb),.06) }
.o-stepper button { width: 28px; height: 28px; border: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fg-2); background: none }
.o-stepper button:hover { color: var(--fg); background: var(--wash-hover) } .o-stepper button .ti { font-size: 13px }
.o-stepper output { min-width: 70px; text-align: center; font-size: var(--text-body-sm); font-variant-numeric: tabular-nums }

.o-frow { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; flex-wrap: wrap }
.o-frow__label { flex: none; width: 84px; min-height: var(--h-control); display: flex; align-items: center; font-size: var(--text-caption); color: var(--fg-2) }
.o-frow__ctl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: var(--h-control) }
.o-frow__join { font-size: var(--text-body-sm); color: var(--fg-2) }
.o-fdiv { height: .5px; margin: 8px 0; background: var(--line) }

.o-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 0; border-radius: 18px; text-align: left; cursor: pointer; background: rgba(var(--glass-rgb),.45); box-shadow: inset 0 1px 0 rgba(var(--glass-rgb),.8), inset 0 0 0 .5px rgba(var(--glass-rgb),.6), 0 8px 22px -18px rgba(var(--shadow-rgb),.35); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) ease, box-shadow var(--dur-base) ease }
.o-choice:hover { background: rgba(var(--glass-rgb),.75) }
.o-choice__head { display: flex; align-items: center; gap: 10px }
.o-choice__name { font-size: var(--text-body-lg) }
.o-choice__desc { font-size: var(--text-micro); line-height: 1.4; color: var(--fg-2); text-wrap: pretty }
.o-choice .o-tileicon { --s: 30px; border-radius: 50%; color: var(--tone); background: var(--wash); transition: background .22s ease, color .22s ease }
.o-choice[aria-checked="true"] { transform: translateY(-2px); background: rgba(var(--glass-rgb),.8); box-shadow: inset 0 1px 0 rgba(var(--glass-rgb),.8), inset 0 0 0 1.5px var(--tone-solid), 0 14px 30px -20px rgba(var(--shadow-rgb),.5) }
.o-choice[aria-checked="true"] .o-tileicon { color: var(--on-accent); background: var(--tone-solid) }
.o-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px }

.o-swatch { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--o-sw); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); transition: box-shadow var(--dur-fast) ease }
.o-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg-solid), 0 0 0 4px var(--o-sw) }
.o-swatch--custom[aria-checked="true"], .o-swatch--custom[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--bg-solid), 0 0 0 4px var(--fg) }
.o-swatch--custom { --o-sw: conic-gradient(from 180deg, #ff3b30, #ffcc00, #34c759, #00c7be, #0071e3, #5e5ce6, #ff2d55, #ff3b30); background: var(--o-sw) }

/* rich text with merge tags (SMS, push, email blocks) */
.o-rich { min-height: 140px; padding: 18px 22px 20px; outline: none; font-size: 15px; line-height: 1.75; white-space: pre-wrap; word-break: break-word }
.o-rich:empty::before { content: attr(data-placeholder); color: var(--fg-4); pointer-events: none }
.o-mtag { display: inline-flex; align-items: center; margin: 0 1px; padding: 0 8px; height: 1.55em; line-height: 1.55em; vertical-align: baseline; border-radius: 7px; font-size: .92em; white-space: nowrap; user-select: all; color: var(--indigo); background: var(--merge-tag); box-shadow: inset 0 0 0 .5px var(--merge-tag-ring) }
.o-composecard { border-radius: var(--radius-section); background: rgba(var(--glass-rgb),.88); box-shadow: inset 0 0 0 .5px rgba(var(--mute-rgb),.12), 0 1px 2px rgba(var(--shadow-rgb),.05), 0 24px 48px -32px rgba(var(--shadow-rgb),.45) }
.o-composecard__bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 16px 14px 22px; border-top: .5px solid var(--line) }
.o-meter { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-micro); white-space: nowrap; color: var(--fg-2); font-variant-numeric: tabular-nums }
.o-meter__track { width: 44px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--wash-hover) }
.o-meter__fill { display: block; height: 100%; width: calc(var(--o-value, 0) * 1%); border-radius: 2px; background: var(--green) }
.o-meter.is-over { color: var(--orange) } .o-meter.is-over .o-meter__fill { background: var(--orange) }

/* ===================== navigation ===================== */
.o-shell { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 16px; height: 100%; overflow: hidden; color: var(--fg); background: var(--bg) }
.o-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--bg-glow) }
.o-shell__bar { flex: none; display: flex; align-items: center; gap: 16px }
.o-shell__logo { flex: none; min-width: var(--w-sidebar); height: 44px; display: flex; align-items: center; padding: 0 14px; transition: min-width var(--dur-state) var(--ease-out) }
.o-shell__logo img { height: 26px; width: auto }
.o-shell__body { flex: 1; min-height: 0; display: flex; gap: 16px }
.o-shell[data-nav="collapsed"] .o-shell__logo { min-width: var(--w-sidebar-collapsed) }
.o-nav { flex: none; width: var(--w-sidebar); display: flex; flex-direction: column; gap: 14px; padding: 12px; overflow: hidden; transition: width var(--dur-state) var(--ease-out) }
.o-shell[data-nav="collapsed"] .o-nav { width: var(--w-sidebar-collapsed) }
.o-shell[data-nav="collapsed"] .o-nav :where(.o-navitem__label, .o-ws__text, .o-ws > .ti, .o-nav__wide) { display: none }
.o-shell[data-nav="collapsed"] .o-nav__foot { flex-direction: column }
.o-nav__list { display: flex; flex-direction: column; gap: 2px }
.o-ws { display: flex; align-items: center; gap: 10px; padding: 8px 5px 2px; border: 0; background: none; text-align: left; cursor: pointer }
.o-ws__text { flex: 1; min-width: 0; display: flex; flex-direction: column } .o-ws__name { font-size: var(--text-caption); font-weight: var(--weight-semibold) } .o-ws__kind { font-size: 11px; color: var(--fg-2); margin-top: 1px }
.o-ws > .ti { font-size: 14px; color: var(--fg-4) }
.o-navitem { display: flex; align-items: center; gap: 10px; height: var(--h-nav-item); padding: 0 10px; border-radius: 16px; color: var(--fg); text-decoration: none; cursor: pointer; transition: background var(--dur-base) ease }
.o-root a.o-navitem { color: var(--fg) }
.o-navitem > .ti { flex: none; width: 20px; text-align: center; font-size: 17px; color: rgba(var(--mute-rgb),.7) }
.o-navitem__label { flex: 1; min-width: 0; font-size: var(--text-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.o-navitem:hover { background: rgba(var(--glass-rgb),.45) }
.o-navitem[aria-current="page"] { background: rgba(var(--glass-rgb),.8); box-shadow: var(--shadow-nav-active, inset 0 1px 0 rgba(var(--glass-rgb),.9), 0 6px 16px -10px rgba(var(--shadow-rgb),.4)) }
.o-navitem[aria-current="page"] > .ti { color: var(--blue) } .o-navitem[aria-current="page"] .o-navitem__label { font-weight: var(--weight-medium) }
.o-nav__foot { margin-top: auto; display: flex; align-items: center; gap: 2px; padding-top: 10px; border-top: .5px solid var(--line-strong) }
.o-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; padding: 16px 6px 0 18px; overflow: hidden }
.o-main__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 2px 14px 24px 0 }

.o-pagehead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 8px 14px }
.o-pagehead__text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.o-pagehead h1, .o-h1 { margin: 0; font-size: var(--text-h1); font-weight: var(--weight-light); letter-spacing: 0; line-height: 1.2 }
.o-pagehead__sub { font-size: var(--text-caption); color: var(--fg-2) }
.o-sectionhead { display: flex; align-items: flex-end; gap: 12px; padding: 0 12px; margin-bottom: 8px }
.o-sectionhead__title { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-title); padding-bottom: 8px }
.o-sectionhead__meta { padding-bottom: 13px; font-size: var(--text-caption); color: var(--fg-3) }
.o-crumb { display: flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); color: var(--fg-2) }
.o-root .o-crumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2) } .o-root .o-crumb a:hover { color: var(--blue) }
.o-crumb .ti { font-size: 14px } .o-crumb [aria-current] { color: var(--fg) }
.o-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: var(--text-caption); color: var(--fg-2) } .o-meta .ti { font-size: 14px }

.o-seg { flex: none; max-width: 100%; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 18px; overflow-x: auto; background: var(--wash) }
.o-seg__opt { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; cursor: pointer; font-size: var(--text-caption); white-space: nowrap; color: var(--fg-2); background: transparent; transition: background var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease }
.o-seg__opt .ti { font-size: 14px }
.o-seg__opt:hover { color: var(--fg) }
.o-seg__opt[aria-selected="true"], .o-seg__opt[aria-checked="true"], .o-seg__opt[aria-pressed="true"] { color: var(--fg); background: var(--surface-raised); box-shadow: var(--shadow-raised) }
.o-seg__count { font-size: var(--text-nano); color: var(--fg-4); font-variant-numeric: tabular-nums }
.o-seg--sm { border-radius: 11px } .o-seg--sm .o-seg__opt { height: 28px; border-radius: var(--radius-option) }
.o-seg--fill { display: flex; width: 100% } .o-seg--fill .o-seg__opt { flex: 1 }
.o-seg--glass { height: 34px; padding: 5px; border-radius: 17px; background: var(--glass-fill-track, rgba(var(--glass-rgb),.14)); box-shadow: inset 0 1px 0 rgba(var(--glass-rgb),.4), inset 0 0 0 .5px rgba(var(--glass-rgb),.3) }
.o-seg--glass .o-seg__opt { height: 24px; padding: 0 8px; border-radius: 12px; font-size: var(--text-micro); color: rgba(var(--mute-rgb),.55) }
.o-seg--glass .o-seg__opt[aria-selected="true"] { color: var(--fg); background: linear-gradient(160deg, rgba(var(--glass-rgb),.26), rgba(var(--glass-rgb),.08)); box-shadow: inset 0 1px 0 rgba(var(--glass-rgb),.75), inset 0 0 0 .5px rgba(var(--glass-rgb),.5), 0 2px 8px -5px rgba(var(--shadow-rgb),.25) }
.o-seg--collapse .o-seg__opt:not([aria-selected="true"]) .o-seg__label { display: none }

.o-tabs { display: flex; align-items: center; gap: 2px; border-bottom: .5px solid var(--line-strong) }
.o-tabs__tab { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; margin-bottom: -.5px; border: 0; background: none; cursor: pointer; font-size: var(--text-body); color: var(--fg-2) }
.o-tabs__tab:hover { color: var(--fg) }
.o-tabs__tab[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--blue) }

.o-wizard { display: flex; align-items: center; gap: 4px }
.o-wizard__step { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 8px; border: 0; border-radius: 17px; background: none; cursor: pointer; transition: background var(--dur-base) ease, opacity var(--dur-base) ease }
.o-wizard__step:disabled { opacity: .4; cursor: default }
.o-wizard__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--fg-2); background: rgba(var(--mute-rgb),.12) }
.o-wizard__dot .ti { font-size: 12px }
.o-wizard__label { font-size: var(--text-body-sm); white-space: nowrap; color: rgba(var(--mute-rgb),.62) }
.o-wizard__step[data-state="done"] .o-wizard__dot { color: var(--on-accent); background: var(--green) }
.o-wizard__step[aria-current="step"] { padding-right: 14px; background: rgba(var(--glass-rgb),.62); box-shadow: inset 0 0 0 .5px rgba(var(--glass-rgb),.7), 0 8px 20px -14px rgba(var(--shadow-rgb),.5) }
.o-wizard__step[aria-current="step"] .o-wizard__dot { color: var(--on-accent); background: var(--blue) }
.o-wizard__step[aria-current="step"] .o-wizard__label { color: var(--fg) }
.o-wizardbar { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 16px; border-bottom: .5px solid var(--line-strong); background: rgba(var(--glass-rgb),.1) }
.o-wizardbar > :first-child, .o-wizardbar > :last-child { flex: 1 0 auto; display: flex } .o-wizardbar > :last-child { justify-content: flex-end }
@container (max-width: 540px) { .o-wizard__step:not([aria-current="step"]) .o-wizard__label { display: none } }

.o-steps { display: flex; flex-direction: column }
.o-step { display: flex; gap: 16px; align-items: stretch }
.o-step__rail { flex: none; width: 34px; display: flex; flex-direction: column; align-items: center }
.o-step__node { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-micro); font-variant-numeric: tabular-nums; color: var(--fg-3); background: rgba(var(--glass-rgb),.45); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .4s ease, color .4s ease, box-shadow .4s ease }
.o-step__node .ti { font-size: 15px }
.o-step__line { flex: 1; width: 1.5px; margin: 6px 0; border-radius: 1px; background: rgba(var(--mute-rgb),.15); transition: background var(--dur-desk) ease }
.o-step:last-child .o-step__line { background: transparent }
.o-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px }
.o-step:last-child .o-step__body { padding-bottom: 0 }
.o-step__head { display: flex; align-items: center; gap: 10px; min-height: 34px; flex-wrap: wrap }
.o-step__label { font-size: var(--text-step); color: var(--fg-4); transition: color var(--dur-state) ease }
.o-step__time { margin-left: auto; font-size: var(--text-micro); color: var(--fg-3); font-variant-numeric: tabular-nums }
.o-step[data-state="done"] .o-step__node { color: var(--on-accent); background: var(--green); box-shadow: none }
.o-step[data-state="done"] .o-step__line { background: var(--green) }
.o-step[data-state="working"] .o-step__node { color: var(--on-accent); background: var(--indigo); box-shadow: none; animation: ring var(--dur-pulse) ease-in-out infinite }
.o-step[data-state="working"] .o-step__node .ti { animation: spin var(--dur-spin) linear infinite }
.o-step[data-state="working"] .o-step__line, .o-step[data-state="you"] .o-step__line { background: linear-gradient(color-mix(in srgb, var(--indigo) 70%, transparent), rgba(var(--mute-rgb),.15)) }
.o-step[data-state="you"] .o-step__node { color: var(--blue); background: rgba(var(--glass-rgb),.95); box-shadow: inset 0 0 0 1.5px var(--blue), 0 8px 20px -12px color-mix(in srgb, var(--blue) 60%, transparent) }
.o-step:not([data-state="pending"]) .o-step__label { color: var(--fg) }

/* ===================== data display ===================== */
.o-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px }
.o-kpi { overflow: hidden; padding: 16px 18px; display: flex; flex-direction: column }
.o-kpi__label { display: flex; align-items: center; gap: 9px; font-size: var(--text-body-lg) } .o-kpi__label .ti { font-size: 20px; color: var(--tone) }
.o-kpi__value { margin-top: 14px; font-size: clamp(30px, 3vw, var(--text-display)); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; white-space: nowrap }
.o-kpi__delta { margin-top: 12px; font-size: var(--text-body-sm); line-height: 1.45; color: var(--fg-2) }
.o-delta { white-space: nowrap; color: var(--ok) } .o-delta--down { color: var(--danger) } .o-delta .ti { font-size: 14px; vertical-align: -2px; margin-right: 2px }
.o-kpi__foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--text-body-sm); color: var(--fg-2) } .o-kpi__foot b { font-weight: 400; color: var(--fg); font-variant-numeric: tabular-nums }

.o-tiles { display: grid; grid-template-columns: repeat(var(--o-cols, 3), minmax(0,1fr)); gap: 1px; border-radius: 14px; overflow: hidden; background: rgba(var(--mute-rgb),.08) }
.o-tile { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 0; text-align: left; background: rgba(var(--glass-rgb),.72); color: var(--fg) }
button.o-tile { cursor: pointer } button.o-tile:hover { background: rgba(var(--glass-rgb),.95) }
.o-tile[aria-pressed="true"] { background: color-mix(in srgb, var(--blue) 9%, rgba(var(--glass-rgb),.72)) }
.o-tile__label { display: flex; align-items: center; gap: 6px; font-size: var(--text-micro); color: var(--fg-2) } .o-tile__label .ti { font-size: 14px }
.o-tile__value { font-size: 20px; font-weight: var(--weight-light); font-variant-numeric: tabular-nums; color: var(--tone, var(--fg)) }
.o-tile__sub { font-size: var(--text-nano); color: var(--fg-4) }
.o-tiles--lg .o-tile { padding: 14px 16px } .o-tiles--lg .o-tile__value { font-size: 22px } .o-tiles--lg { border-radius: 16px }
.o-herostats { display: flex; align-items: stretch } .o-herostat { display: flex; flex-direction: column; gap: 3px; padding: 0 24px; border-left: .5px solid var(--line-strong) } .o-herostat:first-child { border-left: 0; padding-left: 0 }
.o-herostat__label { font-size: var(--text-micro); color: var(--fg-3) } .o-herostat__value { font-size: var(--text-h1); font-weight: var(--weight-light); letter-spacing: -.6px; line-height: 1.1; font-variant-numeric: tabular-nums } .o-herostat__note { font-size: var(--text-micro); color: var(--tone, var(--fg-3)) }

.o-bignum { display: flex; align-items: baseline; gap: 10px }
.o-bignum__value { font-size: var(--text-hero); font-weight: var(--weight-light); letter-spacing: var(--tracking-hero); line-height: 1; font-variant-numeric: tabular-nums; transition: opacity var(--dur-base) ease }
.o-bignum__unit { font-size: 16px; color: var(--fg-2) }
.o-bignum--md .o-bignum__value { font-size: var(--text-display); letter-spacing: -.4px } .o-bignum--sm .o-bignum__value { font-size: 30px; letter-spacing: -.8px }
.htmx-request .o-bignum__value, .o-bignum.is-counting .o-bignum__value { opacity: .45 }
.o-updating { display: none; font-size: 12px; color: var(--fg-4); animation: fade var(--dur-base) ease both }
.htmx-request .o-updating, .htmx-request.o-updating { display: inline }

/* tables (grid based so columns can collapse per container width) */
.o-table { display: flex; flex-direction: column; border-radius: var(--radius-section); background: var(--surface-well); box-shadow: inset 0 1px 0 rgba(var(--glass-rgb),.8), inset 0 0 0 .5px var(--line), 0 14px 34px -26px rgba(var(--shadow-rgb),.4); container-type: inline-size }
.o-tr { display: grid; grid-template-columns: var(--o-cols); align-items: center; gap: 12px; min-height: var(--h-row); padding: 6px 18px; border-top: .5px solid var(--line-faint); color: var(--fg); transition: background var(--dur-fast) ease }
.o-root a.o-tr { color: var(--fg) }
.o-tr:is(a, [data-href]) { cursor: pointer } .o-tr:is(a, [data-href]):hover { background: rgba(var(--glass-rgb),.6) }
.o-tr[aria-selected="true"] { background: var(--sel) }
.o-tr--head { position: sticky; top: 0; z-index: var(--z-sticky); min-height: 40px; padding-top: 4px; padding-bottom: 0; border-top: 0; border-radius: var(--radius-section) var(--radius-section) 0 0; font-size: var(--text-nano); letter-spacing: .4px; text-transform: uppercase; color: var(--fg-4); background: rgba(var(--glass-rgb),.88); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px) }
.o-th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit }
.o-th-sort .ti { font-size: 12px; visibility: hidden } [aria-sort="ascending"] > .o-th-sort .ti, [aria-sort="descending"] > .o-th-sort .ti { visibility: visible }
.o-td-r { text-align: right; justify-self: end } .o-td-main { display: flex; align-items: center; gap: 11px; min-width: 0 }
.o-root a.o-td-stack { color: var(--fg) }
.o-td-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.o-td-stack > :is(.o-pill, .o-tag) { align-self: flex-start }
.o-td-title { font-size: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .o-td-sub { font-size: 12px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-td-muted { font-size: var(--text-micro); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-table__foot { padding: 10px 18px 12px; border-top: .5px solid var(--line-faint); font-size: var(--text-micro); color: var(--fg-3) }
.o-table__empty { display: flex; align-items: center; gap: 10px; min-height: var(--h-row); padding: 0 18px; font-size: var(--text-body-sm); color: var(--fg-2) } .o-table__empty .ti { font-size: 17px; color: var(--fg-4) }
@container (max-width: 820px) { .o-col-md { display: none !important } }
@container (max-width: 560px) { .o-col-sm { display: none !important } }
.o-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.o-bulkbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 36px; padding: 0 6px 0 14px; border-radius: 18px; background: rgba(var(--glass-rgb),.85); box-shadow: inset 0 0 0 .5px var(--line-strong), 0 10px 24px -18px rgba(var(--shadow-rgb),.5); animation: rise var(--dur-base) ease both }
.o-bulkbar__count { font-size: var(--text-body-sm); margin-right: 6px }

.o-lrow { display: flex; align-items: center; gap: 12px; min-height: var(--h-row-lg); padding: 11px 12px 11px 14px; border-radius: var(--radius-row); color: var(--fg); transition: background var(--dur-base) ease }
.o-lrow + .o-lrow { box-shadow: 0 -.5px 0 rgba(var(--mute-rgb),.15) }
.o-root a.o-lrow { color: var(--fg) } a.o-lrow:hover { background: rgba(var(--glass-rgb),.55) }
.o-lrow.is-new { animation: glow 4.5s ease-out both }
.o-lrow__main { flex: 1; min-width: 0 }
.o-lrow__title { display: flex; align-items: center; gap: 8px; font-size: var(--text-row) } .o-lrow__title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-lrow__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: var(--text-caption); color: var(--fg-2); white-space: nowrap; overflow: hidden } .o-lrow__meta .ti { font-size: 14px }
.o-lrow__stat { flex: none; text-align: right } .o-lrow__stat b { display: block; font-weight: 400; font-size: var(--text-row); font-variant-numeric: tabular-nums; color: var(--tone, var(--fg)) } .o-lrow__stat small { display: block; margin-top: 2px; font-size: var(--text-micro); color: var(--fg-4) }
.o-lrow__chev { flex: none; font-size: 15px; color: var(--fg-5) }
.o-lrow .o-bar { margin-top: 8px }

.o-signal { display: flex; align-items: center; gap: 12px; min-height: var(--h-row-lg); padding: 11px 8px 11px 14px; border-radius: var(--radius-row) }
.o-signal + .o-signal { box-shadow: 0 -.5px 0 rgba(var(--mute-rgb),.15) }
.o-signal > .ti { flex: none; font-size: 19px; color: var(--tone) }
.o-signal__main { flex: 1; min-width: 0 }
.o-signal__title { display: flex; align-items: center; gap: 8px; font-size: var(--text-row) }
.o-signal__detail { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: var(--text-caption); line-height: 1.4; color: rgba(var(--mute-rgb),.62); text-wrap: pretty }
.o-signal__action { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; font-size: var(--text-caption); white-space: nowrap; cursor: pointer; color: var(--tone); background: var(--tone-tint); transition: transform var(--dur-press) ease }
.o-signal__action:active { transform: scale(.96) }
.o-signal.is-new { animation: land .6s var(--ease-out) both }

.o-kv { display: flex; flex-direction: column; padding: 14px 0 6px }
.o-kv + .o-kv { border-top: .5px solid var(--line) }
.o-eyebrow { font-size: var(--text-nano); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(var(--mute-rgb),.48) }
.o-kv .o-eyebrow { padding-bottom: 6px }
.o-kv__row { display: flex; align-items: center; gap: 10px; min-height: 32px }
.o-kv__key { flex: none; width: 86px; font-size: var(--text-micro); color: var(--fg-3) }
.o-kv__val { flex: 1; min-width: 0; font-size: var(--text-body-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums }

/* bars and charts: CSS only, values arrive as --o-value (0–100) from the server */
.o-bar { position: relative; display: block; height: 4px; border-radius: 2px; overflow: hidden; background: var(--wash-hover) }
.o-bar__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--o-value, 0) * 1%); border-radius: inherit; background: var(--tone-solid, var(--green)); transition: width .4s var(--ease-out) }
.o-bar--3 { height: 3px } .o-bar--6 { height: 6px; border-radius: 3px } .o-bar--8 { height: 8px; border-radius: 4px } .o-bar--10 { height: 10px; border-radius: 5px }
.o-bar--goal { overflow: visible }
.o-bar__forecast { position: absolute; top: 0; bottom: 0; left: calc(var(--o-from) * 1%); width: calc(var(--o-value) * 1%); border-radius: 0 3px 3px 0; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--green) 30%, transparent) 0 4px, transparent 4px 7px) }
.o-bar__aim { position: absolute; top: -4px; bottom: -4px; left: calc(var(--o-value) * 1%); width: 2px; border-radius: 1px; background: rgba(var(--mute-rgb),.5) }
.o-barrows { display: flex; flex-direction: column; gap: 4px }
.o-barrow { display: grid; grid-template-columns: minmax(0,108px) minmax(0,1fr) 44px 14px; align-items: center; gap: 10px; height: 32px; padding: 0 8px; margin: 0 -8px; border: 0; border-radius: var(--radius-option); background: transparent; color: var(--fg); text-align: left; cursor: pointer; transition: background var(--dur-fast) ease }
.o-barrow:hover { background: rgba(var(--glass-rgb),.7) }
.o-barrow[aria-pressed="true"] { background: var(--sel) } .o-barrow[aria-pressed="true"] .o-barrow__label { color: var(--blue) }
.o-barrow__label { font-size: var(--text-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-barrow__track { height: 8px; border-radius: 4px; overflow: hidden; background: var(--wash) }
.o-barrow__fill { display: block; height: 100%; width: max(3%, calc(var(--o-value) * 1%)); border-radius: 4px; background: var(--tone-solid, var(--blue)); transition: width .35s var(--ease-out) }
.o-barrow__value { font-size: var(--text-micro); text-align: right; color: var(--fg-2); font-variant-numeric: tabular-nums }
.o-barrow > .ti { font-size: 13px; color: var(--fg-5) } .o-barrow[aria-pressed="true"] > .ti { color: var(--blue) }
.o-funnel .o-barrow { grid-template-columns: 96px minmax(0,1fr) 64px 52px 20px; height: 34px }
.o-funnel .o-barrow__track { height: 20px; border-radius: 6px; background: rgba(var(--mute-rgb),.06) }
.o-funnel .o-barrow__fill { border-radius: 6px; background: var(--blue); opacity: calc(.85 - var(--o-step, 0) * .14) }
.o-funnel .o-barrow:last-child .o-barrow__fill { opacity: 1 }
.o-funnel .o-barrow:last-child .o-barrow__fill { background: var(--green) }
.o-stack { display: flex; height: 10px; gap: 2px; border-radius: 5px; overflow: hidden }
.o-stack > span { flex: var(--o-flex) 1 0; min-width: 3px; background: var(--tone-solid) }
.o-stack--12 { height: 12px; border-radius: 6px } .o-stack--6 { height: 6px; border-radius: 3px }
.o-legend { display: flex; flex-wrap: wrap; gap: 6px 18px }
.o-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-caption); color: var(--fg-2) } .o-legend__item b { font-weight: 400; color: var(--fg); font-variant-numeric: tabular-nums }
.o-cols { display: grid; grid-template-columns: repeat(var(--o-n, 6), minmax(0,1fr)); gap: 6px; height: 150px }
.o-col { min-width: 0; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 6px 4px 4px; border: 0; border-radius: var(--radius-field); background: transparent; color: var(--fg-2); cursor: pointer }
.o-col:hover { background: rgba(var(--glass-rgb),.7) } .o-col[aria-pressed="true"] { background: var(--sel); color: var(--blue) }
.o-col__bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px }
.o-col__bar { width: 38%; max-width: 20px; height: max(2%, calc(var(--o-value) * 1%)); border-radius: 4px 4px 2px 2px; background: var(--tone-solid); transition: height .35s var(--ease-out) }
.o-col__bar--due { box-shadow: inset 0 0 0 1.5px var(--orange); background: repeating-linear-gradient(135deg, var(--exclude-sel) 0 5px, transparent 5px 10px) }
.o-col__label { font-size: 12px; text-align: center; font-variant-numeric: tabular-nums }
.o-cols--months { height: 128px; --o-n: 12 } .o-cols--months .o-col { cursor: default; padding: 0 } .o-cols--months .o-col__bar { width: 100%; max-width: 28px; border-radius: 7px } .o-cols--months .o-col__label { font-size: 11px; color: var(--fg-4) }
.o-cols--months .o-col__bar.is-muted { background: color-mix(in srgb, var(--indigo) 35%, transparent) }

/* timelines */
.o-tl { display: flex; flex-direction: column }
.o-tl__item { display: flex; align-items: stretch; gap: 14px }
.o-tl__rail { flex: none; width: 32px; display: flex; flex-direction: column; align-items: center }
.o-tl__rail::before, .o-tl__rail::after { content: ""; width: 1.5px; background: rgba(var(--mute-rgb),.18) }
.o-tl__rail::before { height: 12px } .o-tl__rail::after { flex: 1; min-height: 12px }
.o-tl__item:first-child .o-tl__rail::before, .o-tl__item:last-child .o-tl__rail::after { background: transparent }
.o-tl__node { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--tone); background: rgba(var(--glass-rgb),.9); box-shadow: inset 0 0 0 1px var(--line-strong) }
.o-tl__node .ti { font-size: 16px } .o-tl__node--solid { color: var(--on-accent); background: var(--tone-solid); box-shadow: none }
.o-tl__body { flex: 1; min-width: 0; display: flex; gap: 12px; padding: 12px 0 14px }
.o-tl__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.o-tl__when { font-size: var(--text-micro); color: var(--fg-3); font-variant-numeric: tabular-nums } .o-tl__title { font-size: 14.5px } .o-tl__sub { font-size: var(--text-micro); color: var(--fg-2) }
.o-tl__aside { flex: none; padding-top: 18px; text-align: right } .o-tl__aside b { display: block; font-weight: 400; font-size: var(--text-row); color: var(--tone, var(--fg)); font-variant-numeric: tabular-nums } .o-tl__aside small { font-size: 12px; color: var(--fg-4) }
.o-tl__total { display: flex; align-items: baseline; gap: 14px; padding: 12px 0 8px 46px; border-top: .5px solid var(--line); font-size: var(--text-body-sm); color: var(--fg-2) } .o-tl__total b { margin-left: auto; font-weight: 400; font-size: var(--text-row); color: var(--fg) }
.o-log { display: flex; flex-direction: column }
.o-log__item { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; animation: rise .25s ease both }
.o-log__text { font-size: var(--text-body-sm) } .o-log__meta { font-size: 12px; color: var(--fg-4) }

/* plain-language segment sentence */
.o-sentence { max-width: var(--w-sentence); margin: 0; font-size: var(--text-title); font-weight: var(--weight-light); line-height: 1.6; letter-spacing: var(--tracking-display); text-wrap: pretty }
.o-sentence--sm { font-size: 19px; letter-spacing: -.1px }
.o-sentence--exclude { font-size: 14.5px; font-weight: 400; letter-spacing: var(--tracking-body); line-height: 1.7; color: var(--fg-2) }
.o-phrase { display: inline; padding: 1px 7px; border: 0; border-radius: var(--radius-token); font: inherit; letter-spacing: inherit; cursor: pointer; color: var(--blue); background: var(--sel); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background var(--dur-base) ease, color var(--dur-base) ease, box-shadow var(--dur-base) ease }
.o-phrase:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 30%, transparent) }
.o-phrase[aria-expanded="true"] { color: var(--on-accent); background: var(--blue) }
.o-phrase--exclude { color: var(--orange); background: var(--exclude-sel) }
.o-phrase--exclude:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--orange) 30%, transparent) }
.o-phrase--exclude[aria-expanded="true"] { color: var(--on-accent); background: var(--orange) }
.o-adddetail { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; height: 30px; margin: 0 0 4px 10px; padding: 0 12px 0 8px; border: 0; border-radius: 15px; cursor: pointer; font-size: var(--text-body-sm); font-weight: 400; letter-spacing: 0; color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, transparent); transition: background var(--dur-fast) ease }
.o-adddetail:hover { background: color-mix(in srgb, var(--blue) 15%, transparent) } .o-adddetail .ti { font-size: 14px }
.o-optrows { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: var(--radius-well); background: var(--surface-well); box-shadow: var(--edge-block) }
.o-optrow { display: grid; grid-template-columns: 22px minmax(0,1fr) minmax(60px,220px) 64px; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border: 0; border-radius: 12px; cursor: pointer; text-align: left; color: var(--fg); background: transparent; transition: background var(--dur-fast) ease }
.o-optrow:hover { background: rgba(var(--glass-rgb),.8) }
.o-optrow[aria-checked="true"] { background: var(--sel) } .o-optrow[aria-checked="true"] .o-optrow__label { color: var(--blue) }
.o-optrow__tick { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); box-shadow: inset 0 0 0 1.5px rgba(var(--mute-rgb),.3); transition: background var(--dur-fast) ease } .o-optrow__tick .ti { font-size: 13px; opacity: 0 }
.o-optrow[aria-checked="true"] .o-optrow__tick { background: var(--blue); box-shadow: none } .o-optrow[aria-checked="true"] .o-optrow__tick .ti { opacity: 1 }
.o-optrow__label { font-size: var(--text-body) }
.o-optrow__track { height: 8px; border-radius: 4px; overflow: hidden; background: var(--wash) }
.o-optrow__fill { display: block; height: 100%; width: max(3%, calc(var(--o-value) * 1%)); border-radius: 4px; background: rgba(var(--mute-rgb),.28); transition: width .35s var(--ease-out), background var(--dur-base) ease }
.o-optrow[aria-checked="true"] .o-optrow__fill { background: var(--blue) }
.o-optrow__count { font-size: var(--text-caption); text-align: right; color: var(--fg-2); font-variant-numeric: tabular-nums }

/* ===================== feedback ===================== */
.o-toasts { position: absolute; left: 50%; bottom: 20px; z-index: var(--z-toast); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none }
.o-toast { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 16px; border-radius: 20px; font-size: var(--text-body-sm); white-space: nowrap; color: #fff; background: var(--toast); box-shadow: var(--shadow-toast); animation: rise var(--dur-base) ease both }
.o-toast__action { height: 28px; padding: 0 10px; border: 0; border-radius: 14px; background: none; cursor: pointer; font-size: var(--text-body-sm); color: var(--toast-action) }
.o-toast__action:hover { color: #fff; background: rgba(255,255,255,.1) }
.o-toast__close { width: 26px; height: 26px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: none; cursor: pointer; color: rgba(255,255,255,.6) } .o-toast__close .ti { font-size: 14px }
.o-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px 24px; min-height: 220px; text-align: center }
.o-empty__icon { width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--tone, var(--ok)); background: var(--tone-tint, var(--green-tint)) } .o-empty__icon .ti { font-size: 24px }
.o-empty__title { font-size: 16px } .o-empty__body { max-width: 320px; font-size: var(--text-body-sm); line-height: 1.45; color: var(--fg-2); text-wrap: pretty }
.o-empty .o-btn { margin-top: 10px }
.o-skel { display: block; height: 12px; border-radius: 6px; background: var(--shimmer); background-size: 200% 100%; animation: shimmer var(--dur-shimmer) ease-in-out infinite }
.o-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--tone-solid) 8%, transparent); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--tone-solid) 24%, transparent) }
.o-banner__icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); background: var(--tone-solid) } .o-banner__icon .ti { font-size: 15px }
.o-banner__text { min-width: 0; display: grid; overflow-wrap: anywhere }
.o-banner__title { font-size: var(--text-body) } .o-banner__body { font-size: var(--text-micro); color: var(--fg-2) }
.o-banner--inline { padding: 9px 12px; border-radius: 13px; gap: 9px; font-size: var(--text-micro); line-height: 1.45; color: var(--tone) } .o-banner--inline > .ti { font-size: 15px }
.o-issues { display: flex; flex-direction: column; padding: 4px 16px; border-radius: 16px; background: var(--surface-well); box-shadow: inset 0 0 0 .5px rgba(var(--mute-rgb),.12) }
.o-issue { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0 }
.o-issue + .o-issue { border-top: .5px solid var(--line) }
.o-issue > .ti { flex: none; font-size: 17px; color: var(--tone) }
.o-issue__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-body) } .o-issue__text small { font-size: var(--text-micro); color: var(--fg-2) }
.o-ticker__item { flex: 1 1 220px; min-width: 0; display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 20px; animation: rise .5s var(--ease-out) both } .o-ticker__item .ti { font-size: 17px; line-height: 20px; color: var(--tone) }
[data-tip] { position: relative }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: var(--z-menu); width: max-content; max-width: 220px; padding: 7px 10px; border-radius: 9px; font-size: 12px; line-height: 1.4; font-weight: 400; letter-spacing: 0; text-align: left; white-space: normal; color: #fff; background: var(--toast); box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); animation: fade var(--dur-fast) ease both; pointer-events: none }

/* ===================== overlays ===================== */
.o-menu { min-width: 200px; margin: 0; padding: 5px; border: 0; border-radius: var(--radius-menu); color: var(--fg); background: var(--surface-popover); box-shadow: var(--shadow-popover); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); animation: ddin .16s var(--ease-out) both }
.o-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; border-radius: var(--radius-option); background: none; cursor: pointer; text-align: left; font-size: var(--text-body-sm); color: var(--fg); white-space: nowrap }
.o-menu__item > .ti { font-size: 15px; opacity: .8 }
.o-menu__item:hover, .o-menu__item[data-active] { background: rgba(var(--mute-rgb),.075) }
.o-menu__item--danger { color: var(--danger) }
.o-menu__item:disabled { opacity: .35; cursor: default; background: none }
.o-menu__item--rich { padding: 8px 12px; gap: 11px; border-radius: var(--radius-tile) } .o-menu__text { display: flex; flex-direction: column } .o-menu__hint { font-size: 12px; color: var(--fg-3) }
.o-menu__sep { height: .5px; margin: 4px 6px; background: var(--line) }
.o-menu__head { padding: 6px 10px 8px; font-size: 12px; line-height: 1.45; color: var(--fg-3) }
.o-menu__search { display: flex; align-items: center; gap: 8px; height: 38px; margin: -5px -5px 4px; padding: 0 12px; border-bottom: .5px solid var(--line) } .o-menu__search .ti { font-size: 14px; color: var(--fg-4) } .o-menu__search input { flex: 1; border: 0; outline: 0; background: none; font-size: var(--text-body-sm) }
.o-option { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px 6px 8px; border-radius: 8px; cursor: pointer; font-size: var(--text-body-sm) }
.o-option > .ti { width: 16px; font-size: 14px; color: transparent } .o-option small { margin-left: auto; font-size: 12px; color: var(--fg-4) }
.o-option:hover, .o-option[data-active] { background: rgba(var(--mute-rgb),.075) }
.o-option[aria-selected="true"] { color: var(--blue) } .o-option[aria-selected="true"] > .ti { color: var(--blue) }
.o-option[aria-checked] > .o-check { pointer-events: none }

.o-dialog { width: min(var(--o-w, var(--w-dialog-lg)), calc(100% - 44px)); max-height: calc(100% - 44px); padding: 0; border: 0; border-radius: var(--radius-dialog); overflow: hidden; display: flex; flex-direction: column; color: var(--fg); background: var(--surface-dialog); box-shadow: var(--shadow-dialog); -webkit-backdrop-filter: var(--blur-dialog); backdrop-filter: var(--blur-dialog); animation: land .36s var(--ease-out) both }
dialog.o-dialog:not([open]) { display: none }
.o-dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: var(--blur-scrim); backdrop-filter: var(--blur-scrim); animation: fade var(--dur-state) ease }
.o-dialog--md { --o-w: var(--w-dialog-md) } .o-dialog--sm { --o-w: var(--w-dialog-sm); border-radius: var(--radius-card) }
.o-dialog__head { display: flex; align-items: center; gap: 14px; padding: 18px 16px 14px 24px }
.o-dialog__icon { --s: 36px } /* the dialog head's round tile icon */
.o-dialog__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px } .o-dialog__title { margin: 0; font-size: var(--text-step); font-weight: 400; line-height: 1.3 } .o-dialog__sub { font-size: var(--text-micro); line-height: 1.4; color: var(--fg-2) }
.o-dialog__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 24px 20px; border-top: .5px solid var(--line) }
.o-dialog__foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px 24px; border-top: .5px solid var(--line) }
.o-dialog__summary { flex: 1; font-size: var(--text-caption); color: var(--fg-2); font-variant-numeric: tabular-nums }
.o-confirm { display: flex; flex-direction: column; gap: 10px; padding: 24px }
.o-confirm__title { margin: 0; font-size: 20px; font-weight: var(--weight-light); letter-spacing: var(--tracking-display) }
.o-confirm__body { margin: 0; font-size: var(--text-body-sm); line-height: 1.5; color: var(--fg-2); text-wrap: pretty }
.o-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px }
.o-drawer { position: absolute; inset: 0; z-index: var(--z-drawer); display: flex; justify-content: flex-end }
.o-drawer__scrim { position: absolute; inset: 0; background: rgba(var(--shadow-rgb),.16); animation: fade var(--dur-base) ease both }
.o-drawer__panel { position: relative; width: min(var(--w-drawer), 100%); height: 100%; display: flex; flex-direction: column; background: var(--surface-dialog); box-shadow: inset .5px 0 0 var(--line-strong), -24px 0 60px -30px rgba(var(--shadow-rgb),.5); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); animation: slidein .28s var(--ease-out) both }
.o-drawer__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: .5px solid var(--line-strong) }
.o-editor { position: absolute; inset: 0; z-index: var(--z-editor); display: flex; flex-direction: column; background: var(--bg); animation: fade .16s ease both }
.o-editor::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-glow) }
.o-editor__bar { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; height: 64px; padding: 0 16px; border-bottom: .5px solid var(--line) }
.o-editor__bar > :last-child { justify-self: end; display: flex; gap: 8px }

/* ===================== agent ===================== */
.o-mark { --s: 22px; position: relative; display: block; flex: none; width: var(--s); height: var(--s) }
.o-mark__body { position: absolute; inset: 0; background: var(--ink); -webkit-mask: var(--o-symbol) center / contain no-repeat; mask: var(--o-symbol) center / contain no-repeat }
.o-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.o-mark__look { transition: transform var(--dur-fold) var(--ease-out) }
.o-mark__eye { fill: var(--ink); transform-box: fill-box; transform-origin: center }
.o-mark__lid, .o-mark__smile { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; display: none }
.o-mark[data-mood="idle"] .o-mark__move { animation: avWander 11s ease-in-out infinite }
.o-mark:is([data-mood="idle"],[data-mood="listen"],[data-mood="needs"]) .o-mark__eye { animation: avBlink 5s ease-in-out infinite }
.o-mark[data-mood="listen"] .o-mark__look { transform: translate(0, 2px) }
.o-mark[data-mood="needs"] .o-mark__look { transform: translate(-2.4px, 0) }
.o-mark[data-mood="work"] .o-mark__move { animation: avScan 1.8s ease-in-out infinite }
.o-mark[data-mood="think"] { animation: avRock 3s ease-in-out infinite }
.o-mark:is([data-mood="think"],[data-mood="sorry"]) .o-mark__eye { display: none } .o-mark:is([data-mood="think"],[data-mood="sorry"]) .o-mark__lid { display: inline }
.o-mark[data-mood="happy"] .o-mark__eye { display: none } .o-mark[data-mood="happy"] .o-mark__smile { display: inline }
.o-mark[data-still] *, .o-mark[data-still] { animation: none !important }
.o-mark--20 { --s: 20px } .o-mark--30 { --s: 30px }

/* The panel owns two independent states: open (data-open) and width (data-width → --o-agent-w).
   Both animate: the panel's width moves, main gives way, and the content keeps the target width
   while the edge travels, so the panel slides in, out, wider or narrower instead of reflowing. */
.o-agent { --o-agent-w: var(--w-agent-wide); display: flex; flex-direction: column; flex: none; width: var(--o-agent-w); min-height: 0; overflow: hidden;
  transition: width var(--dur-agent) var(--ease-out), margin-left var(--dur-agent) var(--ease-out), opacity var(--dur-agent) ease, transform var(--dur-agent) var(--ease-out), box-shadow var(--dur-agent) ease }
.o-agent > :not(.o-agent__history) { flex-shrink: 0; width: var(--o-agent-w); max-width: none }
.o-agent > .o-thread { flex-shrink: 1 }
.o-agent[data-width="narrow"] { --o-agent-w: var(--w-agent) }
.o-agent:not([data-open]) { width: 0; margin-left: calc(-1 * var(--space-8)); opacity: 0; box-shadow: none; pointer-events: none }
.o-agent:not([data-open]) :is(.o-welcome, .o-welcome *, .o-welcome__orb::before, .o-welcome__orb::after) { animation-play-state: paused }
/* Main fades back in after the panel has made room; it fades out at once when the panel goes full, so its content is never seen squeezed. */
.o-main { transition: opacity .24s ease .2s, margin-right var(--dur-agent) var(--ease-out), padding var(--dur-agent) var(--ease-out) }
.o-agent__head { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 12px 0 18px; border-bottom: .5px solid var(--line-strong) }
.o-agent__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2 } .o-agent__name b { font-size: 15px; font-weight: var(--weight-semibold) } .o-agent__name small { font-size: 12px; color: var(--fg-2) }
.o-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 12px }
.o-msg-user { display: flex; justify-content: flex-end; animation: rise .25s ease both }
.o-msg-user > div { max-width: 85%; padding: 10px 15px; border-radius: var(--radius-bubble); font-size: var(--text-row); line-height: 1.5; letter-spacing: 0; background: var(--bubble); box-shadow: inset 0 0 0 1px var(--bubble-line); text-wrap: pretty }
.o-msg-ai { display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 0; animation: rise var(--dur-state) ease both }
.o-prose { max-width: var(--w-prose); display: flex; flex-direction: column; gap: 14px; font-size: var(--text-agent); line-height: var(--leading-agent); letter-spacing: 0 }
.o-prose > * { margin: 0 } .o-prose h3 { margin-top: 6px; font-size: var(--text-step); font-weight: var(--weight-semibold); line-height: 1.4; letter-spacing: -.1px }
.o-prose strong { font-weight: var(--weight-semibold) } .o-prose ul, .o-prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px }
.o-deskline { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--text-micro); color: var(--fg-3); animation: fade var(--dur-state) ease both } .o-deskline .ti { font-size: 13px; color: var(--green) }
.o-worksteps { display: flex; flex-direction: column; gap: 5px }
.o-workstep { display: flex; align-items: center; gap: 8px; font-size: var(--text-body-sm); line-height: 1.4; color: rgba(var(--mute-rgb),.8); transition: color var(--dur-state) ease }
.o-workstep .ti { flex: none; font-size: 14px }
.o-workstep[data-state="done"] .ti { color: var(--green) }
.o-workstep[data-state="now"] { color: var(--fg) } .o-workstep[data-state="now"] .ti { color: var(--indigo); animation: spin var(--dur-spin) linear infinite }
.o-workstep[data-state="todo"] { color: var(--fg-3) } .o-workstep[data-state="todo"] .ti { color: rgba(var(--mute-rgb),.3) }
.o-made { display: flex; align-items: center; gap: 10px; margin-top: 6px }
.o-made__disc { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); background: var(--green); box-shadow: 0 6px 14px -8px var(--green); animation: land var(--dur-land) var(--ease-out) both } .o-made__disc .ti { font-size: 15px }
.o-made__title { font-size: var(--text-lead); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); line-height: 1.2 }
.o-madecard { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--radius-row); color: var(--fg); background: rgba(var(--glass-rgb),.55); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; transition: background var(--dur-fast) ease, transform var(--dur-fast) ease }
.o-root a.o-madecard { color: var(--fg) } .o-madecard:hover { background: rgba(var(--glass-rgb),.9); transform: translateY(-1px) }
.o-madecard .o-tileicon { --s: 34px; border-radius: var(--radius-tile) } .o-madecard .o-tileicon .ti { font-size: 17px }
.o-madecard__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px } .o-madecard__name { font-size: var(--text-body) } .o-madecard__meta { display: flex; align-items: center; gap: 6px; font-size: var(--text-micro); color: var(--fg-2) } .o-madecard__meta .o-dot { width: 6px; height: 6px }
.o-madecard__open { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-caption); color: var(--blue) } .o-madecard__open .ti { font-size: 13px }
.o-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -4px }
.o-feedback { display: flex; align-items: center; gap: 2px; margin: -4px 0 0 -6px } .o-feedback .o-iconbtn { --s: 30px; color: var(--fg-4) } .o-feedback .o-iconbtn .ti { font-size: 16px } .o-feedback .o-iconbtn[aria-pressed="true"] { color: var(--fg); background: none }
.o-agentstatus { display: flex; align-items: center; gap: 9px; margin-top: 2px } .o-agentstatus > span:last-child { font-size: var(--text-body); color: var(--fg-2); animation: avBreath var(--dur-pulse) ease-in-out infinite }
.o-divider-label { display: flex; align-items: center; gap: 10px; font-size: var(--text-nano); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-4) } .o-divider-label::before, .o-divider-label::after { content: ""; flex: 1; height: .5px; background: rgba(var(--mute-rgb),.18) }
.o-divider-label--rail { margin: 10px 6px 4px } /* a heading inside a rail or list (SEG-28) */
.o-composer { padding: 12px 14px 14px; border-top: .5px solid var(--line-strong) }
.o-composer__field { display: flex; align-items: center; gap: 8px; min-height: var(--h-field-xl); padding: 0 6px 0 16px; border-radius: 22px; background: rgba(var(--glass-rgb),.75); box-shadow: inset 0 0 0 .5px rgba(var(--mute-rgb),.18); transition: box-shadow var(--dur-base) ease }
.o-composer__field:focus-within { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--indigo) 45%, transparent) }
.o-composer__field textarea, .o-composer__field input { flex: 1; min-width: 0; min-height: var(--h-field-xl); padding: 12px 0; border: 0; outline: 0; resize: none; background: transparent; font-size: var(--text-body); line-height: 20px; field-sizing: content; max-height: 160px }
/* The composer input is an editable block (see ui.js), so password managers never attach to it. */
.o-composer__input { flex: 1; min-width: 0; min-height: var(--h-field-xl); max-height: 160px; overflow-y: auto; padding: 12px 0; outline: 0; font-size: var(--text-body); line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; color: var(--fg) }
.o-composer__input[data-empty]::before { content: attr(data-placeholder); color: var(--fg-4); pointer-events: none }
.o-composer__send { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--on-accent); background: var(--indigo); transition: transform var(--dur-press) ease, opacity var(--dur-fast) ease }
.o-composer__send:active { transform: scale(.92) } .o-composer__send:disabled { opacity: .45; cursor: default } .o-composer__send .ti { font-size: 16px }
.o-composer__note { margin-top: 8px; padding: 0 8px; font-size: var(--text-nano); color: var(--fg-3) }
/* Suggested next prompt: faded text inside the empty composer (its placeholder), Tab or → takes it.
   The take button shows a Tab key on desktop and an arrow on touch, only while the suggestion shows. */
.o-composer__take { display: none; flex: none; align-items: center; justify-content: center; height: 26px; padding: 0 7px; border: 0; border-radius: 8px; cursor: pointer; background: none; color: var(--fg-3) }
.o-composer__take kbd { font: inherit; font-size: var(--text-nano); padding: 1px 6px; border-radius: 6px; box-shadow: inset 0 0 0 .5px var(--line-strong) }
.o-composer__take .ti { display: none; font-size: 17px }
.o-composer__field[data-next]:has(.o-composer__input[data-empty]) .o-composer__take { display: inline-flex }
@media (pointer: coarse) { .o-composer__take { width: 36px; height: 36px } .o-composer__take kbd { display: none } .o-composer__take .ti { display: inline } }
/* What next: shortcuts after something finished or at a new stage, styled as the welcome's starters. */
.o-shortcuts { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; animation: rise .3s var(--ease-out) both }
.o-shortcuts__label { font-size: var(--text-nano); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-4) }
.o-shortcuts .o-chips { justify-content: flex-start }
:is(.o-shortcuts, .o-welcome__starters) .o-btn { max-width: 100%; height: auto; min-height: var(--h); padding-top: 5px; padding-bottom: 5px; white-space: normal; text-align: left; line-height: 1.3 }
.o-welcome { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 14px 4px 12%; text-align: center; align-items: center }
.o-welcome__hello { font-size: var(--text-step); line-height: 1.3; color: var(--fg-2) }
.o-welcome__ask { font-size: var(--text-h2); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); line-height: 1.25 }
.o-welcome__tip { max-width: 440px; font-size: var(--text-caption); line-height: 1.5; color: var(--fg-2) } .o-welcome__tip .ti { font-size: 15px; color: var(--notice); vertical-align: -2px; margin-right: 6px }
.o-words > span { display: inline-block; animation: wordIn 1.1s var(--ease-reveal) both; animation-delay: calc(var(--o-i, 0) * .12s) }
.o-history__item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 14px; cursor: pointer; transition: background var(--dur-fast) ease }
.o-history__item:hover { background: var(--wash) } .o-history__item[aria-current="true"] { background: color-mix(in srgb, var(--indigo) 8%, transparent) }

/* ===================== desk blocks ===================== */
.o-block__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 12px 12px 18px }
.o-block__titles { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.o-block__name { font-size: var(--text-body-lg) } .o-block__meta { font-size: var(--text-micro); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-block__body { display: flex; flex-direction: column; gap: 14px; padding: 14px 22px 20px }
.o-block__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px 14px 18px; border-top: .5px solid var(--line) }
.o-block__note { flex: 1; min-width: 180px; font-size: var(--text-caption); line-height: 1.45; color: var(--fg-2) }
.o-result { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--green) 10%, transparent); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--green) 25%, transparent); animation: land var(--dur-land) var(--ease-out) both }
.o-result__disc { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); background: var(--green) } .o-result__disc .ti { font-size: 18px }
.o-quietline { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 18px; border-radius: 18px; font-size: var(--text-body-sm); color: var(--fg-2); background: rgba(var(--glass-rgb),.35); box-shadow: inset 0 0 0 .5px var(--line) }
.o-quietline .o-dot { background: var(--indigo); animation: avBreath 1.8s ease-in-out infinite }
.o-wavecard { border-radius: 20px; background: rgba(var(--glass-rgb),.42); box-shadow: inset 0 1px 0 rgba(var(--glass-rgb),.8), inset 0 0 0 .5px rgba(var(--mute-rgb),.12); transition: background var(--dur-base) ease, box-shadow var(--dur-base) ease }
.o-wavecard[data-open] { background: rgba(var(--glass-rgb),.6); box-shadow: inset 0 1px 0 rgba(var(--glass-rgb),.8), inset 0 0 0 .5px rgba(var(--mute-rgb),.2), 0 18px 40px -26px rgba(var(--shadow-rgb),.55) }
.o-wavecard__head { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 16px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--fg) }
.o-wavecard__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px } .o-wavecard__title { display: flex; align-items: center; gap: 8px; font-size: 14.5px } .o-wavecard__sub { font-size: var(--text-micro); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.o-timing { flex: none; display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 11px; font-size: var(--text-nano); white-space: nowrap; color: var(--tone-solid); background: rgba(var(--glass-rgb),.75); box-shadow: inset 0 0 0 .5px var(--line) }
.o-wavecard__body { padding: 10px 16px 16px; border-top: .5px solid var(--line) }

/* ===================== customer device previews (never themed) ===================== */
.o-bubble-in { max-width: min(100%, 360px); padding: 10px 14px; border-radius: var(--radius-bubble-in); font-size: var(--text-body-sm); line-height: 1.5; white-space: pre-wrap; color: var(--on-accent); background: var(--tone-solid, var(--green)) }
.o-phone { width: 300px; max-width: 100%; min-height: 380px; border-radius: 34px; overflow: hidden; border: 10px solid var(--device-frame); background: var(--device-paper); color: var(--device-ink) }
.o-phone__head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px 12px; background: var(--device-head); border-bottom: .5px solid var(--device-line); font-size: 12px }
.o-phone__avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: #fff; background: linear-gradient(180deg, #a3aab8, #858c9b) }
.o-phone__thread { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px } .o-phone__time { align-self: center; font-size: 11px; color: var(--device-muted) }
.o-phone__bubble { align-self: flex-start; max-width: 82%; padding: 9px 13px; border-radius: var(--radius-bubble-in); font-size: 14px; line-height: 1.42; white-space: pre-wrap; color: var(--device-ink); background: var(--device-bubble) }
.o-push { max-width: 360px; display: flex; gap: 10px; padding: 11px 12px; border-radius: 18px; color: var(--device-ink); background: rgba(245,245,247,.92); box-shadow: inset 0 0 0 .5px var(--device-line), 0 10px 24px -18px rgba(30,40,70,.4) }
.o-push__app { flex: none; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; background: #0071e3 }
.o-push__title { display: flex; gap: 8px; font-size: 13px; font-weight: 600 } .o-push__title small { margin-left: auto; font-weight: 400; font-size: 11px; color: var(--device-muted) } .o-push__body { font-size: 13px; color: var(--device-text) }
.o-email { max-width: 520px; border-radius: 12px; overflow: hidden; color: var(--device-text); background: var(--device-paper); box-shadow: 0 0 0 .5px rgba(60,60,67,.14), 0 10px 26px -20px rgba(var(--shadow-rgb),.6) }
.o-email__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px } .o-email__subject { font-size: var(--text-body-sm); font-weight: 600; color: var(--device-ink) } .o-email__from { font-size: 11px; color: var(--device-muted) }
.o-email__band { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 14px; color: #fff; background: var(--brand, #0071e3); font-size: 11px; font-weight: 700; letter-spacing: 1.4px }
.o-email__body { padding: 16px 14px; font-size: var(--text-caption); line-height: 1.65; white-space: pre-wrap }
.o-email__cta { display: inline-flex; align-items: center; height: 36px; margin-top: 14px; padding: 0 18px; border-radius: 18px; font-size: var(--text-caption); font-weight: 600; color: #fff; background: var(--brand, #0071e3) }
.o-email__legal { margin-top: 16px; padding-top: 10px; border-top: .5px solid var(--device-line); font-size: 10.5px; line-height: 1.5; color: rgba(60,60,67,.45) }

@media (prefers-reduced-motion: reduce) {
  .o-root *, .o-root *::before, .o-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}

/* ===================== shell parts (from v00 validation G-01..G-03) ===================== */
.o-spacer { flex: 1 }
.o-logo-dark { display: none }
[data-theme="dark"] .o-logo-light { display: none } [data-theme="dark"] .o-logo-dark { display: block }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .o-logo-light { display: none } :root:not([data-theme="light"]) .o-logo-dark { display: block } }
.o-shell__logo { text-decoration: none }
.o-theme-icon-dark { display: none }
[data-theme="dark"] .o-theme-icon-light { display: none } [data-theme="dark"] .o-theme-icon-dark { display: inline }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .o-theme-icon-light { display: none } :root:not([data-theme="light"]) .o-theme-icon-dark { display: inline } }
.o-shell[data-nav="collapsed"] .o-nav-icon-open, .o-shell[data-nav="open"] .o-nav-icon-closed { display: none }
.o-shell__bar .o-avatar { border: 0; padding: 0; cursor: pointer }

/* ===================== agent parts (G-04, G-10) ===================== */
.o-thread__items { display: flex; flex-direction: column; gap: 12px }
.o-welcome { min-height: 100%; animation: rise .45s var(--ease-out) both }
.o-welcome__orb { position: relative; width: 32px; height: 32px; margin-bottom: -32px; animation: orbIn .7s var(--ease-out) both, orbOut 1s cubic-bezier(.4,0,.2,1) 2.1s forwards }
.o-welcome__orb::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--indigo) 45%, transparent), color-mix(in srgb, var(--blue) 18%, transparent) 55%, transparent 75%); filter: blur(6px); animation: symGlow 2.2s ease-in-out infinite }
.o-welcome__orb::after { content: ""; position: absolute; inset: 4px; background: linear-gradient(135deg, #8b89ff, var(--indigo) 55%, var(--blue)); -webkit-mask: var(--o-symbol) center / contain no-repeat; mask: var(--o-symbol) center / contain no-repeat; animation: symSpin 3.2s cubic-bezier(.65,0,.35,1) infinite }
.o-welcome .o-words > span { animation: wordIn 1.1s var(--ease-reveal) both; animation-delay: calc(var(--o-delay, 2.5s) + var(--o-i, 0) * .14s) }
.o-welcome__hello { --o-delay: 2.5s } .o-welcome__ask { --o-delay: 3.2s }
.o-welcome__starters, .o-welcome__tip { animation: wordIn 1.2s var(--ease-reveal) both } .o-welcome__starters { animation-delay: 2.6s } .o-welcome__tip { animation-delay: 3.2s }
.o-welcome__promo { animation: wordIn 1.4s var(--ease-reveal) 4.2s both }
.o-welcome--simple { align-items: flex-start; text-align: left; justify-content: flex-start; gap: 10px; padding: 8px 4px 0; min-height: 0; animation: fade .3s ease both }
.o-welcome--simple .o-welcome__ask { font-size: 18px; letter-spacing: -.1px; line-height: 1.35 }
.o-welcome--simple :is(.o-welcome__starters, .o-welcome__tip) { animation: none; justify-content: flex-start; margin-top: 4px }
.o-welcome__sub { max-width: 380px; font-size: var(--text-caption); line-height: 1.5; color: var(--fg-2) }
.o-welcome__starters { justify-content: center; margin-top: 10px }
.o-welcome__tip a { white-space: nowrap }
.o-welcome__promo { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px 22px; text-align: center }
.o-welcome__promo b { font-weight: 400; font-size: 15px } .o-welcome__promo span { max-width: 320px; font-size: var(--text-caption); line-height: 1.5; color: var(--fg-2) }
.o-madecard__all { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-micro); color: var(--fg-2) }
.o-root a.o-madecard__all { color: var(--fg-2) } .o-madecard__all:hover { color: var(--blue) }
.o-agent__history { position: absolute; top: 60px; left: 0; right: 0; bottom: 0; z-index: 5; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px 20px; background: var(--surface-popover); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); animation: rise .22s var(--ease-out) both }
.o-agent__history-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px } .o-agent__history-head span { flex: 1; font-size: var(--text-lead); font-weight: 300; letter-spacing: -.2px }
.o-agent__history .o-eyebrow { padding: 12px 8px 6px }
.o-history__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--text-body) } .o-history__text small { font-size: var(--text-micro); color: var(--fg-3) }
.o-history__time { font-size: 12px; color: var(--fg-4); font-variant-numeric: tabular-nums }
.o-agent[data-width="xwide"] { --o-agent-w: min(var(--w-agent-max), 100%) }
/* Full: ui.js measures the space main and the panel share (--o-agent-full) so the stretch animates too. */
.o-agent[data-width="full"] { --o-agent-w: var(--o-agent-full, var(--w-agent-max)) }
@container app (min-width: 1024px) {
  .o-shell__body:has(> .o-agent[data-width="full"][data-open]) > .o-main { margin-right: calc(-1 * var(--space-8)); padding-left: 0; padding-right: 0; opacity: 0; pointer-events: none; transition: opacity .12s ease, margin-right var(--dur-agent) var(--ease-out), padding var(--dur-agent) var(--ease-out) }
}
.o-agent[data-width="full"] .o-thread { padding: 48px max(32px, calc((100% - 760px) / 2)) 24px; gap: 20px }
.o-agent[data-width="full"] .o-composer { padding: 14px max(32px, calc((100% - 760px) / 2)) 26px; border-top: 0 }
/* Steps update in place: each line has its own id and is swapped alone, so the message never re-enters. */
.o-workstep { transition: color var(--dur-state) ease } .o-workstep .ti { transition: color var(--dur-state) ease }
/* Queue: a message sent while the agent works waits under the thread until the agent takes it. */
.o-msg-user[data-queued] > div { opacity: .6; box-shadow: inset 0 0 0 1px var(--bubble-line), 0 0 0 0 transparent }
.o-msg-user[data-queued]::after { content: attr(data-queued); align-self: flex-end; margin-top: 4px; font-size: var(--text-nano); color: var(--fg-4) }
.o-msg-user { flex-direction: column; align-items: flex-end }
.o-composer__stop { display: inline-flex; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; color: var(--on-accent); background: var(--ink) }
.o-composer__stop .ti { font-size: 14px } .o-composer__stop:active { transform: scale(.92) }
#composer-stop:empty { display: none }

/* ===================== header panels: notifications, account ===================== */
.o-pop { width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 90px)); margin: 0; padding: 0; border: 0; border-radius: var(--radius-section); display: flex; flex-direction: column; overflow: hidden; color: var(--fg); background: var(--surface-popover); box-shadow: var(--shadow-popover); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); animation: ddin .18s var(--ease-out) both }
.o-pop[popover]:not(:popover-open) { display: none }
.o-pop__head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px 18px }
.o-pop__title { flex: 1; font-size: var(--text-step) }
.o-pop__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 6px }
.o-pop__foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px 18px; border-top: .5px solid var(--line) }
.o-pop .o-seg { margin: 0 12px 8px 18px }
.o-note { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 12px; border-radius: var(--radius-row); color: var(--fg); cursor: pointer; transition: background var(--dur-fast) ease }
.o-root a.o-note { color: var(--fg) } .o-note:hover { background: var(--wash) }
.o-note + .o-note { box-shadow: 0 -.5px 0 var(--line-faint) }
.o-note__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.o-note__title { font-size: var(--text-body) } .o-note__detail { font-size: var(--text-micro); line-height: 1.4; color: var(--fg-2) } .o-note__time { font-size: 12px; color: var(--fg-4); font-variant-numeric: tabular-nums }
.o-note[data-unread]::after { content: ""; position: absolute; top: 18px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue) }
.o-note[data-unread] .o-note__title { font-weight: var(--weight-medium) }
.o-acct__who { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px }
.o-acct__who b { display: block; font-weight: var(--weight-medium); font-size: var(--text-body) } .o-acct__who small { font-size: var(--text-micro); color: var(--fg-3) }
.o-acct__row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px }
.o-acct__row > span:first-child { flex: 1; font-size: var(--text-body-sm); color: var(--fg-2) }

/* ===================== settings window (split dialog) ===================== */
.o-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; padding: 14px 0; border-top: .5px solid var(--line-faint) }
.o-setting:first-of-type { border-top: 0 }
.o-setting__text { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.o-setting__label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-body) }
.o-setting__hint { font-size: var(--text-micro); line-height: 1.45; color: var(--fg-2); max-width: 60ch }
.o-setting__ctl { display: flex; align-items: center; gap: 8px; justify-content: flex-end }
.o-setting[data-changed] .o-setting__label::after { content: attr(data-changed); font-size: var(--text-nano); color: var(--ok) }
.o-settings__group { margin: 18px 0 2px; font-size: var(--text-nano); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-4) }
.o-settings__group:first-child { margin-top: 0 }
/* Settings levels: this workspace and the account (account default, workspace override). */
.o-settings__level { display: flex; margin: 2px 0 8px }
.o-settings__level { width: 100% } .o-settings__level .o-seg__opt { flex: 1; min-width: 0; gap: 7px; padding: 0 8px }
.o-td-sub.o-td-wrap { white-space: normal }
.o-settings__where { padding: 0 10px 10px; font-size: var(--text-nano); line-height: 1.45; color: var(--fg-3) }
.o-setting[data-locked] .o-setting__label { color: var(--fg-2) }
.o-setting__text > span:has(> .o-btn) { display: flex; margin-top: 2px }
.o-setting__text > .o-bar { margin-top: 8px; max-width: 320px }
.o-settings-page .o-banner--inline + .o-banner--inline { margin-top: 8px }
.o-settings-page .o-table { margin: 10px 0 6px }
.o-settings-page .o-table__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
/* Workspace switcher (sidebar workspace button, account menu): the account's workspaces, your other accounts. */
.o-wstile--xs { width: 18px; height: 18px; border-radius: 6px; font-size: 8.5px }
.o-wstile--sm { width: 26px; height: 26px; border-radius: 8px; font-size: 10.5px }
/* Settings as a page: the split fills main; the rail and the section scroll on their own. */
.o-settings-page { display: flex; flex-direction: column; height: 100%; min-height: 0 }
.o-settings-page > .o-pagehead { padding: 22px 26px 12px }
.o-settings-page > .o-split { flex: 1; min-height: 0; border-top: .5px solid var(--line) }
.o-settings-page .o-split__detail { padding-left: 26px; padding-right: 26px }
.o-wspop .o-menu__item--rich > .o-tag { margin-left: auto }
.o-wspop .o-menu__item--rich > .o-tag + .o-acct__current { margin-left: 6px }
.o-menu__item[aria-current="true"] { background: rgba(var(--mute-rgb),.06) }
@container (max-width: 560px) { .o-setting { grid-template-columns: minmax(0, 1fr) } .o-setting__ctl { justify-content: flex-start } }

/* ===================== full-window editor (v0 Templates): covers the whole shell, not only main ===================== */
.o-editor--app { position: fixed; inset: 0; z-index: var(--z-editor) }
.o-editor--app .o-editor__bar { padding-top: env(safe-area-inset-top, 0px) }

.o-btn--compact { --h: 32px; padding: 0 13px; font-size: var(--text-caption) }
.o-btn--link { color: var(--blue) }
.o-capsule .o-btn { --h: 32px }
/* The greeting welcome fills the thread and centres; the main scroller keeps its place when parts are swapped out of band. */
.o-thread__items:has(> .o-welcome:not(.o-welcome--simple)) { flex: 1 }
.o-main__scroll { overflow-anchor: none }
.o-wstile[data-tone] { background: var(--tone-solid) }
.o-pop__label { padding: 6px 12px 4px }
.o-acct__current { margin-left: auto; color: var(--blue); font-size: 15px }
.o-settings__heading { margin: 0 0 6px; font-size: var(--text-lead); font-weight: var(--weight-light); letter-spacing: var(--tracking-display) }
.o-setting__list { max-width: 300px; text-align: right }
.o-dialog__title:focus { outline: none } /* a dialog focuses its title on open, so the first button is not ringed */
/* A full-window editor rendered inside main: main's backdrop-filter would make it the containing block of the fixed editor. */
.o-main:has(> .o-editor--app) { -webkit-backdrop-filter: none; backdrop-filter: none }
[data-o-reveal="start"] { scroll-margin-top: 14px }

/* ===================== record rows (CUSTOMER-15) ===================== */
/* A record in a list: lead tile, title (with tags or pills), a meta line that wraps, a trailing
   status, and an optional body under it (a grid, a note). Rows split by hairlines. Classes, not a
   template: the body is free content (F-01). */
.o-records { display: flex; flex-direction: column; container-type: inline-size }
.o-record { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: .5px solid var(--line-faint) }
.o-record:last-child { padding-bottom: 0 }
.o-record__head { display: flex; align-items: center; gap: 12px }
.o-record__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.o-record__title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--text-body); font-weight: var(--weight-medium) }
.o-record__meta { font-size: var(--text-micro); color: var(--fg-3); line-height: 1.45; text-wrap: pretty }
.o-record__body { padding-left: 42px }
.o-record__note { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding-left: 42px }
.o-record__note .ti { flex: none; font-size: 14px; margin-top: 1px }
@container (max-width: 560px) {
  .o-record__head { flex-wrap: wrap; row-gap: 6px }
  .o-record__main { flex-basis: calc(100% - 42px) }
  .o-record__head > :is(.o-pill, .o-tag):last-child { margin-left: 42px }
  :is(.o-record__body, .o-record__note) { padding-left: 0 }
}

/* ===================== switch matrix (CUSTOMER-16) ===================== */
/* Rows × columns of toggles (consent: channel × purpose). Built on .o-table: plain (no well), a
   row head with an icon, and cells that pair a small switch with its state and a wrapping hint
   (where the value came from). Locked: the switch is disabled and the cell is not clickable; its
   state says why ("Always on"). On a phone the header hides, so each cell names its column with
   .o-show-sm and the row head takes its own line. */
.o-matrix { box-shadow: none; background: none }
.o-matrix .o-tr--head { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 28px }
.o-matrix .o-tr { padding-left: 0; padding-right: 0; align-items: start }
.o-matrix .o-tr:not(.o-tr--head) { padding-top: 10px; padding-bottom: 10px }
.o-matrix__row { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: var(--text-body-sm) }
.o-matrix__row .ti { font-size: 15px; color: var(--fg-3) }
.o-matrix__cell { display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer }
.o-matrix__cell:has(:disabled) { cursor: default }
.o-matrix__state { font-size: var(--text-body-sm); line-height: 20px }
.o-matrix .o-td-sub { white-space: normal; line-height: 1.4 }
@container (max-width: 560px) {
  .o-matrix__row { grid-column: 1 / -1 }
  .o-matrix .o-tr:not(.o-tr--head) { row-gap: 8px }
}

/* Authentication surface: composed fields/buttons, bounded by dialog tokens. */
.o-auth { width: min(100%, var(--w-dialog-md)); margin-inline: auto; padding: var(--space-11); display: grid; gap: var(--space-11); }
.o-auth__form { display: grid; gap: var(--space-8); }
.o-auth__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.o-auth__qr { width: var(--w-sidebar); max-width: 100%; height: auto; background: var(--on-accent); }
.o-auth__secret { overflow-wrap: anywhere; }

/* Setup workspace: keep the form, compact preparation rail and detailed log separate. */
.o-setup { width: min(100%, var(--w-dialog-lg)); margin-inline: auto; padding: var(--space-11); display: grid; grid-template-columns: minmax(0, var(--w-dialog-md)) minmax(0, var(--w-setup-aside)); justify-content: center; align-items: start; gap: var(--space-11); }
.o-setup__main { min-width: 0; display: grid; gap: var(--space-11); }
.o-setup__aside { min-width: 0; position: sticky; top: var(--space-11); }
.o-setup__log { grid-column: 1 / -1; min-width: 0; border-radius: var(--radius-section); background: var(--surface-section); box-shadow: var(--edge-block); }
.o-setup__log-summary { min-height: var(--h-field-xl); padding: var(--space-8) var(--space-10); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); list-style: none; cursor: pointer; color: var(--fg); font-size: var(--text-body); font-weight: var(--weight-medium); }
.o-setup__log-summary::-webkit-details-marker { display: none; }
.o-setup__log-summary > .ti { flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.o-setup__log[open] > .o-setup__log-summary > .ti { transform: rotate(180deg); }
.o-setup__log-body { max-height: var(--h-setup-log); overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; padding: var(--space-8) var(--space-10); border-top: 1px solid var(--line); }

/* ---------- What's new: the release list (ui.NewsList; specs/web-v0.1.0 §4.8) ----------
   .o-news holds one .o-news__release per release, newest first: a head (.o-news__version, the
   .o-news__date and, on the running release, a green "Running" tag) and ul.o-news__items with one
   li.o-news__item per change (a kind tag, New or Fix, then the text). Release texts are data:
   commit subjects, never resource keys. Used on the /changelog page and inside the what's-new
   dialog (dialog.o-dialog[data-o-news], opened by ui.js; see the Dialog component). */
.o-news { display: flex; flex-direction: column; gap: var(--space-10); padding-top: var(--space-6); }
.o-news__release { display: flex; flex-direction: column; gap: var(--space-4); }
.o-news__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-5); }
.o-news__version { margin: 0; font-size: var(--text-step); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.o-news__date { font-size: var(--text-caption); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.o-news__items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.o-news__item { display: flex; align-items: baseline; gap: var(--space-5); font-size: var(--text-body-sm); line-height: 1.5; }
.o-news__item > .o-tag { flex: none; }
.o-news__empty { margin: 0; font-size: var(--text-body-sm); color: var(--fg-2); }

/* ---------- Tour: the screen introduction (ui.Tour; specs/web-v0.1.0 §4.10) ----------
   The server renders a hidden div[data-o-tour] with one <template data-tour-step="selector"> per
   stop (its title and text) and a <template data-tour-chrome> card; ui.js keeps the stops whose
   target is visible and builds .o-tour from the chrome. .o-tour covers the window; .o-tour__spot
   is the hole over the target (a wide box-shadow scrim); .o-tour__card sits beside it (right,
   left, below, above, else centred; clamped to the window). Positions arrive as custom properties
   set through the CSSOM (--o-x/--o-y/--o-w/--o-h for the spot, --o-cx/--o-cy for the card), never
   as style attributes. On phones the card docks full width at the bottom, or at the top
   (data-dock="top") when the target is in the lower half. Keys: Esc ends, ← and →
   step; Done or Skip records cookie optio_toured, and [data-o-tour-start] runs it again. */
.o-tour { position: fixed; inset: 0; z-index: var(--z-tour); }
.o-tour__spot { position: absolute; left: var(--o-x, 50%); top: var(--o-y, 50%); width: var(--o-w, 0); height: var(--o-h, 0); border-radius: var(--space-6); box-shadow: 0 0 0 200vmax var(--scrim); pointer-events: none; transition: left var(--dur-state) var(--ease-out), top var(--dur-state) var(--ease-out), width var(--dur-state) var(--ease-out), height var(--dur-state) var(--ease-out); }
.o-tour__card { position: absolute; left: var(--o-cx, 50%); top: var(--o-cy, 50%); width: min(340px, calc(100vw - 2 * var(--space-6))); padding: var(--space-8) var(--space-9) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); border-radius: var(--radius-card); color: var(--fg); background: var(--surface-dialog); box-shadow: var(--shadow-dialog); transition: left var(--dur-state) var(--ease-out), top var(--dur-state) var(--ease-out); }
.o-tour__title { margin: 0; font-size: var(--text-step); font-weight: var(--weight-medium); line-height: 1.3; }
.o-tour__text { margin: 0; font-size: var(--text-body-sm); line-height: 1.5; color: var(--fg-2); }
.o-tour__foot { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.o-tour__count { flex: 1; font-size: var(--text-caption); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.o-tour [hidden] { display: none; } /* Back on the first stop, Next or Done: buttons set display otherwise */
@media (max-width: 767px) {
  .o-tour__card { left: var(--space-6); right: var(--space-6); top: auto; bottom: var(--space-6); width: auto; }
  .o-tour__card[data-dock="top"] { top: var(--space-6); bottom: auto; } /* the target is in the lower half */
}
@media (prefers-reduced-motion: reduce) { .o-tour__spot, .o-tour__card { transition: none; } }

/* Copy field (ui.CopyField): a read-only value with a button that copies it to the clipboard.
   Contract: the button carries data-o-copy="<id of the input>" and data-o-copied="<label after a
   copy>"; ui.js writes the input's value with navigator.clipboard and shows data-o-copied on the
   button's [data-o-copy-label] for COPIED_MS, then restores it. Without a clipboard the input text is selected. */
.o-copy { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-width: 0; }
.o-copy > .o-input { flex: 1; min-width: 0; text-overflow: ellipsis; }
.o-copy > .o-btn { flex: none; }


/* ===================== responsive ===================== */
/* One markup for every width. The shell answers to the app container (window classes:
   phone < 768, tablet 768–1023, laptop 1024–1279, desktop ≥ 1280); every component answers
   to its own container, so it behaves the same in a dialog, a sheet or a narrow column. */
@keyframes sheetin { from { transform: translateY(100%) } to { transform: none } }
.o-app { container: app / inline-size; position: relative; height: 100% }
.o-main__scroll { container-type: inline-size }
.o-show-sm { display: none }
.o-btn { position: relative }

/* laptop: the agent docks narrow, a wide agent would starve main */
@container app (min-width: 1024px) and (max-width: 1279px) {
  .o-agent[data-width]:not([data-width="full"]) { --o-agent-w: var(--w-agent) }
}

/* tablet: icon rail, agent slides over main as a sheet */
@container app (max-width: 1023px) {
  .o-shell { padding: 12px; gap: 12px }
  .o-shell__body { position: relative; gap: 12px }
  .o-shell__logo { min-width: 0; padding: 0 6px }
  .o-nav { width: var(--w-sidebar-collapsed) }
  .o-nav :where(.o-navitem__label, .o-ws__text, .o-ws > .ti, .o-nav__wide) { display: none }
  .o-nav__foot { flex-direction: column }
  .o-agent, .o-agent[data-width] { --o-agent-w: min(420px, 100%); position: absolute; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: var(--o-agent-w); box-shadow: inset 0 1px 0 rgba(var(--glass-rgb),.75), inset 0 0 0 .5px rgba(var(--glass-rgb),.6), -24px 0 60px -24px rgba(var(--shadow-rgb),.5); background: var(--surface-dialog) }
  .o-agent:not([data-open]) { width: var(--o-agent-w); margin-left: 0; opacity: 0; transform: translateX(calc(100% + 24px)) }
}

/* phone: top bar, one page, floating tab bar; agent and overlays are full-height sheets */
@container app (max-width: 767px) {
  .o-shell { padding: 0; gap: 0 }
  .o-shell__bar { height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0; gap: 8px; background: color-mix(in srgb, var(--bg-solid) 70%, transparent); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); box-shadow: 0 .5px 0 var(--line-strong) }
  .o-shell__bar .o-iconbtn--glass { --s: 36px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none }
  .o-shell__bar .o-avatar--lg { --s: 32px; font-size: 11px }
  .o-shell__logo { height: 56px; padding: 0 } .o-shell__logo img { height: 20px }
  .o-hide-phone { display: none !important }
  .o-shell__body { position: static; flex-direction: column; gap: 0 }
  .o-main { order: 1; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none }
  .o-main__scroll { padding: 14px 14px 20px; gap: 18px }
  .o-shell[data-nav] .o-nav { order: 2; width: auto; flex-direction: row; align-items: center; gap: 0; margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)); padding: 5px; border-radius: 26px }
  .o-shell[data-nav] .o-nav :is(.o-ws, .o-nav__foot) { display: none }
  .o-nav__list { flex: 1; flex-direction: row; justify-content: space-around; gap: 2px }
  .o-navitem { flex: 1; flex-direction: column; justify-content: center; gap: 2px; height: 50px; padding: 0 2px; border-radius: 21px }
  .o-shell .o-nav .o-navitem__label { display: block; flex: none; font-size: 10.5px; letter-spacing: 0 }
  .o-navitem > .ti { width: auto; font-size: 20px }
  .o-shell[data-mode="focus"] .o-nav { display: none }
  .o-agent, .o-agent[data-width] { --o-agent-w: 100%; position: absolute; inset: 0; width: 100%; border-radius: 0; padding-top: env(safe-area-inset-top, 0px) }
  .o-agent:not([data-open]) { width: 100%; opacity: 1; transform: translateY(100%) }
  .o-main > .o-wizardbar { order: 2; flex-wrap: wrap; height: auto; gap: 10px 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: .5px solid var(--line-strong); border-bottom: 0; background: color-mix(in srgb, var(--bg-solid) 70%, transparent); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong) }
  .o-main > .o-wizardbar > .o-wizard { order: -1; flex: 1 1 100%; justify-content: center }
  .o-main > .o-wizardbar > :last-child .o-btn { --h: var(--h-control-lg); padding: 0 20px }
}

/* components, by their own container */
@container (max-width: 820px) { .o-tr { grid-template-columns: var(--o-cols-md, var(--o-cols)) } }
@container (max-width: 560px) {
  .o-tr { grid-template-columns: var(--o-cols-sm, var(--o-cols-md, var(--o-cols))); gap: 10px; padding: 8px 14px; min-height: 60px }
  .o-tr--head { display: none }
  .o-tr--head + .o-tr { border-top: 0 }
  .o-show-sm { display: revert }
  .o-table__foot { padding: 10px 14px 12px }
}
@container (max-width: 560px) {
  .o-pagehead { padding: 2px 2px 8px; gap: 10px }
  .o-pagehead h1 { font-size: 26px }
  .o-pagehead .o-search { order: 3; flex: 1 1 100% }
  .o-kpis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px 16px; gap: 12px }
  .o-kpis > * { scroll-snap-align: center }
  .o-kpi__value { font-size: 34px }
  .o-bignum__value { font-size: var(--text-display); letter-spacing: -1px }
  .o-sentence:not(.o-sentence--exclude) { font-size: 19px; letter-spacing: -.1px }
  .o-block__head { padding: 12px 12px 10px 14px }
  .o-block__body { padding: 12px 16px 16px }
  .o-block__foot { padding: 12px 14px 14px }
  .o-block__foot .o-block__note { flex-basis: 100% }
  .o-block__foot .o-btn--primary { flex: 1 }
  .o-signal { flex-wrap: wrap; row-gap: 8px }
  .o-signal__main { flex: 1 1 calc(100% - 80px) }
  .o-signal__action { margin-left: 31px }
  .o-bulkbar { position: sticky; bottom: 8px; z-index: var(--z-sticky); padding: 6px 6px 6px 14px; border-radius: 22px }
  .o-herostats { flex-wrap: wrap; row-gap: 14px } .o-herostat { padding: 0 16px }
  .o-herostat__value { font-size: 24px }
  .o-tiles { grid-template-columns: repeat(var(--o-cols-sm, var(--o-cols, 3)), minmax(0,1fr)) }
  .o-frow__label { width: 100%; min-height: 0 }
  .o-select { width: 100% }
  .o-choices { grid-template-columns: repeat(2, minmax(0,1fr)) }
}

/* bottom sheet: dialogs, menus and pickers on a phone */
.o-sheet__scrim { position: absolute; inset: 0; z-index: calc(var(--z-dialog) - 1); background: var(--scrim); -webkit-backdrop-filter: var(--blur-scrim); backdrop-filter: var(--blur-scrim); animation: fade var(--dur-state) ease both }
.o-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-dialog); max-height: 92%; display: flex; flex-direction: column; border-radius: var(--radius-dialog) var(--radius-dialog) 0 0; overflow: hidden; color: var(--fg); background: var(--surface-dialog); box-shadow: inset 0 1px 0 rgba(var(--glass-rgb),.9), 0 -20px 60px -30px rgba(var(--shadow-rgb),.5); -webkit-backdrop-filter: var(--blur-dialog); backdrop-filter: var(--blur-dialog); padding-bottom: env(safe-area-inset-bottom, 0px); animation: sheetin .32s var(--ease-out) both }
.o-sheet::before { content: ""; flex: none; align-self: center; width: 36px; height: 5px; margin: 8px 0 0; border-radius: 3px; background: rgba(var(--mute-rgb),.3) }
.o-sheet .o-dialog__head { padding: 10px 12px 12px 18px }
.o-sheet .o-dialog__body { padding: 4px 16px 16px }
.o-sheet .o-dialog__foot { padding: 12px 14px 14px 18px }
.o-sheet--menu { padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)) }
.o-sheet--menu .o-menu__item { min-height: 48px; font-size: 16px; border-radius: 14px }
@media (max-width: 767px) {
  dialog.o-dialog { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--radius-dialog) var(--radius-dialog) 0 0; animation: sheetin .32s var(--ease-out) both }
  .o-menu[popover] { position: fixed; inset: auto 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px; width: auto; min-width: 0; max-height: 70dvh; border-radius: 22px; padding: 8px }
  .o-menu[popover] :is(.o-menu__item, .o-option) { min-height: 48px; font-size: 16px }
  .o-drawer__panel { width: 100% }
  .o-editor__bar { grid-template-columns: minmax(0,1fr) auto; height: auto; padding: 8px 12px; row-gap: 8px }
  .o-editor__bar > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; justify-self: center }
}

/* split: list + detail side by side, drill-in when narrow (audience editor, settings) */
.o-split { container-type: inline-size; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(196px, 236px) minmax(0, 1fr) }
.o-split__list { min-width: 0; overflow-y: auto; padding: 10px 10px 14px 12px; border-right: .5px solid var(--line); display: flex; flex-direction: column; gap: 4px }
.o-split__detail { min-width: 0; overflow-y: auto; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px }
.o-split__back { display: none }
.o-railitem { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 4px 10px; border: 0; border-radius: 14px; background: none; cursor: pointer; text-align: left; color: var(--fg); transition: background var(--dur-fast) ease }
.o-railitem:hover { background: rgba(var(--glass-rgb),.7) } .o-railitem[aria-current="true"] { background: rgba(var(--glass-rgb),.85) }
.o-railitem__text { flex: 1; min-width: 0; display: flex; flex-direction: column } .o-railitem__title { font-size: var(--text-body-sm) } .o-railitem__sum { font-size: var(--text-nano); color: var(--fg-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .o-railitem__sum.has-value { color: var(--blue) }
@container (max-width: 600px) {
  .o-split { grid-template-columns: minmax(0, 1fr) }
  .o-split__list { border-right: 0 }
  .o-split[data-pane="detail"] .o-split__list, .o-split:not([data-pane="detail"]) .o-split__detail { display: none }
  .o-split__back { display: inline-flex; align-self: flex-start; margin: -8px 0 0 -10px }
  .o-split__detail { padding: 14px 16px 18px }
}

/* touch: bigger controls, larger hit areas, no hover-only information */
@media (pointer: coarse) {
  :root, [data-theme] { --h-control: 40px; --h-control-sm: 32px }
  .o-btn::after, .o-iconbtn::after, .o-chip::after, .o-seg__opt::after { content: ""; position: absolute; inset: -6px }
  .o-chip, .o-seg__opt { position: relative }
  .o-input, .o-search input, .o-affix input, .o-composer__field textarea, .o-composer__field input, .o-composer__input, .o-menu__search input { font-size: 16px }
}
@media (hover: none) {
  [data-tip]:hover::after { display: none }
}
@media (max-width: 767px) {
  .o-pop { position: fixed; inset: auto 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px; width: auto; max-height: 80dvh; border-radius: 22px; animation: sheetin .32s var(--ease-out) both }
}

/* Setup follows available main-panel space, never overlays or hides the form. */
@container (max-width: 820px) {
  .o-setup { grid-template-columns: minmax(0, var(--w-dialog-md)); padding: var(--space-8); gap: var(--space-8); }
  .o-setup__aside { position: static; }
}