/* ═══════════════════════════════════════════════════════════════
   CONTENT BUG DESIGN SYSTEM — SINGLE SOURCE OF TRUTH
   Every component, color, font, animation, card, button, wizard.
   DO NOT deviate from this. Copy-paste from here.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   🚫 BLUR IS PERMANENTLY BANNED — NO EXCEPTIONS, EVER 🚫
   ══════════════════════════════════════════════════════════════════
   NEVER use ANY of these. Not once. Not for "ambient effects". Not for
   "glass". Not for overlays. NEVER:
     ✗ filter: blur(...)
     ✗ backdrop-filter: blur(...)
     ✗ -webkit-backdrop-filter: blur(...)
     ✗ SVG <feGaussianBlur>
     ✗ canvas/WebGL blur shaders
   Every blur effect on screen lags the entire portal. Depth is achieved
   via OPACITY + INSET HIGHLIGHTS + BOX-SHADOW + LAYERED GRADIENTS only.
   Drop-shadow filters ARE allowed (filter:drop-shadow). Other filters
   (brightness/invert/grayscale/saturate/hue-rotate) ARE allowed.
   If you're about to type `blur(` — STOP. Use box-shadow + opacity.
   ══════════════════════════════════════════════════════════════════

   PERFORMANCE / MOTION ENFORCEMENT — TOP PRIORITY
   ══════════════════════════════════════════════════════════════════
   1. ALL portal-owned UI motion MUST target 60fps. Visible stutter,
      lag, tearing, or delay in portal-owned animations is a DEFECT.
   2. ONLY animate transform and opacity. NEVER animate width, height,
      top, left, margin, padding, or max-height for UI transitions.
   3. Wizard step transitions: ≤150ms. Button/hover micro-interactions:
      ≤10ms. Modal open/close: ≤200ms. No animation >300ms on UI. */

/* ══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM LOCK — Sean 2026-04-15. Canonical across ALL portal
   pages and embedded iframes. Later rules may override, but the
   spirit here is authoritative:

   TYPOGRAPHY
   ▸ Max font-weight anywhere is 500. No bold, ever. 600/700/800/900
     inline styles are demoted at the end of this file.
   ▸ Default text color on dark theme: rgba(255,255,255,.92). Dim
     supporting text: rgba(255,255,255,.62).

   GLASS CONTAINERS (.shell-body-glass / .app-dock-inner::before)
   ▸ Background: vertical gradient from rgba(255,255,255,.035) at top
     to rgba(255,255,255,.14) at bottom. No mask.
   ▸ Inner border: 1px rgba(255,255,255,.14) + bottom highlight.
   ▸ No bottom-edge light sweep; top divider is enough.

   LEFT NAV (.sb-nav-item / .sb-nav-tile)
   ▸ Just the SVG icon + plain label. NO tile glass, NO outer pill.
   ▸ SVG 18×18, stroke-width 1.25. Label 13px/400.
   ▸ Active: icon opacity 1 + color .96 + 2px accent bar on the left.

   PROJECT CARDS (.pipeline-card)
   ▸ Row 1: [client avatar 26px] [project name 12.5px/500].
   ▸ Row 2 (bottom): [status][type][V#][T#][grade] on the left,
     [timer][editor avatar 26px] on the right.
   ▸ All card pills unified: 22px height, 10.5px/500, 6px radius.
   ▸ Trial cards: type="FT" (yellow), yellow glow via box-shadow
     BEHIND the card (never over content).
   ══════════════════════════════════════════════════════════════════ */

/* ── ZERO-LAG PERFORMANCE ENFORCEMENT ── */
/* KILL all backdrop-filter globally — this is the #1 GPU bottleneck.
   Earlier kill targeted only -webkit-backdrop-filter; modern Chrome/Edge/
   Safari respect the unprefixed property too, so blur(40px) was still
   firing on the shelf, framelab views, etc. Kill BOTH. */
*{-webkit-backdrop-filter:none!important; backdrop-filter:none!important}

/* PERF: pause every CSS animation when the tab isn't visible.
   Browsers throttle rAF when tab is hidden, but CSS animations keep
   running and pegging GPU. shell.js sets body.docs-hidden on
   visibilitychange so every infinite ambient animation (live dots,
   ring pulses, skeletons, scan lines, etc.) pauses. */
body.docs-hidden *, body.docs-hidden *::before, body.docs-hidden *::after {
  animation-play-state: paused !important;
}

/* PERF: respect prefers-reduced-motion globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* PERF: kill ambient INFINITE animations site-wide. 258 of them existed —
   livePulse, ringPulse, pipeUnreadPulse, pcTrialBadgePulse, reviewScan,
   wave bars, ring spins on idle cards, glow halos, etc. All ran forever
   on every visible element and drained the compositor budget on every
   frame. Each plays ONCE on element mount (so users still get the
   initial feedback) then settles, instead of looping at 60fps forever.
   Allow-list below re-enables loops for honest loading indicators. */
*, *::before, *::after { animation-iteration-count: 1 !important; }

/* Allow-list: animations that legitimately need to loop. Loaders/spinners
   give honest progress feedback; skeletons signal "still fetching". */
.spinner, .loader, .loading-spinner, .ldr-ani,
[class*="spinner"], [class*="loader"], [class*="loading-"],
.skeleton, .cb-ring-spin {
  animation-iteration-count: infinite !important;
}

/* PERF: trim persistent will-change. will-change was being declared on
   119 selectors site-wide, pinning a GPU layer per element forever and
   eating compositor memory. Force-reset globally; specific actively-
   animating elements opt back in via the rule below. */
* { will-change: auto !important; }
/* Re-enable will-change on elements ACTIVELY being animated/dragged.
   The selectors below carry a state class (.dragging, .np-open) so the
   GPU layer only exists while motion is in flight. */
.dragging, .pipeline-card.dragging, .kcard.dragging,
body.np-open #npShell, body.bp-open #bpShell,
[class*="-animating"], [data-animating] {
  will-change: transform, opacity !important;
}
/* GPU-promote key containers */
.pv-shell,.ps-thread,.dock-bubble,.rv-ctx,.loading-wrap,
.pipeline-card,.modal-bg,.cb-modal-bg{}
/* ══ MOTION TIER SYSTEM — Content Bug Studio ══
   Tier 0: Press/toggle 80ms sharp | Tier 1: Hover 150ms smooth
   Tier 2: Component 250ms spring  | Tier 3: Page/panel 350ms spring
   RULE: transform + opacity ONLY. will-change on animated elements. */
*,*::before,*::after{transition-property:none;transition-duration:0ms}
.btn,.sb-nav-item,.tab-btn,.dock-btn,.opt-card,.glass-card,.pipeline-card,.modal-close,[role="button"],button{
  transition:transform 80ms var(--ease-sharp,cubic-bezier(.22,1,.36,1)),opacity 80ms var(--ease-sharp,cubic-bezier(.22,1,.36,1)),box-shadow 150ms var(--ease-smooth,cubic-bezier(.33,1,.68,1));}
.glass-card:hover,.pipeline-card:hover,.btn:hover,.sb-nav-item:hover{transition-duration:150ms}
.btn:active,.pipeline-card:active,.glass-card:active,.opt-card:active{transition-duration:80ms}
.dropdown,.tooltip,.ctx-menu,.pvQualityMenu,[class*="menu"],[class*="popover"]{transition:opacity 200ms var(--ease-smooth,cubic-bezier(.33,1,.68,1)),transform 200ms var(--ease-spring,cubic-bezier(.34,1.56,.64,1));}
input,textarea,select{transition:border-color 150ms var(--ease-smooth,cubic-bezier(.33,1,.68,1)),box-shadow 150ms var(--ease-smooth,cubic-bezier(.33,1,.68,1))}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM ENFORCEMENT RULES — NON-NEGOTIABLE
   ══════════════════════════════════════════════════════════════════
   1. NO RAW PIXEL VALUES — Every padding, margin, gap, font-size,
      and border-radius must use a token (--s*, --text-*, --r-*,
      --card-*, --h-*). Only 1-3px decorative details are exempt.
   2. NO INLINE STYLES — All styling lives here as named classes.
      Inline  is forbidden on production components.
   3. NO NEW CLASSES WITHOUT APPROVAL — Check existing classes first.
      New classes require explicit approval. No duplicates.
   4. TOKEN VALUES ARE LOCKED — Changing a :root token value is a
      breaking change. Use a different token or scoped override.
   5. THIS FILE IS THE SINGLE SOURCE — No \3c style> blocks, no
      CSS-in-JS, no scattered stylesheets. One file, one truth.
   6. VERIFY VISUALLY BEFORE SHIPPING — Every edit must be confirmed
      in the live preview. No commit ships without visual proof.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — SINGLE SOURCE OF TRUTH
   All values below are the ONLY permitted values in this system.
   NEVER use raw pixel values in components. Use tokens only.
   ══════════════════════════════════════════════════════════════════ */

/* ── TOKEN REFERENCE ──
   SPACING (8px base grid, s1 bumped to 10px):
   --s0:4px   micro gaps, inline spacing, icon padding
   --s1:10px  tight element gaps, badge/tag padding
   --s2:16px  standard element spacing, form gaps, card internal gaps
   --s3:24px  component padding (cards, modals, sections)
   --s4:32px  section internal padding, hero sub-spacing
   --s5:40px  section dividers, medium vertical rhythm
   --s6:48px  section spacing (between sections on page)
   --s7:56px  large section gaps
   --s8:64px  page-level spacing, hero padding
   --s9:72px  extra-large vertical rhythm
   --s10:80px page margins, max section spacing
   --s11:88px  extended vertical rhythm
   --s12:96px  extended layout spacing
   --s13:104px large vertical gaps
   --s14:112px extra-large layout
   --s15:120px page hero sections (= --section-xl)
   --s16:128px maximum spacing

   TYPOGRAPHY (--text-*):
   --text-2xs:8px   micro labels (island elements, version numbers)
   --text-xs:10px   captions, badges, timestamps
   --text-sm:12px   sub-text, descriptions, small UI
   --text-md:14px   body text, buttons, inputs, form labels
   --text-lg:16px   large body, feature descriptions
   --text-xl:18px   modal titles, card headers
   --text-2xl:22px  page titles, section sub-headings
   --text-3xl:28px  stat values, large headings
   --text-4xl:40px  section hero (.type-section)
   --text-5xl:56px  page hero (.type-hero)

   LINE HEIGHTS:
   --lh-none:1      badges, stats, single-line labels
   --lh-tight:1.1   headings, titles
   --lh-snug:1.2    sub-headings, display text
   --lh-normal:1.4  body text, descriptions
   --lh-relaxed:1.5 paragraphs, long-form
   --lh-loose:1.6   testimonials, readable prose

   LAYOUT:
   --section-sm:48px   tight section spacing
   --section-md:64px   default section spacing
   --section-lg:80px   generous section spacing
   --section-xl:120px  hero/page-level spacing
   --container-sm:520px  modals, narrow forms
   --container-md:700px  content width (FAQ, articles)
   --container-lg:1000px pricing grids, main content
   --container-xl:1200px full-width sections, page max
   --grid-gap-sm:8px    tight grids (kanban cards, islands)
   --grid-gap-md:16px   standard grids (card layouts)
   --grid-gap-lg:24px   generous grids (feature/pricing)

   COMPONENT HEIGHTS (button/input scale):
   --h-xs:28px   compact buttons, small actions
   --h-sm:32px   small buttons (.btn-sm)
   --h-md:40px   default buttons (.btn), inputs (.input)
   --h-lg:48px   large buttons (.btn-lg), search bars
   --h-xl:56px   extra-large hero CTAs

   CARD PADDING:
   --card-sm:12px    pipeline cards, compact cards
   --card-md:20px    stat cards, payout cards
   --card-lg:24px    section cards, glass cards, modals
   --card-xl:32px    pricing cards, feature cards, hero panels

   BORDER RADIUS:
   --r-xs:4px         micro elements, skeleton loaders, code blocks
   --r-sm:6px         tags, badges, small elements
   --r-micro-sm:7px   micro badges, nav badges
   --r-micro-md:9px   nav buttons, island buttons
   --r-md:10px        buttons, inputs, dropdown items
   --r-micro-lg:11px  dynamic island pills
   --r-lg:14px        cards, toasts, pipeline cards
   --r-xl:18px        glass panels, stat cards, modals
   --r-island:22px    glass islands, floating panels
   --r-2xl:24px       section cards, hero containers, major panels
   --r-pill:100px     pills, badges, toggle switches

   MICRO SPACING (sub-grid):
   --s-micro-1:2px   hairline gaps, toggle insets
   --s-micro-2:3px   tight padding, badge padding
   --s-micro-3:5px   compact button padding, small pill padding
   --s-micro-4:6px   context menu padding, island padding

   MICRO TYPOGRAPHY (insertion tokens — NOT sequential with xs scale):
   --text-3xs:9px    smallest badge text, knob labels (between 2xs and xs)
   --text-4xs:11px   captions, descriptions, shortcut labels (between xs and sm)
   NOTE: These are legacy-coverage tokens inserted between existing scale
   positions. Despite the naming, 3xs(9px) < xs(10px) < 4xs(11px). They
   are NOT extensions of the xs naming pattern. Do not renumber them.

   FLUID TYPOGRAPHY ANCHORS:
   --text-hero-min:30px         hero type minimum
   --text-hero-max:64px         hero type maximum
   --text-section-min:24px      section type minimum
   --text-section-max:40px      section type maximum

   BREAKPOINTS (media queries):
   480px   mobile small
   768px   tablet / mobile large
   1024px  desktop small
   1200px  desktop standard
   ────────────────────────────────────────────────────────────── */

:root{
  /* ══ CANONICAL BACKGROUND — lives on .shell only. Everything else is transparent over it.
     ONE background for the entire product. Sean locked 2026-04-16. ══ */
  /* --cb-bg darkened ~30% per Sean 2026-05-17 (was the original
     /Desktop/Studio Background.html stops; now each stop pulled toward
     black). Layer order with the 2× glass-1 wash stays unchanged. */
  /* ONE universal Content Bug background — same gradient on /home, every
     marketing page, the studio shell, and every iframe child. Recipe
     handed over verbatim by Sean 2026-05-18 from /Desktop/studio-
     background (1).html. 11-stop deep navy: richer blue at top
     (#04305a) ramping to near-black-blue at floor (#02050e — slight
     blue cast, never pure black). Identical value in website-base.css. */
  --cb-bg:linear-gradient(180deg,#04305a 0%,#042e54 10%,#03284a 20%,#03223e 30%,#021c34 40%,#02172c 50%,#021224 60%,#020e1c 70%,#020a16 80%,#020710 90%,#02050e 100%);

  /* Amber horizon — yellow-orange wash building over the bottom ~28%.
     Subtle: the deeper navy reads through. Locked 2026-05-18. */
  --cb-amber-horizon:linear-gradient(180deg,transparent 0%,transparent 72%,rgba(255,178,90,.02) 78%,rgba(255,178,90,.05) 85%,rgba(255,178,90,.10) 91%,rgba(255,178,90,.14) 96%,rgba(255,178,90,.19) 100%);

  /* ══ CANONICAL GLASS LAYERS — 4 tiers. Every container picks its tier; no custom glass ever. ══
     Layer 1: the 2 siblings on top of .shell — left nav (.app-dock-inner::before) AND right body (.shell-body-glass::before). Must match.
     Layer 2: inner containers inside Layer 1 — section-card, glass-card, pipeline-card, ps-kanban-col, wiz-shell, modal-panel, stat-card. Must match.
     Layer 3: nested inside Layer 2 — opt-card, dock-bubble, inner rows/groups within a section-card. Must match.
     Layer 4: reserved for future depth. */
  /* Tier-1 frost wash — increases toward the bottom so the stacked
     pair builds up haze where the navy is darkest. Stops handed over
     verbatim by Sean 2026-05-18 (.035 → .14). */
  --cb-glass-1-bg:linear-gradient(180deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.045) 22%,rgba(255,255,255,.055) 40%,rgba(255,255,255,.070) 60%,rgba(255,255,255,.090) 75%,rgba(255,255,255,.110) 88%,rgba(255,255,255,.140) 100%);
  /* Premium liquid light glass — universal lean shadows, no heavy halos.
     Reference: /studio/wiki cards. Universalized 2026-05-18. Every glass
     container shares this signature: single soft drop + top hairline
     highlight (no stacked multi-shadow, no .4+ alpha). */
  --cb-shadow-premium:0 4px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);
  --cb-shadow-premium-hover:0 8px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
  --cb-glass-1-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.14); /* dark drop-shadow stripped 2026-05-22 — Sean: 'they're squared at the corners and look stupid, adding unnecessary GPU strain'. Inset edge highlights kept so glass still reads as glass. */
  --cb-glass-2-bg:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.045) 100%);
  --cb-glass-2-border:1px solid rgba(255,255,255,.08);
  --cb-glass-2-border-top:rgba(255,255,255,.18);
  --cb-glass-2-shadow:inset 0 1px 0 rgba(255,255,255,.06); /* dark drop-shadow stripped 2026-05-22 */
  --cb-glass-3-bg:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.02) 100%);
  --cb-glass-3-border:1px solid rgba(255,255,255,.06);
  --cb-glass-3-shadow:inset 0 1px 0 rgba(255,255,255,.05); /* dark drop-shadow stripped 2026-05-22 */

  /* ── BACKGROUNDS ── */
  --bg:#020408;--bg-el:#080c16;--bg-sf:#0e1420;

  /* ── COLORS: BLUE ── */
  --blue:#2997ff;--blue-hv:#4dabff;--blue-dk:#1a6dd4;
  --blue-hi:#3da5ff;--blue-deep:#1f8cf0;--blue-brand:#0071e3;--blue-hover:#0077ed;
  --blue-glow:rgba(41,151,255,.3);--border-sel:rgba(41,151,255,.55);
  --sh-glow:0 8px 32px rgba(41,151,255,.25);
  --imsg:#0b84fe;--imsg-dk:#0066d6;

  /* ── COLORS: ACCENTS ── */
  --green:#7ecba1;--green-dk:#5faa82;--red:#c0392b;--red-lt:#d44637;
  --orange:#ff9f0a;--purple:#bf5af2;--gold:#f5a623;--gold-lt:#ffdf33;--cyan:#5ac8fa;

  /* ── TEXT ── */
  --txt:#ffffff;--txt2:#ffffff;--txt3:#f0f0f5;--txt4:#d8d8e0;
  --

  /* ── GLASS ── */
  --glass:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 40%,rgba(255,255,255,.05) 100%);
  --glass-flat:rgba(255,255,255,.07);--glass-b:1px solid rgba(255,255,255,.12);
  --glass-bt:rgba(255,255,255,.24);
  --glass-btn:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 100%);

  /* ── SHADOWS ── universalized to premium liquid light 2026-05-18.
     Single soft drop + top hairline only. No multi-stack, no .4+ alpha. */
  --sh:0 4px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);
  --sh-btn:0 1px 2px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.10);

  /* ── SPACING (8px base grid, s1 bumped to 10px) ── */
  --s0:4px;--s1:10px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s7:56px;--s8:64px;--s9:72px;--s10:80px;
  --s11:88px;--s12:96px;--s13:104px;--s14:112px;--s15:120px;--s16:128px;
  /* ── MICRO SPACING (sub-grid) ── */
  --s-micro-1:2px;--s-micro-2:3px;--s-micro-3:5px;--s-micro-4:6px;

  /* ── TYPOGRAPHY SCALE ── */
  --text-2xs:8px;--text-3xs:9px;--text-xs:10px;--text-4xs:11px;--text-sm:12px;--text-md:14px;--text-lg:16px;--text-xl:18px;
  --text-2xl:22px;--text-3xl:28px;--text-4xl:40px;--text-5xl:56px;
  /* ── FLUID TYPOGRAPHY ANCHORS ── */
  --text-hero-min:30px;--text-hero-max:64px;--text-section-min:24px;--text-section-max:40px;

  /* ── LINE HEIGHTS ── */
  --lh-none:1;--lh-tight:1.1;--lh-snug:1.2;--lh-normal:1.4;--lh-relaxed:1.5;--lh-loose:1.6;

  /* ── LAYOUT ── */
  --section-sm:48px;--section-md:64px;--section-lg:80px;--section-xl:120px;
  --container-sm:520px;--container-md:700px;--container-lg:1000px;--container-xl:1200px;
  --grid-gap-sm:8px;--grid-gap-md:16px;--grid-gap-lg:24px;

  /* ── COMPONENT HEIGHTS ── */
  --h-xs:28px;--h-sm:32px;--h-md:40px;--h-lg:48px;--h-xl:56px;

  /* ── CARD PADDING ── */
  --card-sm:12px;--card-md:20px;--card-lg:24px;--card-xl:32px;

  /* ── BORDER RADIUS ── */
  --r-xs:4px;--r-sm:6px;--r-micro-sm:7px;--r-micro-md:9px;--r-md:10px;--r-micro-lg:11px;--r-lg:14px;--r-xl:18px;--r-island:22px;--r-2xl:24px;--r-pill:100px;

  /* ── EASING ── */
  --ease:cubic-bezier(.22,1,.36,1);--ease-smooth:cubic-bezier(.33,1,.68,1);--ease-sharp:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-back:cubic-bezier(.36,0,.66,-.56);--ease-q:cubic-bezier(.25,1,.5,1);--dur-0:80ms;--dur-1:150ms;--dur-2:250ms;--dur-3:350ms;--dur-4:500ms;

  /* ── PREMIUM ELEVATION SHADOWS ── lightened 2026-05-18.
     Each tier: single soft drop + top hairline. No stacks, no heavy halos.
     sh-3 is THE canonical card/panel elevation across the studio (matches
     wiki cards). sh-4 = modals/drawers. sh-5 = floating menus/overlays. */
  --sh-1:0 1px 2px rgba(0,0,0,.18);
  --sh-2:0 2px 8px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  --sh-3:0 4px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);
  --sh-4:0 8px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
  --sh-5:0 16px 40px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08);

  /* ── PREMIUM GLASS GRADIENTS ── */
  --glass-premium:linear-gradient(160deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.06) 30%,rgba(255,255,255,.03) 60%,rgba(255,255,255,.06) 100%);
  --glass-surface:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 40%,rgba(255,255,255,.05) 100%);

  /* ── LUMINOUS BORDER TOKENS ── */
  --border-glass:1px solid rgba(255,255,255,.10);
  --border-glass-top:rgba(255,255,255,.28);
  --border-glow:1px solid rgba(255,255,255,.16);
  --border-glow-top:rgba(255,255,255,.35);

  /* ── RICH SURFACE BACKGROUNDS ── */
  --bg-card:linear-gradient(160deg,rgba(14,18,30,.88) 0%,rgba(8,12,22,.94) 50%,rgba(12,16,28,.90) 100%);
  --bg-float:linear-gradient(180deg,rgba(18,20,28,.92) 0%,rgba(10,12,18,.96) 100%);

  /* ══ FONTS — SF Pro ONLY. Zero fallbacks, zero backups. If the woff2
     fails the page renders in browser default — we do NOT degrade to
     Arial, Helvetica, system-ui, -apple-system, or any other family.
     Sean locked 2026-04-16. ══ */
  --cb-font-text:   'SF Pro Text';
  --cb-font-display:'SF Pro Display';
  --cb-font-mono:   'SF Mono';
  --font:         'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-text:    'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'SF Mono', Menlo, Monaco, 'Cascadia Mono', monospace;
  --mono:         'SF Mono', Menlo, Monaco, 'Cascadia Mono', monospace;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}

/* ═══════════════════════════════════════════════
   CORE BACKGROUNDS — 3 VARIANTS
   Copy the background: property for any page.
   Kill body::before/::after from glass.css:
     body::before,body::after{content:none!important;display:none!important}
   ═══════════════════════════════════════════════ */

/* BG-DARK: Rich black with barely-visible navy hint */
/* ═══ CB UNIVERSAL BACKGROUND — canonical 2-layer stack ═══
   Matches the marketing website (home.html / pricing.html / portfolio.html)
   exactly so the portal and the public site feel like one product:
     Layer 1 (top):    --cb-glass-1-bg  — white sheen that lifts the vibe
     Layer 2 (bottom): --cb-bg          — deep navy → black gradient
   Fixed attachment = one paint, zero repaints on scroll. Glass shells
   (.glass-card, .cb-page-head, .section-card, etc.) sit on top of this bg.

   Used on: portal outermost shell + any standalone page (.bg-dark). Iframe
   pages stay transparent so the parent bg shows through.
   Sean 2026-04-22 — website-parity locked. */
/* ═══════════════════════════════════════════════════════════════════
   STUDIO BACKGROUND — LOCKED SPEC (2026-05-17)
   ───────────────────────────────────────────────────────────────────
   Canonical body/shell composition: TWO --cb-glass-1-bg washes stacked
   over --cb-bg (the navy→black gradient). Verbatim spec from
   /Desktop/Studio Background.html, sourced + locked by Sean.

   Layer order (top → bottom):
     1. var(--cb-glass-1-bg)   outer translucent wash
     2. var(--cb-glass-1-bg)   inner translucent wash (compounds the first)
     3. var(--cb-bg)           deep navy → black base gradient

   All three layers: background-attachment:fixed, no-repeat, 100% 100vh.

   This stack is THE Content Studio background. Every shell, every
   .bg-dark surface, every drawer, every modal-bg, every standalone
   page MUST paint this exact composition. Never single-wash, never
   triple-wash, never custom gradients. If you need to deviate, ask
   Sean first.
   ═══════════════════════════════════════════════════════════════════ */
.bg-dark,.shell{
  /* CANONICAL CONTENT BUG BACKGROUND — byte-identical to the body rule
     in website-base.css. ONE source of truth for every Content Bug
     surface (studio shell + every marketing page). Recipe handed over
     by Sean 2026-05-18 from /Desktop/studio-background (1).html.

     Layers (top → bottom of stack, painted last to first):
       1. --cb-amber-horizon — yellow-orange wash, bottom ~28%
       2. --cb-glass-1-bg    — Tier-1 frost wash (.035 → .14)
       3. --cb-glass-1-bg    — same wash stacked for atmospheric depth
       4. --cb-bg            — 11-stop deep navy → near-black-blue

     attachment:fixed + size:100% 100vh = STICKY. Gradient stays pinned
     to the viewport; content scrolls over it; the full top-to-bottom
     spectrum is always visible. */
  background:
    var(--cb-amber-horizon),
    var(--cb-glass-1-bg),
    var(--cb-glass-1-bg),
    var(--cb-bg) !important;
  background-attachment:fixed,fixed,fixed,fixed !important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat !important;
  background-size:100% 100vh,100% 100vh,100% 100vh,100% 100vh !important;
}
/* Solid base on <html> keeps overscroll bounce dark on iOS/macOS. */
html.bg-dark,html{background:#02050e}
html:not(.bg-dark),body:not(.bg-light):not(.theme-light):not(.bg-dark),.page-shell{background:transparent !important}
/* ABSOLUTE RULE — iframes in the portal NEVER paint their own background.
   Background always lives on the underlying shell glass. Sean 2026-04-16. */
iframe{background:transparent !important}

/* PAGE-LEVEL ACCENT GLOW — subtle blue top-right + amber bottom-left.
   Restored 2026-05-18 per Sean. Same radial-gradient pair the marketing
   website uses (website-base.css body::before). Painted on .bg-dark
   /.shell::before so it doesn't fight the canonical 3-layer background
   underneath. position:fixed + pointer-events:none so it never blocks
   interaction and stays anchored to the viewport on scroll. z-index:0
   places it above the bg layers but below content. */
.bg-dark::before,.shell::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(900px 600px at 70% -10%,rgba(41,151,255,.08),transparent 60%),
    radial-gradient(700px 500px at 5% 100%,rgba(245,166,35,.05),transparent 60%);
}

/* ABSOLUTE RULE — ZERO decorative color dots anywhere. Sean 2026-04-16. */
.notif-dot,.th-event-dot,.ps-kanban-dot,.sb-nav-dot,.ch-th-msg-dot{display:none !important}

/* ABSOLUTE RULE — SF Pro only, forever. Any element that tries to render
   with anything else inherits the SF Pro stack. Sean 2026-04-16. */
html,body,button,input,textarea,select{font-family:var(--cb-font-text) !important}

/* Grid removed — clean gradient only, zero overlays */

/* ═══ PORTAL GLASS PRIMITIVES — reusable 3-layer look from portal sidebar ═══
   .cb-shell = outer masked glass container (generalized from .app-dock-inner::before)
   .cb-card  = inner frosted-faded card (generalized from .sb-nav-tile inline styles)
   Zero blur (backdrop-filter is globally banned). Depth via opacity + inset highlights. */
.cb-card{
  background:linear-gradient(160deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.06) 40%,
    rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.12);
  border-top-color:rgba(255,255,255,.2);
  border-radius:var(--r-lg);
  box-shadow:
    0 2px 8px rgba(0,0,0,.3),
    0 1px 2px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.15);
  padding:var(--s3);
}

/* BG-LIGHT: White void with ambient light bleed (for website/marketing pages) */
.bg-light{
  background:
    radial-gradient(ellipse 130% 45% at 50% -8%,rgba(0,0,0,.06) 0%,rgba(0,0,0,.02) 35%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 25% 3%,rgba(41,151,255,.04) 0%,transparent 50%),
    radial-gradient(ellipse 50% 40% at 75% 8%,rgba(160,80,240,.025) 0%,transparent 50%),
    linear-gradient(180deg,#fff 0%,#f8f8fa 25%,#f2f2f5 55%,#eee 100%);
  color:#1d1d1f}

/* BG-NAVY: Dark blue/black void with ambient light bleed (for premium/tool pages) */

/* ── LAYOUT ── */
body{margin:0;padding:0;background:transparent}

/* ── BG SECTION HEADER ── */

/* ═══════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════ */

/* ═══════════════════════════════
   COLOR SWATCHES
   ═══════════════════════════════ */

/* ═══════════════════════════════
   GLASS CONTAINERS
   ═══════════════════════════════ */

/* Layer 2 glass — standard card. Shared with .section-card + .pipeline-card + .ps-kanban-col + .stat-card. */
.glass-card{background:var(--cb-glass-2-bg);border:var(--cb-glass-2-border);border-top-color:var(--cb-glass-2-border-top);
  border-radius:var(--r-2xl);padding:var(--card-lg);box-shadow:var(--cb-shadow-premium);position:relative;overflow:hidden;
  transition:transform 150ms var(--ease),box-shadow 150ms var(--ease);}
.glass-card:hover{transform:translateY(-1px);box-shadow:var(--cb-shadow-premium-hover)}
.glass-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.30) 80%,transparent)}

/* Login-style dissolving glass bubble — premium */
.glass-bubble{position:relative;padding:var(--s4) var(--s3) var(--s3)}
.glass-bubble::before{content:'';position:absolute;inset:0;border-radius:var(--r-2xl);
  background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.06) 15%,rgba(255,255,255,.04) 30%,rgba(255,255,255,.025) 50%,rgba(255,255,255,.015) 72%,rgba(255,255,255,.006) 85%,transparent 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.18),0 8px 32px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.35),0 0 40px rgba(15,30,60,.08);
  -webkit-mask-image:linear-gradient(180deg,black 0%,black 72%,transparent 88%);
  mask-image:linear-gradient(180deg,black 0%,black 72%,transparent 88%);
  pointer-events:none}
.glass-bubble::after{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.30) 80%,transparent);
  border-radius:1px;pointer-events:none}

/* Flat glass panel (sidebar/nav) — premium depth */
.glass-flat{background:var(--glass-surface);border:var(--border-glass);border-top-color:var(--border-glass-top);
  border-radius:var(--r-xl);padding:var(--s2);box-shadow:var(--sh-2),0 0 24px rgba(15,30,60,.08),0 0 48px rgba(15,30,60,.04);
}

/* ═══════════════════════════════════════════════════════════════
   CB-PAGE-HEAD — CANONICAL PAGE HEADER (Sean 2026-04-22 spec-lock)
   ═══════════════════════════════════════════════════════════════
   Every top-level portal page uses this exact header: one rounded
   bordered bar, title + subtitle on the left, pill toggles /
   filters on the right. Spec derived from health.html h-head block
   and promoted here so no page has to reinvent it.

   Usage:
     <div class="cb-page-head">
       <div class="cb-ph-top">
         <div>
           <h1 class="cb-ph-title">Page Title</h1>
           <p class="cb-ph-sub">Subtitle — one-line description of the page.</p>
         </div>
         <div class="cb-ph-tabs">
           <button class="cb-ph-tab active">Primary</button>
           <button class="cb-ph-tab">Secondary</button>
           <button class="cb-ph-tab">Tertiary</button>
         </div>
       </div>
       <!-- optional second row of filters goes INSIDE cb-page-head as its own child -->
     </div>

   Do NOT redefine these rules in page-local <style> blocks. If a
   page needs a variation, add a modifier class here (not a new
   selector in the page). ═══════════════════════════════════════ */
.cb-page-head{
  display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s1) var(--s2);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg);
  margin-bottom:var(--s1);
}
.cb-ph-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s2);flex-wrap:wrap;
}
.cb-ph-title{
  font:500 24px/1.1 var(--font-display);
  letter-spacing:-.02em;color:var(--txt);margin:0;
}
.cb-ph-sub{
  font:400 12px/1.4 var(--font-display);
  color:rgba(255,255,255,.5);margin:2px 0 0;
}
.cb-ph-tabs{display:flex;gap:var(--s0);flex-wrap:wrap;align-items:center}
.cb-ph-tab{
  appearance:none;cursor:pointer;
  padding:7px 13px;
  font:500 12px/1 var(--font-display);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-md);
  color:rgba(255,255,255,.78);
  transition:background 80ms,color 80ms,border-color 80ms;
}
.cb-ph-tab:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.cb-ph-tab.active{
  background:rgba(41,151,255,.15);
  border-color:rgba(41,151,255,.4);
  color:#7cc7ff;
}
/* Secondary filter row (search bars, dropdowns, secondary pills) lives inside
   cb-page-head as a sibling of cb-ph-top. Divider keeps the two rows coherent
   as one surface. */
.cb-ph-row{
  display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap;
  padding-top:var(--s1);
  border-top:1px solid rgba(255,255,255,.04);
}
.cb-ph-row>.cb-ph-search{margin-left:auto}
.cb-ph-search{
  padding:6px 11px;min-width:200px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-md);
  color:var(--txt);
  font:400 12px/1 var(--font-display);
}
.cb-ph-search::placeholder{color:rgba(255,255,255,.4)}
.cb-ph-select{
  padding:6px 11px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-md);
  color:var(--txt);
  font:500 12px/1 var(--font-display);
  cursor:pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CB-WIZARD-SURFACE — STANDARDIZED WIZARD / FLOW CONTAINER (Sean 2026-04-22)
   ═══════════════════════════════════════════════════════════════════════════
   Every multi-step wizard surface (onboarding, request, blueprints, launcher,
   booking, checkout, free-trial, confirmation, blueprint studio, tour
   overlays, etc.) uses this single class for its primary container.

   Design: the marketing-website 2-layer stack (navy gradient + glass sheen)
   fading OUT going down the container so dense text at the bottom of tall
   steps sits on a cleaner, darker plate and reads easier.

   Inner controls (option cards, inputs, toggles, textareas, selects)
   rendered INSIDE a .cb-wizard-surface are transparent by default — they
   ride on the wizard plate without double-stacking glass. Add the
   `.cb-wiz-nolayer` modifier on a child to opt out.

   Usage:
     <section class="cb-wizard-surface">
       <header>…</header>
       <div class="cb-wiz-body">
         <input class="cb-wiz-input" …>
         <button class="cb-wiz-card">…</button>
       </div>
     </section>

   Rules (per memory):
     • NO blur (banned permanently)
     • NO pure #000 anywhere — use #000001
     • Borders only for edge definition, no double glass fills
   ═══════════════════════════════════════════════════════════════════════════ */
.cb-wizard-surface{
  position:relative;
  border-radius:var(--r-2xl);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 40px 120px rgba(0,0,0,.55),
    0 8px 40px rgba(0,0,0,.35);
  /* !important is deliberate: .shell-body-glass is defined later in this
     file (line ~1527) with background:transparent, and several wizard-page
     local styles force solid dark fills (e.g. blueprints.html build-solo).
     The wizard plate needs to win the cascade regardless. */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.11) 0%,
      rgba(255,255,255,.07) 35%,
      rgba(255,255,255,.035) 70%,
      rgba(255,255,255,.015) 100%),
    linear-gradient(180deg,
      #032a4b 0%,
      #022240 25%,
      #01172e 55%,
      #010916 80%,
      #00050e 100%) !important;
}
/* Kill the second glass layer when shell-body-glass + cb-wizard-surface are
   stacked on the same element — prevents the "3 layers of container shells"
   look. The wizard-surface IS the glass now. */
.shell-body-glass.cb-wizard-surface::before,
.shell-body-glass.cb-wizard-surface::after{display:none !important}

/* Nested wizard elements (.wiz-overlay, .wiz-shell, .bp-panel) collapse into
   the outer wizard plate — no inner glass, no dark overlay. They provide
   STRUCTURE only when riding on a .cb-wizard-surface. */
.cb-wizard-surface .wiz-overlay{background:transparent !important}
.cb-wizard-surface .wiz-shell{background:transparent !important;border-color:rgba(255,255,255,.08) !important;box-shadow:none !important}
.cb-wizard-surface .bp-panel{background:transparent !important}
.cb-wizard-surface .bp-landing-card{background:transparent !important}
@media (max-width:640px){
  .cb-wizard-surface{border-radius:var(--r-xl)}
}

/* Inner controls — transparent by default so they sit on the wizard plate */
.cb-wizard-surface .cb-wiz-card,
.cb-wizard-surface .cb-wiz-card-opt,
.cb-wizard-surface .cb-wiz-input,
.cb-wizard-surface .cb-wiz-select,
.cb-wizard-surface .cb-wiz-textarea,
.cb-wizard-surface .cb-wiz-toggle{
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);
  color:var(--txt);
  transition:background 150ms ease,border-color 150ms ease;
}
.cb-wizard-surface .cb-wiz-card:hover,
.cb-wizard-surface .cb-wiz-card-opt:hover,
.cb-wizard-surface .cb-wiz-toggle:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.2);
}
.cb-wizard-surface .cb-wiz-input:focus,
.cb-wizard-surface .cb-wiz-select:focus,
.cb-wizard-surface .cb-wiz-textarea:focus{
  outline:none;
  border-color:rgba(41,151,255,.55);
  background:rgba(255,255,255,.04);
}
.cb-wizard-surface .cb-wiz-card-opt.active,
.cb-wizard-surface .cb-wiz-card.active{
  background:rgba(41,151,255,.12);
  border-color:rgba(41,151,255,.55);
  color:rgba(255,255,255,.98);
}

/* Opt-out hook — use when a child MUST keep its own fill */
.cb-wizard-surface .cb-wiz-nolayer{background:inherit !important}

/* ═══════════════════════════════
   BUTTONS — 3D GLASS SYSTEM
   ═══════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  padding:11px var(--s3);font:500 var(--text-md)/var(--lh-none) var(--font);letter-spacing:-.01em;
  border-radius:var(--r-lg);border:none;cursor:pointer;min-height:var(--h-md);position:relative;
  transition:transform 10ms,box-shadow 10ms;}

/* ─── GLASS INTENSITY SPECTRUM ─── */
/* Glass 1 — Ultra Light (barely there) — convex glass */

/* Glass 2 — Light — convex glass */

/* Glass 3 — Standard (default) — convex glass */

/* Glass 4 — Medium — convex glass */

/* Glass 5 — Heavy — convex glass */
.btn-g5{background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  }
.btn-g5:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);
  box-shadow:0 2px 8px rgba(0,0,0,.2)}

/* Glass 6 — Frosted (most visible) — convex glass */

/* ─── SUBTLE ACCENT GLOWS (behind buttons/cards) ─── */
/* Navy glow — dark subtle blue behind element */
/* Silver glow — cool metallic behind element */
/* Gold glow — warm subtle behind element */

/* Ghost/text — no fill */
.btn-ghost{background:none;color:rgba(255,255,255,.7);padding:var(--s1) var(--s2);border-radius:var(--r-md);
  border:1px solid transparent;transition:background 10ms var(--ease),color 10ms var(--ease),border-color 10ms var(--ease)}
.btn-ghost:hover{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.06)}

/* Pill button */

/* Disabled state */
.btn:disabled,.btn[disabled]{opacity:.35;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* Button sizes — locked to --h-* component height tokens */
.btn-sm{padding:7px var(--s2);font-size:var(--text-sm);min-height:var(--h-sm);border-radius:var(--r-md)}

/* ═══════════════════════════════
   INPUTS — RECESSED GLASS
   ═══════════════════════════════ */
.input{width:100%;padding:var(--card-sm) var(--s2);font:400 var(--text-md)/var(--lh-normal) var(--font);color:var(--txt);
  min-height:var(--h-md);
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.04);border-radius:var(--r-md);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.3),inset 0 -1px 0 rgba(255,255,255,.06),0 1px 3px rgba(0,0,0,.15);
  outline:none;transition:border-color 10ms,box-shadow 10ms}
.input::placeholder{color:var(--txt4)}
.input:focus{border-color:rgba(41,151,255,.5);box-shadow:inset 0 2px 4px rgba(0,0,0,.2),0 0 0 3px rgba(41,151,255,.12),0 0 20px rgba(41,151,255,.08)}

.input-label{display:block;font:500 var(--text-md)/1.2 var(--font);text-transform:uppercase;letter-spacing:1.5px;color:var(--txt3);margin-bottom:var(--s1)}

/* Textarea */

/* Select */
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

.card-916 .card-meta{font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3);margin-top:var(--s0)}

/* Stat Card — premium glass */
.stat-card{background:var(--cb-glass-2-bg);border:var(--cb-glass-2-border);border-top-color:var(--cb-glass-2-border-top);
  border-radius:var(--r-xl);padding:var(--card-md);box-shadow:var(--cb-glass-2-shadow);position:relative;overflow:hidden}
.stat-card .stat-value{font:500 var(--text-3xl)/1 var(--font-display);letter-spacing:-.02em}
.stat-card .stat-label{font:500 var(--text-sm)/1 var(--font);color:var(--txt3);margin-top:var(--s0)}

/* Desktop Icon — macOS Finder style draggable */
.desktop-icon.selected{background:rgba(41,151,255,.12);border-radius:var(--r-lg)}
.desktop-icon.selected .di-label{color:var(--blue)}

/* Glass Island — universal right-click popup */
.glass-island.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}

.meeting-card .mtg-status.live{background:rgba(192,57,43,.15);color:var(--red)}
.meeting-card .mtg-status.scheduled{background:rgba(41,151,255,.15);color:var(--blue)}

/* ═══════════════════════════════
   WIZARD — UNIVERSAL QUESTIONNAIRE
   ═══════════════════════════════ */
.wizard-dot.active{background:rgba(41,151,255,.15);border-color:var(--blue);color:var(--blue);
  box-shadow:0 0 0 4px rgba(41,151,255,.1);animation:ringPulse 1.5s ease infinite}
.wizard-dot.done{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:rgba(126,203,161,.9);
  box-shadow:0 0 14px rgba(126,203,161,.12),0 0 28px rgba(126,203,161,.06)}
.wizard-dot.done:hover{box-shadow:0 0 18px rgba(126,203,161,.2),0 0 36px rgba(126,203,161,.1)}
.wizard-dot.done svg{width:16px;height:16px;stroke-width:2.5;animation:checkIn 25ms ease-out}
.wizard-wire.done{background:var(--green)}

/* Progress bar under steps */

/* Wizard content frame — centers and constrains wizard step content */

/* Body + footer */
.rq-step{display:none !important}.rq-step.active{display:flex !important;flex-direction:column;align-items:center;width:100%;max-width:100%;text-align:center}
.wizard-body.reverse{animation:slideRight 25ms cubic-bezier(.16,1,.3,1)}
.wizard-foot>.btn-ghost,.wizard-foot>.btn-back{margin-right:auto}

/* ═══════════════════════════════
   SHARED WIZARD MODAL SYSTEM
   One unified wizard for: onboarding, blueprint, request, staff onboarding.
   Every wizard MUST use these shared classes.
   ═══════════════════════════════ */

/* ── Overlay: dims portal background ── */
.wiz-overlay{position:fixed;inset:0;z-index:900;
  background:rgba(0,2,6,.88);-webkit-backdrop-filter:none;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity 10ms ease,visibility 10ms;
  }
.wiz-overlay.open{opacity:1;visibility:visible}

/* ── Premium wizard container — LIQUID GLASS ── */
.wiz-shell{width:min(1180px,94vw);max-height:min(900px,92vh);position:relative;
  background:linear-gradient(180deg,
    rgba(255,255,255,.07) 0%,
    rgba(255,255,255,.045) 12%,
    rgba(255,255,255,.03) 30%,
    rgba(255,255,255,.02) 55%,
    rgba(255,255,255,.012) 75%,
    rgba(255,255,255,.006) 100%);
  border:1px solid rgba(255,255,255,.10);
  border-top-color:rgba(255,255,255,.18);
  border-radius:24px;
  box-shadow:
    0 40px 100px rgba(0,0,0,.45),
    0 8px 32px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.02);
  
  display:flex;flex-direction:column;overflow:hidden;
  transform:scale(.97) translateY(8px);opacity:0;
  transition:transform 10ms cubic-bezier(.16,1,.3,1),opacity 10ms ease}
.wiz-overlay.open .wiz-shell{transform:scale(1) translateY(0);opacity:1}
/* Full-page wizard variant — maximizes viewport space */
.wiz-shell-full{width:min(1280px,96vw);max-height:min(1100px,94vh)}
/* Tall variant for request wizard */
.wiz-shell-tall{width:min(1180px,94vw)}
/* Request overlay — centered wizard card (not full page). Horizontal overflow allowed inside step, vertical never. */
.rq-overlay{background:transparent !important;align-items:center !important;justify-content:center !important}
.rq-overlay .wiz-shell{width:min(760px,92vw) !important;max-width:760px !important;max-height:min(860px,94vh) !important;border-radius:24px !important;margin:auto}
/* Request wizard shell — lighter glass than default */
.rq-overlay .wiz-shell{background:linear-gradient(180deg,
  rgba(255,255,255,.10) 0%,rgba(255,255,255,.06) 12%,rgba(255,255,255,.04) 30%,
  rgba(255,255,255,.03) 55%,rgba(255,255,255,.02) 100%) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 40px 100px rgba(0,0,0,.3),0 8px 32px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.18) !important}
/* Request wizard needs full width for tier grid + blueprint scroll */
.rq-overlay .wiz-content > *{max-width:100%}
.rq-overlay .rq-step.active{display:flex !important;flex-direction:column;align-items:center;flex-wrap:nowrap !important}
/* Request wizard bigger step dots */
.rq-overlay .wiz-step-dot{width:72px;height:72px;font-size:15px}
.rq-overlay .wiz-step-dot lottie-icon{width:36px;height:36px}
.rq-overlay .wiz-step-wire{width:28px;height:2px}
/* Lottie idle: paused. Animate only on hover + step completion. */
.rq-overlay .wiz-step-dot lottie-icon{--lottie-autoplay:0}
.rq-overlay .wiz-step-dot:hover lottie-icon{--lottie-autoplay:1}
.rq-overlay .wiz-step-dot.done lottie-icon,.rq-overlay .wiz-step-dot.active lottie-icon{--lottie-autoplay:1}
.rq-overlay .wiz-step-dot:hover{transform:scale(1.08);transition:transform 150ms ease}
.rq-overlay .wiz-step-dot{transition:transform 150ms ease,background 200ms ease,border-color 200ms ease}
/* Top edge shimmer */
.wiz-shell::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20) 25%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.20) 75%,transparent);pointer-events:none}
/* Inner highlight edge */
.wiz-shell::after{content:'';position:absolute;inset:0;border-radius:24px;pointer-events:none;z-index:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.03)}

/* ── Universal Wizard Header Stack ──
   Logo ring → Eyebrow → Title → Divider → Wizard name → User info
   Matches login page brand lockup, promoted to shared system.
   Used by ALL wizards (onboarding, request, blueprint, trial). */
.wiz-brand{text-align:center;flex-shrink:0;padding:28px 24px 0}
.wiz-brand .login-logo-ring{width:72px;height:72px;margin:0 auto 14px}
.wiz-brand .login-logo-ring img{width:50px;height:50px}
.wiz-brand-eyebrow{font:500 9px/1 var(--font-display);color:var(--blue);
  letter-spacing:.22em;text-transform:uppercase;margin:0 0 8px}
.wiz-brand-title{font:500 30px/1 var(--font-display);letter-spacing:-1px;
  color:var(--txt);margin:0 0 14px}
.wiz-brand-divider{width:60%;max-width:200px;height:1px;margin:0 auto 12px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 30%,rgba(255,255,255,.14) 70%,transparent)}
.wiz-brand-label{font:500 12px/1 var(--font-display);color:var(--txt3);
  letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px}
.wiz-brand-user{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:4px;flex-wrap:wrap}
.wiz-brand-name{font:500 14px/1.2 var(--font-display);color:var(--txt)}
.wiz-brand-role{display:inline-flex;align-items:center;padding:3px 10px;
  border-radius:6px;font:500 9px/1 var(--font-display);letter-spacing:.8px;
  text-transform:uppercase}
.wiz-brand-role[data-role="client"]{background:rgba(41,151,255,.10);border:1px solid rgba(41,151,255,.25);color:var(--blue)}
.wiz-brand-role[data-role="trial"]{background:rgba(52,199,89,.10);border:1px solid rgba(52,199,89,.25);color:var(--green)}
.wiz-brand-role[data-role="editor"]{background:rgba(41,151,255,.10);border:1px solid rgba(41,151,255,.25);color:var(--blue)}
.wiz-brand-role[data-role="admin"]{background:rgba(255,159,10,.10);border:1px solid rgba(255,159,10,.25);color:#ff9f0a}
.wiz-brand-role[data-role="owner"]{background:rgba(191,90,242,.10);border:1px solid rgba(191,90,242,.25);color:#bf5af2}

/* ── Hero header inside wizard ── */
.wiz-hero{flex-shrink:0;padding:var(--s4) var(--s4) 0;text-align:center;position:relative}
.wiz-hero-close{position:absolute;top:var(--s2);right:var(--s2);width:32px;height:32px;border-radius:50%;
  border:none;background:rgba(255,255,255,.06);color:var(--txt3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 10ms,color 10ms}
.wiz-hero-close:hover{background:rgba(255,255,255,.12);color:var(--txt)}
.wiz-hero-close svg{width:16px;height:16px}

/* ── Step rail inside wizard ── */
.wiz-step-rail{display:flex;align-items:center;justify-content:center;gap:0;
  padding:var(--s2) var(--s4) var(--s1);flex-shrink:0}
.wiz-step-dot{width:36px;height:36px;flex:0 0 36px;border-radius:50%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font:500 var(--text-xs)/1 var(--font);color:var(--txt3);
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);
  transition:background 150ms cubic-bezier(.16,1,.3,1),border-color 150ms cubic-bezier(.16,1,.3,1),color 150ms cubic-bezier(.16,1,.3,1),box-shadow 150ms cubic-bezier(.16,1,.3,1)}
.wiz-step-dot.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.45);color:var(--blue);
  box-shadow:0 0 0 4px rgba(41,151,255,.08),0 0 16px rgba(41,151,255,.10)}
.wiz-step-dot.done{background:rgba(126,203,161,.10);border-color:rgba(126,203,161,.35);color:var(--green);
  box-shadow:0 0 0 3px rgba(126,203,161,.06);position:relative}
.wiz-step-dot.done svg{width:14px;height:14px;stroke-width:2.5}
/* DONE state: hide whatever icon was there, replace with a green checkmark overlay */
.wiz-step-dot.done lottie-icon,.wiz-step-dot.done > svg:not(.wiz-check){display:none}
.wiz-step-dot.done::after{
  content:'';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334c759' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:18px 18px;
  animation:wizDotPop 360ms cubic-bezier(.34,1.56,.64,1) both;
}
/* Active state: icon scales in once on transition to active */
.wiz-step-dot.active lottie-icon{animation:wizDotPulse 600ms ease-out 1}
/* JUST-COMPLETED: one-shot bounce + green ring flash when transitioning from active to done */
.wiz-step-dot.just-completed{animation:wizDotJustDone 700ms cubic-bezier(.34,1.56,.64,1) 1}
@keyframes wizDotJustDone{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(126,203,161,.5)}
  35%{transform:scale(1.25);box-shadow:0 0 0 8px rgba(126,203,161,.25)}
  70%{transform:scale(.95)}
  100%{transform:scale(1);box-shadow:0 0 0 3px rgba(126,203,161,.06)}
}
/* One-shot pop for done state */
@keyframes wizDotPop{
  0%{transform:scale(.4);opacity:0}
  60%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes wizDotPulse{
  0%{transform:scale(.7);opacity:.5}
  50%{transform:scale(1.18);opacity:1}
  100%{transform:scale(1);opacity:1}
}
/* Lottie icons inside step bubbles — sized to fit the 36px dot */
.wiz-step-dot lottie-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;line-height:0;pointer-events:none}
.wiz-step-dot lottie-icon svg,.wiz-step-dot lottie-icon canvas{width:100%!important;height:100%!important;display:block}
/* Upcoming (no modifier) — icon at reduced opacity so the active step pops */
.wiz-step-dot:not(.active):not(.done) lottie-icon{opacity:.45;filter:grayscale(.4)}
/* Active — icon in full blue brightness */
.wiz-step-dot.active lottie-icon{opacity:1}
/* Done — icon gets a subtle green glow (check.json is swapped in via JS) */
.wiz-step-dot.done lottie-icon{opacity:1}
.wiz-step-wire{width:28px;height:1.5px;background:rgba(255,255,255,.06);margin:0 3px;
  transition:background 10ms}
.wiz-step-wire.done{background:var(--green)}

/* ── Scrollable content area ── */
.wiz-content{flex:1;overflow-y:auto;padding:var(--s2) var(--s4) var(--s3);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.wiz-content > *{width:100%;max-width:960px;margin-left:auto;margin-right:auto}
/* wiz-answers is a vertical stack of question sections (num, title, desc, grids) — never wraps */
.wiz-content .wiz-answers{display:flex;flex-direction:column;align-items:center;gap:var(--s1);width:100%}
/* opt-grid + chip-row enforce single row — no 2-row wrap, no mid-card cutoff */
.wiz-content .opt-grid,.wiz-content .chip-row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:var(--s2);width:100%;grid-template-columns:none}
.wiz-content .opt-grid > *,.wiz-content .chip-row > *{flex:1 1 0;min-width:0;max-width:260px}
/* bp-fmt-grid inside wizard: single-row flex, equal-share children, never wraps, never cuts */
.wiz-content .bp-fmt-grid{display:flex;flex-wrap:nowrap;justify-content:center;gap:var(--s2);width:100%;max-width:none;margin-top:var(--s2);align-items:stretch;grid-template-columns:none}
.wiz-content .bp-fmt-grid > .bp-fmt-card{flex:1 1 0;min-width:0;max-width:280px;padding:var(--s3) var(--s2)}
.wiz-content .bp-fmt-grid + .bp-fmt-grid{margin-top:var(--s3)}
.wiz-content .bp-fmt-sublabel{font:500 var(--text-xs)/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--txt3);margin-top:var(--s3);margin-bottom:var(--s1);text-align:center;width:100%}
.wiz-content::-webkit-scrollbar{width:4px}
.wiz-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}

/* ── Question block ── */
.wiz-q-num{font:500 var(--text-md)/1.2 var(--font);color:var(--blue);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:var(--s1);text-align:center}
.wiz-q-title{font:500 var(--text-2xl)/var(--lh-snug) var(--font-display);color:var(--txt);
  letter-spacing:-.01em;margin:0 0 var(--s0);text-align:center}
.wiz-q-desc{font:400 var(--text-md)/var(--lh-normal) var(--font);color:var(--txt3);margin-bottom:var(--s3);text-align:center}

/* ── Answer region (wraps opt-grid, chip-row, forms, etc.) ── */
.wiz-answers{animation:slideLeft 25ms cubic-bezier(.16,1,.3,1)}
.wiz-answers.reverse{animation:slideRight 25ms cubic-bezier(.16,1,.3,1)}

/* ── Footer nav ── */
.wiz-footer{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:12px;
  padding:var(--s2) var(--s4) var(--s3);border-top:1px solid rgba(255,255,255,.05)}
.wiz-footer .btn-ghost{margin-right:auto}
.wiz-footer .btn{min-width:100px}

/* ── Summary block (final step) ── */
.wiz-summary{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-xl);padding:var(--s3);margin-top:var(--s1)}

/* ── New Review Summary (rebuilt — liquid glass) ── */
.wiz-summary{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:28px 28px 24px;margin-top:8px;
  box-shadow:0 12px 40px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;overflow:visible}
.wiz-summary::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(41,151,255,.5) 50%,transparent)}
/* Blueprint hover details */

/* ── Blueprint card tier-coloured borders (Step 5) ── */
.rq-bp-tier1.selected{border-color:#fff;box-shadow:0 0 0 1px #fff,0 8px 24px rgba(255,255,255,.10)}
.rq-bp-tier2.selected{border-color:#5ac8fa;box-shadow:0 0 0 1px #5ac8fa,0 8px 24px rgba(90,200,250,.18)}
.rq-bp-tier3.selected{border-color:#bf5af2;box-shadow:0 0 0 1px #bf5af2,0 8px 24px rgba(191,90,242,.18)}

/* ── Success state — big centered celebration ── */
.wiz-success{text-align:center;padding:var(--s5) 0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh}
.wiz-success-check{width:280px;height:280px;border-radius:50%;margin:0 auto var(--s4);
  box-shadow:0 0 0 1px rgba(52,199,89,.3),0 24px 80px -8px rgba(52,199,89,.55),inset 0 0 0 2px rgba(255,255,255,.12);
  background:linear-gradient(135deg,var(--green),#4ade80);
  display:flex;align-items:center;justify-content:center;
  animation:successPop 520ms cubic-bezier(.34,1.56,.64,1) both}
.wiz-success-check svg{width:160px;height:160px;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wiz-success-check svg polyline{stroke-dasharray:36;stroke-dashoffset:36;animation:successCheckDraw 420ms 320ms cubic-bezier(.65,0,.35,1) forwards}
.wiz-success h2{font:500 var(--text-4xl)/var(--lh-tight) var(--font-display);color:var(--txt);margin:0 0 var(--s2);letter-spacing:-.01em}
.wiz-success p{font:400 var(--text-lg)/var(--lh-normal) var(--font);color:var(--txt2);margin:0}
@keyframes successPop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes successCheckDraw{to{stroke-dashoffset:0}}

/* ── Onboarding dedicated page (full-screen wizard, no overlay) ── */
.wiz-page{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:transparent;padding:var(--s3)}
.wiz-page .wiz-shell{width:min(1440px,96vw);max-height:min(960px,92vh);
  position:relative;transform:none;opacity:1}
.wiz-page .wiz-shell.wiz-shell-full{width:min(1440px,96vw);max-height:min(1100px,94vh)}
.wiz-page .wiz-content{padding:var(--s4) var(--s6) var(--s5)}
.wiz-page .wiz-content > *{max-width:1100px}

/* ── Wizard form elements — centered, consistent ── */
.wiz-form-group{display:flex;flex-direction:column;gap:16px;width:100%;max-width:480px;margin:0 auto}
.wiz-form-row{display:flex;gap:12px}
.wiz-form-row>*{flex:1;min-width:0}
.wiz-form-label{display:block;font:500 11px/1 var(--font);color:var(--txt3);
  letter-spacing:.4px;text-transform:uppercase;margin-bottom:6px;text-align:center}
.wiz-form-input,.wiz-form-select,.wiz-form-textarea{display:block;width:100%;padding:12px 16px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;color:var(--txt);font:400 14px/1.4 var(--font);outline:none;
  text-align:center;transition:border-color 150ms,background 150ms}
.wiz-form-input:focus,.wiz-form-select:focus,.wiz-form-textarea:focus{
  border-color:rgba(41,151,255,.35);background:rgba(255,255,255,.05)}
.wiz-form-input::placeholder,.wiz-form-textarea::placeholder{color:rgba(255,255,255,.22)}
.wiz-form-textarea{text-align:left;resize:vertical;min-height:72px}
.wiz-form-select{appearance:none;cursor:pointer;text-align:left;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.wiz-form-select option{background:#0a0e16;color:var(--txt)}
.wiz-form-error{color:var(--red);font:500 12px/1.3 var(--font);text-align:center;min-height:16px}

/* ── Wizard chip row (industries, platforms, etc.) ── */
.wiz-chip-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.wiz-chip.selected{background:rgba(41,151,255,.10);border-color:rgba(41,151,255,.30);color:var(--blue)}

/* ── Wizard toggle row ── */
.wiz-toggle-row{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);border-radius:12px}
.wiz-toggle-label{font:500 13px/1.3 var(--font);color:var(--txt)}
.wiz-toggle-desc{font:400 11px/1.3 var(--font);color:var(--txt3);margin-top:3px}
.wiz-toggle.on{background:var(--blue)}
.wiz-toggle.on::after{transform:translateX(20px)}

/* ── Wizard review rows ── */
.wiz-review-row{display:flex;justify-content:space-between;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.04);font:400 13px/1.4 var(--font)}
.wiz-review-row:last-child{border-bottom:none}
.wiz-review-lbl{color:var(--txt3)}
.wiz-review-val{color:var(--txt);font-weight:500;text-align:right;max-width:60%}

/* ── Wizard social card ── */
.wiz-social-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.wiz-social-icon{width:36px;height:36px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.05)}
.wiz-social-card input{flex:1;background:none;border:none;color:var(--txt);
  font:400 14px/1 var(--font);outline:none;text-align:left}
.wiz-social-card input::placeholder{color:rgba(255,255,255,.20)}

/* ── Wizard info box ── */
.wiz-info-box{background:rgba(41,151,255,.04);border:1px solid rgba(41,151,255,.12);
  border-radius:12px;padding:14px 16px;font:400 12px/1.5 var(--font);
  color:var(--txt3);text-align:left}
.wiz-info-box strong{color:var(--txt2)}

/* ── Wizard avatar preview ── */
.wiz-avatar{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.04);
  border:2px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;overflow:hidden;cursor:pointer}
.wiz-avatar img{width:100%;height:100%;object-fit:cover}
.wiz-avatar-initials{font:500 28px/1 var(--font-display);color:var(--txt3)}

/* ── Discord connect button ── */
.wiz-discord-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;
  border-radius:12px;border:none;background:#5865f2;color:#fff;
  font:500 14px/1 var(--font);cursor:pointer;transition:background 150ms}
.wiz-discord-btn:hover{background:#6b74f7}
.wiz-discord-btn svg{width:20px;height:20px;fill:#fff}

/* ── Wizard mobile breakpoints ── */
@media(max-width:768px){
  .wiz-page{padding:var(--s2)}
  .wiz-page .wiz-shell,.wiz-shell{width:100%;max-height:100vh;border-radius:20px}
  .wiz-shell-full{width:100%;max-height:100vh}
  .wiz-brand{padding:20px 20px 0}
  .wiz-brand .login-logo-ring{width:60px;height:60px;margin-bottom:10px}
  .wiz-brand .login-logo-ring img{width:40px;height:40px}
  .wiz-brand-title{font-size:24px}
  .wiz-brand-eyebrow{font-size:8px}
  .wiz-hero{padding:var(--s2) var(--s3) 0}
  .wiz-content{padding:var(--s2) var(--s3) var(--s2)}
  .wiz-footer{padding:var(--s2) var(--s3)}
  .wiz-step-dot{width:30px;height:30px}
  .wiz-step-dot lottie-icon{width:16px;height:16px}
  .wiz-step-wire{width:16px}
  .wiz-form-row{flex-direction:column}
  .wiz-q-title{font-size:var(--text-xl)}
}
@media(max-width:480px){
  .wiz-page{padding:0}
  .wiz-page .wiz-shell,.wiz-shell{border-radius:0;max-height:100vh;min-height:100vh}
  .wiz-shell-full{border-radius:0}
  .wiz-brand{padding:16px 16px 0}
  .wiz-brand .login-logo-ring{width:52px;height:52px}
  .wiz-brand .login-logo-ring img{width:35px;height:35px}
  .wiz-brand-title{font-size:22px}
  .wiz-content{padding:var(--s1) var(--s2) var(--s2)}
  .wiz-content > *{max-width:100%}
  .wiz-footer{padding:var(--s1) var(--s2) var(--s2)}
  .wiz-step-dot{width:28px;height:28px}
  .wiz-step-dot lottie-icon{width:14px;height:14px}
  .wiz-step-wire{width:10px}
  .wiz-form-group{max-width:100%}
}

/* Question label */

/* ── Format 1: Grid option cards ── */
.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s2);justify-items:center}
/* Compact grid for storage folder cards (1/3 size) */
.opt-grid-compact .opt-card{padding:var(--card-sm);border-radius:var(--r-lg)}
.opt-grid-compact .opt-card .opt-icon{font-size:var(--text-xl);margin-bottom:var(--s0)}
.opt-grid-compact .opt-card .opt-icon svg{width:20px;height:20px}
.opt-grid-compact .opt-card .opt-title{font-size:var(--text-sm)}
.opt-grid-compact .opt-card .opt-desc{font-size:var(--text-xs);margin-top:2px}
.opt-card{padding:var(--card-lg);border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;text-align:center;transition:border-color 10ms,box-shadow 10ms,transform 10ms;position:relative;overflow:hidden}
.opt-card:hover{border-color:rgba(255,255,255,.14);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.3)}
.opt-card:active{transform:scale(.98);transition-duration:10ms}
.opt-card.selected{border-color:var(--blue);background:linear-gradient(180deg,rgba(41,151,255,.1) 0%,rgba(41,151,255,.02) 100%);
  box-shadow:0 0 0 3px rgba(41,151,255,.12),0 4px 16px rgba(41,151,255,.08);animation:selectPop 25ms var(--ease-spring)}
.opt-card .opt-icon{font-size:var(--text-3xl);margin-bottom:var(--s1);display:block}
.opt-card .opt-title{font:500 var(--text-lg)/var(--lh-normal) var(--font);color:var(--txt)}
.opt-card .opt-desc{font:400 var(--text-sm)/1.4 var(--font);color:var(--txt3);margin-top:var(--s0)}
.opt-card .opt-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;
  background:var(--blue);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);
  transition:transform 10ms ease-out,opacity 10ms ease-out}
.opt-card.selected .opt-check{opacity:1;transform:scale(1)}
.opt-card .opt-check svg{width:12px;height:12px;stroke:#fff;stroke-width:2.5}

/* ── Format 2: Chips / pill toggle ── */
.chip.selected{background:linear-gradient(180deg,rgba(41,151,255,.18) 0%,rgba(41,151,255,.06) 100%);
  border-color:rgba(41,151,255,.25);border-top-color:rgba(41,151,255,.30);
  box-shadow:inset 0 .5px 0 rgba(41,151,255,.25),0 0 8px rgba(41,151,255,.10);
  border-color:var(--blue);color:var(--blue);animation:chipBounce 25ms ease-out;
  box-shadow:0 0 0 3px rgba(41,151,255,.08)}

/* ── Format 3: Radio list (single select) ── */
.radio-item.selected{border-color:var(--blue);background:linear-gradient(180deg,rgba(41,151,255,.08) 0%,rgba(41,151,255,.02) 100%);
  box-shadow:0 0 0 3px rgba(41,151,255,.08);animation:selectPop 25ms var(--ease-spring)}
.radio-item.selected .radio-dot{border-color:var(--blue);background:var(--blue)}
.radio-item.selected .radio-dot::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff;
  animation:checkIn 25ms var(--ease-spring)}

/* ── Format 4: Slider / range ── */

/* ── Format 5: Textarea / open-ended ── */

/* ═══════════════════════════════
   BADGES & STATUS
   ═══════════════════════════════ */

/* Role badges */

/* Nav badge (notification count) */

/* ═══════════════════════════════
   CHAT COMPONENTS
   ═══════════════════════════════ */

/* ═══════════════════════════════
   SHARED ANIMATIONS
   cb-prefixed shared keyframes + onboarding wizard shared keyframes.
   Pages should reference these instead of defining page-local duplicates.
   ═══════════════════════════════ */
@keyframes cb-ring-spin{to{transform:rotate(360deg)}}
@keyframes obShellIn{to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes obIn{to{opacity:1;transform:translateY(0)}}
/* ═══ WIZARD SUB-QUESTION TRANSITIONS ═══ */
.wiz-subq{animation:subqIn .2s cubic-bezier(.16,1,.3,1) both}
@keyframes subqIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes subqOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}
@keyframes trialOfferIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ══ MOTION ADDITIONS — spring hover, skeleton, stagger, nav ══ */

/* Pipeline cards — spring lift. Transition on base selector so hover-out also animates (prevents snap-back). */
.pipeline-card{transition:transform 120ms cubic-bezier(.22,1,.36,1),box-shadow 120ms cubic-bezier(.22,1,.36,1)}
.pipeline-card:hover{transform:translateY(-3px);box-shadow:0 4px 18px rgba(0,0,0,.32),0 0 24px rgba(41,151,255,.06)}
.pipeline-card:active{transform:translateY(0) scale(.985);transition-duration:60ms}

/* Buttons — satisfying press */
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:80ms}

/* Nav active indicator slide */
.sb-nav-item{position:relative}
.sb-nav-item:hover:not(.active){transform:translateX(2px)}

/* ── Left-nav: crisp bright white at rest (Sean 2026-05-18, re-request).
   The .62 dim ramp blended into the bg gradient; labels were unreadable
   without hover. Single-token change — nothing else in this rule moves. ── */
.app-dock-inner:not(.collapsed) .sb-nav-item{
  color:#fff!important;
  font:500 14px/1.2 var(--cb-font-text)!important;
  letter-spacing:-.01em!important;
  -webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:8px 0!important;
  gap:12px!important;
  margin:2px 14px!important;
  width:calc(100% - 28px)!important;
  transition:color 140ms cubic-bezier(.25,.8,.25,1)!important
}
.app-dock-inner:not(.collapsed) .sb-nav-item:hover:not(.active){
  color:#fff!important
}
.app-dock-inner:not(.collapsed) .sb-nav-item.active{
  color:#fff!important;
  font-weight:500!important
}
/* Nav tile — 32px, stroked icons at 22px, faded by default, full white on hover/active */
.app-dock-inner:not(.collapsed) .sb-nav-tile{
  background:none!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  width:32px!important;height:32px!important;
  opacity:.55!important;flex-shrink:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  transition:opacity 140ms cubic-bezier(.25,.8,.25,1)!important
}
.app-dock-inner:not(.collapsed) .sb-nav-item:hover .sb-nav-tile{opacity:1!important}
.app-dock-inner:not(.collapsed) .sb-nav-item.active .sb-nav-tile{opacity:1!important}
.app-dock-inner:not(.collapsed) .sb-nav-tile svg{
  width:22px!important;height:22px!important;
  stroke-width:1.4!important;
  opacity:1!important;filter:none!important
}
/* PNG/SVG image icons (FrameLab clapperboard) — same 22px slot, nudged right so artwork sits centered */
.app-dock-inner:not(.collapsed) .sb-nav-tile img{
  width:22px!important;height:22px!important;
  object-fit:contain!important;
  object-position:62% center!important;
  opacity:1!important;filter:none!important
}
/* Active tab — subtle left accent bar instead of color change (more premium) */
.app-dock-inner:not(.collapsed) .sb-nav-item.active::before{
  content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:2px;
  background:linear-gradient(180deg,#7ab6ff,#5eb8ff);
  box-shadow:0 0 8px rgba(94,184,255,.6)
}

/* ── COLLAPSED STATE — icons only, no text (Sean 2026-04-15) ── */
.app-dock-inner.collapsed .sb-nav-item{
  font-size:0!important;             /* hide label text */
  gap:0!important;
  justify-content:center!important;
  padding:6px 0!important;
  margin:2px 6px!important;
  width:calc(100% - 12px)!important;
  color:rgba(255,255,255,.7)
}
.app-dock-inner.collapsed .sb-nav-tile{
  width:44px!important;height:44px!important;
  opacity:.85!important;flex-shrink:0!important;
  display:grid!important;place-items:center!important;
  background:none!important;border:none!important;box-shadow:none!important;
  /* Sean 2026-05-24: icons need to be centered vertically and fit better
     into their containers. Switched from flex (which can subpixel-shift
     based on SVG viewBox + stroke-width) to grid+place-items:center —
     bulletproof centering regardless of icon dimensions. Bumped tile to
     44px (was 36px) so 24px icons read at a comfortable 55% fill ratio
     instead of cramped, and the whole row visually balances inside the
     56px collapsed rail. */
}
.app-dock-inner.collapsed .sb-nav-tile svg{
  width:24px!important;height:24px!important;stroke-width:1.6!important;opacity:1!important;
  display:block!important
}
.app-dock-inner.collapsed .sb-nav-tile img{
  width:24px!important;height:24px!important;object-fit:contain!important;opacity:1!important;
  display:block!important
}
.app-dock-inner.collapsed .sb-nav-item:hover .sb-nav-tile,
.app-dock-inner.collapsed .sb-nav-item.active .sb-nav-tile{opacity:1!important}
.app-dock-inner.collapsed .sb-nav-item.active{color:#fff!important}
.app-dock-inner.collapsed .sb-nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:18px;border-radius:2px;
  background:linear-gradient(180deg,#7ab6ff,#5eb8ff);
  box-shadow:0 0 6px rgba(94,184,255,.5)
}
/* Hide the STUDIO heading text and the green ping dot when collapsed */
.app-dock-inner.collapsed #sbStudioNav > div:first-child{font-size:0!important;padding:4px 0!important}
.app-dock-inner.collapsed .sb-nav-dot{display:none!important}

/* Nav icon pop on activate */
.sb-nav-item.active svg,.sb-nav-item.active lottie-icon{animation:navIconPop 300ms var(--ease-spring) both}
@keyframes navIconPop{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}

/* Skeleton loader — static placeholder. Earlier shimmer animated
   background-position (paint-bound) on every visible skeleton at 60fps,
   which dropped frames on lists with 20+ skeletons. Static gray reads
   identically to a shimmer at human speed since loads are sub-second. */
.skeleton{background:rgba(255,255,255,.06);border-radius:var(--r-md);}

/* Staggered card entry */
.pipeline-card{animation:cardEntry 140ms cubic-bezier(.22,1,.36,1) both}
@keyframes cardEntry{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.pipeline-card:nth-child(1){animation-delay:0ms}.pipeline-card:nth-child(2){animation-delay:15ms}.pipeline-card:nth-child(3){animation-delay:30ms}.pipeline-card:nth-child(4){animation-delay:45ms}.pipeline-card:nth-child(5){animation-delay:60ms}.pipeline-card:nth-child(6){animation-delay:75ms}.pipeline-card:nth-child(n+7){animation-delay:90ms}

/* Modal spring open */
.cb-modal,.modal-box{transition:transform 300ms var(--ease-spring),opacity 250ms var(--ease-smooth);transform-origin:center}
.modal-bg,.cb-modal-bg{transition:opacity 250ms var(--ease-smooth);}

/* Status dot pulse */
.status-live,.ws-dot.connected{animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.4)}50%{box-shadow:0 0 0 6px rgba(52,211,153,0)}}

.pipeline-card,.glass-card,.shell-toast{contain:layout style paint}
@keyframes cb-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes cb-panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes cb-live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}
@keyframes cb-fade-in-up{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes cb-pulse-glow{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes cb-avatar-reveal{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes cb-check-pulse{from{opacity:0;transform:scale(.3)}60%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}
@keyframes cb-slide-in-right{from{transform:translateX(100%)}to{transform:translateX(0)}}

/* ═══════════════════════════════
   ANIMATIONS
   ═══════════════════════════════ */
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes colIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes logoSpin{to{transform:rotate(360deg)}}
@keyframes digitPop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes selectPop{0%{transform:scale(1)}40%{transform:scale(.94)}70%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes checkIn{0%{transform:scale(0) rotate(-45deg);opacity:0}60%{transform:scale(1.2) rotate(0deg)}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes slideLeft{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(41,151,255,.3)}100%{box-shadow:0 0 0 10px rgba(41,151,255,0)}}
@keyframes chipBounce{0%{transform:scale(1)}50%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes progressGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulseLoad{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@keyframes spinLoad{to{transform:rotate(360deg)}}
@keyframes barLoad{0%{transform:scaleX(0)}50%{transform:scaleX(.7)}100%{transform:scaleX(1)}}
@keyframes confettiFall{0%{transform:translateY(-40px) rotate(0deg);opacity:1}10%{opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
@keyframes confettiPop{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes clapPop{0%{transform:scale(1)}20%{transform:scale(1.25) rotate(-5deg)}40%{transform:scale(.95) rotate(3deg)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes fireworkBurst{0%{transform:scale(0);opacity:1}50%{transform:scale(1.3);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@keyframes sendPulse{0%{transform:translateX(0) scale(1)}40%{transform:translateX(8px) scale(.9)}100%{transform:translateX(60px) scale(.6);opacity:0}}
@keyframes reviewScan{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes cardLift{0%{transform:perspective(800px) rotateX(0) rotateY(0)}100%{transform:perspective(800px) rotateX(0) rotateY(0)}}

/* Health score colors */
/* Blueprint hover popup — 16:9 layout: fields left, card center, selections right */
.bp-popup .bp-title{font:500 var(--text-3xs)/var(--lh-none) var(--font);text-transform:uppercase;letter-spacing:1px;color:var(--txt3);
  margin-bottom:10px;padding-bottom:var(--s-micro-4);border-bottom:1px solid rgba(255,255,255,.06)}
.bp-popup .bp-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start}
.bp-popup .bp-field{display:flex;justify-content:space-between;gap:var(--s1);padding:var(--s-micro-2) 0;
  font:400 var(--text-3xs)/var(--lh-normal) var(--font);color:var(--txt3)}
.bp-popup .bp-field span:last-child{color:var(--txt);font-weight:500;text-align:right}
/* Legacy compat */
.bp-popup .bp-row{display:flex;justify-content:space-between;gap:var(--card-sm);padding:var(--s-micro-2) 0;
  font:400 var(--text-xs)/1.3 var(--font);color:var(--txt3)}
.bp-popup .bp-row span:last-child{color:var(--txt);font-weight:500;text-align:right}

/* ═══════════════════════════════
   APPROVED CARD GREEN ANIMATION
   ═══════════════════════════════ */
@keyframes approvedRumble{
  0%,100%{transform:translateX(0) translateY(0)}
  10%{transform:translateX(-1px) translateY(0)}
  20%{transform:translateX(1px) translateY(-1px)}
  30%{transform:translateX(0) translateY(1px)}
  40%{transform:translateX(1px) translateY(0)}
  50%{transform:translateX(-1px) translateY(-1px)}
  60%{transform:translateX(1px) translateY(0)}
  70%{transform:translateX(0) translateY(1px)}
  80%{transform:translateX(-1px) translateY(0)}
  90%{transform:translateX(1px) translateY(-1px)}}
@keyframes approvedGlow{
  0%{box-shadow:0 0 0 rgba(126,203,161,0)}
  50%{box-shadow:0 0 20px rgba(126,203,161,.25),0 0 40px rgba(126,203,161,.1)}
  100%{box-shadow:0 0 0 rgba(126,203,161,0)}}
@keyframes ratingPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.card-3d .rating-star.active{color:var(--gold)}

/* ═══════════════════════════════
   BOTTOM GLASS ISLAND (Island 3 — fixed center bottom)
   Compact floating capsule. Fades when idle, full on hover.
   ═══════════════════════════════ */
.bottom-island-inner .bi-btn{width:30px;height:30px;border-radius:var(--r-micro-md);border:1px solid rgba(255,255,255,.04);cursor:pointer;
  background:transparent;color:var(--txt2);display:flex;align-items:center;justify-content:center;
  transition:background 10ms,color 10ms,transform 10ms;position:relative;}
.bottom-island-inner .bi-btn:hover{background:rgba(255,255,255,.08);color:var(--txt);transform:scale(1.08);
  border-color:rgba(255,255,255,.1);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.bottom-island-inner .bi-btn svg{width:15px;height:15px;stroke-width:1.6}

/* ═══════════════════════════════
   LEFT EDGE APP MODE RAIL (Island 1)
   Slim 58px vertical floating glass capsule, fixed left, vertically centered.
   Contains: logo bug, mode buttons (vertical), dev button.
   ═══════════════════════════════ */
/* Narrow glass capsule */
/* Top edge highlight on glass shell — inset 30% for narrow 42px capsule */

/* ── Logo block — small centered bug ── */

/* ── Mode toggle — vertical column layout ── */
/* Mode button — stacked icon + label */
.ln-mode-btn.active svg{opacity:1}
/* Labels hidden by default — smooth glow reveal on rail hover */

/* ═══ Right Core Toggle Rail — OUTSIDE body container ═══ */
.ln-mode-btn.active{
  background:linear-gradient(180deg,rgba(41,151,255,.18) 0%,rgba(41,151,255,.08) 100%);
  color:var(--txt);
  box-shadow:0 0 12px rgba(41,151,255,.2),0 1px 4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);
  border:1px solid rgba(41,151,255,.25)}
.ln-mode-btn:hover:not(.active){color:var(--txt2);background:rgba(255,255,255,.04)}

/* Rail bottom area for dev button */

/* ── Chat sidebar panel — slides out from left rail ── */
.ln-chat-panel{position:fixed;left:60px;top:50%;transform:translateY(-50%);width:260px;max-height:70vh;z-index:99;
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-xl);
  background:rgba(14,18,28,.85);
  border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.18);
  box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
}
.ln-chat-panel[hidden]{display:none}
.ln-chat-panel .ch-sb-search-wrap{padding:var(--s1)}
.ln-chat-panel .ch-sb-search{font-size:12px;padding:6px 8px}
.ln-chat-panel .ch-sb-body{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}
.ln-chat-panel .ch-sb-cat-hdr{padding:6px 8px}
.ln-chat-panel .ch-sb-cat-name{font-size:10px}
.ln-chat-panel .ch-sb-ch{padding:5px 8px;gap:6px}
.ln-chat-panel .ch-sb-av{width:28px;height:28px;font-size:10px}
.ln-chat-panel .ch-sb-ch-name{font-size:12px}
.ln-chat-panel .ch-sb-ch-sub{font-size:10px}
.ln-chat-panel .ch-sb-badge{min-width:16px;height:16px;font-size:9px;line-height:16px}
.ln-chat-panel .ch-sb-dm-sep{margin:4px 8px}

/* ── Dev mode icon + popup (positioned relative to rail) ── */
.dev-popup{position:absolute;left:calc(100% + 6px);bottom:0;
  background:rgba(20,20,22,.95);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);
  padding:6px 0;min-width:140px;z-index:100;

  box-shadow:0 8px 32px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.04) inset}
.dev-popup-title{font:500 8px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt4);padding:4px 12px 6px;margin-bottom:2px}
.dev-popup-item{width:100%;display:flex;align-items:center;gap:6px;
  padding:6px 12px;font:400 12px/1.2 var(--font);color:var(--txt2);
  background:none;border:none;cursor:pointer;text-align:left;transition:background 10ms}
.dev-popup-item:hover{background:rgba(255,255,255,.06)}
.dev-popup-sep{height:1px;margin:4px 8px;background:rgba(255,255,255,.06)}
.dev-popup-reset{color:var(--gold)}

/* ═══════════════════════════════
   TOP CENTER CONTROL BAR (Island 2)
   Floating glass pill, centered horizontally near top.
   ═══════════════════════════════ */
.top-bar{position:fixed;top:var(--s2);left:72px;right:var(--s2);z-index:100;
  display:flex;pointer-events:none;}
.top-bar[hidden]{display:none}
/* ── Status pills — center-dominant, thicker ── */
.tb-pill.active{background:rgba(41,151,255,.18);color:var(--blue);
  border-color:rgba(41,151,255,.35);box-shadow:0 0 12px rgba(41,151,255,.2),inset 0 1px 0 rgba(255,255,255,.08)}
/* ── Center pill group — inset container for visual weight ── */
/* ── Card density segmented control ── */
.tb-seg-btn.active{background:rgba(255,255,255,.1);color:var(--txt);
  box-shadow:0 1px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)}
/* ── Theme toggle ── */

/* Legacy compat — keep these for any remaining references */
.ln-dock-role{display:none}

/* ── Nav badge (notification count) ── */
.ln-badge{position:absolute;top:-2px;right:-2px;min-width:14px;height:14px;padding:0 var(--s-micro-2);border-radius:var(--r-micro-sm);
  background:var(--blue);color:#fff;font-size:var(--text-2xs);font-weight:500;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(41,151,255,.4),0 0 10px rgba(41,151,255,.15)}
.ln-badge.zero{display:none}
/* Legacy compat */

/* ═══════════════════════════════
   ANIMATION SHOWCASE DEMOS
   ═══════════════════════════════ */

/* Loading dots */

/* Spinner */

/* Progress bar */

/* Send animation */

/* Review scan */

/* Clap / celebrate */

/* Confetti */

/* Firework */

/* ═══════════════════════════════
   RIGHT-CLICK CONTEXT MENU + SIZE KNOB
   ═══════════════════════════════ */
.ctx-menu{position:relative;display:inline-flex;flex-direction:column;min-width:200px;padding:var(--s-micro-4);
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.15);
  border-radius:var(--r-xl);box-shadow:0 8px 40px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4),
  inset 0 1px 0 rgba(255,255,255,.06);-webkit-backdrop-filter:none}
/* Pipeline right-click context menu — fixed positioning at cursor */
#ctxMenu{position:fixed;z-index:9999}
/* Delete confirm overlay */
.ctx-confirm{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6)}
.ctx-confirm-card{background:var(--bg-float);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:var(--s3);max-width:400px;text-align:center}
.ctx-confirm-card h3{font:500 16px/1.2 var(--font);color:var(--txt);margin:0 0 8px}
.ctx-confirm-card p{font:400 13px/1.5 var(--font);color:var(--txt2);margin:0 0 16px}
.ctx-confirm-actions{display:flex;gap:8px;justify-content:center}
.ctx-delete{color:var(--red) !important}
.ctx-delete:hover{background:rgba(192,57,43,.15) !important}
.ctx-item{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--card-sm);border-radius:var(--r-md);
  font:400 var(--text-md)/var(--lh-none) var(--font);color:var(--txt2);cursor:pointer;
  transition:background 10ms,color 10ms}
.ctx-item:hover{background:rgba(41,151,255,.15);color:var(--txt)}
.ctx-item svg{width:16px;height:16px;opacity:.6}
.ctx-item .ctx-shortcut{margin-left:auto;font:400 var(--text-4xs)/1 var(--font);color:var(--txt3);opacity:.5}

/* Size knob / selector row */
.size-knob.active{background:rgba(41,151,255,.15);border-color:var(--blue);color:var(--blue);
  box-shadow:0 0 8px rgba(41,151,255,.15)}

/* Pipeline card size variants
   ⚠️ DEPRECATED — Use .pipeline-card (section 4) instead.
   .pipe-card will be removed in the next major version.
   Migrate all references to .pipeline-card + .pipe-sm / .pipe-lg / .pipe-xl */
.pipe-card .pipe-title{font:500 var(--text-sm)/var(--lh-snug) var(--font);color:var(--txt);margin-bottom:var(--s0)}
/* Size variants */
.pipe-sm{min-height:60px;padding:var(--s1)}
.pipe-sm .pipe-title{font-size:var(--text-sm)}
.pipe-sm .pipe-sub,.pipe-sm .pipe-pill{display:none}
.pipe-lg{min-height:110px;padding:var(--s2)}
.pipe-lg .pipe-title{font-size:var(--text-md);margin-bottom:var(--s-micro-4)}
.pipe-xl{min-height:150px;padding:var(--card-md)}
.pipe-xl .pipe-title{font-size:var(--text-md);margin-bottom:var(--s1)}
.pipe-xl .pipe-sub{font-size:var(--text-sm);-webkit-line-clamp:3}

/* ═══════════════════════════════
   SPECULAR HIGHLIGHTS (auto on cards)
   ═══════════════════════════════ */
/* Shared specular highlight — premium top-edge light sweep */
.stat-card::before,.folder-card::before,.meeting-card::before,.desktop-icon .di-icon::before,
.rv-ctx::before,.modal::before,.cb-modal::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;z-index:5;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20) 25%,rgba(255,255,255,.40) 50%,rgba(255,255,255,.20) 75%,transparent);
  border-radius:1px;pointer-events:none}
/* Capsule containers — no separate ::before glare, box-shadow inset handles it */
.dock-bubble::before{display:none}

/* ═══════════════════════════════
   PILLS & CHIPS
   ═══════════════════════════════ */
.pill.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.3);color:var(--blue)}

/* ═══════════════════════════════
   UPLOAD DROP ZONE
   ═══════════════════════════════ */
.drop-zone{width:100%;box-sizing:border-box;border:1.5px dashed rgba(255,255,255,.10);border-radius:20px;padding:var(--s5);
  background:rgba(255,255,255,.02);transition:border-color 10ms,background 10ms;
  text-align:center;cursor:pointer}
.drop-zone:hover{border-color:rgba(41,151,255,.3);background:rgba(41,151,255,.03)}
.drop-zone .dz-icon{font-size:var(--s4);margin-bottom:var(--card-sm);opacity:.5}
.drop-zone .dz-title{font:500 var(--text-md)/var(--lh-none) var(--font);margin-bottom:var(--s0)}
.drop-zone .dz-sub{font:400 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt3)}
.drop-zone.dragover{border-color:var(--blue);background:rgba(41,151,255,.06)}
.drop-zone.has-file{border-style:solid;border-color:var(--green);background:rgba(126,203,161,.03)}

/* ═══════════════════════════════
   PROGRESS / TRACKER
   ═══════════════════════════════ */
.tracker-ring.active{border-color:var(--blue);background:rgba(41,151,255,.1);color:var(--blue);transform:scale(1.1)}
.tracker-ring.done{border-color:transparent;background:linear-gradient(135deg,var(--green),#5ba8c8);
  color:var(--bg);font-weight:500;transform:scale(1.05);
  box-shadow:0 0 0 2px rgba(126,203,161,.25),0 0 12px rgba(90,168,200,.15)}
.tracker-wire.done{background:linear-gradient(90deg,var(--green),#5ba8c8)}

/* Light theme overrides */
.bg-light .glass-card,.bg-light .glass-flat,.bg-light .stat-card{
  background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.08);box-shadow:0 2px 8px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.06)}
.bg-light .input{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1);color:#1d1d1f;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.bg-light .input::placeholder{color:#86868b}
.bg-light .btn-s{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:#333}
.bg-light .btn-gl{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);color:#333}
.bg-light .pill{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);color:#6e6e73}
.bg-light .sg-label,.bg-light .type-caption,.bg-light .type-label{color:#86868b}

/* ═══════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════ */
@media(max-width:768px){
  .sg-page{padding:var(--s4) var(--card-md) var(--s8)}
  .sg-sec h2{font-size:var(--text-2xl)}
  .sg-row{flex-direction:column}
  .sg-grid.c2,.sg-grid.c3,.sg-grid.c4{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .opt-grid{grid-template-columns:1fr}
  .wizard-steps{flex-wrap:wrap;gap:var(--s0)}
  .wizard-wire{width:var(--card-md)}
  .tracker-wire{width:var(--s3)}
  .btn-lg{padding:var(--card-sm) var(--s3);font-size:var(--text-md)}
  .glass-bubble{padding:var(--s3) var(--card-md) var(--card-md)}
}
@media(max-width:480px){
  .sg-page{padding:var(--s3) var(--s2) var(--s6)}
  .sg-sec{margin-bottom:var(--s6)}
  .sg-grid.c2,.sg-grid.c3,.sg-grid.c4{grid-template-columns:1fr 1fr}
  .type-hero{font-size:var(--text-3xl)}
  .stat-card{padding:var(--card-sm)}
  .stat-card .stat-value{font-size:var(--text-2xl)}
  .glass-card{padding:var(--s2)}
  .glass-flat{padding:var(--card-sm)}
}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — SHELL LAYOUT
   The iframe-based shell: sidebar + header + content area
   ═══════════════════════════════════════════════════════════════ */
.shell{display:grid;grid-template-columns:var(--dock-w, 220px) 1fr;grid-template-rows:1fr;
  /* Sean 2026-05-25: grid column tracks dock state via :has(). Expanded = 220
     to match the position-fixed dock-inner. Collapsed = 56 to match the icon
     rail. Eliminates dead space + the 20px overlap that was hiding the
     left edge of body content behind the dock. */
  height:100vh;overflow:hidden;
  /* Canonical studio bg — amber horizon + 2× glass-1 wash over cb-bg.
     The .bg-dark,.shell rule at the top of this file paints the
     authoritative version via !important; this is the fallback. */
  background:var(--cb-amber-horizon),var(--cb-glass-1-bg),var(--cb-glass-1-bg),var(--cb-bg);
  background-attachment:fixed,fixed,fixed,fixed;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  background-size:100% 100vh,100% 100vh,100% 100vh,100% 100vh;
  position:relative}

/* ── DM Strip — Discord far-left column ── */
.dm-strip-av.active{border-radius:12px;box-shadow:none}
.dm-strip-av.active::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:4px;height:20px;border-radius:0 4px 4px 0;background:#fff}
.dm-strip-av .dm-strip-badge{position:absolute;bottom:-2px;right:-2px;min-width:14px;height:14px;
  border-radius:7px;background:#e03e3e;color:#fff;font:500 8px/14px var(--font);text-align:center;
  padding:0 3px;border:2px solid rgba(5,8,16,.95)}
/* DM strip separator */

/* ── Mode Dropdown ── */
.mode-drop-item{width:100%;display:flex;align-items:center;gap:8px;padding:7px 12px;
  font:500 12px/1 var(--font);color:rgba(255,255,255,.6);background:none;border:none;
  cursor:pointer;text-align:left;transition:background 10ms}
.mode-drop-item:hover{background:rgba(255,255,255,.06);color:#fff}
.mode-drop-item.active{color:#fff}
.mode-drop-item.active::after{content:'✓';margin-left:auto;font-size:10px;color:rgba(41,151,255,.8)}
.shell-side .side-link.active{background:rgba(41,151,255,.1);color:var(--blue)}
.shell-body{grid-column:2;grid-row:1;overflow:hidden;
  padding:8px var(--s2);
  position:relative;z-index:1;
  display:flex;flex-direction:column}
/* Layer-1 glass on the right body — MIRRORS .app-dock-inner exactly.
   Structure: transparent host + ::before glass + ::after bottom light sweep.
   iframe insets 1px so the glass edges are visible against the shell bg. */
/* Portal shell body = canonical wizard surface (Sean 2026-04-22).
   The ::before plate now uses the 2-layer fading navy+glass stack, and
   the iframe fills the shell edge-to-edge so tabs render as ONE plate
   against the body bg — no 8px inset gap, no 14px child radius visible
   underneath the 20px parent radius. The iframe's own body stays
   transparent (see line ~361/364), so the ::before plate shows through. */
/* Sean 2026-05-25 v9 — UNIVERSAL PAGE FRAME. .shell-body-glass is the
   ONE canonical body container per page. 12px margin all sides from the
   viewport edges, Tier 1 glass, var(--r-2xl) radius, ONLY scroller on
   the right side. Holds the stacked iframes. */
.shell-body-glass{
  flex:1; min-height:0;
  margin:12px;
  border-radius:var(--r-2xl, 24px);
  overflow:hidden;
  position:relative; z-index:1;
  background:transparent;
}
.shell-body-glass::before{content:'';position:absolute;inset:0;border-radius:var(--r-2xl, 24px);
  background:var(--cb-glass-1-bg);
  box-shadow:var(--cb-glass-1-shadow);
  pointer-events:none;z-index:0}
.shell-body-glass::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25) 20%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.25) 80%,transparent);
  border-radius:1px;pointer-events:none;z-index:2}
/* #shellFrameContainer holds the stacked iframes inside .shell-body-glass.
   No insets — iframes fill the glass card edge-to-edge inside the rounded
   clip so pages don't see a second glass layer underneath them. */
.shell-body-glass > #shellFrameContainer{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:1}

/* ── SHELL TOPBAR — owns chrome, route-driven breadcrumb + status pill ── */
.shell-topbar{
  flex-shrink:0; height:var(--h-md, 44px); min-height:44px;
  display:flex; align-items:center; gap:var(--s-3, 12px);
  padding:0 var(--s-4, 16px);
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.stb-crumbs{
  display:flex; align-items:center; gap:6px;
  font:500 var(--text-sm, 13px)/1 var(--font);
  color:var(--txt3, rgba(255,255,255,.55));
  overflow:hidden; flex:1; min-width:0;
}
.stb-crumb{ color:var(--txt3, rgba(255,255,255,.55)); text-decoration:none; white-space:nowrap; }
.stb-crumb:hover{ color:var(--txt, #fff); }
.stb-crumb-sep{ color:var(--txt4, rgba(255,255,255,.30)); font-size:11px; }
.stb-crumb-cur{ color:var(--txt, #fff); font-weight:600; }
.stb-status{
  display:flex; align-items:center; gap:var(--s-2, 8px);
  flex-shrink:0;
}
.stb-bell, .stb-refresh{
  position:relative;
  width:26px; height:26px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-sm, 6px);
  color:var(--txt3, rgba(255,255,255,.55));
  cursor:pointer; transition:background 80ms ease, color 80ms ease;
}
.stb-bell:hover, .stb-refresh:hover{
  background:rgba(255,255,255,.08); color:var(--txt, #fff);
}
.stb-bell-badge{
  position:absolute; top:-3px; right:-3px;
  min-width:14px; height:14px; padding:0 3px;
  border-radius:7px; background:var(--blue, #2997ff); color:#fff;
  font:600 8px/14px var(--font); text-align:center; pointer-events:none;
}

/* Shell state overlay — connection/auth errors rendered INSIDE the shell */
.shell-state{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:transparent;opacity:0;pointer-events:none;transition:opacity 10ms var(--ease)}
.shell-state.active{opacity:1;pointer-events:auto}
.shell-state-card{text-align:center;max-width:360px;padding:var(--s5)}
.shell-state-card svg{width:48px;height:48px;stroke:var(--txt3);margin-bottom:var(--s2)}
.shell-state-card h3{font:500 var(--text-lg)/var(--lh-tight) var(--font-display);color:var(--txt);margin:0 0 var(--s1)}
.shell-state-card p{font:400 var(--text-md)/var(--lh-normal) var(--font);color:var(--txt3);margin:0 0 var(--s3)}
.shell-state-card .btn{margin-top:var(--s2)}
/* ── Premium entry sequence — blue circle → checkmark → welcome ── */
.entry-seq{display:flex;flex-direction:column;align-items:center;gap:0}
.entry-ring{width:56px;height:56px;position:relative;margin-bottom:20px}
.entry-ring svg{width:56px;height:56px}
.entry-ring .ring-track{fill:none;stroke:rgba(41,151,255,.1);stroke-width:3}
.entry-ring .ring-progress{fill:none;stroke:var(--blue-hi);stroke-width:3;
  stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:157;
  transform:rotate(-90deg);transform-origin:50% 50%;
  animation:entryRingSpin 110ms cubic-bezier(.4,0,.2,1) forwards}
@keyframes entryRingSpin{0%{stroke-dashoffset:157}100%{stroke-dashoffset:0}}
.entry-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.5);transition:transform 10ms cubic-bezier(.22,1,.36,1),opacity 10ms cubic-bezier(.22,1,.36,1)}
.entry-check.show{opacity:1;transform:scale(1)}
.entry-check svg{width:28px;height:28px;stroke:var(--blue-hi);stroke-width:2.5;fill:none}
.entry-check svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:entryCheckDraw .4s 10ms cubic-bezier(.22,1,.36,1) forwards}
@keyframes entryCheckDraw{to{stroke-dashoffset:0}}
.entry-welcome{font:500 20px/1.2 var(--font-display);color:var(--txt);letter-spacing:-.02em;
  opacity:0;transform:translateY(8px);transition:transform 10ms cubic-bezier(.22,1,.36,1),opacity 10ms cubic-bezier(.22,1,.36,1)}
.entry-welcome.show{opacity:1;transform:translateY(0)}
.entry-sub{font:400 13px/1.4 var(--font);color:var(--txt4);margin-top:6px;
  opacity:0;transition:opacity 10ms 10ms ease}
.entry-sub.show{opacity:1}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — SECTION CARDS (full-width glass panels)
   ═══════════════════════════════════════════════════════════════ */
.section-card{background:var(--cb-glass-2-bg);border:var(--cb-glass-2-border);border-top-color:var(--cb-glass-2-border-top);
  border-radius:var(--r-2xl);padding:var(--card-lg);box-shadow:var(--cb-glass-2-shadow);margin-bottom:var(--card-md);position:relative;overflow:hidden}
.section-card .sec-title{font:500 var(--text-lg)/1.3 var(--cb-font-display);margin-bottom:var(--s1);display:flex;align-items:center;gap:var(--s1);color:var(--txt)}
.section-card .sec-title svg{width:18px;height:18px;color:var(--blue);flex-shrink:0}
.section-card .sec-sub{font:400 var(--text-sm)/var(--lh-relaxed) var(--cb-font-text);color:var(--txt3);margin-bottom:var(--s3)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — TABS (sub-tabs for switching views within a page)
   ═══════════════════════════════════════════════════════════════ */
.sub-tab.active{color:var(--blue);border-bottom-color:var(--blue)}

/* Category tabs (pill-style) */
.cat-tab.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.3);color:var(--blue)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — MODAL OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.modal-bg{position:fixed;inset:0;background:rgba(3,8,15,.80);
  display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity 10ms}
.modal-bg.visible{opacity:1;pointer-events:auto}
.modal{background:var(--bg-card);border:var(--border-glow);border-top-color:var(--border-glow-top);
  border-radius:var(--r-2xl);padding:var(--card-xl);max-width:var(--container-sm);width:90%;
  box-shadow:var(--sh-5);

  transform:scale(.95);transition:transform 10ms var(--ease-spring);position:relative;overflow:hidden}
.modal-bg.visible .modal{transform:scale(1)}
.modal .modal-title{font:500 var(--text-xl)/var(--lh-snug) var(--font-display);margin-bottom:var(--s1)}
.modal .modal-body{font:400 var(--text-md)/var(--lh-relaxed) var(--font);color:var(--txt2);margin-bottom:var(--card-md)}
.modal .modal-foot{display:flex;justify-content:flex-end;gap:var(--s1)}
.modal .modal-close{position:absolute;top:var(--s2);right:var(--s2);width:28px;height:28px;border-radius:50%;
  border:none;background:rgba(255,255,255,.06);color:var(--txt3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background 10ms}
.modal .modal-close:hover{background:rgba(255,255,255,.12);color:var(--txt)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — TOASTS (notification popups) — premium glass, smooth entry
   ═══════════════════════════════════════════════════════════════ */
.toast{pointer-events:auto;padding:12px 16px;border-radius:14px;font:500 13px/1.35 var(--font-display);color:#fff;
  background:linear-gradient(180deg,rgba(28,32,46,.92) 0%,rgba(18,22,34,.92) 100%);
  border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.18);
  box-shadow:0 12px 32px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.22);
  display:flex;align-items:center;gap:10px;min-width:260px;max-width:380px;
  animation:toastSlideIn 240ms cubic-bezier(.16,1,.3,1);transform-origin:top right;}
.toast.toast-out{animation:toastSlideOut 200ms cubic-bezier(.4,0,1,1) forwards}
@keyframes toastSlideIn{from{opacity:0;transform:translateX(20px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastSlideOut{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(20px) scale(.96)}}
/* Toast animated icons — APNG from /icons/ folder, CSS filters colorize from black source */
.toast-icon{width:24px;height:24px;flex-shrink:0;object-fit:contain}

.grade{display:inline-flex;align-items:center;justify-content:center;width:var(--h-xs);height:var(--h-xs);
  border-radius:var(--r-sm);font:500 var(--text-sm)/var(--lh-none) var(--font)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — LEADERBOARD
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL — PAYOUT CARDS
   ═══════════════════════════════════════════════════════════════ */
.payout-card .payout-amount{font:500 var(--text-2xl)/1 var(--font-display);color:var(--green)}
.payout-card .payout-label{font:400 var(--text-4xs)/1 var(--font);color:var(--txt3);margin-top:var(--s0)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — STATE MODIFIERS (spinner, loading, empty states)
   ═══════════════════════════════════════════════════════════════ */
.loading-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:200px;gap:var(--s2);text-align:center}
.spinner{width:var(--h-sm);height:var(--h-sm);border:3px solid rgba(255,255,255,.1);border-top-color:var(--blue);
  border-radius:50%;animation:spin .6s linear infinite;margin:var(--card-md) auto}
.btn .spinner{width:20px;height:20px;margin:0 auto;border-width:2px}
.hidden{display:none!important}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — VISIBILITY & ROLE GATES
   ═══════════════════════════════════════════════════════════════ */
.role-owner,.role-admin,.role-editor,.role-client{display:none}
body.is-owner .role-owner{display:revert}
body.is-admin .role-admin,body.is-admin .role-owner{display:revert}
body.is-editor .role-editor{display:revert}
body.is-client .role-client{display:revert}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — TOOLBAR & SEARCH
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL — TABLE
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL — AVATAR
   ═══════════════════════════════════════════════════════════════ */
.avatar{width:var(--h-sm);height:var(--h-sm);border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.1)}
.avatar-stack .avatar{margin-left:-8px;border:2px solid var(--bg)}
.avatar-stack .avatar:first-child{margin-left:0}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — FORM GROUPS
   ═══════════════════════════════════════════════════════════════ */
.form-group{margin-bottom:var(--s2)}
.form-group label{display:block;font:500 var(--text-md)/var(--lh-snug) var(--font);text-transform:uppercase;
  letter-spacing:1.5px;color:var(--txt3);margin-bottom:var(--s1)}
.form-row .form-group{flex:1}
.wiz-shell .form-group{width:100%;max-width:420px;margin-left:auto;margin-right:auto}

.flex-wrap{flex-wrap:wrap}.justify-center{justify-content:center}.flex-1{flex:1}.w-full{width:100%}.mb-8{margin-bottom:var(--s1)}.mb-16{margin-bottom:var(--s2)}.text-center{text-align:center}.text-muted{color:var(--txt3)}.relative{position:relative}/* ═══════════════════════════════════════════════════════════════
   PORTAL — GRID LAYOUTS
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){.grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}}
@media(max-width:1024px){.grid-4,.grid-5{grid-template-columns:repeat(2,1fr)}}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — TOGGLE SWITCH
   ═══════════════════════════════════════════════════════════════ */
.toggle{position:relative;width:44px;height:24px;border-radius:12px;background:rgba(255,255,255,.1);
  border:none;cursor:pointer;transition:background 10ms;padding:0}
.toggle::after{content:'';position:absolute;top:var(--s-micro-1);left:var(--s-micro-1);width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform 10ms var(--ease)}
.toggle.on{background:var(--blue)}
.toggle.on::after{transform:translateX(20px)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — DROPDOWN
   ═══════════════════════════════════════════════════════════════ */
.dropdown.open .dropdown-menu{opacity:1;pointer-events:auto;transform:translateY(0)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — NOTIFICATION DOT
   ═══════════════════════════════════════════════════════════════ */
.notif-dot.urgent{background:var(--red);box-shadow:0 0 6px rgba(192,57,43,.4)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL MOBILE — Sidebar collapse
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .shell-side{display:none}
  .shell-body{padding:env(safe-area-inset-top,0) 0 0 0!important}
  .page-hdr h1{font-size:var(--text-xl)}
  .pg-title{font-size:20px!important}
  .pg-sub{font-size:13px!important;margin-bottom:var(--s1)!important}
  .page-head{padding:10px 14px 8px!important}
  .page-inner{padding:8px 10px 16px!important}
}

/* ═══════════════════════════════════════════════════════════════
   @FONT-FACE — SF Pro, self-hosted woff2, ONE canonical block.
   Root-relative paths work for portal, iframed pages, AND /website/*.
   unicode-range Latin-1 cuts decode time + avoids fetching for non-Latin.
   semibold + bold remapped to weight:500 per the no-bold lock.
   Sean locked 2026-04-16 — kills the prior CDN+relative double block
   that was causing a first-paint race.
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:'SF Pro Text';   src:url('./fonts/sf-pro-text_regular.woff2')    format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'SF Pro Text';   src:url('./fonts/sf-pro-text_semibold.woff2')   format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'SF Pro Display';src:url('./fonts/sf-pro-display_regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'SF Pro Display';src:url('./fonts/sf-pro-display_medium.woff2')  format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'SF Pro Display';src:url('./fonts/sf-pro-display_semibold.woff2')format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'SF Pro Display';src:url('./fonts/sf-pro-display_bold.woff2')    format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}

.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--txt)}
.navbar .nav-link.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;
  height:2px;background:var(--blue);border-radius:1px}
.navbar-light .nav-link:hover,.navbar-light .nav-link.active{color:#1d1d1f}

/* ═══════════════════════════════════════════════════════════════
   WEBSITE — FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer{padding:var(--section-sm) var(--s3) var(--s4);border-top:1px solid rgba(255,255,255,.06)}

/* ═══════════════════════════════════════════════════════════════
   WEBSITE — PRICING CARDS
   ═══════════════════════════════════════════════════════════════ */
.pricing-card.featured{border-color:rgba(41,151,255,.3);
  box-shadow:var(--sh),0 0 40px rgba(41,151,255,.08)}

/* ═══════════════════════════════════════════════════════════════
   WEBSITE — FAQ ACCORDION
   ═══════════════════════════════════════════════════════════════ */
.faq-item{border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) var(--card-md);
  font:500 var(--text-md)/var(--lh-normal) var(--font);cursor:pointer;background:rgba(255,255,255,.02);
  transition:background 10ms}
.faq-q:hover{background:rgba(255,255,255,.04)}
.faq-q svg{width:16px;height:16px;color:var(--txt3);transition:transform 10ms var(--ease);flex-shrink:0}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 150ms var(--ease);padding:0 var(--card-md)}
.faq-a>*{min-height:0;overflow:hidden}
.faq-item.open .faq-a{max-height:500px;padding:0 var(--card-md) var(--s2)}
.faq-a p{font:400 var(--text-md)/var(--lh-loose) var(--font);color:var(--txt2)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — TIMELINE / ACTIVITY FEED
   ═══════════════════════════════════════════════════════════════ */
.tl-item.active::before{background:var(--blue);border-color:var(--blue);
  box-shadow:0 0 8px rgba(41,151,255,.3)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — TAGS
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL — TOOLTIP
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL — PROGRESS BAR
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL — SKELETON LOADING
   ═══════════════════════════════════════════════════════════════ */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);
  background-size:200% 100%;animation:reviewScan 1.5s linear infinite;border-radius:var(--r-md)}
.skeleton-card{height:120px;border-radius:var(--r-xl)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — STEPPER (numbered vertical steps)
   ═══════════════════════════════════════════════════════════════ */
.step{display:flex;gap:var(--s2);padding-bottom:var(--s3);position:relative}
.step::before{content:'';position:absolute;left:15px;top:32px;bottom:0;width:2px;
  background:rgba(255,255,255,.06)}
.step:last-child::before{display:none}
.step.active .step-num{background:rgba(41,151,255,.15);border-color:var(--blue);color:var(--blue)}
.step.done .step-num{background:var(--green);border-color:var(--green);color:var(--bg)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — CALENDAR / DATE PICKER STYLES
   ═══════════════════════════════════════════════════════════════ */
.cal-day.today{background:rgba(41,151,255,.12);color:var(--blue);font-weight:500}
.cal-day.selected{background:var(--blue);color:#fff;font-weight:500}
.cal-day.disabled{opacity:.3;cursor:not-allowed}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — EMPTY STATE (enhanced)
   ═══════════════════════════════════════════════════════════════ */
.empty-state .es-icon{width:64px;height:64px;margin-bottom:var(--s2);opacity:.2}
.empty-state .es-title{font:500 var(--text-lg)/var(--lh-snug) var(--font-display);margin-bottom:var(--s0)}
.empty-state .es-desc{font:400 var(--text-md)/var(--lh-relaxed) var(--font);color:var(--txt3);max-width:320px;margin-bottom:var(--card-md)}

/* ═══════════════════════════════════════════════════════════════
   WEBSITE — MOBILE NAV HAMBURGER
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .nav-toggle{display:flex}
  .navbar .nav-links{display:none;position:absolute;top:var(--h-xl);left:0;right:0;
    flex-direction:column;background:rgba(10,10,14,.95);border-bottom:1px solid rgba(255,255,255,.06);
    padding:var(--s2);gap:var(--s1);}
  .navbar .nav-links.open{display:flex}
  .hero{min-height:60vh;padding:var(--s8) var(--card-md)}
  .section{padding:var(--s6) var(--card-md)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   PORTAL — DIVIDERS & SPACERS
   ═══════════════════════════════════════════════════════════════ */
.divider{height:1px;background:rgba(255,255,255,.06);margin:var(--card-md) 0}/* ═══════════════════════════════════════════════════════════════
   PORTAL — SCROLL CONTAINER
   ═══════════════════════════════════════════════════════════════ */
.scroll-y{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}
.scroll-y::-webkit-scrollbar{width:6px}
.scroll-y::-webkit-scrollbar-track{background:transparent}
.scroll-y::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.scroll-y::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

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

/* ═══════════════════════════════════════════════════════════════
   1. PORTAL SHELL — Page Foundation
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   2. VIDEO PLAYER
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   3. CARD ISLAND (Dynamic Island on Cards / Video Overlay)
   ═══════════════════════════════════════════════════════════════ */
.ps-card-island{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;
  border-radius:var(--r-pill);
  background:rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.14);
  font:500 12px/1 var(--font);
  color:var(--txt);
  white-space:nowrap;
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  z-index:2;
  max-width:calc(100% - 12px);

}

.ps-ci-type{
  padding:3px 7px;
  border-radius:var(--r-xs);
  font:500 11px/1 var(--font);
  letter-spacing:.4px;
  text-transform:uppercase;
}
.ps-ci-type[data-type="SF"]{background:rgba(41,151,255,.18);color:var(--blue)}
.ps-ci-type[data-type="LF"]{background:rgba(191,90,242,.18);color:var(--purple)}

.ps-ci-tier{
  padding:3px 7px;
  border-radius:var(--r-xs);
  font:500 11px/1 var(--font);
  letter-spacing:.3px;
}
.ps-ci-tier[data-tier="1"]{background:rgba(245,166,35,.15);color:var(--gold)}
.ps-ci-tier[data-tier="2"]{background:rgba(126,203,161,.15);color:var(--green)}
.ps-ci-tier[data-tier="3"]{background:rgba(90,200,250,.15);color:var(--cyan)}

.ps-ci-grade{
  padding:3px 7px;
  border-radius:var(--r-xs);
  font:500 11px/1 var(--font);
  letter-spacing:.3px;
}
.ps-ci-grade[data-grade="A"]{background:rgba(52,211,153,.18);color:#34d399}
.ps-ci-grade[data-grade="B"]{background:rgba(134,239,172,.15);color:#86efac}
.ps-ci-grade[data-grade="C"]{background:rgba(251,191,36,.15);color:#fbbf24}
.ps-ci-grade[data-grade="D"]{background:rgba(255,159,10,.15);color:var(--orange)}
.ps-ci-grade[data-grade="F"]{background:rgba(192,57,43,.18);color:var(--red)}

.ps-ci-bp{
  padding:3px 7px;
  border-radius:var(--r-xs);
  font:500 11px/1 var(--font);
  letter-spacing:.3px;
  background:rgba(126,203,161,.15);color:var(--green);
}

.ps-ci-ver{
  font:500 11px/var(--lh-none) var(--mono);
  color:var(--txt2);
  letter-spacing:.3px;
}

/* ═══════════════════════════════════════════════════════════════
   4. PIPELINE CARD (3 core sizes: sm/lg/xl)
   ═══════════════════════════════════════════════════════════════ */
.pipeline-card{
  position:relative;
  border-radius:20px;                                     /* premium rounded glass */
  background-size:cover;
  background-position:center;
  background-color:rgba(10,14,24,.78);
  border:1px solid rgba(255,255,255,.04);                 /* near-invisible edge — depth comes from highlights+shadows */
  border-top-color:rgba(255,255,255,.10);
  overflow:hidden;                                        /* clip hover halo + highlights */
  display:flex;flex-direction:column;
  justify-content:flex-end;
  cursor:pointer;
  /* 3D glass depth — inner top highlight + bottom drop ring + soft outer fall */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 1px 2px rgba(0,0,0,.35),
    0 6px 14px rgba(0,0,0,.28),
    0 22px 48px rgba(0,0,0,.30);
  transition:transform 10ms var(--ease-q),box-shadow 10ms var(--ease-q),border-color 10ms var(--ease-q);
  contain:layout style;
  
  
}
.pipeline-card.pipe-sm{min-height:100px}
.pipeline-card.pipe-lg{min-height:160px}
.pipeline-card.pipe-xl{min-height:220px}
/* Specular top-edge highlight */
.pipeline-card::after{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.35) 70%,transparent);
  pointer-events:none;opacity:.6;
}
.pipeline-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,4,12,.65) 0%,rgba(0,2,8,.48) 30%,rgba(0,4,12,.85) 65%,rgba(0,2,8,.98) 100%);
  pointer-events:none;z-index:1;
}
.pipeline-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 2px 4px rgba(0,0,0,.3),
    0 8px 16px rgba(0,0,0,.25),
    0 16px 48px rgba(0,0,0,.2),
    0 0 20px rgba(41,151,255,.08),
    inset 0 1px 0 rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);border-top-color:rgba(255,255,255,.35);
}
.pipeline-card:hover::after{opacity:1}
/* Thread unread badge — iMessage-style: red pill, subtle pulse, ring of black
   for separation against thumbnail edges. Hit area stays small but glows clearly. */
.pipe-unread{
  position:absolute;top:7px;right:7px;z-index:5;
  min-width:18px;height:18px;
  border-radius:var(--r-pill);
  background:#ff3b30;
  color:#fff;
  font:600 10px/18px var(--font);
  text-align:center;
  padding:0 6px;
  box-shadow:
    0 0 0 1.5px rgba(0,0,0,.55),
    0 2px 8px rgba(255,59,48,.55),
    0 0 14px rgba(255,59,48,.35);
  animation:pipeUnreadPulse 2.4s ease-in-out infinite;
  pointer-events:none;
  letter-spacing:.2px;
}
@keyframes pipeUnreadPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%    {transform:scale(1.08);opacity:.92}
}
@media(prefers-reduced-motion:reduce){
  .pipe-unread{animation:none}
}
/* Card landed animation — subtle pulse when dropped into new stage */
@keyframes cardLanded{
  0%{transform:scale(.96);opacity:.7;box-shadow:0 0 0 0 rgba(41,151,255,.3)}
  40%{transform:scale(1.02);opacity:1;box-shadow:0 0 20px 4px rgba(41,151,255,.15)}
  100%{transform:scale(1);opacity:1;box-shadow:none}
}
.pipeline-card.card-landed{animation:cardLanded .5s cubic-bezier(.22,1,.36,1) forwards;z-index:10}

/* ═══ TRIAL CARD — yellow glow BEHIND card only, content stays crisp ═══ */
.pipeline-card.is-trial{
  /* overflow stays visible via box-shadow — glow spills outside card bounds,
     behind the card's own content (card renders on top at z:0, glow is outside) */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 0 0 1px rgba(253,224,71,.35),
    0 0 24px 4px rgba(253,224,71,.35),
    0 0 60px 12px rgba(253,224,71,.18),
    0 6px 14px rgba(0,0,0,.28),
    0 22px 48px rgba(0,0,0,.30)!important;
  border-color:rgba(253,224,71,.4)!important
}
.pipeline-card.is-trial:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(253,224,71,.5),
    0 0 32px 6px rgba(253,224,71,.45),
    0 0 80px 16px rgba(253,224,71,.22),
    0 8px 20px rgba(0,0,0,.3)!important;
  border-color:rgba(253,224,71,.55)!important
}

/* FREE TRIAL badge — rendered as actual element (.pc-trial-badge), sits above overlay */
.pc-trial-badge{
  position:absolute;top:10px;right:10px;z-index:4;
  padding:6px 12px;border-radius:var(--r-pill,999px);
  font:600 11px/1 var(--font-display);letter-spacing:.14em;
  color:#0b0b10;background:linear-gradient(135deg,#fde047 0%,#fbbf24 55%,#f59e0b 100%);
  border:1px solid rgba(253,224,71,.85);
  box-shadow:
    0 0 0 1px rgba(251,191,36,.45),
    0 0 14px 2px rgba(251,191,36,.55),
    0 0 28px 6px rgba(251,191,36,.30),
    0 4px 10px rgba(0,0,0,.35);
  animation:pcTrialBadgePulse 2s ease-in-out infinite;
  pointer-events:none;user-select:none
}
@keyframes pcTrialBadgePulse{
  0%,100%{box-shadow:0 0 0 1px rgba(251,191,36,.45),0 0 14px 2px rgba(251,191,36,.55),0 0 28px 6px rgba(251,191,36,.30),0 4px 10px rgba(0,0,0,.35);transform:translateZ(0) scale(1)}
  50%   {box-shadow:0 0 0 1px rgba(251,191,36,.65),0 0 22px 4px rgba(251,191,36,.80),0 0 44px 10px rgba(251,191,36,.42),0 4px 10px rgba(0,0,0,.35);transform:translateZ(0) scale(1.04)}
}
@media(prefers-reduced-motion:reduce){
  .pc-trial-badge{animation:none}
}

/* ═══ NEW CARD LAYOUT — title top-left, client TR, badges BL, editor+timer BR ═══ */

/* APPROVED badge — top-right, above overlay */

/* TOP ROW: [client avatar] [project name] — horizontal (Sean 2026-04-15) */
/* Children inside pc-top-row regain pointer-events (so avatar is clickable) */

/* Status tag moved BACK to its own row under the title (Sean 2026-04-15 v2).
   Positioned absolutely, z-index above thumbnail, left-aligned. */
/* pc-status-tag size inherits from the unified rule above; this block keeps the default variant colors */

/* NEW — Pool-tier pill (T1/T2/T3). Admin/editor only — server strips for clients.
   Neutral white, no color differentiation between pools. Sean 2026-04-15. */

/* Submitted-date pill — sits to the right of .pc-status-tag in the .pc-status-row.
   Neutral, quiet — gives a glance-able "when did this come in" signal. Sean 2026-04-15. */

/* N/A grade state — shown on non-approved cards so the slot is always filled. */
.pc-grade-icon.pc-grade-na,
.pc-grade-icon[data-grade="NA"]{
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.1)!important;
  color:rgba(255,255,255,.4)!important;
  font-weight:500
}

/* BOTTOM ROW: meta badges | editor col */
/* meta badges — type, version, tier, grade.
   Single-row, shrinks in place so it never overlaps pc-editor-col on the right. */
/* ALL card pills (status/type/ver/tier/grade/timer) share ONE compact size —
   smaller still so SF/LF/FT/V#/T#/grade read as tight markers, not chunky buttons.
   Sean 2026-04-15. */
/* Timer icon gets a hair more room for '1h 49m' */

/* editor column — timer tag above editor avatar */
/* pc-timer-tag size inherits from the unified rule above; this block keeps visual variant only */

/* Avatar circles — client (top-left) and editor (bottom-right) MUST match size.
   Dropped 26→22px so bottom row fits pills + timer + avatar without overlap. Sean 2026-04-15. */
.pc-av-sm .pc-av-init{
  font:500 10px/1 var(--font);color:#fff;letter-spacing:.3px
}
/* Empty/placeholder avatar slot — dimmer, dashed border */
.pc-av-empty .pc-av-init{color:rgba(255,255,255,.35)!important}
/* Dark thumbnail fallback — card bg if no thumb loads */
.pipeline-card{background-color:#0f1525;background-size:cover;background-position:center}
.pipeline-card:not([style*="background-image"]),
.pipeline-card[style*="background-image:url()"]{background:var(--cb-glass-2-bg)}

/* Compact (pipe-sm) density — slightly smaller everything */
.pipeline-card.pipe-sm .pc-title{font-size:12px}
.pipeline-card.pipe-sm .pc-av-sm{width:24px;height:24px}
.pipeline-card.pipe-sm .pc-type-icon,
.pipeline-card.pipe-sm .pc-ver-icon,
.pipeline-card.pipe-sm .pc-tier-icon,
.pipeline-card.pipe-sm .pc-grade-icon,
.pipeline-card.pipe-sm .pc-pool-pill{height:14px;font-size:8.5px;padding:0 4px}
.pipeline-card.pipe-sm .pc-status-tag,
.pipeline-card.pipe-sm .pc-timer-tag{height:13px;font-size:7.5px;padding:0 4px}

/* LEGACY — hide the old floating island/bottom row if any stale markup ships */
.pipeline-card .ps-card-island,
.pipeline-card .pipe-bottom{display:none!important}

.pipe-bottom{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:0 10px var(--s1);
}

.pipe-bottom-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s0);
}

.pipe-name{
  font:500 14px/1.2 var(--font);
  color:#fff;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  max-width:75%;
  
}

.pipe-timer{
  font:500 12px/var(--lh-none) var(--mono);
  color:rgba(255,255,255,.75);
  letter-spacing:.3px;
  flex-shrink:0;
  
}

.pipe-tl{
  height:3px;
  border-radius:1.5px;
  background:rgba(255,255,255,.15);
  overflow:hidden;
}

.pipe-tl-bar{
  width:100%;height:100%;
  border-radius:1px;
  background:var(--blue);
  transform-origin:left;transition:transform 10ms var(--ease);
}

/* ═══════════════════════════════════════════════════════════════
   5. PIPELINE KANBAN
   ═══════════════════════════════════════════════════════════════ */
.ps-pipeline-kanban{
  display:flex;gap:var(--s1);
  flex:1;min-height:0;
  overflow-x:auto;
  padding:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.08) transparent;
}
.ps-pipeline-kanban::-webkit-scrollbar{height:6px}
.ps-pipeline-kanban::-webkit-scrollbar-track{background:transparent}
.ps-pipeline-kanban::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}

.ps-kanban-col{
  flex:0 0 calc((100% - (4 * var(--s1))) / 5);min-width:calc((100% - (4 * var(--s1))) / 5);max-width:calc((100% - (4 * var(--s1))) / 5);
  display:flex;flex-direction:column;gap:var(--s1);
  contain:layout style;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg);
  padding:var(--s2);
}

.ps-kanban-hdr{
  display:flex;align-items:center;gap:10px;
  font:600 var(--text-lg)/1 var(--font-display);
  color:var(--txt);
  letter-spacing:.005em;
  padding:10px 2px 12px;
  border-bottom:1px solid rgba(255,255,255,.1);
  margin-bottom:var(--s1);
}

.ps-kanban-dot{
  width:10px;height:10px;
  border-radius:50%;
  flex-shrink:0;
}

.ps-kanban-count{
  margin-left:auto;
  font:600 var(--text-xs)/1 var(--mono);
  color:var(--txt2);
  background:rgba(255,255,255,.08);
  padding:4px 8px;
  border-radius:var(--r-pill);
  letter-spacing:.04em;
}

/* Pipeline cards inside a kanban lane fill the lane width.
   (Default .pipeline-card is 160px fixed; inside .ps-kanban-col we want
   it to flex to the column width so the board uses full page width.) */
.ps-kanban-col .pipeline-card{width:100%;max-width:none}

/* ─────────────────────────────────────────────────────────────
   EDITOR POOLS — reuses .ps-kanban-col / .ps-kanban-hdr so every
   pool column matches the FrameLab project columns exactly.
   Sean spec 2026-04-16. */
/* Sean 2026-05-22: pipeline column width 248px → 186px (~25% narrower).
   Locked spec: ALL kanban / pipeline columns use this width across every
   page (FrameLab, operator boards, lead pipeline, client pipeline,
   editor pipeline, payouts). Update the kanban-recipe-locked memory if
   this changes again. */
.pool-col{flex:0 0 186px;min-width:186px}
.pool-col-queue{flex:0 0 196px}
.pool-wait-info{font:400 var(--text-xs)/var(--lh-normal) var(--font);color:var(--txt4);margin-bottom:var(--s1)}
.pool-col .col-empty{padding:var(--s3);text-align:center;color:var(--txt4);font:400 var(--text-sm)/var(--lh-normal) var(--font)}
.editor-header-card{cursor:grab;margin:0 0 var(--s1) 0}
.editor-header-card:active{cursor:grabbing}
.eh-row-top{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s1)}
.eh-pill-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-micro-2);margin-top:var(--s-micro-4)}
.pc-av-sm.pc-av-editor{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(191,90,242,.25),rgba(191,90,242,.08));
  border:1.5px solid rgba(191,90,242,.45);
  box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pc-av-sm.pc-av-editor .pc-av-init{font:500 var(--text-sm)/1 var(--font);color:var(--txt)}
.eh-name-wrap{flex:1;min-width:0}
.eh-name{font:500 var(--text-md)/var(--lh-tight) var(--font-display);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══════════════════════════════════════════════════════════════
   6. REVIEW DOCK / FRAMELAB TOOLBOX
   ═══════════════════════════════════════════════════════════════ */
.dock-bubble{
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.08) 20%,rgba(255,255,255,.06) 40%,rgba(255,255,255,.04) 60%,rgba(255,255,255,.025) 80%,rgba(255,255,255,.015) 100%);
  border:none;
  border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.18),0 8px 32px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);

  padding:var(--s-micro-4) var(--s2);
  position:relative;
}

.dk-ts{
  font:500 12px/1 var(--mono);
  color:rgba(255,255,255,.9);
  letter-spacing:.5px;
  flex-shrink:0;
  min-width:36px;
  
}

.dk-inp-wrap{
  flex:1;min-width:0;
  display:flex;align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);
  padding:0 var(--s1) 0 var(--card-sm);
  transition:border-color 10ms;
}
.dk-inp-wrap:focus-within{
  border-color:rgba(41,151,255,.4);
  box-shadow:0 0 0 2px rgba(41,151,255,.1);
}

.dk-textarea{
  flex:1;min-width:0;
  background:transparent;border:none;outline:none;
  color:var(--txt);
  font:400 13px/1.4 var(--font);
  padding:var(--s-micro-4) 0;
  resize:none;
}
.dk-textarea::placeholder{color:var(--txt4)}

.dk-send{
  width:24px;height:24px;flex-shrink:0;
  border-radius:var(--r-sm);
  border:none;
  background:rgba(41,151,255,.15);
  color:var(--blue);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  transition:background 10ms,color 10ms;
}
.dk-send svg{width:12px;height:12px}
.dk-send:hover{background:rgba(41,151,255,.25);color:var(--blue-hi)}

.dk-sep{
  width:1px;height:18px;
  background:rgba(255,255,255,.08);
  flex-shrink:0;
  margin:0 var(--s-micro-1);
}

.dk-btn{
  width:36px;height:36px;flex-shrink:0;
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--txt3);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  transition:background 10ms,color 10ms,border-color 10ms;
}
.dk-btn svg{width:18px;height:18px}
.dk-btn:hover{background:rgba(255,255,255,.08);color:var(--txt);border-color:rgba(255,255,255,.12)}
.dk-btn.active{
  background:rgba(41,151,255,.12);
  color:var(--blue);
  border-color:rgba(41,151,255,.25);
}

.dk-play{
  width:30px;height:30px;flex-shrink:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 100%);
  color:var(--txt);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15);
  transition:background 10ms,transform 10ms;
}
.dk-play svg{width:13px;height:13px;margin-left:1px}
.dk-play:hover{background:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.10) 100%);transform:scale(1.06)}
.dk-play:active{transform:scale(.95)}
/* Quality button — same .dk-play base, no margin offset on its SVG */

.dk-timeline{
  flex:1;min-width:0;
  height:36px;
  display:flex;align-items:center;
  cursor:pointer;
  
  position:relative;
}

.dk-timeline-track{
  position:relative;
  width:100%;height:6px;
  border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.07) 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.04);
  
  overflow:hidden;
}

.dk-timeline-bar{
  width:100%;height:100%;
  border-radius:3px;
  background:linear-gradient(180deg,rgba(41,151,255,.9) 0%,rgba(41,151,255,.7) 100%);
  box-shadow:0 0 8px rgba(41,151,255,.3);
  transform-origin:left;transform:scaleX(0);transition:none;
}

.dk-timeline-head{
  position:absolute;
  top:50%;left:0%;
  transform:translate(-50%,-50%);
  width:14px;height:14px;
  border-radius:50%;
  background:linear-gradient(180deg,#fff 0%,#e0e4ea 100%);
  border:2px solid rgba(41,151,255,.8);
  box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 8px rgba(41,151,255,.25),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform 10ms;
}
.dk-timeline:hover .dk-timeline-head{transform:translate(-50%,-50%) scale(1.15)}

/* Timeline tick marks for revision comments */
.dk-ticks{position:absolute;inset:0;pointer-events:none;z-index:1}

.dk-knob{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-micro-1);
  flex-shrink:0;
}

.dk-knob-body{
  width:32px;height:32px;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(40,42,50,.95),rgba(22,24,30,.98));
  border:1.5px solid rgba(255,255,255,.14);
  box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 2px rgba(0,0,0,.2);
  display:flex;align-items:center;justify-content:center;
  cursor:grab;
  transition:border-color 30ms;
  
  
  user-select:none;
  -webkit-user-select:none;
  position:relative;
}
.dk-knob-body:active{cursor:grabbing}
.dk-knob-body:hover{border-color:rgba(255,255,255,.25)}

.dk-knob-tick{
  width:2px;height:8px;
  background:#fff;
  border-radius:0;
  transform:rotate(0deg);
  transform-origin:center 16px;
  
  transition:none;
  position:absolute;
  top:4px;
  left:50%;
  margin-left:-1px;
}

.dk-knob-lbl{
  font:500 9px/1 var(--font);
  color:var(--txt4);
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   7. PROJECT THREAD PANEL
   ═══════════════════════════════════════════════════════════════ */
.ps-thread{
  width:340px;flex-shrink:0;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.02);
  border-left:1px solid rgba(255,255,255,.07);
  overflow:hidden;
}
/* ── Floating thread in project detail — dissolving glass (matches left nav) ── */
.pv-thread-float{
  width:320px;
  border-left:none;
  border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.08) 12%,rgba(255,255,255,.06) 25%,rgba(255,255,255,.04) 40%,rgba(255,255,255,.025) 60%,rgba(255,255,255,.015) 78%,rgba(255,255,255,.008) 100%);
  border:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 1px 3px rgba(0,0,0,.08),
    0 4px 16px rgba(0,0,0,.08);
  position:relative;overflow:hidden;

  /* Smooth open/close animation */
  transition:opacity 200ms ease,transform 200ms cubic-bezier(.16,1,.3,1);
  
}
.pv-thread-float[hidden]{display:flex!important;width:0;opacity:0;
  overflow:hidden;pointer-events:none;padding:0;border:none;
  transform:translateX(20px)}

.ps-th-hdr{
  font:500 var(--text-xs)/1 var(--font);
  color:var(--txt);
  padding:var(--card-sm) var(--card-sm);
  border-bottom:1px solid rgba(255,255,255,.06);
  letter-spacing:.2px;
}
.pv-thread-float .ps-th-hdr{
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:0 var(--card-sm);
  min-height:44px;display:flex;align-items:center;
  font:500 14px/1 var(--font);letter-spacing:-.01em;color:#fff;
}
.ps-th-section.open .ps-th-body{
  max-height:500px;
  padding:var(--s1) var(--card-sm) var(--card-sm);
}
.ps-th-section.open .ps-th-toggle svg{transform:rotate(90deg)}

/* ═══════════════════════════════════════════════════════════════
   8. PROJECT CHAT (In Thread Panel)
   ═══════════════════════════════════════════════════════════════ */

.ps-chat-input{
  display:flex;align-items:center;gap:var(--s-micro-4);
  padding:var(--s-micro-4) var(--card-sm);
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  /* Required so .emoji-picker (position:absolute; bottom:100%) anchors
     to the input row instead of escaping to body. Sean: "+ icon doesnt
     do anything when i click it" — fixed. */
  position:relative;
}
.pv-thread-float .ps-chat-input{
  border-radius:0 0 var(--r-xl) var(--r-xl);
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.06) 100%);
  padding:10px var(--card-sm);min-height:56px;
}

.ps-chat-plus{
  width:24px;height:24px;flex-shrink:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--txt3);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  transition:background 10ms,color 10ms;
}
.ps-chat-plus:hover{background:rgba(255,255,255,.08);color:var(--txt)}

.chat-pill{
  display:flex;align-items:center;gap:var(--s-micro-4);
  padding:0 var(--s1) 0 var(--card-sm);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  height:28px;
  transition:border-color 10ms;
}
.chat-pill:focus-within{
  border-color:rgba(41,151,255,.4);
  box-shadow:0 0 0 2px rgba(41,151,255,.1);
}

/* ═══════════════════════════════════════════════════════════════
   9. DRAWING ANNOTATION BAR
   ═══════════════════════════════════════════════════════════════ */
/* ── Drawing toolbar — matches left-nav ln-glass-shell capsule ── */
.draw-bar{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 0;width:42px;
  border-radius:24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.12);
  box-shadow:0 4px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);

  position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:60;
  overflow:visible}
/* Top edge highlight — identical to ln-glass-shell::before */
.draw-bar::before{content:'';position:absolute;top:0;left:30%;right:30%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35) 20%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.35) 80%,transparent)}
/* Tool groups — inset recessed wells like ln-mode-toggle */
.draw-bar .draw-tool{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:7px;border:none;background:transparent;color:rgba(255,255,255,.5);
  cursor:pointer;transition: transform 10ms, opacity 10ms, background-color 10ms, color 10ms, box-shadow 10ms, border-color 10ms}
.draw-bar .draw-tool:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8)}
.draw-bar .draw-tool.active{background:rgba(41,151,255,.15);color:#2997ff}
.draw-bar .draw-tool svg{width:14px;height:14px}
.draw-bar .draw-colors{display:flex;flex-direction:column;gap:2px;align-items:center}
.draw-bar .draw-color{width:14px;height:14px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color 10ms}
.draw-bar .draw-color.active{border-color:#fff}
.draw-bar .draw-sizes{display:flex;flex-direction:column;gap:3px;align-items:center;margin-top:2px}
.draw-bar .draw-size{border-radius:50%;background:rgba(255,255,255,.6);border:none;cursor:pointer}
.draw-bar .draw-size.active{background:#fff}

/* Apple-style file tree */

.draw-tool{
  width:28px;height:28px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  background:transparent;
  color:var(--txt3);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  transition:background 10ms,color 10ms,border-color 10ms;
}
.draw-tool svg{width:14px;height:14px}
.draw-tool:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.draw-tool.active{
  background:rgba(41,151,255,.12);
  color:var(--blue);
  border-color:rgba(41,151,255,.2);
}

.draw-sep{
  width:1px;height:20px;
  background:rgba(255,255,255,.08);
  flex-shrink:0;
  margin:0 4px;
}

.draw-colors{
  display:flex;align-items:center;gap:var(--s0);
}

.draw-color{
  width:14px;height:14px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform 10ms,border-color 10ms,box-shadow 10ms;
}
.draw-color:hover{transform:scale(1.15)}
.draw-color.active{
  border-color:var(--txt);
  box-shadow:0 0 0 2px rgba(255,255,255,.2);
}

.draw-sizes{
  display:flex;align-items:center;gap:var(--s-micro-3);
}

.draw-size{
  border-radius:50%;
  border:none;
  background:var(--txt3);
  cursor:pointer;
  transition:background 10ms,box-shadow 10ms;
}
.draw-size:hover{background:var(--txt2)}
.draw-size.active{
  background:var(--txt);
  box-shadow:0 0 0 2px rgba(255,255,255,.2);
}

/* ═══════════════════════════════════════════════════════════════
   10. RECORDING INDICATORS
   ═══════════════════════════════════════════════════════════════ */
.rec-indicator{
  display:inline-flex;align-items:center;gap:var(--s0);
  padding:var(--s0) var(--card-sm);
  border-radius:var(--r-pill);
  background:rgba(192,57,43,.12);
  border:1px solid rgba(192,57,43,.25);
}

.rec-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--red);
  animation:rec-pulse 1s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes rec-pulse{
  0%,100%{opacity:1}
  50%{opacity:.3}
}

.rec-label{
  font:500 var(--text-3xs)/var(--lh-none) var(--font);
  color:var(--red);
  letter-spacing:1px;
  text-transform:uppercase;
}

.rec-timer{
  font:500 var(--text-xs)/var(--lh-none) var(--mono);
  color:var(--txt);
  letter-spacing:.5px;
}

.rec-stop{
  width:22px;height:22px;
  border-radius:var(--r-sm);
  border:1px solid rgba(192,57,43,.3);
  background:rgba(192,57,43,.15);
  color:var(--red);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  transition:background 10ms,border-color 10ms;
}
.rec-stop svg{width:12px;height:12px}
.rec-stop:hover{background:rgba(192,57,43,.25);border-color:rgba(192,57,43,.4)}

.audio-wave{
  display:flex;align-items:center;gap:var(--s-micro-1);
  height:16px;
}
.audio-wave span{
  width:2px;
  border-radius:1px;
  background:var(--red);
  animation:audio-bar .6s ease-in-out infinite alternate;
}
.audio-wave span:nth-child(1){height:4px;animation-delay:0s}
.audio-wave span:nth-child(2){height:10px;animation-delay:10ms}
.audio-wave span:nth-child(3){height:6px;animation-delay:10ms}
.audio-wave span:nth-child(4){height:12px;animation-delay:.3s}
.audio-wave span:nth-child(5){height:5px;animation-delay:10ms}
@keyframes audio-bar{
  0%{transform:scaleY(.4)}
  100%{transform:scaleY(1)}
}

/* ═══════════════════════════════════════════════════════════════
   11. REVIEW CONTEXT MENU (Right-Click) — compact, text-box first
   Layout (top→bottom, closest to cursor on top):
     Row 1: pill textarea · send · X
     Row 2: glass-pill timestamp · 5 mode icons
   ═══════════════════════════════════════════════════════════════ */
.rv-ctx{
  position:absolute;z-index:20;
  width:240px;
  padding:8px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(14,18,28,.94) 0%,rgba(10,14,22,.97) 100%);
  border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.16);
  box-shadow:0 10px 32px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:6px;
  
  
}

.rv-ctx-row1{display:flex;align-items:center;gap:5px;width:100%}
.rv-ctx-row2{display:flex;align-items:center;gap:5px;width:100%}

/* Glass pill timestamp */
.rv-ctx-ts{
  font:500 10px/1 var(--mono);
  color:var(--blue);
  letter-spacing:.3px;
  flex-shrink:0;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(41,151,255,.10);
  border:1px solid rgba(41,151,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 12px rgba(41,151,255,.12);
  
}

/* Pill-shaped text box */
.rv-ctx-inp-wrap{
  flex:1;min-width:0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:0 12px;
  transition:border-color .1s,box-shadow .1s;
}
.rv-ctx-inp-wrap:focus-within{
  border-color:rgba(41,151,255,.45);
  box-shadow:0 0 0 2px rgba(41,151,255,.12);
}
.rv-ctx-textarea{
  width:100%;
  background:transparent;border:none;outline:none;
  color:var(--txt);
  font:400 12px/1.3 var(--font);
  padding:6px 0;
  resize:none;
  min-height:24px;max-height:80px;
}
.rv-ctx-textarea::placeholder{color:var(--txt4)}

/* Send + close + mode buttons — all 24px square so the toolbox stays tight */
.rv-ctx-send{
  width:24px;height:24px;flex-shrink:0;
  border-radius:8px;
  border:none;
  background:var(--blue);
  color:#fff;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  transition:background .1s,transform .1s;
}
.rv-ctx-send svg{width:11px;height:11px}
.rv-ctx-send:hover{background:#1a6dd4;transform:translateY(-1px)}

.rv-ctx-btn{
  width:24px;height:24px;flex-shrink:0;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--txt3);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  transition:background .1s,color .1s,border-color .1s;
}
.rv-ctx-btn svg{width:11px;height:11px}
.rv-ctx-btn:hover{background:rgba(255,255,255,.08);color:var(--txt);border-color:rgba(255,255,255,.14)}
.rv-ctx-btn.active{
  background:rgba(41,151,255,.14);
  color:var(--blue);
  border-color:rgba(41,151,255,.28);
}
/* X button on row 1 — same 24×24 sizing, equal weight as send */
.rv-ctx-row1 .rv-ctx-close{margin-left:0}
/* On row 2 the 5 mode icons fill the space evenly to the right of the timestamp pill */
.rv-ctx-row2 .rv-ctx-btn{flex:1 1 0;min-width:0}

/* ═══════════════════════════════════════════════════════════════
   12. MISC — Avatar, Health Timer
   ═══════════════════════════════════════════════════════════════ */

/* Bottom island extras */
.bi-role-tag{font:500 9px/1 var(--font);letter-spacing:.5px;text-transform:uppercase;color:var(--txt4);padding:2px 6px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);white-space:nowrap}
.bi-role-tag.ac-role-owner{color:var(--yellow-hi);border-color:rgba(255,214,10,.15);background:rgba(255,214,10,.06)}
.bi-role-tag.ac-role-admin{color:var(--blue-hi);border-color:rgba(41,151,255,.15);background:rgba(41,151,255,.06)}
.bi-role-tag.ac-role-editor{color:var(--green-hi);border-color:rgba(48,209,88,.15);background:rgba(48,209,88,.06)}
.bi-role-tag.ac-role-client{color:var(--purple-hi);border-color:rgba(191,90,242,.15);background:rgba(191,90,242,.06)}
.bi-role-tag.ac-role-trial{color:var(--orange-hi);border-color:rgba(255,159,10,.15);background:rgba(255,159,10,.06)}
/* Grouped dock sections */

.health-timer{
  display:inline-flex;align-items:center;gap:var(--s-micro-3);
  padding:var(--s0) 10px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font:500 var(--text-xs)/var(--lh-none) var(--font);
  color:var(--txt2);
}

.ht-dot{
  width:7px;height:7px;
  border-radius:50%;
  flex-shrink:0;
}

.ht-time{
  font:500 var(--text-xs)/var(--lh-none) var(--mono);
  letter-spacing:.3px;
}

/* Health timer color coding via data-health attribute */
.health-timer[data-health="A"] .ht-dot{background:#34d399}
.health-timer[data-health="A"]{border-color:rgba(52,211,153,.2);color:#34d399}
.health-timer[data-health="B"] .ht-dot{background:#86efac}
.health-timer[data-health="B"]{border-color:rgba(134,239,172,.15);color:#86efac}
.health-timer[data-health="C"] .ht-dot{background:#fbbf24}
.health-timer[data-health="C"]{border-color:rgba(251,191,36,.15);color:#fbbf24}
.health-timer[data-health="D"] .ht-dot{background:var(--orange)}
.health-timer[data-health="D"]{border-color:rgba(255,159,10,.15);color:var(--orange)}
.health-timer[data-health="F"] .ht-dot{background:var(--red)}
.health-timer[data-health="F"]{border-color:rgba(192,57,43,.2);color:var(--red)}

/* ═══════════════════════════════════════════════════════════════
   13. CELEBRATIONS — Checkmark, Fireworks, Confetti
   ═══════════════════════════════════════════════════════════════ */

.confetti-wrap{position:fixed;inset:0;width:100vw;height:100vh;overflow:hidden;pointer-events:none;z-index:9999}
.confetti-wrap .confetti{position:absolute;top:-40px;width:10px;height:14px;border-radius:2px;opacity:0;will-change:transform,opacity;animation:confettiFall linear forwards}

/* ═══════════════════════════════════════════════════════════════
   14. iMESSAGE-STYLE CHAT INPUT
   ═══════════════════════════════════════════════════════════════ */
/* --- iMessage input row (matches real Apple iMessage 2026) --- */

/* + button: outlined circle, vertically centered */

/* pill text field with mic inside at right end */

.imsg-field{flex:1;border:none;background:none;outline:none;color:var(--txt);
  font:400 13px/1.4 var(--font);padding:var(--s-micro-4) 0;min-width:0}
.imsg-field::placeholder{color:var(--txt4)}

/* mic icon sits inside the pill at right end */

/* emoji row below input (Apple-style: emoji left, dictation right) */
.imsg-send{width:28px;height:28px;flex-shrink:0;border-radius:50%;
  border:none;background:var(--imsg);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background 10ms,transform 10ms;box-shadow:0 2px 8px rgba(11,132,254,.3)}
.imsg-send:hover{background:var(--imsg-dk);transform:scale(1.05)}
.imsg-send svg{width:14px;height:14px;margin-left:1px;margin-top:-1px}

/* ═══════════════════════════════
   LOGIN
   ═══════════════════════════════ */

/* Animated blue gradient ring around bug logo — uses shared cb-ring-spin */
.login-logo-ring{position:relative;width:80px;height:80px;margin:0 auto var(--card-md)}
.login-logo-ring::before{content:'';position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg,#2979ff,#00b0ff,#2979ff,#1565c0,#2979ff);
  animation:cb-ring-spin 3s linear infinite}
.login-logo-ring::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(10,20,40,.95) 55%,rgba(20,40,80,.8) 100%)}
.login-logo-ring img{position:absolute;inset:0;margin:auto;width:55px;height:55px;z-index:1;
  filter:brightness(10)}

/* Onboarding welcome landing — full-viewport black canvas, Apple-event reveal */
.ob-welcome-screen{
  position:fixed;inset:0;background:#000;z-index:9000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 24px;text-align:center;overflow:hidden;
  animation:obWelcomeFade .6s ease-out both
}
/* Hero wrapper: holds glow layer + logo + sweep light */
.ob-welcome-hero{
  position:relative;display:block;margin:0 auto 34px;
  width:min(86vw,620px)
}
/* Ambient breathing glow — anchored to floor-glare under the bug (bottom center) */
.ob-welcome-glow{
  position:absolute;left:-20%;right:-20%;top:40%;bottom:-40%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 42% at 50% 78%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.10) 32%,rgba(255,255,255,.035) 58%,transparent 78%);
  opacity:0;transform-origin:50% 78%;
  animation:obGlowIn 3s ease-out .4s forwards,obGlowPulse 8s ease-in-out 3.5s infinite
}
/* Logo: slow cinematic left→right mask reveal, extra-faded edge, bottom fade, sparkle-corner hole */
.ob-welcome-hero img{
  position:relative;z-index:1;width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 48%,#000 100%),linear-gradient(180deg,#000 0%,#000 56%,transparent 100%),radial-gradient(circle at 93% 91%,transparent 0%,transparent 7%,#000 13%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 48%,#000 100%),linear-gradient(180deg,#000 0%,#000 56%,transparent 100%),radial-gradient(circle at 93% 91%,transparent 0%,transparent 7%,#000 13%);
  -webkit-mask-size:260% 100%,100% 100%,100% 100%;mask-size:260% 100%,100% 100%,100% 100%;
  -webkit-mask-position:100% 0,0 0,0 0;mask-position:100% 0,0 0,0 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in,source-in;mask-composite:intersect,intersect;
  opacity:0;
  animation:obLogoReveal 9s cubic-bezier(.3,0,.25,1) .8s forwards
}
.ob-welcome-screen .ob-welcome-eyebrow{
  font:600 12px/1 var(--font);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:14px;
  animation:obWelcomeRise 1.2s 8.4s cubic-bezier(.22,1,.36,1) both
}
.ob-welcome-screen .ob-welcome-title{
  font:700 clamp(30px,5vw,46px)/1.1 var(--font-display);
  color:#fff;margin:0 0 18px;max-width:820px;letter-spacing:-.02em;
  animation:obWelcomeRise 1.2s 8.6s cubic-bezier(.22,1,.36,1) both
}
.ob-welcome-screen .ob-welcome-sub{
  font:400 15px/1.55 var(--font);color:rgba(255,255,255,.55);
  max-width:720px;margin:0 0 34px;white-space:nowrap;
  animation:obWelcomeRise 1.2s 8.8s cubic-bezier(.22,1,.36,1) both
}
.ob-welcome-screen .ob-welcome-btn{
  font:600 15px/1 var(--font);padding:15px 32px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#2997ff,#0071e3);color:#fff;
  box-shadow:0 12px 36px rgba(41,151,255,.38);
  transition:transform .18s ease,box-shadow .18s ease;
  animation:obWelcomeRise 1.2s 9s cubic-bezier(.22,1,.36,1) both
}
@media (max-width:640px){
  .ob-welcome-screen .ob-welcome-sub{white-space:normal;max-width:480px}
}
.ob-welcome-screen .ob-welcome-btn:hover{transform:translateY(-1px);box-shadow:0 16px 44px rgba(41,151,255,.48)}
@keyframes obWelcomeFade{from{opacity:0}to{opacity:1}}
@keyframes obWelcomeRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes obLogoReveal{
  0%  {opacity:0;-webkit-mask-position:100% 0,0 0;mask-position:100% 0,0 0}
  6%  {opacity:1}
  100%{opacity:1;-webkit-mask-position:0% 0,0 0;mask-position:0% 0,0 0}
}
@keyframes obGlowIn{from{opacity:0}to{opacity:1}}
@keyframes obGlowPulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* Wizard-hero bug badge — small glass bug inside a free-form glowing circle */
.ob-wiz-badge{
  position:relative;width:112px;height:112px;margin:-6px auto 14px;
  display:flex;align-items:center;justify-content:center;pointer-events:none
}
.ob-wiz-badge::before,.ob-wiz-badge::after{content:"";position:absolute;inset:-12%;border-radius:50%;pointer-events:none}
.ob-wiz-badge::before{
  background:conic-gradient(from 0deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.04) 22%,rgba(255,255,255,0) 38%,rgba(255,255,255,.12) 62%,rgba(255,255,255,.36) 84%,rgba(255,255,255,.32) 100%);
  opacity:.9;
  animation:obBadgeSpin 18s linear infinite
}
.ob-wiz-badge::after{
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 42%,transparent 68%);
  animation:obBadgePulse 6s ease-in-out infinite
}
.ob-wiz-badge img{position:relative;z-index:2;width:78px;height:auto;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
@keyframes obBadgeSpin{to{transform:rotate(360deg)}}
@keyframes obBadgePulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.ob-wiz-badge::before,.ob-wiz-badge::after{animation:none}}
@media (max-width:640px){
  .ob-welcome-hero{width:88vw;margin-bottom:26px}
}
@media (prefers-reduced-motion:reduce){
  .ob-welcome-hero img{animation:obWelcomeFade .4s ease-out both;-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0}
  .ob-welcome-glow{animation:none;opacity:.8}
}

/* Full-viewport centering shell */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--s3)}

/* Login card — 320px constraint + text centering (combine with .glass-bubble) */
.login-card{width:100%;max-width:300px;text-align:center}

/* Login title — matches component-library Portal Login heading */

/* Login subtitle */
.login-sub{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3);margin-bottom:var(--s3)}

/* 2-step visibility toggle · Sean 2026-05-27 · entrance animation removed
   because animation-fill-mode:both was sticking opacity:0 on the from-frame
   on some browsers (reduced-motion + interrupted animation paths), leaving
   the email field invisible. Show/hide is instant now — no flicker. */
.login-step{display:none;opacity:1}
.login-step.active{display:block;opacity:1}

/* Inline error flash */
.login-error{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--red);
  margin-top:var(--s1);min-height:var(--s3);opacity:0;transition:opacity 10ms var(--ease)}
.login-error.visible{opacity:1}

/* Server message (code-sent confirmation) */
.login-msg{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3);margin-bottom:var(--s3)}

/* Centered monospace 6-digit code entry */
.login-code{text-align:center;letter-spacing:8px;font:500 var(--text-2xl)/var(--lh-none) var(--mono)}

/* Help text row */
.login-help{font:400 var(--text-4xs)/var(--lh-normal) var(--font);color:var(--txt3)}
.login-help a{color:var(--blue);text-decoration:none}
.login-help a:hover{text-decoration:underline}

/* Footer links */
.login-foot{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt4);margin-top:var(--s2)}
.login-foot a{color:var(--txt4);text-decoration:none}
.login-foot a:hover{color:var(--txt3)}

/* ═══ LOGIN — Premium post-verify takeover ═══ */
.login-takeover{
  position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  opacity:0;pointer-events:none;transition:opacity 300ms var(--ease)
}
.login-takeover.visible{opacity:1;pointer-events:auto}
.login-takeover.visible .lt-avatar{opacity:1;transform:scale(1)}
@keyframes ltSpin{to{transform:rotate(360deg)}}
@keyframes ltGlow{from{opacity:.5;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
.login-takeover.visible .lt-name{opacity:1;transform:translateY(0)}
.login-takeover.visible .lt-sub{opacity:1}
.login-card.fading{opacity:0;transform:scale(.97) translateY(-8px);transition:opacity 300ms var(--ease),transform 300ms var(--ease);pointer-events:none}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Role Visibility Gates
   ═══════════════════════════════════════════════════════════════ */
.staff-only{display:none}
body[data-role="editor"] .staff-only,
body[data-role="admin"]  .staff-only,
body[data-role="owner"]  .staff-only{display:flex}
.admin-only{display:none}
body[data-role="admin"] .admin-only,
body[data-role="owner"] .admin-only{display:flex}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Person Cards (kanban, admin, team)
   ═══════════════════════════════════════════════════════════════ */
.person.dragging{opacity:.4;transform:scale(.95)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Tab Panels
   ═══════════════════════════════════════════════════════════════ */
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeUp 25ms var(--ease)}
.pipe-main-col > .tab-panel.active{display:flex;flex-direction:column;flex:1;min-height:0}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Modal Actions
   ═══════════════════════════════════════════════════════════════ */
.modal-actions{display:flex;gap:10px;margin-top:var(--card-md);justify-content:flex-end}
.modal-btn{padding:10px var(--s3);border-radius:var(--r-lg);font:500 var(--text-md)/var(--lh-none) var(--font);
  cursor:pointer;border:none;transition:background 10ms}
.modal-cancel{background:rgba(255,255,255,.06);color:var(--txt2)}
.modal-cancel:hover{background:rgba(255,255,255,.1)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Score Bars & Colors
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Page Shell (child pages inside iframe)
   EVERY iframe page MUST use .page-shell > [.page-head, .page-body, .page-foot]
   These rules are authoritative — do NOT override locally. Sean 2026-04-16.
   ═══════════════════════════════════════════════════════════════ */
.page-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:transparent}
.page-head,.cc-hdr{flex-shrink:0;padding:16px 16px 10px;width:100%;margin:0;animation:fadeUp 25ms var(--ease)}
.page-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 16px 16px}
.page-body::-webkit-scrollbar{width:0}
.page-inner{max-width:1100px;padding:0 0 var(--s10);margin:0 auto;width:100%}
.page-foot{flex-shrink:0;padding:10px 16px 16px;display:flex;justify-content:center;gap:var(--s1);max-width:680px;margin:0 auto;width:100%}
.page-head>.text-muted{color:var(--txt3);margin-bottom:var(--s1)}
.page-head>.text-muted:last-child{margin-bottom:0}

/* UNIFIED TYPE HIERARCHY — same weights / sizes on every page.
   SF Pro Display for titles, SF Pro Text for body. */
.page-shell .pg-title,.pg-title{font:500 28px/1.1 var(--font-display);letter-spacing:-.02em;color:var(--txt);margin:0 0 6px}
.page-shell .pg-sub,.pg-sub{font:400 14px/1.4 var(--font);color:var(--txt3);margin:0}
.page-shell .sec-title,.sec-title{font:500 18px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--txt);margin:0 0 10px}
.page-shell .sec-sub,.sec-sub{font:400 13px/1.4 var(--font);color:var(--txt3);margin:0}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--h-sm);height:var(--h-sm);
  border-radius:var(--r-md);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);
  color:var(--txt3);cursor:pointer;transition:background 10ms,color 10ms}
.btn-icon:hover{background:rgba(255,255,255,.08);color:var(--txt)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Wizard Buttons (back/next)
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Page Titles & Gradient Text
   ═══════════════════════════════════════════════════════════════ */
.pg-title,.cc-title,.banner-title{font:500 28px/var(--lh-tight) var(--cb-font-display);
  margin:0 0 var(--s0);letter-spacing:-.02em;color:var(--txt)}
.pg-sub,.cc-sub{color:var(--txt3);font:400 var(--text-md)/var(--lh-normal) var(--cb-font-text);margin:0 0 var(--s2)}
.grad{background:linear-gradient(135deg,var(--blue),var(--blue-hv));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Unified Tab Row
   ═══════════════════════════════════════════════════════════════ */
.pg-tabs{display:flex;gap:0;margin-bottom:var(--s3);border-bottom:1px solid rgba(255,255,255,.06);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pg-tabs::-webkit-scrollbar{display:none}
.pg-tab{padding:var(--s1) var(--s2);font:500 var(--text-md)/var(--lh-none) var(--font);color:var(--txt3);cursor:pointer;white-space:nowrap;flex-shrink:0;
  border:none;background:none;border-bottom:2px solid transparent;transition:color 10ms,border-color 10ms}
.pg-tab:hover{color:var(--txt)}
.pg-tab.active{color:var(--blue);border-bottom-color:var(--blue)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Section Cards
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Project Cards (dashboard, team)
   ═══════════════════════════════════════════════════════════════ */
.pj-due.overdue{color:var(--red)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Toast (simple fixed-bottom)
   ═══════════════════════════════════════════════════════════════ */
.toast-fixed{position:fixed;bottom:24px;right:24px;padding:12px 18px;
  background:linear-gradient(180deg,rgba(28,32,46,.94) 0%,rgba(18,22,34,.94) 100%);
  border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.18);
  border-radius:14px;font:500 13px/1.35 var(--font-display);color:#fff;
  display:flex;align-items:center;gap:10px;z-index:1000;pointer-events:none;
  box-shadow:0 12px 32px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.22);
  transform:translateY(20px) scale(.96);opacity:0;
  transition:transform 240ms cubic-bezier(.16,1,.3,1),opacity 200ms ease-out;}
.toast-fixed.visible{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.toast-fixed.success{border-left:3px solid var(--green)}
.toast-fixed.error{border-left:3px solid var(--red)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Toggle Row
   ═══════════════════════════════════════════════════════════════ */
.tog-row{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) 0;border-bottom:1px solid rgba(255,255,255,.06)}
.tog-row:last-child{border-bottom:none}
.tog-label{font:500 var(--text-md)/var(--lh-normal) var(--font)}
.tog-desc{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3);margin-top:2px}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Segmented Control
   ═══════════════════════════════════════════════════════════════ */
.seg-ctrl{display:inline-flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);padding:3px;gap:2px}
.seg-btn{padding:8px var(--s2);border-radius:calc(var(--r-lg) - 2px);font:500 var(--text-sm)/var(--lh-none) var(--font);
  color:var(--txt3);cursor:pointer;border:none;background:transparent;transition:background 10ms,color 10ms}
.seg-btn:hover{color:var(--txt2)}
.seg-btn.active{background:rgba(255,255,255,.12);color:var(--txt);box-shadow:0 1px 4px rgba(0,0,0,.2)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Destructive Button
   ═══════════════════════════════════════════════════════════════ */
.btn-danger{background:rgba(192,57,43,.15);color:var(--red);border:1px solid rgba(192,57,43,.3);
  border-top-color:rgba(192,57,43,.4)}
.btn-danger:hover{background:rgba(192,57,43,.25);border-color:rgba(192,57,43,.5);transform:translateY(-1px)}

.lb-rank.r1{color:var(--gold)}
.lb-rank.r2{color:#c0c0c0}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Payout Detail
   ═══════════════════════════════════════════════════════════════ */
.po-tier.active-tier{border-color:var(--green);background:rgba(126,203,161,.06)}

/* ═══════════════════════════════════════════════════════════════
   TEAM PAGE — Dashboard, Reports, Clients
   ═══════════════════════════════════════════════════════════════ */

/* Grade pill */

/* Team filter pills */
.tf-pill{padding:var(--s1) var(--s2);border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--txt3);cursor:pointer;font:500 var(--text-sm)/var(--lh-none) var(--font);transition:background 10ms,border-color 10ms,color 10ms}
.tf-pill:hover{border-color:rgba(255,255,255,.15);color:var(--txt)}
.tf-pill.active{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:var(--blue)}

/* Dashboard 3-column layout */
@media(max-width:1024px){.tm-3col{grid-template-columns:1fr}}
.tm-col-head.warn{color:var(--red)}
.tm-col-cnt.warn{color:var(--red);border-color:rgba(192,57,43,.2)}

/* Extended project card for team */
.pj-card.late{border-left:2px solid var(--red)}

/* Section title + count */

/* Report 2-column layout */
@media(max-width:1024px){.tm-report{grid-template-columns:1fr}}

/* Health hero */

/* Report table */
.tm-table td.strong{font-weight:500;color:var(--txt)}
.tm-table td.center{text-align:center}
.tm-table td.muted{color:var(--txt3)}

/* Client card */
.tm-client-tag.trial{background:rgba(255,149,0,.12);color:var(--orange)}
.tm-client-tag.active{background:rgba(48,209,88,.12);color:var(--green)}
.tm-client-tag.canceled{background:rgba(255,69,58,.12);color:var(--red)}
.tm-client-tag.tier{background:rgba(191,90,242,.08);color:var(--purple)}

/* Mini project card inside client */
.tm-proj-tag.type{background:rgba(41,151,255,.1);color:var(--blue)}
.tm-proj-tag.queue{background:rgba(110,110,115,.15);color:var(--txt3)}
.tm-proj-tag.active{background:rgba(41,151,255,.15);color:var(--blue)}
.tm-proj-tag.review{background:rgba(255,159,10,.15);color:var(--orange)}
.tm-proj-tag.revisions{background:rgba(255,69,58,.15);color:var(--red)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHELL — Welcome Stage (first login cinematic)
   ═══════════════════════════════════════════════════════════════ */
@keyframes wLetterIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes wOrbPulse{0%,100%{opacity:.15}50%{opacity:.25}}

.ws-stage{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 50% at 50% 30%,rgba(41,151,255,.04),transparent),
  linear-gradient(180deg,#0a0a0a,#050505,#000)}
.ws-stage.active{display:flex}
.ws-name{font:500 clamp(28px,4vw,48px)/var(--lh-tight) var(--font-display);color:var(--txt);margin-bottom:var(--s2)}
.ws-name .ws-char{display:inline-block;opacity:0}
.ws-sub{font:400 var(--text-md)/var(--lh-relaxed) var(--font);color:var(--txt3);margin-bottom:var(--s4);max-width:380px;margin-left:auto;margin-right:auto}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHELL — UI Tour (post-welcome walkthrough)
   ═══════════════════════════════════════════════════════════════ */
.ws-tour.active{display:flex}
/* Old tour classes removed — welcome banner uses inline styles */

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHELL — Onboarding Island (trial users, right side)
   ═══════════════════════════════════════════════════════════════ */
/* Trial stepper widget — KILLED 2026-04-21. Any stale .oa-island nodes stay hidden. */
.oa-island, .oa-island.visible { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHELL — Chat Quick Popup (bottom island)
   ═══════════════════════════════════════════════════════════════ */
.ix-popup{position:fixed;bottom:60px;z-index:200;width:320px;max-height:420px;
  background:rgba(10,12,16,.96);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.18);
  border-radius:var(--r-xl);box-shadow:0 12px 48px rgba(0,0,0,.5);
  transform:translateY(8px) scale(.96);opacity:0;pointer-events:none;
  transition:transform 10ms var(--ease),opacity 10ms;
  display:flex;flex-direction:column;overflow:hidden}
.ix-popup.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.ix-chat{right:60px} /* Old floating notification — replaced by .sb-notif-popup */

/* ═══ Notification Popup — anchored top-right, opens DOWNWARD from the bell
   icon (#stbBell) in the .shell-topbar. Sean 2026-05-26: 'they need to be
   showing in the top right like an iOS message, under our bell notification.'
   Previous position (bottom:72px;left:28px) was the legacy sidebar-anchored
   version — caused popups to render in the bottom-left away from the bell. ═══ */
.sb-notif-popup{
  position:fixed;top:60px;right:12px;
  width:340px;max-height:calc(100vh - 96px);z-index:9000;
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--cb-glass-2-bg);
  border:var(--cb-glass-2-border);border-top-color:var(--cb-glass-2-border-top);
  box-shadow:0 12px 32px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(-8px) scale(.96);opacity:0;pointer-events:none;
  transition:transform 180ms cubic-bezier(.16,1,.3,1),opacity 180ms;
  transform-origin:top right}
.sb-notif-popup::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35) 25%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.35) 75%,transparent)}
.sb-notif-popup.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.sb-notif-hdr{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s1) var(--s2);border-bottom:1px solid rgba(255,255,255,.06)}
.sb-notif-hdr span{font:500 var(--text-sm)/1 var(--font-display);color:var(--txt);letter-spacing:-.01em}
.sb-notif-close{background:none;border:none;color:var(--txt4);font-size:16px;
  cursor:pointer;padding:0;line-height:1;transition:color 10ms}
.sb-notif-close:hover{color:var(--txt)}
.sb-notif-list{flex:1;overflow-y:auto}
.sb-notif-list::-webkit-scrollbar{width:0}
.sb-notif-item{font:400 var(--text-xs)/var(--lh-normal) var(--font);color:var(--txt2);padding:var(--s1) var(--s2);border-bottom:1px solid rgba(255,255,255,.04)}
.ix-popup-hdr{display:flex;align-items:center;justify-content:space-between;
  padding:var(--card-sm) var(--s2);border-bottom:1px solid rgba(255,255,255,.06)}
.ix-popup-hdr h4{font:500 var(--text-md)/var(--lh-none) var(--font-display);margin:0}
.ix-popup-expand{background:none;border:none;color:var(--blue);font:500 var(--text-sm)/var(--lh-none) var(--font);cursor:pointer}
.ix-popup-expand:hover{text-decoration:underline}

/* Chat popup DM list */
.ix-popup-list{flex:1;overflow-y:auto;max-height:300px}
.ix-popup-list::-webkit-scrollbar{width:0}
.ix-popup-empty{padding:var(--s4);text-align:center;color:var(--txt4);font:400 var(--text-sm)/var(--lh-normal) var(--font)}

/* Chat popup thread view */
.ix-thread{display:none;flex-direction:column;flex:1}
.ix-thread.active{display:flex}
.ix-thread-hdr{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);
  border-bottom:1px solid rgba(255,255,255,.06)}
.ix-thread-back{background:none;border:none;color:var(--txt3);cursor:pointer;padding:var(--s0);
  display:flex;align-items:center}
.ix-thread-back svg{width:16px;height:16px}
.ix-thread-msgs{flex:1;overflow-y:auto;padding:var(--s1);display:flex;flex-direction:column;gap:var(--s0)}
.ix-thread-msgs::-webkit-scrollbar{width:0}
.ix-msg.sent{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:var(--r-xs)}
.ix-msg.recv{align-self:flex-start;background:rgba(255,255,255,.06);color:var(--txt);border-bottom-left-radius:var(--r-xs)}
.ix-thread-input{display:flex;align-items:center;gap:var(--s0);padding:var(--s1);
  border-top:1px solid rgba(255,255,255,.06)}
.ix-thread-input input{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-pill);padding:var(--s0) var(--card-sm);color:var(--txt);
  font:400 var(--text-sm)/var(--lh-none) var(--font);outline:none}
.ix-thread-input input::placeholder{color:var(--txt4)}
.ix-thread-input input:focus{border-color:rgba(41,151,255,.4)}
.ix-thread-send{width:28px;height:28px;border-radius:50%;border:none;
  background:var(--blue);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform 10ms;flex-shrink:0}
.ix-thread-send:hover{transform:scale(1.08)}
.ix-thread-send svg{width:14px;height:14px}

/* Notification popup items */
.ix-notif-item.unread{background:rgba(41,151,255,.04)}
.ix-notif-icon.approval{background:rgba(126,203,161,.12);color:var(--green)}
.ix-notif-icon.alert{background:rgba(192,57,43,.12);color:var(--red)}
.ix-notif-icon.update{background:rgba(41,151,255,.12);color:var(--blue)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHELL — Mobile FAB Menu (bottom-right expandable)
   ═══════════════════════════════════════════════════════════════ */
/* ── FAB wrapper — anchors everything bottom-right ── */
.mob-fab-wrap{display:none;position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:16px;
  z-index:210;flex-direction:column;align-items:flex-end;gap:0}
/* ── Main FAB button — 48px circle ── */
.mob-fab-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(135deg,rgba(41,151,255,.9),rgba(30,120,220,.95));
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(41,151,255,.4),0 2px 6px rgba(0,0,0,.3);
  -webkit-tap-highlight-color:transparent;padding:0;position:relative;z-index:2;
  transition:transform 200ms cubic-bezier(.4,0,.2,1),box-shadow 200ms}
.mob-fab-btn:active{transform:scale(.92)}
.mob-fab-btn svg{width:22px;height:22px;position:absolute;transition:opacity 150ms,transform 150ms}
.mob-fab-icon-close{opacity:0;transform:rotate(-90deg)}
.mob-fab-wrap.open .mob-fab-icon-menu{opacity:0;transform:rotate(90deg)}
.mob-fab-wrap.open .mob-fab-icon-close{opacity:1;transform:rotate(0)}
.mob-fab-wrap.open .mob-fab-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);
  box-shadow:0 2px 8px rgba(0,0,0,.3)}
/* ── Expanding items — stack upward from FAB ── */
.mob-fab-items{display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  padding-bottom:10px;pointer-events:none;opacity:0;
  transform:translateY(12px) scale(.95);
  transition:opacity 180ms cubic-bezier(.4,0,.2,1),transform 180ms cubic-bezier(.4,0,.2,1)}
.mob-fab-wrap.open .mob-fab-items{pointer-events:auto;opacity:1;transform:translateY(0) scale(1)}
/* ── Individual item — pill with icon + label ── */
.mob-fab-item{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;
  border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:rgba(10,14,24,.92);color:rgba(255,255,255,.65);
  cursor:pointer;font:500 13px/1 var(--font);white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent;
  transition:background 100ms,color 100ms,transform 80ms;text-align:left}
.mob-fab-item svg{width:18px;height:18px;flex-shrink:0}
.mob-fab-item:active{transform:scale(.96);background:rgba(255,255,255,.08)}
.mob-fab-item.active{color:var(--blue);background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.25)}
/* Separator between nav items and app switch */
.mob-fab-sep{width:60%;height:1px;background:rgba(255,255,255,.1);margin:4px auto}
/* Operator app button — distinct gold accent */
.mob-fab-operator{color:rgba(245,166,35,.7)!important;border-color:rgba(245,166,35,.15)!important}
.mob-fab-operator:active,.mob-fab-operator.active{color:var(--gold)!important;background:rgba(245,166,35,.12)!important;border-color:rgba(245,166,35,.3)!important}
/* Operator is owner/admin only — hidden by default, shown via data-role on body */
.mob-fab-item.admin-only,.mob-fab-sep.admin-only{display:none}
body[data-role="owner"] .mob-fab-item.admin-only,
body[data-role="owner"] .mob-fab-sep.admin-only,
body[data-role="admin"] .mob-fab-item.admin-only,
body[data-role="admin"] .mob-fab-sep.admin-only{display:flex}
/* ── Backdrop ── */
.mob-fab-backdrop{display:none;position:fixed;inset:0;z-index:199;
  background:rgba(0,0,0,.4);opacity:0;transition:opacity 180ms}
.mob-fab-backdrop.open{display:block;opacity:1}

/* ── Mobile overrides — hide desktop nav, maximize content ── */
@media(max-width:768px){
  .mob-fab-wrap{display:flex}
  .mob-bar{display:none!important}
  .app-dock,.left-nav,.bottom-island,.top-bar,.ln-chat-panel,.shell-topbar{display:none!important}
  .shell{grid-template-columns:1fr!important;grid-template-rows:1fr}
  .shell-body{grid-row:1;grid-column:1;padding:env(safe-area-inset-top,0) 0 0 0!important}
  .shell-body-glass{border-radius:0!important}
  .shell-body-glass::before{border-radius:0!important}
  .shell-body-glass::after{display:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHELL — Nav Event Bubble (left nav bottom)
   ═══════════════════════════════════════════════════════════════ */
/* ── Billboard / Events container — premium 16:9 glass mini-billboard ── */
.nav-event{display:none;padding:var(--s1) var(--s1) 0;position:relative;flex-shrink:0}
.nav-event.visible{display:block}
.nav-event-viewport{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,rgba(10,12,22,.92) 0%,rgba(16,20,38,.88) 50%,rgba(8,10,18,.94) 100%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 4px 20px rgba(0,0,0,.35),0 0 0 .5px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-event-viewport::before{content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 30% 20%,rgba(41,151,255,.06) 0%,transparent 70%),
             radial-gradient(ellipse 60% 50% at 80% 80%,rgba(126,203,161,.04) 0%,transparent 70%);
  pointer-events:none}
/* Slide */
.nav-event-slide.active{opacity:1;pointer-events:auto}
/* Tag pill */
.nav-event-tag.offer{background:rgba(245,166,35,.14);color:var(--gold)}
.nav-event-tag.call{background:rgba(41,151,255,.14);color:var(--blue)}
.nav-event-tag.update{background:rgba(126,203,161,.14);color:var(--green)}
.nav-event-tag.alert{background:rgba(231,76,60,.14);color:var(--red)}
/* Title + body */
/* CTA link */
/* Dots */
.nav-event-dots{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:2}
.nav-event-dot.active{background:rgba(255,255,255,.5);transform:scale(1.3)}
/* Admin edit button */
.nav-event-edit{position:absolute;top:5px;right:5px;z-index:3;width:18px;height:18px;border-radius:50%;
  border:none;background:rgba(255,255,255,.06);color:var(--txt4);cursor:pointer;
  display:none;align-items:center;justify-content:center;padding:0;transition:background 10ms}
.nav-event-edit:hover{background:rgba(255,255,255,.12);color:var(--txt2)}
.nav-event-edit svg{width:9px;height:9px}
[data-role="admin"] .nav-event-edit,[data-role="owner"] .nav-event-edit{display:flex}
/* Admin modal */
.bb-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1100;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 10ms}
.bb-modal-bg.active{opacity:1;pointer-events:auto}
.bb-modal{width:380px;max-height:85vh;overflow-y:auto;border-radius:var(--r-xl);
  background:rgba(14,16,24,.96);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.6);padding:var(--s3);-webkit-backdrop-filter:none}
.bb-modal-title{font:500 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt);margin-bottom:var(--s2)}
.bb-slide-card .bb-row{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s0)}
.bb-toggle.on{background:rgba(41,151,255,.4)}
.bb-toggle.on::after{transform:translateX(14px)}
.bb-actions{display:flex;gap:var(--s1);margin-top:var(--s2)}
.bb-btn{flex:1;padding:7px;border-radius:var(--r-md);border:none;font:500 11px/var(--lh-none) var(--font);cursor:pointer;transition:background 10ms}
.bb-btn-save{background:rgba(41,151,255,.2);color:var(--blue)}
.bb-btn-save:hover{background:rgba(41,151,255,.3)}
.bb-btn-cancel{background:rgba(255,255,255,.06);color:var(--txt3)}
.bb-btn-cancel:hover{background:rgba(255,255,255,.1)}
.bb-btn-add{width:100%;padding:6px;border-radius:var(--r-md);border:1px dashed rgba(255,255,255,.1);
  background:transparent;color:var(--txt4);font:500 10px/var(--lh-none) var(--font);cursor:pointer;transition:border-color 10ms}
.bb-btn-add:hover{border-color:rgba(255,255,255,.2);color:var(--txt3)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHELL — PWA Install Banner
   ═══════════════════════════════════════════════════════════════ */
.pwa-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:10000;
  padding:var(--card-sm) var(--s2);padding-top:calc(var(--card-sm) + env(safe-area-inset-top,0px));
  background:rgba(5,10,20,.98);border-bottom:1px solid rgba(41,151,255,.2);
  box-shadow:0 4px 24px rgba(0,0,0,.5);align-items:center;gap:var(--card-sm);
  animation:fadeUp 25ms var(--ease)}
.pwa-banner.visible{display:flex}
.pwa-banner-logo{width:32px;height:32px;border-radius:var(--s1);flex-shrink:0}
.pwa-banner-text{flex:1;min-width:0}
.pwa-banner-title{font:500 var(--text-sm)/var(--lh-none) var(--font);color:#fff}
.pwa-banner-hint{font:400 var(--text-4xs)/var(--lh-none) var(--font);color:var(--txt3);margin-top:1px}
.pwa-banner-install{padding:7px var(--card-sm);background:var(--blue);border:none;border-radius:var(--s1);
  font:500 var(--text-sm)/var(--lh-none) var(--font);color:#fff;cursor:pointer;flex-shrink:0}
.pwa-banner-close{width:28px;height:28px;background:rgba(255,255,255,.08);border:none;border-radius:50%;
  cursor:pointer;color:var(--txt3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pwa-banner-close svg{width:14px;height:14px}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHELL — Trial Nav Lock
   ═══════════════════════════════════════════════════════════════ */
.tw-locked{opacity:.25!important;pointer-events:none!important}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHELL — Iframe Transitions
   ═══════════════════════════════════════════════════════════════ */
#pageFrame{transition:opacity 10ms var(--ease);}
#pageFrame.transitioning{opacity:.3}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Onboarding Header (ob- prefix)
   ═══════════════════════════════════════════════════════════════ */
.ob-tag.role{background:rgba(41,151,255,.12);color:var(--blue)}
.ob-tag.status{background:rgba(126,203,161,.12);color:var(--green)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Social Profile Cards
   ═══════════════════════════════════════════════════════════════ */
.social-link.visible{opacity:1;pointer-events:auto}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Color Wheel (brand color picker)
   ═══════════════════════════════════════════════════════════════ */
.color-swatch.active{border-color:var(--blue)}
.cw-panel.open{display:block}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Signature Pad
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Contract / Legal Box
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Review Cards (onboarding review step)
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Success State (completion animation)
   ═══════════════════════════════════════════════════════════════ */
@keyframes successPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

.avatar-opt.active{border-color:var(--blue);color:var(--blue);background:rgba(41,151,255,.06)}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Checkbox Agreement Row
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Niche Grid (extends chip)
   ═══════════════════════════════════════════════════════════════ */
.niche-chip.selected{border-color:var(--blue)!important;background:rgba(41,151,255,.08);color:var(--txt)}
.niche-chip.selected:hover{border-color:var(--blue)!important}
.sub-chip{display:inline-block;padding:var(--s0) var(--s1);border-radius:var(--r-pill);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3);cursor:pointer;
  margin:2px;transition:border-color 10ms,background 10ms}
.sub-chip:hover{border-color:rgba(255,255,255,.12)}
.sub-chip.selected{border-color:var(--blue)!important;background:rgba(41,151,255,.08);color:var(--blue)}
.sub-chip.selected:hover{border-color:var(--blue)!important}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Color Dot (review display)
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Upload Row (side-by-side upload zones)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:480px){.upload-row{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   PORTAL SHARED — Wizard Submit Button
   ═══════════════════════════════════════════════════════════════ */
.btn-submit{background:linear-gradient(135deg,var(--green),#4caf7c);color:#fff;
  box-shadow:0 var(--s1) var(--s4) rgba(126,203,161,.2),inset 0 1px 0 rgba(255,255,255,.25);
  min-width:180px;}
.btn-submit:hover:not(:disabled){transform:translateY(-1px)}
.btn-submit:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.btn-submit:active:not(:disabled){transform:scale(.98)}

/* ═══════════════════════════════════════════════════════════════
   BLUEPRINTS PAGE — Wizard, Library, Tier Breakdown, Detail Modal
   ═══════════════════════════════════════════════════════════════ */

/* ── Landing: OLD rules deleted (dead code, superseded by the new
   3-column .bp-landing in BLUEPRINTS — Hero section below). The old
   .bp-landing + .bp-split classes were from a 2-column hero/split
   layout that no page uses anymore. */

/* ── Wizard shell ── */

/* ── Progress segments ── */
.bp-prog-seg.done{background:var(--blue)}
.bp-prog-seg.active{background:var(--green)}

/* ── Question ── */

/* ── Format choice ── */
.bp-fmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);max-width:640px}
.bp-fmt-card{text-align:center;padding:var(--s6) var(--s4);cursor:pointer;border:2px solid rgba(255,255,255,.06);border-radius:var(--r-2xl);
  background:var(--glass-flat);box-shadow:0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color 10ms,transform 10ms,box-shadow 10ms}
.bp-fmt-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.12)}
.bp-fmt-card.selected{border-color:var(--blue)!important;background:linear-gradient(180deg,rgba(41,151,255,.1) 0%,rgba(41,151,255,.03) 100%);box-shadow:0 0 24px rgba(41,151,255,.12),0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(41,151,255,.15)}
.bp-fmt-card.selected:hover{transform:translateY(-2px);border-color:var(--blue)!important}
.bp-fmt-icon{margin-bottom:var(--s2)}
.bp-dev{display:inline-block;color:var(--txt3)}
.bp-dev svg{width:48px;height:48px}
.bp-fmt-card h3{font:500 var(--text-lg)/var(--lh-tight) var(--font);color:var(--txt);margin-bottom:var(--s0)}
.bp-fmt-desc{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3);margin-bottom:var(--s1)}
.bp-fmt-tag{font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--blue);text-transform:uppercase;letter-spacing:1px}

/* ── Video cards 9:16 ── */
/* B-roll cards — horizontal scroll row */
.bp-v9-grid{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;justify-content:center;flex-wrap:wrap;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent;width:100%}
.bp-v9-grid::-webkit-scrollbar{height:4px}
.bp-v9-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.bp-v9-card.selected{border-color:var(--blue)}
.bp-v9-card.selected .bp-v9-check{opacity:1;transform:scale(1)}

/* ── Video choice — single horizontal scroll row, 9:16 cards ── */
.bp-vid-grid.c3,.bp-vid-grid.c4{/* override grid — always flex row */display:flex}
.bp-vid-card{border-radius:var(--r-lg);overflow:hidden;cursor:pointer;border:2px solid transparent;
  transition:border-color 10ms,transform 10ms;flex-shrink:0;width:160px;scroll-snap-align:start;aspect-ratio:9/16;position:relative}
.bp-vid-card.selected{border-color:var(--blue)}
.bp-vid-card:hover{transform:translateY(-2px)}
.bp-vid-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ── Sound visualizer ── */
.bp-sound-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--s3);border-radius:var(--r-2xl);background:var(--glass-flat);cursor:pointer;border:2px solid transparent;transition:border-color 10ms,transform 10ms}
.bp-sound-card.selected{border-color:var(--blue)}
.bp-sound-card:hover{transform:translateY(-1px)}
@keyframes bpSoundPulse{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}

/* ── Music grid ── */
.bp-music-card{padding:var(--s2);border-radius:var(--r-lg);background:var(--glass-flat);cursor:pointer;border:2px solid transparent;transition:border-color 10ms,transform 10ms}
.bp-music-card.selected{border-color:var(--blue)}
.bp-music-card:hover{transform:translateY(-1px)}
@keyframes bpMusicPulse{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}

/* ── Live preview (font/style/animation) ── */
/* Live caption/font preview — phone mockup area */
/* Font/style picker — single horizontal scroll row */
.bp-font-scroll .opt-card{flex-shrink:0;width:130px;scroll-snap-align:start}

/* ── Phone mockup ── */
.bp-phone-cap{position:absolute;left:var(--s1);right:var(--s1);text-align:center;font-weight:500;color:var(--txt);transition:opacity 10ms var(--ease),transform 10ms var(--ease)}
.bp-phone-cap.pos-top{top:var(--s6)}
.bp-phone-cap.pos-center{top:50%;transform:translateY(-50%)}
.bp-phone-cap.pos-bottom{bottom:var(--s4)}

/* ── Size bubbles ── */
.bp-size-bub{text-align:center;cursor:pointer;transition:transform 10ms}
.bp-size-bub.selected .bp-size-circle{border-color:var(--blue);color:var(--blue)}
.bp-size-bub:hover{transform:translateY(-2px)}

/* ── Caption style previews ── */

/* ── Caption animations ── */
.bp-anim-wbw .word{display:inline-block;animation:bpWbw .6s ease both}
.bp-anim-wbw .word:nth-child(2){animation-delay:10ms}
.bp-anim-wbw .word:nth-child(3){animation-delay:.3s}
.bp-anim-wbw .word:nth-child(4){animation-delay:.45s}
@keyframes bpWbw{from{opacity:.3;color:var(--txt3)}to{opacity:1;color:var(--blue)}}
@keyframes bpFade{0%,100%{opacity:0}20%,80%{opacity:1}}
@keyframes bpPop{from{transform:scale(.85);opacity:.5}to{transform:scale(1);opacity:1}}
@keyframes bpType{0%,100%{transform:scaleX(0)}50%{transform:scaleX(1)}}
@keyframes bpBlink{50%{border-color:transparent}}

/* ── Font face helpers ── */

/* ── Placement diagrams ── */
/* ── Opt-grid 3-col variant ── */
@media(max-width:480px){.opt-grid-3{grid-template-columns:1fr}}

/* ── Size bubble preset sizes ── */
@media(max-width:768px){.bp-place-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.bp-place-grid{grid-template-columns:repeat(2,1fr)}}
.bp-place-card.selected{border-color:var(--blue)}
.bp-place-icon .frame{position:absolute;inset:0;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm)}
.bp-place-icon .broll{position:absolute;background:rgba(41,151,255,.15)}
.bp-place-icon .speaker{position:absolute;background:rgba(126,203,161,.2);border-radius:var(--r-sm)}
.bp-place-icon .matte{position:absolute;left:0;right:0;background:rgba(0,0,0,.6)}
.bp-place-icon .bar{position:absolute;left:0;right:0;background:rgba(0,0,0,.8)}
.bp-place-icon.fullscreen .broll{inset:0}
.bp-place-icon.halfscreen .speaker{top:0;left:0;right:0;height:50%}
.bp-place-icon.halfscreen .broll{bottom:0;left:0;right:0;height:50%}
.bp-place-icon.filmmatte .broll{inset:15% 0}
.bp-place-icon.filmmatte .matte.top{top:0;height:15%}
.bp-place-icon.filmmatte .matte.bottom{bottom:0;height:15%}
.bp-place-icon.halfscreentweaked .broll{top:0;left:0;right:0;height:60%}
.bp-place-icon.halfscreentweaked .speaker{bottom:var(--s1);right:var(--s1);width:35%;height:30%}
.bp-place-icon.letterbox .broll{inset:20% 0}
.bp-place-icon.letterbox .bar.top{top:0;height:20%}
.bp-place-icon.letterbox .bar.bottom{bottom:0;height:20%}
.bp-place-icon.pip .broll{inset:0}
.bp-place-icon.pip .speaker{bottom:var(--s1);right:var(--s1);width:30%;height:25%}

/* ── Color Picker ── */
.bp-color-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:8px 12px;border-radius:10px;border:2px solid transparent;transition:border-color 10ms,transform 10ms;position:relative;min-width:64px}
.bp-color-swatch:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.15)}
.bp-color-swatch.selected{border-color:var(--blue);background:rgba(41,151,255,.08)}
.bp-color-swatch.selected .bp-color-circle{border-color:var(--blue);box-shadow:0 0 12px rgba(41,151,255,.3)}
.bp-color-swatch.selected .bp-color-name{color:var(--blue)}

/* ── Outline Picker ── */
@media(max-width:480px){.bp-outline-grid{grid-template-columns:repeat(2,1fr)}}

.bp-lib-card{scroll-snap-align:start}
.bp-carousel-track .bp-lib-card{scroll-snap-align:start}

/* ── Summary ── */

/* ── Library ── */
.bp-lib-card{position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:transform 10ms var(--ease)}

/* ── Tier breakdown ── */
.bp-tier-card.tc-1{border-left:3px solid var(--txt3)}
.bp-tier-card.tc-2{border-left:3px solid var(--blue)}
.bp-tier-card.tc-3{border-left:3px solid var(--purple)}
.bp-tc-lf-toggle.open svg{transform:rotate(180deg)}
.bp-tc-lf-expand.open{max-height:500px}

/* ── Detail modal ── */
/* ── Blueprint Library — hover-to-play cards ── */
.bp-lib-card{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.06);background:#0a0e18;
  transition:border-color 10ms ease,transform 10ms ease,box-shadow 10ms ease}
.bp-lib-card:hover{border-color:rgba(52,211,153,.3);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 1px rgba(52,211,153,.15)}
.bp-lib-card.selected{border-color:rgba(52,211,153,.5);
  box-shadow:0 0 0 1px rgba(52,211,153,.3),0 4px 16px rgba(52,211,153,.1)}
.bp-lib-card video{width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:.7;
  transition:opacity 10ms ease}
.bp-lib-card:hover video{opacity:1}

.bp-detail{max-width:860px;width:92vw;max-height:85vh;
  background:rgba(10,14,24,.98) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 32px 80px rgba(0,0,0,.6) !important;
  border-radius:20px !important;display:flex;flex-direction:column;
  margin:auto;padding:0 !important;
  transform:none !important}
.bp-detail:hover{transform:none !important}
.bp-detail-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.08)}
.bp-detail-title{font:500 18px/1.2 var(--font);color:#fff}
.bp-detail-body{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s2);padding:20px 24px}
@media(max-width:768px){.bp-detail-body{grid-template-columns:1fr;gap:var(--s2)}}
.bp-detail-preview{width:180px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center}
.bp-detail-preview video{width:100%;height:100%;object-fit:cover}
.bp-detail-col{display:flex;flex-direction:column;gap:2px}
.bp-detail-actions{display:flex;gap:12px;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(255,255,255,.06)}
.bp-detail-scroll{max-height:60vh;padding:var(--card-md);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}

/* ═══════════════════════════════════════════════════════════════
   REQUEST PAGE — Upload, File Cards, Review, Submit Overlay
   ═══════════════════════════════════════════════════════════════ */

/* ── Page frame (ripped out of .wiz-overlay modal so the stage can breathe) ──
   Used by public/request.html directly — the left rq-stage holds the six
   steps, the right rq-preview holds a live project-card preview that
   rebuilds on every state mutation. */
.rq-page{min-height:100%;display:flex;flex-direction:column}
.rq-page .page-body{flex:1;padding:var(--s3) var(--s4) var(--s2);display:flex;flex-direction:column}
.rq-page .page-foot{max-width:none;justify-content:flex-end;gap:var(--s1);padding:var(--s2) var(--s4) var(--s3);border-top:1px solid rgba(255,255,255,.05)}
.rq-page .page-foot .btn-ghost{margin-right:auto}
.rq-page .page-foot .btn{min-width:120px}
.rq-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,560px);gap:var(--s4);align-items:stretch;flex:1;min-height:0}
.rq-stage{min-width:0;display:flex;flex-direction:column;gap:var(--s3);width:100%}
.rq-stage-head{display:flex;flex-direction:column;gap:var(--s1);align-items:center;text-align:center;padding:var(--s2) 0 var(--s3)}
.rq-stage-head .wiz-brand{padding:0}
.rq-stage-head .wiz-brand-title{font:500 36px/var(--lh-tight) var(--font-display);letter-spacing:-.02em;margin:var(--s0) 0 0}
.rq-stage-head .wiz-brand-eyebrow{font:500 var(--text-xs)/1 var(--font-display);color:var(--blue);letter-spacing:.22em;text-transform:uppercase;margin:var(--s1) 0 0}
.rq-stage-head .wiz-step-rail{padding:var(--s2) 0 0}
.rq-stage .wiz-content{padding:0;height:auto;overflow:visible;flex:1;display:flex;flex-direction:column}
.rq-stage .rq-step{flex:1}
.rq-stage .rq-step.active{align-items:center;max-width:none;margin:0;justify-content:center;display:flex;flex-direction:column;gap:var(--s2)}
.rq-page .wiz-q-num{font:500 var(--text-sm)/1 var(--font-display);color:var(--blue);letter-spacing:.22em;text-transform:uppercase;margin:0 0 var(--s1)}
.rq-page .wiz-q-title{font:500 40px/var(--lh-tight) var(--font-display);letter-spacing:-.02em;margin:0 0 var(--s1);color:var(--txt)}
.rq-page .wiz-q-desc{font:400 var(--text-lg)/var(--lh-normal) var(--font);color:var(--txt3);margin:0 0 var(--s3);max-width:640px}
.rq-stage .bp-fmt-grid{max-width:none;width:100%;gap:var(--s3)}
.rq-stage .bp-fmt-grid > .bp-fmt-card{max-width:none;flex:1;padding:var(--s5) var(--s3);min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.rq-stage .bp-fmt-icon{margin-bottom:var(--s3)}
.rq-stage .bp-fmt-icon svg{width:64px;height:64px}
.rq-stage .bp-fmt-card h3{font:500 var(--text-xl)/var(--lh-tight) var(--font-display);margin:0 0 var(--s1)}
.rq-preview{position:sticky;top:var(--s1);align-self:start;background:var(--cb-glass-2-bg);border:var(--cb-glass-2-border);border-radius:var(--r-xl);box-shadow:var(--cb-glass-2-shadow);padding:var(--s3);color:var(--txt);display:flex;flex-direction:column;gap:var(--s2)}
.rq-preview-eyebrow{font:500 var(--text-xs)/1 var(--font-display);color:var(--blue);letter-spacing:.22em;text-transform:uppercase;margin:0 0 var(--s0)}
.rq-preview-title{font:500 28px/var(--lh-tight) var(--font-display);letter-spacing:-.02em;color:var(--txt);margin:0 0 var(--s0)}
.rq-preview-sub{font:400 var(--text-md)/var(--lh-normal) var(--font);color:var(--txt3);margin:0 0 var(--s2)}
.rq-preview-card{display:flex;flex-direction:column;gap:var(--s1);background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);padding:var(--s3);transition:background 200ms ease,border-color 200ms ease}
.rq-preview-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s1);padding:var(--s1) 0;font:400 var(--text-md)/var(--lh-snug) var(--font);color:var(--txt3);border-bottom:1px solid rgba(255,255,255,.04);transition:color 200ms ease}
.rq-preview-row:last-child{border-bottom:none}
.rq-preview-row.is-set{color:var(--txt)}
.rq-preview-row .rq-preview-k{color:var(--txt3);text-transform:uppercase;letter-spacing:.08em;font:500 var(--text-xs)/1 var(--font-display)}
.rq-preview-row .rq-preview-v{font-weight:500;color:var(--txt);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.rq-preview-row.is-empty .rq-preview-v{color:var(--txt3);font-weight:400;font-style:italic}
.rq-preview-thumb{width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);background:var(--cb-glass-2-bg);border:var(--cb-glass-2-border);display:flex;align-items:center;justify-content:center;color:var(--txt3);font:500 var(--text-sm)/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s1);overflow:hidden}
.rq-preview-thumb.is-short{aspect-ratio:9/16;max-width:240px;margin-left:auto;margin-right:auto}
.rq-preview-thumb.has-video video{width:100%;height:100%;object-fit:cover}
.rq-preview-thumb.is-empty{background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.08);color:var(--txt3)}
@media (max-width:900px){.rq-split{grid-template-columns:1fr}.rq-preview{position:static;min-height:0}}

/* ── Link input row ── */
.rq-link-row.open{max-height:200px}

/* ── File cards grid ── */
.rq-file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s2);margin-top:var(--s2)}
.rq-fcard-size{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3)}
.rq-files-sum{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.rq-files-count{font:500 var(--text-3xl)/var(--lh-none) var(--font);color:var(--blue)}
.rq-files-label{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3)}

/* ── Link chips ── */

/* ── Badge grid (selectable pills) ── */
.rq-badge-grid{display:flex;flex-wrap:wrap;gap:var(--s1)}

/* ── Review card ── */

/* ── Resolution + upload state badges on file cards ── */
.rq-fcard-badges{position:absolute;top:var(--s1);left:var(--s1);display:flex;gap:4px;flex-wrap:wrap;pointer-events:none;z-index:2}
.rq-res-badge{font:500 10px/1 var(--font);letter-spacing:.04em;padding:3px 6px;border-radius:var(--r-sm);background:rgba(0,0,0,.7);color:#fff;text-transform:uppercase;}
.rq-res-badge.is-4k{background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff}
.rq-res-badge.is-8k{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff}
.rq-fcard-bar-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#38bdf8,#22c55e);transition:transform 200ms ease-out}

/* ── Upload HUD (live device + network + throughput overlay) ── */
.rq-up-hud{position:fixed;right:var(--s3);bottom:var(--s3);z-index:9000;min-width:320px;max-width:380px;background:var(--cb-glass-2-bg);border:var(--cb-glass-2-border);border-radius:var(--r-xl);padding:var(--s2);box-shadow:var(--cb-glass-2-shadow);font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt);transform:translate3d(0,120%,0);opacity:0;will-change:transform,opacity;transition:transform 320ms cubic-bezier(.16,1,.3,1),opacity 200ms ease-out}
.rq-up-hud.is-open{transform:translate3d(0,0,0);opacity:1}
.rq-up-hud-net.is-slow{background:rgba(245,158,11,.2);color:#fbbf24}
.rq-up-hud-net.is-bad{background:rgba(239,68,68,.2);color:#f87171}
.rq-up-hud-val.is-mono{font-variant-numeric:tabular-nums}
@media (max-width:540px){.rq-up-hud{right:var(--s1);left:var(--s1);bottom:var(--s1);min-width:0;max-width:none}}

/* ── Premium Submit Cinema ── */
.sub-cinema.sub-premium{gap:28px}

/* ── Premium green glow ring ── */
@keyframes subRingSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes subPulseGlow{
  0%,100%{transform:scale(1);opacity:.6}
  50%{transform:scale(1.08);opacity:1}}

/* Phase text */

/* Progress pips — green themed */
.sub-pip.active .sub-pip-dot{background:rgba(52,211,153,.5);border-color:rgba(52,211,153,.7);
  transform:scale(1.3);box-shadow:0 0 14px rgba(52,211,153,.35)}
.sub-pip.done .sub-pip-dot{background:rgba(52,211,153,.3);border-color:rgba(52,211,153,.4);
  transform:scale(1)}

/* Success state */
@keyframes subFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes subRingPulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.2)}50%{box-shadow:0 0 0 16px rgba(52,211,153,0)}}
@keyframes subCheckDraw{to{stroke-dashoffset:0}}

/* Fail state */

/* ═══════════════════════════════════════════════════════════════
   CHAT PAGE — Full Layout, Sidebar, Messages, Forum, Expand
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout: sidebar + chat + forum ── */
.ch-sb-overlay.open{opacity:1;pointer-events:auto}

/* ── Channel Sidebar ── */
.ch-sb-search-wrap{padding:var(--s1) var(--card-md)}
.ch-sb-search{width:100%;padding:var(--s1) var(--s2);border-radius:var(--r-md);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--txt);font:400 var(--text-sm)/var(--lh-normal) var(--font);outline:none;transition:border-color 10ms}
.ch-sb-search::placeholder{color:var(--txt4)}
.ch-sb-search:focus{border-color:rgba(41,151,255,.4)}
.ch-sb-body{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}
.ch-sb-loading{display:flex;align-items:center;justify-content:center;padding:var(--s4)}

.ch-sb-cat.collapsed .ch-sb-chevron{transform:rotate(-90deg)}
.ch-sb-cat.collapsed .ch-sb-cat-list{display:none}
/* ── Discord-style channel rows — muted by default, bright on hover/active ── */
.ch-sb-ch{display:flex;align-items:center;gap:var(--s1);padding:var(--s0) var(--s1);padding-left:var(--s2);cursor:pointer;transition:background 10ms,color 10ms;border-radius:var(--r-sm);margin:1px var(--s0)}
.ch-sb-ch:hover{background:rgba(255,255,255,.04)}
.ch-sb-ch:hover .ch-sb-ch-name{color:rgba(255,255,255,.8)}
.ch-sb-ch:hover .ch-sb-ch-hash{color:rgba(255,255,255,.4)}
.ch-sb-ch.active{background:rgba(255,255,255,.06)}
.ch-sb-ch.active .ch-sb-ch-name{color:#fff;font-weight:500}
.ch-sb-ch.active .ch-sb-ch-hash{color:rgba(255,255,255,.5)}
/* Channel type icon (text # or voice speaker) */
.ch-sb-ch:hover .ch-sb-ch-icon{color:rgba(255,255,255,.4)}
.ch-sb-ch.active .ch-sb-ch-icon{color:rgba(255,255,255,.5)}
/* Unread channel state — Discord bold white */
.ch-sb-ch.unread .ch-sb-ch-name{color:rgba(255,255,255,.9);font-weight:500}
.ch-sb-ch.unread .ch-sb-ch-hash,.ch-sb-ch.unread .ch-sb-ch-icon{color:rgba(255,255,255,.5)}
/* Unread pip — white dot left of channel name (Discord-style) */
.ch-sb-ch.unread::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:8px;border-radius:0 4px 4px 0;background:#fff}
.ch-sb-ch{position:relative}
.ch-sb-av.contact{background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.08))}
.ch-sb-av.group{background:linear-gradient(135deg,rgba(255,149,0,.2),rgba(255,149,0,.08));color:var(--orange)}
.ch-sb-av.team{background:linear-gradient(135deg,rgba(48,209,88,.2),rgba(48,209,88,.08));color:var(--green)}
.ch-sb-av.dm{background:linear-gradient(135deg,rgba(52,211,153,.3),rgba(41,151,255,.3));color:#fff;width:24px;height:24px;font-size:8px}
/* DM Rail empty state */

/* ── Chat Panel ── */

/* Chat header */

/* Messages area */
.ch-empty .et{font:500 var(--text-md)/var(--lh-none) var(--font);color:var(--txt3)}
.ch-empty .ed{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt4)}

/* Single message */
.ch-msg{display:flex;gap:var(--s2);animation:fadeSlideIn 10ms ease both}
.ch-msg.no-anim{animation:none}
.ch-msg-role.role-admin{background:rgba(191,90,242,.12);color:#bf5af2}
.ch-msg-role.role-editor{background:rgba(48,209,88,.12);color:#30d158}
.ch-msg-role.role-client{background:rgba(41,151,255,.12);color:var(--blue)}
.ch-msg-role.role-trial{background:rgba(255,149,0,.12);color:var(--orange)}
.ch-msg-text.emoji-only{font-size:var(--text-4xl);line-height:var(--lh-tight)}
.ch-msg-text .mention{color:var(--blue);font-weight:500;background:rgba(41,151,255,.08);padding:1px var(--s0);border-radius:var(--r-sm)}
.ch-msg-text .msg-img{max-width:280px;max-height:200px;border-radius:var(--r-md);margin-top:var(--s1);cursor:pointer}

/* Chat input */
.ch-attach{width:var(--h-sm);height:var(--h-sm);border-radius:50%;border:none;background:rgba(255,255,255,.04);color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 10ms,color 10ms;flex-shrink:0}
.ch-attach:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.ch-attach svg{width:16px;height:16px}
.ch-attach-popup{position:absolute;bottom:calc(100% + var(--s1));left:0;background:var(--glass-solid);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:var(--s0);min-width:140px;opacity:0;pointer-events:none;transform:translateY(4px);transition:transform 10ms,opacity 10ms;z-index:10;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.ch-attach-popup.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.ch-attach-opt{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);border-radius:var(--r-md);border:none;background:transparent;color:var(--txt2);cursor:pointer;width:100%;font:400 var(--text-sm)/var(--lh-none) var(--font);transition:background 10ms}
.ch-attach-opt:hover{background:rgba(255,255,255,.06)}
.ch-attach-opt svg{width:16px;height:16px;flex-shrink:0}

/* Emoji picker */
.ch-emoji{position:absolute;bottom:calc(100% + var(--s1));left:0;width:280px;background:var(--glass-solid);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:var(--s1);opacity:0;pointer-events:none;transform:translateY(4px);transition:transform 10ms,opacity 10ms;z-index:20;box-shadow:0 12px 32px rgba(0,0,0,.4)}
.ch-emoji.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.ch-emoji-cat{width:var(--h-xs);height:var(--h-xs);border:none;background:transparent;border-radius:var(--r-sm);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background 10ms}
.ch-emoji-cat:hover{background:rgba(255,255,255,.06)}
.ch-emoji-cat.active{background:rgba(41,151,255,.12)}

/* Mention popup */
.ch-mention.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.ch-mention-item{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);border-radius:var(--r-md);cursor:pointer;transition:background 10ms}
.ch-mention-item:hover,.ch-mention-item.active{background:rgba(41,151,255,.08)}

/* ── Forum Panel ── */
.ch-forum-empty .fe-title{font:500 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt3)}
.ch-forum-empty .fe-desc{font:400 var(--text-xs)/var(--lh-normal) var(--font);color:var(--txt4)}

/* Project cards in forum */
.ch-pcard-icon.queue{background:rgba(255,149,0,.12);color:var(--orange)}
.ch-pcard-icon.editing{background:rgba(41,151,255,.12);color:var(--blue)}
.ch-pcard-icon.review{background:rgba(191,90,242,.12);color:var(--purple)}
.ch-pcard-icon.approved{background:rgba(48,209,88,.12);color:var(--green)}
.ch-pcard-icon.revisions{background:rgba(255,69,58,.12);color:var(--red)}
.ch-pcard-status{font:500 var(--text-2xs)/var(--lh-none) var(--font);padding:2px var(--s1);border-radius:var(--r-sm);text-transform:capitalize}
.ch-pcard-status.queue{background:rgba(255,149,0,.12);color:var(--orange)}
.ch-pcard-status.editing{background:rgba(41,151,255,.12);color:var(--blue)}
.ch-pcard-status.review{background:rgba(191,90,242,.12);color:var(--purple)}
.ch-pcard-status.approved{background:rgba(48,209,88,.12);color:var(--green)}
.ch-pcard-status.revisions{background:rgba(255,69,58,.12);color:var(--red)}

/* ── Project Expand Overlay ── */
.ch-expand.open{opacity:1;pointer-events:auto}
.ch-expand-no-video{display:flex;flex-direction:column;align-items:center;gap:var(--s1);color:var(--txt4);font:400 var(--text-sm)/var(--lh-none) var(--font)}
.ch-expand-no-video svg{width:40px;height:40px}

/* Thread panel in expand */
.ch-th-av.default{background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.08))}
.ch-th-av.system{background:linear-gradient(135deg,rgba(255,204,0,.2),rgba(255,204,0,.08));color:#ffd60a}
.ch-th-av.rev{background:linear-gradient(135deg,rgba(255,69,58,.2),rgba(255,69,58,.08));color:var(--red)}
.ch-th-msg-badge.status{background:rgba(255,204,0,.12);color:#ffd60a}
.ch-th-msg-badge.revision{background:rgba(255,69,58,.12);color:var(--red)}
.ch-th-msg-txt.rev{color:var(--red)}
.ch-th-msg-txt.sys{color:var(--txt3);font-style:italic}
.ch-th-msg-txt .ts-link{color:var(--blue);cursor:pointer;font-weight:500}
.ch-th-msg-txt .ts-link:hover{text-decoration:underline}

/* ── Chat page responsive ── */
@media(max-width:1024px){
  .ch-forum{display:none}
}
@media(max-width:768px){
  .ch-sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform 10ms;z-index:91}
  .ch-sidebar.open{transform:translateX(0)}
  .ch-hdr-menu{display:flex}
}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════════════════════
   ACCOUNT PAGE — Profile, Brand, Payouts, Health, Stats
   ═══════════════════════════════════════════════════════════════ */

/* Profile */
.ac-role.role-trial{background:rgba(255,149,0,.12);color:var(--orange)}
.ac-role.role-client{background:rgba(41,151,255,.12);color:var(--blue)}
.ac-role.role-editor{background:rgba(48,209,88,.12);color:var(--green)}
.ac-role.role-admin{background:rgba(191,90,242,.12);color:var(--purple)}
.ac-status.status-master{background:rgba(191,90,242,.12);color:var(--purple)}
.ac-status.status-core{background:rgba(41,151,255,.12);color:var(--blue)}
.ac-status.status-training{background:rgba(255,149,0,.12);color:var(--orange)}
.ac-status.status-new{background:rgba(48,209,88,.12);color:var(--green)}

/* Form helpers */
@media(max-width:768px){.ac-form-row{flex-direction:column}}

/* Brand */

/* Contract stat grid */
@media(max-width:768px){.ac-stat-grid{grid-template-columns:1fr}}

/* Payout method */
.ac-method-btn{flex:1;min-width:80px;padding:var(--s1) var(--s0);border:2px solid rgba(255,255,255,.08);border-radius:var(--r-lg);background:var(--glass-flat);color:var(--txt3);font:500 var(--text-xs)/var(--lh-none) var(--font);cursor:pointer;transition:background 10ms,border-color 10ms,color 10ms;text-align:center}
.ac-method-btn:hover{border-color:rgba(255,255,255,.15)}
.ac-method-btn.active{border-color:var(--blue);background:rgba(41,151,255,.1);color:var(--blue)}

/* Health hero */

/* Stats grid */

/* Role-view widget */
.ac-rv-fab{position:fixed;bottom:var(--s3);left:var(--s3);width:var(--h-lg);height:var(--h-lg);border-radius:50%;border:none;background:var(--glass-solid);color:var(--txt);font-size:20px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:50;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.ac-rv-panel{position:fixed;bottom:calc(var(--s3) + var(--h-lg) + var(--s1));left:var(--s3);background:var(--glass-solid);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:var(--s1);min-width:160px;opacity:0;pointer-events:none;transform:translateY(4px);transition:transform 10ms,opacity 10ms;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.ac-rv-panel.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.ac-rv-label{font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3);padding:var(--s0) var(--s2);text-transform:uppercase;letter-spacing:.5px}
.ac-rv-btn{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);border-radius:var(--r-md);border:none;background:transparent;color:var(--txt2);cursor:pointer;width:100%;font:500 var(--text-sm)/var(--lh-none) var(--font);transition:background 10ms}
.ac-rv-btn:hover{background:rgba(255,255,255,.06)}
.ac-rv-btn.active{background:rgba(41,151,255,.08);color:var(--blue)}
.ac-rv-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ac-rv-dot.trial{background:var(--orange)}
.ac-rv-dot.client{background:var(--blue)}
.ac-rv-dot.editor{background:var(--green)}
.ac-rv-dot.admin{background:var(--purple)}
.ac-rv-dot.owner{background:#ffd60a}

/* Hero: avatar + name + tags */

/* Reusable avatar component */

/* Stat row */

/* Score bars grid */

/* 3-column layout (shared with team page but dashboard uses own prefix for clarity) */
@media(max-width:1024px){.db-3col{grid-template-columns:1fr}}
.db-col-head.warn{color:var(--red)}
.db-col-head.caution{color:var(--orange)}
.db-col-cnt.warn{background:rgba(192,57,43,.15);color:var(--red)}

/* 2-column layout */
@media(max-width:768px){.db-2col{grid-template-columns:1fr}}

.pj-due.today{color:var(--orange)}

/* Admin tab visibility */

/* Report card grid */
@media(max-width:768px){.db-report-grid{grid-template-columns:1fr}}
.db-report-link.muted{color:var(--txt4)}

/* Finance placeholder */

/* Score bar inside ov-card */

/* ═══════════════════════════════════════
   MEETINGS PAGE  (mt- prefix)
═══════════════════════════════════════ */

/* Staff create button */

/* Room grid */

/* Meeting card */
.mt-card-badge.live{background:rgba(192,57,43,.15);color:var(--red)}
.mt-card-badge.ended{background:rgba(255,255,255,.06);color:var(--txt3)}
.mt-card-badge.live .mt-card-dot{animation:pulse 1.5s ease-in-out infinite}
.mt-card-join.primary{background:rgba(41,151,255,.15);color:var(--blue)}
.mt-card-join.primary:hover{background:rgba(41,151,255,.25)}

/* Whiteboard view */
.mt-wb-view.active{display:flex}
.mt-wb-badge.live{background:rgba(192,57,43,.15);color:var(--red)}
.mt-wb-badge.ended{background:rgba(255,255,255,.06);color:var(--txt3)}
.mt-wb-share.shared{border-color:var(--green);color:var(--green);background:rgba(48,209,88,.06)}

/* Canvas */
.mt-wb-wrap.grabbing{cursor:grabbing}

/* Drop zone */
.mt-wb-drop.active{display:flex}

/* Toolbar */
.mt-wb-tool.active{background:rgba(41,151,255,.12);color:var(--blue)}

/* Zoom */

/* Sticky notes */
.mt-wb-sticky.dragging{box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:10}
.mt-wb-sticky.yellow{background:#fff59d;color:#333}
.mt-wb-sticky.pink{background:#f8bbd0;color:#333}
.mt-wb-sticky.blue{background:#bbdefb;color:#333}
.mt-wb-sticky.green{background:#c8e6c9;color:#333}
.mt-wb-sticky.purple{background:#e1bee7;color:#333}
.mt-wb-sticky.orange{background:#ffe0b2;color:#333}

/* Media elements */
.mt-wb-media.dragging{box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:10}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ═══════════════════════════════════════════════════════════════
   ADMIN PAGE  (ad- prefix + pipeline pl-, payout perf-, report rpt-)
   ═══════════════════════════════════════════════════════════════ */

/* ── Person card extensions ── */
.p-sc.good{color:var(--green)}.p-sc.ok{color:var(--blue)}.p-sc.mid{color:var(--orange)}.p-sc.bad{color:var(--red)}
.person.view-only{cursor:default}

/* ── Editor pipeline tags ── */

/* ── Pipeline hub (pl- prefix) ── */

/* ── Trash zone ── */
.trash-zone{position:fixed;bottom:0;left:0;right:0;height:64px;background:rgba(192,57,43,.15);
border-top:1px solid rgba(192,57,43,.3);
  display:flex;align-items:center;justify-content:center;gap:var(--s1);font:500 var(--text-sm)/var(--lh-none) var(--font);
  color:var(--red);z-index:100;transform:translateY(100%);transition:transform 10ms var(--ease)}
.trash-zone svg{width:20px;height:20px}
.trash-zone.visible{transform:translateY(0)}
.trash-zone.hover{background:rgba(192,57,43,.3);border-top-color:var(--red)}

/* ── New team input ── */
.new-team-input.visible{display:flex}

/* ── Add/New button ── */

/* ── Payout / Performance section (perf- prefix) ── */

/* ── Admin tier cards (ad-tier-) ── */
.ad-tier-bonus.high{background:rgba(126,203,161,.12);color:var(--green)}
.ad-tier-bonus.mid{background:rgba(41,151,255,.12);color:var(--blue)}
.ad-tier-bonus.low{background:rgba(255,255,255,.06);color:var(--txt4)}

/* ── Payout summary bar ── */

/* ── Payout result tags ── */

/* ── Payout history toggle ── */
.ad-hist-arrow.open{transform:rotate(90deg)}

/* ── Reports section (rpt- prefix) ── */
.rpt-tp.active{background:var(--blue);color:#fff}
@media(max-width:900px){.rpt-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   PIPELINE PAGE (pv- project view, th- thread, rev- revision,
   erw- editor workbench, ga- glass audio, cb- confirm/alert)
   ═══════════════════════════════════════════════════════════════ */

/* ═══ PROJECT VIEW — DEDICATED REVIEW PAGE (HARD RESET) ═══ */

/* Shell: true black, full viewport, no shell contamination */
.pv-shell{position:fixed;inset:0;z-index:50;background:#000;
  display:flex;flex-direction:column;animation:fadeUp 25ms var(--ease)}
.pv-shell.pv-fullpage{background:#000}

/* Body: 3 zones — topbar, main content, dock. Padding creates breathing room */
.pv-body{flex:1;display:flex;min-height:0;overflow:hidden;
  padding:0 12px 12px;gap:12px}

/* Left = video column. No border-radius, no bg — pure black theater */
.pv-left{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;position:relative}

/* ═══ ZONE 1: TOP REVIEW BAR — one clean focused row ═══ */
.pv-topbar{display:flex;align-items:center;gap:var(--s2);
  padding:8px 16px;flex-shrink:0;position:relative;min-height:44px;overflow:visible;z-index:200}
/* Back-to-pipeline button — must be visually identical to .pv-top-icon
   so the top bar looks balanced left vs right. Same 32×32 box, same
   8px radius, same glass background, same 18×18 icon. */
.pv-close{width:32px;height:32px;border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.7);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:background 10ms,color 10ms,border-color 10ms}
.pv-close:hover{
  background:rgba(255,255,255,.10);
  color:#fff;border-color:rgba(255,255,255,.18);
  box-shadow:0 1px 6px rgba(0,0,0,.12)}
.pv-close svg{width:18px;height:18px;stroke-width:1.8}

/* Left cluster: back + title + timer */
.pv-top-left{display:flex;align-items:center;gap:10px;flex-shrink:0;min-width:0;flex:1}
.pv-proj-name{font:500 17px/1.1 var(--font);color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;
  }

/* Right cluster: minimal actions only */
.pv-top-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}

/* Assignment — premium styled, not raw select */
.pv-assign-wrap{display:flex;align-items:center;gap:6px}
.pv-assign-wrap select{-webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;color:var(--txt2);font:500 11px/1 var(--font);
  padding:6px 24px 6px 8px;cursor:pointer;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center}
.pv-assign-wrap select:hover{border-color:rgba(255,255,255,.15);color:var(--txt)}
.pv-assign-wrap select option{background:#0a0e18;color:#fff}

/* ═══ CENTER ISLAND — single identity source of truth ═══ */
/* ── Premium island (expanded view) — Apple iOS luminous glass ── */
.pv-island-lg{position:absolute;left:50%;top:6px;transform:translateX(-50%);
  z-index:2;gap:6px;padding:6px 10px;border-radius:var(--r-island);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
/* All island badges — unified 28px icon containers (Sean: SF / v1 / T1 same size) */
.pv-island-lg .ps-ci-type,
.pv-island-lg .ps-ci-tier,
.pv-island-lg .ps-ci-grade,
.pv-island-lg .ps-ci-bp,
.pv-island-lg .ps-ci-ver{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:28px;padding:0 10px;
  border-radius:7px;
  font:500 12px/1 var(--font);letter-spacing:.05em}
.pv-island-lg .ps-ci-ver{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-family:var(--mono);
  position:relative;cursor:pointer}
/* ── Version hover dropdown — opens on hover, no caret, no side arrows ── */
/* Open the dropdown on hover of the version pill OR while hovering the menu itself */ /* override hidden so :hover can show it */
.pv-ver-dd-item.active{background:rgba(41,151,255,.18);color:#fff;border:1px solid rgba(41,151,255,.32)}
/* Status glow — luminous glass base */
.pv-island-lg[data-status="queue"]{box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 10px rgba(168,168,176,.06)}
.pv-island-lg[data-status="active"]{box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 16px rgba(41,151,255,.12)}
.pv-island-lg[data-status="review"]{box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 16px rgba(191,90,242,.12)}
.pv-island-lg[data-status="revisions"]{box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 16px rgba(255,159,10,.12)}
.pv-island-lg[data-status="approved"]{box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 16px rgba(126,203,161,.12)}

/* ── Play/pause overlay on video ── */
.pv-play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:3;width:72px;height:72px;border-radius:50%;border:none;
  background:rgba(0,0,0,.55);color:rgba(255,255,255,.85);cursor:pointer;
  display:flex;align-items:center;justify-content:center;

  transition:opacity 10ms,transform 10ms}
.pv-play-overlay svg{width:28px;height:28px;margin-left:3px}
.pv-play-overlay:hover{background:rgba(0,0,0,.7);transform:translate(-50%,-50%) scale(1.08)}
.pv-play-overlay.playing{opacity:0;pointer-events:none}

/* ── Timeline bar — INSIDE video frame, bottom edge — premium glass ── */
.pv-timeline-bar{display:flex;align-items:center;gap:8px;
  position:absolute;bottom:0;left:0;right:0;z-index:4;
  padding:10px 16px;
  background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.15) 80%,transparent 100%);
  transition:opacity 10ms}

/* ── Project countdown timer — pinned to the bottom-right of pv-left,
   vertically centered on the dock row so they sit on the same horizontal line.
   Sean: "move the timer count down down so it's level horizontally with the bottom row." ── */
/* Legacy row class — kept as a no-op so any old reference doesn't break layout */

/* ── FrameLab dock — wider, premium glass, centered (25% wider than original) ── */
/* Dock — matches left-nav ln-glass-shell capsule */
.pv-dock-compact{max-width:950px;margin:0 auto;
  padding:10px 20px;border-radius:24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.12);
  box-shadow:0 4px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)}
.pv-dock-compact .dk-btn{width:34px;height:34px;border-radius:var(--r-sm)}
.pv-dock-compact .dk-btn svg{width:16px;height:16px}

/* ── Rail sections container ── */

/* ── Project Info links row ── */

/* ── Left Assets Panel (Storage-like project file browser) ── */
.pv-ap-tree{flex:1;padding:4px 6px;overflow-y:auto}
/* Assets panel moved into thread — no left margin offset needed */
.pv-left{margin-left:0;transition:margin-left 10ms cubic-bezier(.16,1,.3,1);}
.pv-assets-panel.collapsed{width:0;border:none;overflow:hidden}
.pv-assets-panel.collapsed ~ .pv-left{margin-left:0}

/* ── Thread avatar cleanup — no colored circles ── */

/* ── Version arrows in center island ── */
.pv-ver-arrow{background:none;border:none;color:rgba(255,255,255,.35);cursor:pointer;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border-radius:5px;transition:background,color,border-color,opacity 10ms}
.pv-ver-arrow:hover{background:rgba(255,255,255,.08);color:#fff}
.pv-ver-arrow:disabled{opacity:.2;cursor:default}

/* ── Blueprint hover popover ── */
.pv-bp-hover{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px;
  min-width:240px;max-width:320px;padding:12px;border-radius:12px;z-index:30;
  background:rgba(10,14,24,.96);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 32px rgba(0,0,0,.5);}
.pv-bp-hover .bp-field{display:flex;justify-content:space-between;padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.04);font:400 12px/1.3 var(--font)}
.pv-bp-hover .bp-field:last-child{border-bottom:none}
.pv-bp-hover .bp-field-label{color:var(--txt3)}
.pv-bp-hover .bp-field-value{color:var(--txt);text-align:right;max-width:60%}

/* ── Knobs row — fixed to bottom of dock area, always visible ── */
.dk-knobs-row{display:flex;align-items:center;justify-content:center;gap:16px;
  padding:8px 0;flex-shrink:0;position:relative;z-index:5}
.dk-save-pref{background:rgba(41,151,255,.15);border:1px solid rgba(41,151,255,.25);
  color:var(--blue);font:500 11px/1 var(--font);padding:4px 12px;border-radius:6px;
  cursor:pointer;transition:background,color,border-color,opacity 10ms}
.dk-save-pref:hover{background:rgba(41,151,255,.25)}

/* ── Project Folder cascading dropdown (Finder-style columns) ── */
.pv-folder-row.active{background:rgba(41,151,255,.16);color:#fff;border:1px solid rgba(41,151,255,.30)}
.pv-folder-row .pv-folder-name{flex:1;overflow:hidden;text-overflow:ellipsis}
.pv-folder-row .pv-folder-meta{font:500 10px/1 var(--font);color:rgba(255,255,255,.32);flex-shrink:0;margin-left:6px}
.pv-folder-row .pv-folder-chev{width:10px;height:10px;color:rgba(255,255,255,.30);flex-shrink:0}

/* ── Top bar icon buttons — Apple iOS luminous glass ── */
.pv-top-icon{width:32px;height:32px;border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.7);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:background 10ms,color 10ms,border-color 10ms}
.pv-top-icon svg{width:18px;height:18px;stroke-width:1.8}
.pv-top-icon:hover{
  background:rgba(255,255,255,.10);
  color:#fff;border-color:rgba(255,255,255,.18);
  box-shadow:0 1px 6px rgba(0,0,0,.12)}
/* Grade badge in top-right — same 32px glass as pv-top-icon */
.pv-top-right>.ps-ci-grade{
  width:32px;height:32px;border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  display:inline-flex;align-items:center;justify-content:center;
  font:500 14px/1 var(--font);letter-spacing:.04em;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* Editor avatar in top-right — circular, 32px glass, positioned right of grade */
.pv-tr-editor{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(41,151,255,.22), rgba(41,151,255,.06));
  border:1px solid rgba(41,151,255,.32);
  background-size:cover;background-position:center;
  font:600 11px/1 var(--font);color:rgba(255,255,255,.9);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  flex-shrink:0; cursor:default;
  transition:transform 120ms cubic-bezier(.16,1,.3,1), border-color 120ms ease;
}
.pv-tr-editor[hidden]{display:none}
.pv-tr-editor:hover{transform:scale(1.06);border-color:rgba(41,151,255,.55)}
.pv-tr-editor-ini{pointer-events:none}
.pv-tr-editor.has-img .pv-tr-editor-ini{display:none}

/* Internal/Client chat scope switch — glass segmented pill in thread header */
.pv-th-scope{display:inline-flex;align-items:center;gap:2px;
  padding:2px;border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  margin-right:6px;
}
.pv-th-scope-btn{
  appearance:none;border:none;cursor:pointer;
  padding:4px 10px;border-radius:999px;
  font:500 11px/1 var(--font);
  color:rgba(255,255,255,.55);
  background:transparent;
  transition:background 140ms ease, color 140ms ease;
}
.pv-th-scope-btn:hover{color:rgba(255,255,255,.85)}
.pv-th-scope-btn.active{color:#fff;background:rgba(41,151,255,.22);box-shadow:inset 0 0 0 1px rgba(41,151,255,.3)}
.pv-th-scope-btn[data-scope="internal"].active{background:rgba(255,159,10,.22);box-shadow:inset 0 0 0 1px rgba(255,159,10,.3)}
/* Client role locked to Client scope — hide Internal tab */
.pv-th-scope[data-locked="client"] .pv-th-scope-btn[data-scope="internal"]{display:none}

/* ── File Info popover — Apple iOS luminous glass ── */
.pv-fi-popover{position:absolute;top:100%;right:0;margin-top:6px;z-index:30;
  width:260px;padding:12px;border-radius:12px;
  background:rgba(14,16,22,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.pv-fi-pop-title{font:500 12px/1 var(--font);color:rgba(255,255,255,.8);margin-bottom:8px;
  padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.12)}

/* ── Center island position for version dropdown ── */
.pv-island-lg{position:relative}

/* ── Video area ── */
.pv-video{flex:1;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;
  background:#000;overflow:hidden;aspect-ratio:16/9;max-height:100%}
.pv-player{width:100%;height:100%;object-fit:contain;background:#000;position:absolute;inset:0;
  /* 9:16 vertical content auto-centers via object-fit:contain inside the locked 16:9 frame */}
.pv-canvas{position:absolute;inset:0;z-index:2;pointer-events:none;cursor:crosshair}
.pv-canvas.active{pointer-events:auto}
.pv-snap-flash{position:absolute;inset:0;z-index:5;background:#fff;
  opacity:0;pointer-events:none;transition:none}
.pv-snap-flash.fire{opacity:.6;transition:opacity 10ms ease-out}

/* ── Version selector (pills above video) ── */
.pv-ver.active{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:var(--blue)}

/* ── Version dropdown ── */
.pv-ver-dd-item.active{background:rgba(41,151,255,.1);color:var(--blue)}

/* ── File Info section ── */
/* Legacy grid layout (kept for compat) */
/* Clean list layout for project/file info */
.pv-fi-list{display:flex;flex-direction:column;padding:4px 12px}
.pv-fi-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.03)}
.pv-fi-row:last-child{border-bottom:none}
.pv-fi-label{font:500 12px/1 var(--font);color:var(--txt3)}
.pv-fi-value{font:500 12px/1 var(--font);color:var(--txt);text-align:right}

/* ── Color-coded revision markers ── */

/* ── Camera / Screen PIP ── */
.pv-pip{position:absolute;z-index:6;border-radius:var(--r-lg);overflow:hidden;
  border:2px solid rgba(255,255,255,.15);box-shadow:0 4px 16px rgba(0,0,0,.5);
  display:none;cursor:move}
.pv-pip.active{display:block}
.pv-pip video{width:100%;height:100%;object-fit:cover;display:block}
.pv-cam-pip{width:160px;height:120px;bottom:var(--s8);right:var(--s2)}
.pv-screen-pip{width:240px;height:135px;bottom:var(--s8);left:var(--s2)}

/* ── Recording warn/urgent states ── */
.rec-indicator.rec-warn{border-color:rgba(255,159,10,.4);background:rgba(255,159,10,.12)}
.rec-indicator.rec-warn .rec-dot{background:var(--orange)}
.rec-indicator.rec-warn .rec-label{color:var(--orange)}
.rec-indicator.rec-urgent{border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.2);
  animation:rec-urgent-pulse .5s ease-in-out infinite}
@keyframes rec-urgent-pulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 12px rgba(192,57,43,.3)}}

/* ── Glass audio player ── */
.glass-audio{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--card-sm);
  border-radius:var(--r-pill);background:var(--glass);border:var(--glass-b);
  border-top-color:var(--glass-bt)}
.glass-audio-fill{height:100%;border-radius:2px;background:var(--blue);
  transform-origin:left;transition:transform 10ms linear;transform:scaleX(0)}
.glass-audio-time{font:500 var(--text-2xs)/1 var(--mono);color:var(--txt3);
  flex-shrink:0;min-width:28px;text-align:right}

/* ── Thread messages — Apple iMessage-style bubbles (matches design system) ── */
.th-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 14px;
  display:flex;flex-direction:column;gap:16px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent}
/* Message bubble — Apple iOS luminous glass */
/* Legacy fallback for .th-text */

/* ── Loom-style media feedback card — luminous glass ── */

/* ── System events — clean inline pills ── */
/* Legacy compact event pill (kept for compat) */

/* ── Status card (structured system event) ── */
/* Status card timestamp — visible on EVERY system message (Queue / Active / Review / etc).
   Sean: "where are they???? why are they on one message of the three" — fixed. */

/* Status-specific event dot colors */

/* ── Revision bubbles (inside thread) ── */

/* ── Revision review overlay ── */
.rev-review-overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.7);

  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 10ms var(--ease)}
.rev-review-overlay.open{opacity:1;pointer-events:auto}
.rev-review-modal{width:90vw;max-width:560px;max-height:80vh;display:flex;flex-direction:column;
  background:var(--glass-solid);border:var(--glass-b);border-top-color:var(--glass-bt);
  border-radius:var(--r-2xl);box-shadow:0 16px 64px rgba(0,0,0,.5);overflow:hidden}
.rev-review-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s2) var(--s3);border-bottom:1px solid rgba(255,255,255,.06)}
.rev-review-head h2{font:500 var(--text-lg)/var(--lh-none) var(--font)}
.rev-review-body{flex:1;overflow-y:auto;padding:var(--s2) var(--s3)}
.rev-review-foot{padding:var(--s2) var(--s3);border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:flex-end;gap:var(--s1)}

/* ── Revision transcript toggle ── */
.rev-transcript-toggle.expanded svg{transform:rotate(180deg)}
.rev-transcript-box.open{max-height:500px;padding:var(--s1) 0}

/* ── Editor Revision Workbench ── */
.erw-overlay{position:fixed;inset:0;z-index:55;background:rgba(10,14,28,.98);
  display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity 10ms var(--ease)}
.erw-overlay.open{opacity:1;pointer-events:auto}
.erw-topbar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);
  border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.erw-round{font:500 var(--text-lg)/var(--lh-none) var(--font)}
.erw-ver-btns{display:flex;gap:var(--s0);margin-left:auto}
.erw-ver-btn{padding:4px 12px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.08);
  background:transparent;color:var(--txt3);font:500 var(--text-xs)/var(--lh-none) var(--font);
  cursor:pointer;transition:background 10ms,border-color 10ms,color 10ms}
.erw-ver-btn.active{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:var(--blue)}
.erw-body{flex:1;display:flex;min-height:0;overflow:hidden}
.erw-video-area{flex:1;min-width:0;display:flex;flex-direction:column;background:#000}
.erw-video{width:100%;flex:1;object-fit:contain}
.erw-controls{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);
  border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.erw-play{width:32px;height:32px;flex-shrink:0;border-radius:50%;border:none;
  background:rgba(255,255,255,.1);color:var(--txt);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background 10ms}
.erw-play:hover{background:rgba(255,255,255,.18)}
.erw-play svg{width:14px;height:14px}
.erw-track-wrap{flex:1;height:24px;position:relative;cursor:pointer;
  display:flex;align-items:center}
.erw-track{width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.1);
  position:relative}
.erw-fill{height:100%;border-radius:2px;background:var(--blue);width:100%;transform-origin:left;transform:scaleX(0)}
.erw-thumb{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;
  background:var(--txt);border:2px solid var(--blue);box-shadow:0 0 6px rgba(41,151,255,.3);
  transform:translate(-50%,-50%);left:0}
.erw-ticks{position:absolute;inset:0;pointer-events:none}
.erw-time{font:500 var(--text-xs)/var(--lh-none) var(--mono);color:var(--txt3);flex-shrink:0}
.erw-sidebar{width:320px;flex-shrink:0;display:flex;flex-direction:column;
  border-left:1px solid rgba(255,255,255,.06);overflow:hidden}
.erw-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.erw-tab{flex:1;padding:var(--s1);border:none;background:transparent;
  color:var(--txt3);font:500 var(--text-xs)/var(--lh-none) var(--font);
  cursor:pointer;border-bottom:2px solid transparent;transition:color 10ms,border-color 10ms}
.erw-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.erw-rev-list{flex:1;overflow-y:auto;padding:var(--s1)}
.erw-rev-item{display:flex;gap:var(--s1);padding:var(--s1);border-radius:var(--r-md);
  cursor:pointer;transition:background 10ms}
.erw-rev-item:hover{background:rgba(255,255,255,.04)}
.erw-rev-item.active{background:rgba(41,151,255,.08);border:1px solid rgba(41,151,255,.2)}

/* ── ERW Checklist ── */
.erw-checklist{flex:1;overflow-y:auto;padding:var(--s1)}
.erw-check-item{display:flex;align-items:flex-start;gap:var(--s1);padding:var(--s1);
  cursor:pointer;border-radius:var(--r-md);transition:background 10ms}
.erw-check-item:hover{background:rgba(255,255,255,.03)}
.erw-check-item.checked .erw-check-box{background:var(--green);border-color:var(--green)}
.erw-check-item.checked .erw-check-box svg{opacity:1;color:#fff}
.erw-check-item.checked .erw-check-note{text-decoration:line-through;color:var(--txt4)}
.erw-check-progress{font:500 var(--text-sm)/var(--lh-none) var(--font);
  padding:var(--s1);text-align:center;color:var(--txt3)}
.erw-submit{width:100%;padding:var(--s2);border:none;border-radius:var(--r-lg);
  background:var(--green);color:#fff;font:500 var(--text-md)/var(--lh-none) var(--font);
  cursor:pointer;transition:opacity 10ms}
.erw-submit:hover{opacity:.85}
.erw-submit:disabled{opacity:.35;cursor:not-allowed}

/* ── Approval overlay ── */
.approve-overlay{position:absolute;inset:0;z-index:20;
  background:rgba(10,14,28,.9);-webkit-backdrop-filter:none;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--s3);
  opacity:0;pointer-events:none;transition:opacity 200ms var(--ease)}
.approve-ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.approve-ring .ring-bg{stroke:rgba(255,255,255,.06)}
.approve-ring .ring-fill{stroke:var(--green);transition:stroke-dashoffset .6s var(--ease)}

/* ── Status transition banner ── */
.pv-status-transition{position:absolute;inset:0;z-index:15;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,14,28,.85);-webkit-backdrop-filter:none;
  opacity:0;transform:scale(.95);transition:transform 10ms var(--ease),opacity 10ms var(--ease)}
.pv-status-transition.active{opacity:1;transform:scale(1)}

/* ─────────────────────────────────────────────────────────────────
   APPROVED PROJECT CARD — letter health grade in the timer slot
   (4-circle overlay was killed per Sean — too busy)
   ───────────────────────────────────────────────────────────────── */
.pipeline-card.is-approved{
  /* Subtle green tint border to signal completion */
  box-shadow:0 0 0 1px rgba(52,211,153,.30),0 4px 14px rgba(0,0,0,.35);
}
/* Letter grade pill that takes the place of the countdown timer */
/* ── Universal grade selectors — apply to any element with data-grade ── */
[data-grade="A"]{color:#00d084;border-color:rgba(0,208,132,.35)}
[data-grade="B"]{color:#34d399;border-color:rgba(52,211,153,.3)}
[data-grade="C"]{color:#f59e0b;border-color:rgba(245,158,11,.3)}
[data-grade="D"]{color:#f97316;border-color:rgba(249,115,22,.3)}
[data-grade="F"]{color:#ef4444;border-color:rgba(239,68,68,.35)}
[data-grade="-"]{color:rgba(255,255,255,.2);border-color:rgba(255,255,255,.08)}

/* ═══ PIPELINE CARD — AVATAR CIRCLES ═══ */
.pc-av-chip .pc-av-init{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 9px/1 var(--font);color:#fff;background:linear-gradient(135deg,#1b2838,#0d1b2a)}
.pc-tooltip .hd-av{width:44px;height:44px;font-size:14px;flex-shrink:0}
.pc-tooltip .hd-grade-circle{width:44px;height:44px;font-size:18px;flex-shrink:0;border-width:2px}
.pc-tooltip .hd-bar-label{width:64px}

/* ─────────────────────────────────────────────────────────────────
   RATE THIS EDIT — premium glass modal with golden animated stars
   + orb particle ambiance.
   ───────────────────────────────────────────────────────────────── */
/* Soft top highlight line */
/* Orb particle ambiance — 6 slow-drifting golden orbs in the background */
@keyframes rateOrbDrift{
  0%,100%{transform:translate(0,0) scale(1);opacity:.7}
  25%{transform:translate(20px,-15px) scale(1.1);opacity:.9}
  50%{transform:translate(-15px,20px) scale(.95);opacity:.6}
  75%{transform:translate(10px,10px) scale(1.05);opacity:.85}
}
/* Inner content sits above the orbs */

/* ── Golden animated stars ── */
.pv-rating{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0 4px}
.pv-star{
  width:44px;height:44px;cursor:pointer;
  color:rgba(255,255,255,.14);
  transition:color 180ms cubic-bezier(.34,1.56,.64,1),transform 180ms cubic-bezier(.34,1.56,.64,1),filter 180ms;
  
}
.pv-star:hover{
  color:#ffd770;transform:scale(1.22);
  ) drop-shadow(0 0 24px rgba(245,166,35,.35));
}
.pv-star.active{
  color:#ffd770;transform:scale(1.10);
  filter:drop-shadow(0 0 22px rgba(245,166,35,.30));
  animation:starPulse 2.2s ease-in-out infinite;
}
@keyframes starPulse{
  0%,100%{filter:drop-shadow(0 0 22px rgba(245,166,35,.30))}
  50%{filter:drop-shadow(0 0 32px rgba(245,166,35,.55))}
}
@keyframes starPop{0%{transform:scale(1.10)}40%{transform:scale(1.42)}100%{transform:scale(1.10)}}
.pv-star.pop{animation:starPop 360ms cubic-bezier(.34,1.56,.64,1),starPulse 2.2s ease-in-out infinite 360ms}

/* ── Approve overlay — download progress ── */
.approve-overlay{position:absolute;inset:0;z-index:50;
  background:rgba(0,0,0,.85);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  opacity:0;pointer-events:none;transition:opacity 200ms}
.approve-overlay.active{opacity:1;pointer-events:auto}
.approve-ring{position:relative;width:120px;height:120px}
.approve-ring svg{width:120px;height:120px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:6}
.ring-fill{fill:none;stroke:var(--green);stroke-width:6;stroke-linecap:round;
  transition:stroke-dashoffset 600ms cubic-bezier(.16,1,.3,1)}
.approve-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:500 24px/1 var(--font-display);color:#fff}
.approve-label{font:500 14px/1 var(--font);color:rgba(255,255,255,.6)}
/* Download phase */
@keyframes downloadBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* (Removed legacy full-width .pipeline-card .pc-approved-badge — replaced by small top-right pill
   defined in the NEW CARD LAYOUT block above. Sean 2026-04-15.) */

/* ── Confirm/Alert modals ── */
.cb-modal-bg{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.6);

  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 10ms}
.cb-modal-bg.visible{opacity:1;pointer-events:auto}
.cb-modal h3{font:500 var(--text-lg)/var(--lh-snug) var(--font);margin-bottom:var(--s1)}
.cb-modal p{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3);margin-bottom:var(--s3)}
.cb-modal-cancel{padding:10px var(--s3);border-radius:var(--r-lg);border:none;
  background:rgba(255,255,255,.06);color:var(--txt2);font:500 var(--text-md)/var(--lh-none) var(--font);cursor:pointer}
.cb-modal-cancel:hover{background:rgba(255,255,255,.1)}
.cb-modal-ok{padding:10px var(--s3);border-radius:var(--r-lg);border:none;
  background:var(--blue);color:#fff;font:500 var(--text-md)/var(--lh-none) var(--font);cursor:pointer}
.cb-modal-ok:hover{opacity:.85}
.cb-modal-ok.danger{background:rgba(192,57,43,.8)}
.cb-modal-prompt-input{width:100%;margin-bottom:var(--s2);padding:var(--s1) var(--card-sm);
  border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:var(--txt);font:400 var(--text-md)/var(--lh-none) var(--font);outline:none}
.cb-modal-prompt-input:focus{border-color:rgba(41,151,255,.4)}

/* ── Device picker modal ── */
.dp-qpill.active{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:var(--blue)}

/* ── Mobile kanban stage dots ── */
.tp-stage-dots{display:none;justify-content:center;gap:6px;padding:var(--s1) 0}
.tp-stage-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.15);
  cursor:pointer;transition:background 10ms,transform 10ms}
.tp-stage-dot.active{background:var(--blue);transform:scale(1.3)}
@media(max-width:768px){
  .tp-stage-dots{display:flex}
  .pv-body{flex-direction:column;padding:0;gap:0}
  .pv-island-lg{position:static;transform:none;margin:0 auto}
  .pv-top-left{flex:0 1 auto}
  .pv-left{width:100%;border-radius:0}
  .pv-thread-float{width:100%;border-radius:0;border:none;border-top:1px solid rgba(255,255,255,.06)}
  .ps-thread,.erw-sidebar{width:100%;height:50vh;border-left:none;border-top:1px solid rgba(255,255,255,.06)}
  .pv-cam-pip{width:100px;height:75px}
  .pv-screen-pip{width:160px;height:90px}
  .pv-dock-compact{max-width:100%}
}

/* ── Landscape prompt ── */
.mob-landscape-prompt{position:fixed;inset:0;z-index:80;
  background:rgba(10,14,28,.95);-webkit-backdrop-filter:none;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);text-align:center;padding:var(--s4)}
.mob-landscape-prompt svg{width:48px;height:48px;color:var(--blue);margin-bottom:var(--s1)}
.mob-landscape-prompt h3{font:500 var(--text-xl)/var(--lh-snug) var(--font)}
.mob-landscape-prompt p{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3);max-width:280px}
.mlp-skip{padding:10px var(--s4);border:none;border-radius:var(--r-lg);
  background:rgba(255,255,255,.08);color:var(--txt);
  font:500 var(--text-md)/var(--lh-none) var(--font);cursor:pointer;margin-top:var(--s2)}
.mlp-skip:hover{background:rgba(255,255,255,.12)}
@media(max-width:480px) and (orientation:portrait){
  body.dock-open .mob-landscape-prompt{display:flex}
}

/* ── Density toggle ── */
.pipe-density-btn{width:24px;height:24px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.08);
  background:transparent;color:var(--txt3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background 10ms,border-color 10ms,color 10ms}
.pipe-density-btn:hover{border-color:rgba(255,255,255,.15);color:var(--txt)}
.pipe-density-btn.active{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:var(--blue)}
.pipe-density-btn svg{width:14px;height:14px}

/* ── Pipeline category bar ── */
.pipe-cat.active{background:rgba(255,255,255,.08);color:var(--txt)}
.pipe-sub-cats{display:flex;gap:var(--s1);margin-bottom:var(--s2)}

/* ── Pipeline status column presets ── */
.ps-queue .col-dot{background:var(--txt3)}

/* ── Emoji picker / attach popup ── */
.emoji-picker{position:absolute;bottom:calc(100% + 8px);left:8px;z-index:50;width:240px;
  background:rgba(8,14,28,.96);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.6);
  padding:6px;display:none;
  }
.emoji-picker.open{display:flex;flex-direction:column;gap:4px}
.emoji-picker .emoji-cell{
  width:100%;aspect-ratio:auto;height:auto;
  padding:10px 12px;border:none;background:transparent;
  border-radius:8px;color:rgba(255,255,255,.85);
  font:500 13px/1 var(--font);text-align:left;cursor:pointer;
  transition:background .1s,color .1s;
}
.emoji-picker .emoji-cell:hover{background:rgba(255,255,255,.06);color:#fff}
/* The actual emoji grid (when openEmojiPicker fills it with 20 emoji buttons) */
.emoji-picker .emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:200px;overflow-y:auto;width:100%}
.emoji-picker .emoji-grid .emoji-cell{aspect-ratio:1;padding:0;font-size:18px;text-align:center}
.emoji-cell{width:100%;aspect-ratio:1;border:none;background:transparent;
  font-size:18px;cursor:pointer;border-radius:var(--r-sm);transition:background 10ms}
.emoji-cell:hover{background:rgba(255,255,255,.08)}

/* ── GIF search ── */
.gif-picker.open{display:block}
.gif-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s0);
  max-height:240px;overflow-y:auto}
.gif-grid img{width:100%;border-radius:var(--r-sm);cursor:pointer;
  transition:transform 10ms}
.gif-grid img:hover{transform:scale(1.03)}

/* ── File attachment row ── */

/* ── Blueprint tooltip ── */
.bp-tooltip.visible{opacity:1;transform:translateY(0);pointer-events:auto}

/* ── Recording live transcript ── */
.rec-transcript-live{font:400 var(--text-xs)/1.4 var(--font);color:var(--txt3);
  padding:var(--s0) var(--s2);max-height:32px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ══════════════════════════════════════════
   SHELL TOP BAR — TRUE MAIN HEADER ROW
   ══════════════════════════════════════════ */

/* Segmented glass control — premium liquid glass island */
.shell-seg-btn{padding:10px 22px;border:none;border-radius:11px;
  background:transparent;color:rgba(255,255,255,.4);cursor:pointer;
  font:500 13.5px/1 var(--font);letter-spacing:-.01em;
  transition:background,color,border-color,opacity 10ms;white-space:nowrap}
.shell-seg-btn:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8)}
.shell-seg-btn.active{
  background:linear-gradient(180deg,rgba(41,151,255,.32) 0%,rgba(41,151,255,.16) 50%,rgba(41,151,255,.20) 100%);
  color:#fff;border:1px solid rgba(41,151,255,.4);
  box-shadow:0 0 24px rgba(41,151,255,.28),inset 0 .5px 0 rgba(255,255,255,.20),inset 0 1px 0 rgba(255,255,255,.14)}

/* Shell search — premium sized */

/* Shell density control */
.tb-seg-btn.active{background:rgba(255,255,255,.1);color:#fff}

/* Shell theme button */

/* Bell — premium sized */
.shell-bell{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.4);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background 10ms,color 10ms}
.shell-bell:hover{background:rgba(255,255,255,.08);color:#fff}

/* WebSocket server status indicator */
.ws-status{display:flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:100px;
  background:rgba(10,14,22,.85);border:1px solid rgba(255,255,255,.08);
  font:500 var(--text-2xs)/1 var(--font);white-space:nowrap;transition:border-color 10ms}
.ws-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;transition:background 10ms,box-shadow 10ms}
.ws-status-label{color:rgba(255,255,255,.45);transition:color 10ms}
/* Green — connected */
.ws-status--online .ws-status-dot{background:var(--green);box-shadow:0 0 6px var(--green)}
.ws-status--online .ws-status-label{color:var(--green)}
.ws-status--online{border-color:rgba(52,211,153,.2)}
/* Yellow — reconnecting / degraded */
.ws-status--connecting .ws-status-dot{background:var(--orange);box-shadow:0 0 6px var(--orange);animation:wsPulse 1.2s ease infinite}
.ws-status--connecting .ws-status-label{color:var(--orange)}
.ws-status--connecting{border-color:rgba(251,191,36,.2)}
/* Red — disconnected */
.ws-status--offline .ws-status-dot{background:var(--red);box-shadow:0 0 6px var(--red)}
.ws-status--offline .ws-status-label{color:var(--red)}
@keyframes wsPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Legacy .toast-stack (bottom-left) DELETED — Sean 2026-05-26: 'why is it
   in the top left of my screen? it needs to be under the bell in the top
   right.' Sole canonical surface is #opsToastStack (top:60px;right:12px).
   Anything that still appends to #toastStack now no-ops because the element
   was also removed from studio-shell.html. */
.toast-stack{display:none !important}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(20px) scale(.96)}}

/* Health grade badge in bottom island */

/* ═══════════════════════════════════════════════════════════
   APP DOCK — Premium floating vertical glass dock
   ═══════════════════════════════════════════════════════════ */

/* Dock container — reserves a fixed 56px column. The inner rail is
   position:fixed so it can grow on hover WITHOUT reflowing main content.
   Sean 2026-05-24: 'Supabase-style nav — thin icon rail, hover pops out
   labels, snappy 60fps, no input lag.' */
.app-dock{grid-column:1;grid-row:1;display:flex;align-items:stretch;
  width:var(--dock-w, 220px);flex-shrink:0;padding:0;z-index:120}
/* Sean 2026-05-25: --dock-w is the single source of truth for sidebar width.
   .shell grid-template-columns + .app-dock + .app-dock-inner all read it.
   :has() detects .app-dock-inner.collapsed and flips the var to 56px. */
.shell:has(.app-dock-inner.collapsed){ --dock-w: 56px; }
.shell:not(:has(.app-dock-inner.collapsed)){ --dock-w: 220px; }

/* Inner rail — paints the EXACT canonical studio background recipe so
   the sidebar reads as one continuous surface with the body. Sean
   2026-05-24: 'it should be the fucking background color, never dark
   or black or grey ever.' The 3-layer locked spec (amber horizon +
   two glass washes + navy base) is painted here too — identical to
   body. No solid dark navy, no separate glass treatment. */
.app-dock-inner{display:flex;flex-direction:column;align-items:stretch;
  position:fixed;left:0;top:0;bottom:0;
  width:var(--dock-w, 220px);padding:8px 6px;gap:0;
  transition:width 160ms cubic-bezier(.16,1,.3,1);
  background:
    var(--cb-amber-horizon),
    var(--cb-glass-1-bg),
    var(--cb-glass-1-bg),
    var(--cb-bg);
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100vw 100vh, 100vw 100vh, 100vw 100vh, 100vw 100vh;
  background-position: left top, left top, left top, left top;
  border-right:1px solid rgba(255,255,255,.06);
  border-radius:0;
  overflow:hidden;z-index:200;
  will-change:width;}

/* Dock logo */

/* Dock spacer (pushes settings to bottom) */

/* ── Dock Button Base ── */
.dock-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;width:54px;padding:7px 0 5px;border:none;background:transparent;
  border-radius:12px;cursor:pointer;position:relative;
  transition:transform 10ms ease,background 10ms ease,box-shadow 10ms ease;
  -webkit-tap-highlight-color:transparent;outline:none}

.dock-btn:hover{background:rgba(255,255,255,.06);
  transform:scale(1.08);
  box-shadow:0 0 12px rgba(255,255,255,.04)}

.dock-btn:active{transform:scale(.96);background:rgba(255,255,255,.03)}

/* Active state — selected plate with refined glow */
.dock-btn.active{background:linear-gradient(180deg,rgba(41,151,255,.12) 0%,rgba(41,151,255,.04) 60%,rgba(41,151,255,.06) 100%);
  box-shadow:0 0 16px rgba(41,151,255,.10),inset 0 1px 0 rgba(255,255,255,.08);
  border:1px solid rgba(41,151,255,.15)}
.dock-btn.active::after{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:2.5px;height:16px;border-radius:0 2.5px 2.5px 0;
  background:linear-gradient(180deg,#2997ff,#60a5fa);
  box-shadow:0 0 6px rgba(41,151,255,.45),0 0 12px rgba(41,151,255,.2)}

/* ── Dock Icon Container — Premium Apple-Glass Tile ── */

/* Upper glass sheen — clear glass light catch */

/* Bottom specular rim — convex glass edge light */

/* Hover — lift + brighter rim + color glow bloom */
.dock-btn:hover .dock-icon{
  border-top-color:rgba(255,255,255,.45);
  box-shadow:
    0 5px 16px rgba(0,0,0,.5),
    0 2px 6px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 2px rgba(0,0,0,.12),
    0 0 20px var(--di-glow, rgba(0,0,0,0)),
    0 0 6px var(--di-glow, rgba(0,0,0,0))}

/* Active — deepest material + strongest glow */
.dock-btn.active .dock-icon{
  border-color:rgba(255,255,255,.22);
  border-top-color:rgba(255,255,255,.40);
  box-shadow:
    0 2px 12px rgba(0,0,0,.45),
    0 1px 4px rgba(0,0,0,.3),
    inset 0 1.5px 0 rgba(255,255,255,.35),
    inset 0 -1px 2px rgba(0,0,0,.12),
    0 0 24px var(--di-glow, rgba(0,0,0,0)),
    0 0 8px var(--di-glow, rgba(0,0,0,0))}

/* Small icon variant (settings, dev) */

/* ── Dock Label ── */
.dock-btn:hover .dock-label{color:rgba(255,255,255,.7)}
.dock-btn.active .dock-label{color:rgba(255,255,255,.85);font-weight:500}

/* Small button labels */

/* ── Dev mode button ── */

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — ZERO PINK. Pure white, black text, dark blue headers.
   Uses cool grays only (blue-tinted). NO warm grays, NO purple, NO pink.
   Applied to iframe pages via body.theme-light
   ═══════════════════════════════════════════════════════════════ */
body.theme-light{background:#fff!important;color:#111!important}
body.theme-light *{border-color:rgba(0,0,40,.06)!important}
body.theme-light .page-shell{background:#fff!important}
body.theme-light .page-head{border-color:rgba(0,0,40,.06)!important}
body.theme-light .page-body{background:#fff!important}
body.theme-light .pg-title{color:#1e3a5f!important}
body.theme-light .pg-sub{color:#555!important}
/* Section cards — pure white, cool gray border */
body.theme-light .section-card{background:#fff!important;border:1px solid rgba(0,10,40,.08)!important;box-shadow:0 1px 2px rgba(0,10,40,.04)!important}
body.theme-light .section-card::before,body.theme-light .section-card::after{display:none!important}
body.theme-light .glass-card{background:#fff!important;border:1px solid rgba(0,10,40,.08)!important;box-shadow:0 1px 2px rgba(0,10,40,.04)!important}
body.theme-light .glass-card::before,body.theme-light .glass-card::after{display:none!important}
body.theme-light .sec-title{color:#1e3a5f!important}
body.theme-light .sec-title svg{color:#1e3a5f!important}
body.theme-light .sec-sub{color:#666!important}
body.theme-light .tog-label{color:#111!important}
body.theme-light .tog-desc{color:#666!important}
body.theme-light .tog-row{border-color:rgba(0,10,40,.05)!important}
/* Seg controls — cool gray bg, zero warmth */
body.theme-light .seg-ctrl{background:#f0f2f6!important;border:1px solid rgba(0,10,40,.08)!important}
body.theme-light .seg-btn{color:#555!important;background:transparent!important}
body.theme-light .seg-btn.active{color:#fff!important;background:#1e3a5f!important;box-shadow:none!important}
/* Toggles — dark blue when on, cool gray when off */
body.theme-light .toggle{background:#c4c8d0!important}
body.theme-light .toggle.on{background:#1e3a5f!important}
body.theme-light .toggle::after{background:#fff!important}
/* Buttons — NO pink, NO purple */
body.theme-light .btn{color:#111!important;background:#f0f2f6!important;border:1px solid rgba(0,10,40,.08)!important;box-shadow:none!important}
body.theme-light .btn-g5{background:rgba(30,58,95,.06)!important;color:#1e3a5f!important;border:1px solid rgba(30,58,95,.12)!important}
body.theme-light .btn-danger{background:rgba(200,30,30,.06)!important;color:#c41e1e!important;border:1px solid rgba(200,30,30,.1)!important}
/* Inputs */
body.theme-light .input{background:#fff!important;border:1px solid rgba(0,10,40,.12)!important;color:#111!important;box-shadow:none!important}
body.theme-light .input:focus{border-color:#1e3a5f!important;box-shadow:0 0 0 2px rgba(30,58,95,.1)!important}
/* Pipeline */
body.theme-light .pipe-col{background:#f8f9fb!important;border:1px solid rgba(0,10,40,.06)!important}
body.theme-light .pipe-col-title{color:#1e3a5f!important}
body.theme-light .pipe-col-count{color:#888!important;background:rgba(0,10,40,.04)!important}
/* Toast */
body.theme-light .toast-fixed{background:#fff!important;color:#111!important;border:1px solid rgba(0,10,40,.08)!important;box-shadow:0 4px 12px rgba(0,10,40,.08)!important}
/* Kill ALL glass pseudo-elements in light mode — no shimmer, no glow */
body.theme-light [class*="glass"]::before,body.theme-light [class*="glass"]::after{display:none!important}
/* Kill ALL purple/pink anywhere in light mode */
body.theme-light .badge-review{background:rgba(30,58,95,.08)!important;color:#1e3a5f!important}
body.theme-light .ch-sb-av.dm{background:rgba(30,58,95,.08)!important;color:#1e3a5f!important}
body.theme-light .tag-purple,.tag-admin,.tag-master{background:rgba(30,58,95,.06)!important;color:#1e3a5f!important}
/* ── Floating save button (settings) ── */
.settings-save-float{position:fixed;bottom:var(--s3);right:var(--s3);display:flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s3);border-radius:var(--r-lg);
  background:rgba(10,14,22,.95);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 32px rgba(0,0,0,.4);color:rgba(255,255,255,.7);
  font:500 var(--text-sm)/1 var(--font);z-index:500;
  animation:saveFloatIn .2s ease;-webkit-backdrop-filter:none}
.settings-save-float .btn{padding:var(--s1) var(--s3);min-height:auto}
@keyframes saveFloatIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* Light mode: floating save */
body.theme-light .settings-save-float{background:#1e3a5f!important;color:#fff!important;box-shadow:0 4px 20px rgba(0,0,0,.15)!important}
body.theme-light .settings-save-float .btn{background:rgba(255,255,255,.15)!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)!important}

/* ── Pipeline status nav buttons (shared across pipeline, manage, etc) ── */
.psn-btn{padding:6px 14px;border:none;border-radius:8px;background:transparent;color:rgba(255,255,255,.35);font:500 12px/1 var(--font);cursor:pointer;transition:background 10ms,color 10ms;white-space:nowrap}
.psn-btn:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.6)}
.psn-btn.active{background:rgba(41,151,255,.1);color:#2997ff}

/* ═══ MANAGE VIEW ═══ */
.mg-col-hdr .mg-col-dot{width:8px;height:8px;border-radius:50%}
.mg-col-hdr .mg-col-name{font:500 var(--text-md)/var(--lh-none) var(--font);color:var(--txt);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-col-hdr .mg-col-count{font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3);
  background:rgba(255,255,255,.06);padding:2px 8px;border-radius:var(--r-pill)}
.mg-col-hdr .mg-col-del{background:none;border:none;color:rgba(255,255,255,.15);cursor:pointer;font-size:18px;
  padding:2px 6px;border-radius:6px;transition:background 10ms,color 10ms}
.mg-col-hdr .mg-col-del:hover{background:rgba(255,59,48,.1);color:var(--red)}
.mg-col-body{flex:1;padding:8px;min-height:80px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.mg-col-body.drag-over{background:rgba(41,151,255,.04)}

/* Member card */
.mg-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:grab;transition:opacity 120ms,transform 120ms,box-shadow 120ms}
.mg-card:hover{background:rgba(255,255,255,.05);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.mg-card.dragging{opacity:.4;transform:scale(.97)}
.mg-card-av .mg-av-ini{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font:500 11px/1 var(--font);color:#fff;text-transform:uppercase}
.mg-av-dot.online{background:#34d399}
.mg-av-dot.offline{background:rgba(255,255,255,.15)}
.mg-card-tag.editor{background:rgba(41,151,255,.12);color:#2997ff}
.mg-card-tag.client{background:rgba(52,211,153,.12);color:#34d399}
.mg-card-tag.trial{background:rgba(251,191,36,.12);color:#fbbf24}
.mg-card-tag.owner{background:rgba(168,85,247,.12);color:#a855f7}
.mg-card-score.good{color:#34d399}
.mg-card-score.mid{color:#fbbf24}
.mg-card-score.low{color:#ff453a}

/* Create team modal */
.mg-modal-bg{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.6);
  display:none;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 150ms}
.mg-modal-bg.open{display:flex;opacity:1;pointer-events:all}
.mg-modal{background:var(--bg-el);border:var(--border-glow);border-radius:var(--r-2xl);
  padding:24px;width:360px;max-width:90vw;box-shadow:0 24px 48px rgba(0,0,0,.4)}
.mg-modal h3{font:500 var(--text-lg)/1.2 var(--font);color:var(--txt);margin:0 0 16px}
.mg-modal .input{width:100%;margin-bottom:16px}
.mg-modal-btns{display:flex;gap:8px;justify-content:flex-end}

/* ═══ SETUP HUB ═══ */
#setupHub.active .setup-hub-bg{opacity:1;pointer-events:all}
.setup-card.complete{border-color:rgba(52,211,153,.2);cursor:default}
.setup-card.complete:hover{transform:none}
.setup-card.complete .setup-card-icon{background:rgba(52,211,153,.08)}
@keyframes checkGlow{0%,100%{box-shadow:inset 0 0 30px rgba(52,211,153,.04)}50%{box-shadow:inset 0 0 40px rgba(52,211,153,.1)}}

/* Setup Hub — inline onboarding modal */
.setup-ob-modal{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.8);
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 10ms ease}
.setup-ob-modal.active{opacity:1}

/* ═══ GUIDED TOUR OVERLAY ═══ */
.tour-loading{position:fixed;inset:0;z-index:900;background:#000;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s ease}
.tour-loading.active{opacity:1}

/* Spotlight panels */
#tourOverlay{position:fixed;inset:0;z-index:860;pointer-events:none;opacity:0;transition:opacity 10ms ease}
#tourOverlay.active{opacity:1;pointer-events:all}

/* Tour tooltip */

/* ═══ RESPONSIVE: Setup Hub + Tour ═══ */
@media(max-width:640px){
  .setup-cards{grid-template-columns:1fr}
  .setup-hub-title{font-size:22px}
  .setup-hub-sub{font-size:12px;margin-bottom:24px}
  .setup-card{padding:20px 16px}
  .tour-tooltip{width:calc(100vw - 32px)!important;max-width:320px}
  .setup-ob-frame{width:95%;height:90vh}
}

/* deploy trigger 1774810930 */

/* ── Sticky video note pins ── */
/* tip is always visible when pin is shown — no hover needed */

/* ═══════════════════════════════════════════════════════════════
   ABSORBED COMPONENTS — Migrated from inline \3c style> blocks
   All fonts normalized to var(--font)/var(--font-display)
   All new components from portal pages now live here
   ═══════════════════════════════════════════════════════════════ */

/* ═══ FRAMELAB REVIEW — Editor Stack, Tooltips, Thread Float, Video ═══ */
/* ── Editor Avatar + Team Stack ── */
.pv-team-stack .pv-tm{width:22px;height:22px;border-radius:50%;
  background:rgba(126,203,161,.2);color:rgba(255,255,255,.7);
  font:500 8px/22px var(--font);text-align:center;
  border:2px solid rgba(0,0,0,.5);
  margin-left:-6px;cursor:pointer;position:relative;
  background-size:cover;background-position:center;}
.pv-team-stack .pv-tm-more{background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);
  font:500 8px/22px var(--font);}
/* Editor tooltip */
/* Team tooltip */

/* ═══ PIPELINE — Controls, Status Nav, Filter Islands, Search ═══ */
/* ═══ Status sub-nav ═══ */
.pipe-status-nav{display:flex;gap:2px}
/* ═══ Dropdown filters ═══ */
.pipe-dropdown{padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);font:400 12px/1 var(--font-display);
  cursor:pointer;outline:none;appearance:none;min-width:90px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;padding-right:24px}
.pipe-dropdown:focus{border-color:rgba(41,151,255,.3)}
.pipe-dropdown option{background:#0a0e16;color:#fff}
/* ═══ PIPELINE CONTROLS ROW — status + search + filters ═══
   Border-bottom lives HERE (flush under controls, aligned with left-nav divider).
   .page-head has its bottom border removed + bottom padding zeroed. Sean 2026-04-15. */
.pipe-controls-row{display:flex;align-items:center;justify-content:space-between;padding:2px 20px 6px;gap:16px;
  border-bottom:1px solid rgba(255,255,255,.14);}
.pcr-search{display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;
  min-width:180px;max-width:240px;transition:border-color 10ms}
.pcr-search:focus-within{border-color:rgba(41,151,255,.35);background:rgba(255,255,255,.06)}
.pcr-search svg{opacity:.4;flex-shrink:0}
.pcr-search input{border:none;background:transparent;color:#fff;font:400 13px/1 var(--font-display);outline:none;width:100%}
.pcr-search input::placeholder{color:rgba(255,255,255,.3)}
/* ═══ Center status icon island — BIGGER + hover shows ALL labels ═══ */
.si-btn.active{background:linear-gradient(135deg,rgba(41,151,255,.2) 0%,rgba(41,151,255,.1) 100%);
  color:#fff;box-shadow:0 2px 8px rgba(41,151,255,.15),inset 0 1px 0 rgba(255,255,255,.08);
  border:1px solid rgba(41,151,255,.2)}
.si-btn:hover:not(.active){color:rgba(255,255,255,.6);background:rgba(255,255,255,.04)}
/* ═══ Filter island — BIGGER ═══ */
.pc-filter-island .pc-select{padding:8px 24px 8px 10px;font:500 12px/1 var(--font-display);border-radius:8px}
/* ═══ Right controls — MUCH BIGGER search + icons ═══ */
/* Pipeline control row — 3 grouped islands */
.pc-island{display:flex;align-items:center;gap:4px;padding:4px 6px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px}
.pc-main-island{flex:0 0 auto}
.pc-select{padding:5px 8px;border:1px solid rgba(255,255,255,.06);border-radius:6px;
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.75);font:500 10px/1 var(--font-display);
  cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;padding-right:20px}
.pc-select:hover{border-color:rgba(255,255,255,.12);color:#fff}
.pc-select option{background:#0a0e18;color:#fff}
.pc-icon-btn{width:26px;height:26px;border-radius:6px;border:1px solid rgba(255,255,255,.04);
  background:transparent;color:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background 10ms,color 10ms}
.pc-icon-btn:hover{background:rgba(255,255,255,.08);color:#fff}
/* ═══ Filtered grid view ═══ */
.filtered-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.filtered-grid .pipeline-card{width:100%!important;min-height:160px}
/* ═══ Embedded storage removed — now uses iframe to storage.html ═══ */

/* ═══ Density dropdown ═══ */
.ptr-dd-wrap{position:relative}
.ptr-dd-item{width:100%;display:block;padding:8px 16px;font:400 12.5px/1.2 var(--font-display);
  color:rgba(255,255,255,.6);background:none;border:none;cursor:pointer;text-align:left;transition:background 10ms,color 10ms}
.ptr-dd-item:hover{background:rgba(255,255,255,.06);color:#fff}
.ptr-dd-item.active{color:#2997ff;font-weight:500}
/* ═══ Right-side activity lane ═══ */
/* studio-right-lane removed — right toggle lives in shell (index.html) */

/* ═══ Hide sub-tabs (moved to Staff) ═══ */
.pg-tabs{display:none!important}
/* ═══ Studio Bottom Dock — INSIDE body container ═══ */
/* ═══ Quality selector ═══ */
.q-opt{display:block;width:100%;padding:7px 12px;border:none;background:transparent;color:rgba(255,255,255,.6);font:500 12px/1 var(--font);text-align:left;cursor:pointer;border-radius:6px;transition:background 10ms}
.q-opt:hover{background:rgba(255,255,255,.06);color:#fff}
.q-opt.active{color:#2997ff;font-weight:500}
/* 8. Recording countdown timer */
.rec-countdown.warn{animation:pulse-red .5s ease infinite alternate}
/* ── Health grade in center island ── */
.pv-health-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border-radius:6px;font:500 11px/1 var(--font);color:#fff;margin-left:4px}
.pv-health-badge[data-grade="A"]{background:rgba(52,211,153,.25);color:#34d399}
.pv-health-badge[data-grade="B"]{background:rgba(251,191,36,.25);color:#fbbf24}
.pv-health-badge[data-grade="C"]{background:rgba(251,146,60,.25);color:#fb923c}
.pv-health-badge[data-grade="D"]{background:rgba(255,69,58,.25);color:#ff453a}
.pv-health-badge[data-grade="F"]{background:rgba(255,69,58,.35);color:#ff453a}

/* ═══ BLUEPRINTS — Hero, Library, Cards ═══ */
/* ═══ PAGE LAYOUT — left hero + right library ═══ */
/* ═══ LEFT — CREATE HERO (clean, no blur/orb animations) ═══ */
.bp-hero h2 .grad{background:linear-gradient(135deg,#2997ff,#5ac8fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
/* Future tags */
.bp-future-tag .soon{font:500 8px/1 var(--font);color:#2997ff;background:rgba(41,151,255,.1);
  padding:2px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em}

/* ── Title row (matches portal pattern) ── */

/* ── Tab strip — matches wiki tab pattern ── */
.bp-tab.active{color:var(--blue);border-bottom-color:var(--blue);background:rgba(41,151,255,.04)}

/* ── Sub-tab strip — for Library tier filter ── */
.bp-subtabs{width:100%;padding:var(--s2) 20px 0;display:flex;gap:var(--s1);align-items:center}
.bp-subtabs-label{font:500 var(--text-3xs)/1 var(--font-display);letter-spacing:1.5px;text-transform:uppercase;color:var(--txt3);margin-right:var(--s1)}
.bp-subtab{padding:6px 14px;border-radius:var(--r-pill);border:var(--border-glass);background:var(--glass-flat);
  font:500 var(--text-3xs)/1 var(--font-display);color:var(--txt3);cursor:pointer;transition:color 10ms,background 10ms;display:inline-flex;align-items:center;gap:6px}
.bp-subtab:hover{color:var(--txt);background:rgba(255,255,255,.10)}
.bp-subtab.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.4);color:var(--blue)}
.bp-subtab[data-tier="2"].active{background:rgba(191,90,242,.12);border-color:rgba(191,90,242,.4);color:#bf5af2}
.bp-subtab[data-tier="3"].active{background:rgba(255,159,10,.12);border-color:rgba(255,159,10,.4);color:#ff9f0a}

/* ── Tab panels ── */
.bp-panel{display:none;width:100%;padding:var(--s2) 20px var(--s4);flex:1;min-height:0}
.bp-panel.active{display:flex;flex-direction:column}

/* ═══ BLUEPRINT BUILD WIZARD — standardized wizard shell ═══ */
/* The request wizard (.wiz-shell) already has glass bg, border-radius, shadows,
   brand header, step rail, content area, footer — all working perfectly.
   Blueprint wizard inherits ALL of that. Only override: wider shell + hide sidebars. */

/* Blueprint build panel — same glass wizard shell as request.html
   but forced to FULL WIDTH instead of centered 760px modal. */
.bp-panel[data-bp-panel="build"]{padding:12px 16px 16px !important}
.bp-panel[data-bp-panel="build"] .wiz-overlay{position:static !important;display:flex !important;
  flex:1;flex-direction:column;min-height:0;align-items:center !important;justify-content:center !important}
.bp-panel[data-bp-panel="build"] .wiz-shell{width:100% !important;max-width:100% !important;
  flex:1;max-height:none !important;border-radius:24px !important;margin:0 auto !important}
.bp-panel[data-bp-panel="build"] .wiz-content{min-height:0}
.bp-panel[data-bp-panel="build"] .wiz-content > *{max-width:100%}
.bp-panel[data-bp-panel="build"] .wiz-answers{flex-direction:column;align-items:center}
.bp-panel[data-bp-panel="build"] .bp-v9-grid{flex-wrap:nowrap !important;scrollbar-width:none}
.bp-panel[data-bp-panel="build"] .bp-v9-grid::-webkit-scrollbar{display:none}

/* Scroll arrows for card rows */
.bp-scroll-wrap{position:relative}
.bp-scroll-arr.left{left:-4px}
.bp-scroll-arr.right{right:-4px}

/* ── 3-column landing (NEW — replaces the dead .bp-landing/.bp-split above) ── */
.bp-landing{display:none;width:100%;flex-direction:column;flex:1;min-height:0}
.bp-landing.active{display:flex}
.bp-landing .bp-title-row{flex-shrink:0}
.bp-landing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:100%;flex:1;min-height:0}
.bp-landing-card{background:rgba(255,255,255,.02);border-right:1px solid rgba(255,255,255,.05);
  padding:40px 24px;text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  position:relative;overflow:hidden;transition:background 250ms}
.bp-landing-card:last-child{border-right:none}
.bp-landing-card::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 60%,rgba(41,151,255,.08),transparent 70%);
  opacity:0;transition:opacity 350ms}
.bp-landing-card:hover{background:rgba(255,255,255,.04)}
.bp-landing-card:hover::after{opacity:1}
.bp-landing-icon{width:80px;height:80px;border-radius:50%;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);
  transition: transform 350ms cubic-bezier(.16,1,.3,1), opacity 350ms cubic-bezier(.16,1,.3,1), background-color 350ms cubic-bezier(.16,1,.3,1), color 350ms cubic-bezier(.16,1,.3,1), box-shadow 350ms cubic-bezier(.16,1,.3,1), border-color 350ms cubic-bezier(.16,1,.3,1);position:relative;z-index:1}
.bp-landing-card:hover .bp-landing-icon{background:rgba(41,151,255,.10);border-color:rgba(41,151,255,.35);
  color:var(--blue);transform:scale(1.12);box-shadow:0 0 32px rgba(41,151,255,.15)}
.bp-landing-card h2{font:500 20px/1.2 var(--font-display);color:#fff;margin:0;position:relative;z-index:1;
  transition:color 200ms}
.bp-landing-card:hover h2{color:var(--blue)}
.bp-landing-card p{font:400 13px/1.4 var(--font);color:rgba(255,255,255,.35);margin:0;max-width:220px;
  position:relative;z-index:1;transition:color 200ms}
.bp-landing-card:hover p{color:rgba(255,255,255,.55)}
@media(max-width:680px){.bp-landing-grid{grid-template-columns:1fr}
  .bp-landing-card{border-right:none;border-bottom:1px solid rgba(255,255,255,.05);min-height:180px}}

/* ── Glass content card (wraps each panel's main content, matches wiki #wkMain) ── */

/* ── Library card grid (applies to both .bp-card-item and .bp-lib-card markup) ── */
.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s2)}
.bp-grid .bp-lib-card,
.bp-grid .bp-card-item{cursor:pointer;border-radius:var(--r-lg);overflow:hidden;
  border:var(--border-glass);border-top-color:var(--border-glass-top);
  background:var(--glass-flat);
  transition:border-color 10ms,transform 10ms;position:relative;width:auto;flex-shrink:1}
.bp-grid .bp-lib-card:hover,
.bp-grid .bp-card-item:hover{border-color:rgba(255,255,255,.18);transform:translateY(-2px)}
.bp-grid .card-bg{width:100%;aspect-ratio:9/16;position:relative;overflow:hidden}
.bp-grid .card-bg video{width:100%;height:100%;object-fit:cover}
.bp-grid .card-bg .card-grad{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.8))}
.bp-grid .card-bg .card-color{width:100%;height:100%}
.bp-grid .card-info{position:absolute;bottom:0;left:0;right:0;padding:12px;z-index:2}
.bp-grid .card-name{font:500 var(--text-sm)/1.2 var(--font);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-grid .card-meta{font:400 var(--text-xs)/1 var(--font);color:var(--txt3);margin-top:4px;display:flex;align-items:center;gap:4px}

.bp-empty{grid-column:1/-1;padding:var(--s5) var(--s3);text-align:center;color:var(--txt3);font:500 var(--text-sm)/1.5 var(--font);
  border:1px dashed rgba(255,255,255,.08);border-radius:var(--r-xl);background:rgba(255,255,255,.025)}

/* Old inline builder overrides removed — blueprint build panel now uses
   the standardized .rq-overlay wizard shell (glass card, full width). */

/* ── Section header inside panels ── */
.bp-section-head .bp-section-sub{font:400 var(--text-sm)/1.4 var(--font);color:var(--txt3);margin-top:2px}

/* ═══════════════════════════════
   WIKI PAGE
   Used by public/content-bug-wiki.html (loaded as a shell iframe).
   ═══════════════════════════════ */

/* ── Top bar — title row holds title, role pills, search ── */
.wk-top{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid rgba(255,255,255,.04)}
.wk-top-inner{max-width:1380px;margin:0 auto;padding:var(--s3) var(--s4) var(--s2);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.wk-brand{font:500 28px/var(--lh-tight) var(--font-display);letter-spacing:-.02em;color:var(--txt);margin:0;flex-shrink:0}
.wk-role-badge{font:500 var(--text-3xs)/1 var(--font-display);letter-spacing:1.2px;text-transform:uppercase;
  padding:5px 9px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);color:var(--txt3)}

/* Search — glass surface, matches portal */
.wk-search{margin-left:auto;display:flex;align-items:center;gap:var(--s1);
  background:var(--glass-flat);border:var(--border-glass);border-top-color:var(--border-glass-top);
  border-radius:var(--r-md);padding:6px 12px;width:260px;transition:max-width .15s, background .15s}
.wk-search:focus-within{background:rgba(255,255,255,.10);max-width:340px;width:340px}
.wk-search input{background:none;border:none;outline:none;color:var(--txt);font:500 var(--text-sm)/1.2 var(--font);flex:1;min-width:0}
.wk-search input::placeholder{color:rgba(255,255,255,.3)}
.wk-search-key{font:500 var(--text-3xs)/1 var(--font);color:rgba(255,255,255,.3);background:rgba(255,255,255,.06);padding:3px 6px;border-radius:var(--r-xs)}

/* ── Role filter pills (inline in title row) ── */
.wk-roles-bar{display:inline-flex;align-items:center;gap:6px;margin-left:var(--s2)}
.wk-role-pill{padding:6px 14px;border-radius:var(--r-pill);border:var(--border-glass);background:var(--glass-flat);
  font:500 var(--text-3xs)/1 var(--font-display);color:var(--txt3);cursor:pointer;transition:color .15s, background .15s;display:inline-flex;align-items:center;gap:6px}
.wk-role-pill:hover{color:var(--txt);background:rgba(255,255,255,.10)}
.wk-role-pill.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.4);color:var(--blue)}
.wk-role-pill[data-role="client"].active{background:rgba(52,199,89,.1);border-color:rgba(52,199,89,.35);color:#34c759}
.wk-role-pill[data-role="editor"].active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.4);color:var(--blue)}
.wk-role-pill[data-role="admin"].active{background:rgba(255,159,10,.1);border-color:rgba(255,159,10,.35);color:#ff9f0a}
.wk-role-pill[data-role="all"].active{background:rgba(191,90,242,.1);border-color:rgba(191,90,242,.35);color:#bf5af2}
.wk-role-pill[disabled]{opacity:.25;cursor:not-allowed}

/* ── Layout ── */
.wk-wrap{max-width:1380px;margin:0 auto;padding:var(--s3) var(--s4) var(--s8)}

/* ── Glass card — holds TOC + body inline ── */
.wk-card{
  background:var(--glass-premium);
  border:var(--border-glow);
  border-top-color:var(--border-glow-top);
  border-radius:var(--r-2xl);
  box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:520px
}
.wk-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.30) 80%,transparent)}

/* ── Left column — MAIN categories (vertical nav) ── */
.wk-cats{padding:var(--s3) var(--s2) var(--s3) var(--s3);display:flex;flex-direction:column;gap:2px}
.wk-cat{padding:11px 14px;border:none;background:none;cursor:pointer;text-align:left;
  font:500 var(--text-md)/1.3 var(--font-display);color:rgba(255,255,255,.5);
  border-radius:var(--r-sm);transition:color .12s, background .12s;white-space:nowrap}
.wk-cat:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.04)}
.wk-cat.active{color:var(--blue);background:rgba(41,151,255,.08)}

/* ── Sub-section nav — pill chips under the category title ── */
.wk-subnav{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s2) 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid rgba(255,255,255,.06)}
.wk-subnav a{padding:6px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);font:500 var(--text-xs)/1 var(--font);
  color:rgba(255,255,255,.55);text-decoration:none;transition:color .12s, background .12s, border-color .12s}
.wk-subnav a:hover{color:var(--txt);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.wk-subnav a.active{color:var(--blue);background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.35)}

/* ── Body content — right side of divider ── */
#wkMain{padding:var(--s5) var(--s5) var(--s6);min-height:200px;overflow:hidden;position:relative;z-index:2;
  border-left:1px solid rgba(255,255,255,.08)}

@media(max-width:880px){
  .wk-card{grid-template-columns:1fr}
  .wk-cats{position:static;max-height:none;flex-direction:row;overflow-x:auto;border-bottom:1px solid rgba(255,255,255,.08)}
  #wkMain{border-left:none}
}

.wk-hero{margin-bottom:var(--s3)}
.wk-hero-title{font:500 var(--text-3xl)/1.1 var(--font-display);letter-spacing:-.5px;margin-bottom:var(--s1);color:var(--txt)}
.wk-hero-desc{font:400 var(--text-md)/1.6 var(--font);color:var(--txt3);max-width:640px}

.wk-section{margin-bottom:var(--s5);scroll-margin-top:140px}
.wk-section h2{font:500 var(--text-xl)/1.25 var(--font-display);letter-spacing:-.2px;margin-bottom:14px;
  padding-bottom:var(--s1);border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:var(--s1);color:var(--txt)}
.wk-section-role-tag{font:500 var(--text-3xs)/1 var(--font-display);letter-spacing:.5px;text-transform:uppercase;
  padding:3px 7px;border-radius:var(--r-xs);background:rgba(255,255,255,.06);color:var(--txt3)}
.wk-section-role-tag.client{background:rgba(52,199,89,.12);color:#34c759}
.wk-section-role-tag.editor{background:rgba(41,151,255,.12);color:var(--blue)}
.wk-section-role-tag.admin{background:rgba(255,159,10,.12);color:#ff9f0a}

.wk-section h3{font:500 var(--text-md)/1.3 var(--font-display);margin:var(--s3) 0 10px;color:var(--txt)}
.wk-section h4{font:500 var(--text-sm)/1.3 var(--font-display);margin:var(--s2) 0 6px;color:var(--txt2)}
.wk-section p{font:400 var(--text-md)/1.7 var(--font);color:var(--txt3);margin-bottom:14px}
.wk-section ul,.wk-section ol{margin:10px 0 14px 24px}
.wk-section li{font:400 var(--text-md)/1.7 var(--font);color:var(--txt3);margin-bottom:6px}
.wk-section li ul,.wk-section li ol{margin-top:6px;margin-bottom:6px}
.wk-section strong{color:var(--txt);font-weight:500}
.wk-section em{color:var(--txt2);font-style:italic}
.wk-section code{font:600 var(--text-sm)/1.4 var(--mono);background:rgba(41,151,255,.14);
  color:#fff;padding:2px 7px;border-radius:var(--r-xs);border:1px solid rgba(41,151,255,.32)}
.wk-section a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(41,151,255,.25)}
.wk-section a:hover{border-bottom-color:var(--blue)}

/* Tables — glass-flat surface */
.wk-section table{width:100%;border-collapse:collapse;margin:14px 0;
  background:var(--glass-flat);border:var(--border-glass);border-top-color:var(--border-glass-top);
  border-radius:var(--r-lg);overflow:hidden}
.wk-section th{text-align:left;font:500 var(--text-xs)/1 var(--font-display);letter-spacing:.5px;text-transform:uppercase;
  color:var(--txt3);padding:12px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.08)}
.wk-section td{padding:11px 14px;font:400 var(--text-sm)/1.5 var(--font);color:var(--txt2);
  border-bottom:1px solid rgba(255,255,255,.04)}
.wk-section tr:last-child td{border-bottom:none}

/* Loading + empty states */
.wk-loading{padding:80px 20px;text-align:center;color:var(--txt3);font:500 var(--text-sm)/1.5 var(--font)}
.wk-empty{padding:60px 20px;text-align:center;color:var(--txt3);font:500 var(--text-sm)/1.5 var(--font);
  background:rgba(255,255,255,.025);border:1px dashed rgba(255,255,255,.08);border-radius:var(--r-xl);margin-top:var(--s2)}

/* Search results — glass dropdown */
.wk-search-results{position:absolute;top:54px;right:var(--s4);width:520px;max-height:60vh;overflow-y:auto;
  background:rgba(10,14,22,.72);border:var(--border-glass);border-top-color:var(--border-glass-top);
  border-radius:var(--r-lg);
  box-shadow:0 12px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10);
  padding:var(--s1);display:none;z-index:200}
.wk-search-results.open{display:block}
.wk-search-result{display:block;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--txt);
  font:500 var(--text-sm)/1.4 var(--font);transition:background .12s}
.wk-search-result:hover{background:rgba(255,255,255,.06)}
.wk-search-result-tab{font:500 var(--text-3xs)/1 var(--font-display);color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.wk-search-result-heading{font:500 var(--text-sm)/1.3 var(--font-display);color:var(--txt);margin-bottom:3px}
.wk-search-result-snippet{font:400 var(--text-xs)/1.4 var(--font);color:var(--txt3)}
.wk-search-empty{padding:20px;text-align:center;color:var(--txt3);font:500 var(--text-sm)/1.4 var(--font)}

/* ═══ STORAGE — File Browser, Header, Preview, Gallery ═══ */
/* REPLACED: the previous version of this section used private
   storage-local tokens (--t1/t2/t3/t4, --border, --glass, --glass2,
   --font, --bg, --r) that were deleted in B-1. Replaced with the
   resolved-literal version from storage.html's local style block. */

/* ═══ HEADER ═══ */
.stg-breadcrumb{display:flex;align-items:center;gap:2px;font:400 12px/1 var(--font-display);color:rgba(255,255,255,.3);flex:1;min-width:0;overflow:hidden}
.stg-bc-seg.active{color:#fff;font-weight:500}
.stg-bc-sep{color:rgba(255,255,255,.15);font-size:10px;margin:0 1px}
.stg-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
.stg-vt-group{display:flex;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden}
.stg-vt{width:36px;height:34px;border:none;background:transparent;color:rgba(255,255,255,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition: transform 10ms, opacity 10ms, background-color 10ms, color 10ms, box-shadow 10ms, border-color 10ms;border-right:1px solid rgba(255,255,255,.06)}
.stg-vt:last-child{border-right:none}
.stg-vt:hover{color:rgba(255,255,255,.6);background:rgba(255,255,255,.05)}
.stg-vt.active{color:var(--blue);background:rgba(41,151,255,.1)}
.stg-vt svg{width:16px;height:16px}
.stg-filter{padding:6px 12px;border:1px solid rgba(255,255,255,.06);border-radius:8px;background:rgba(255,255,255,.03);color:rgba(255,255,255,.6);font:400 12px/1 var(--font-display);outline:none;cursor:pointer}
.stg-filter option{background:#0a0e16;color:#fff}
.stg-search{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px}
.stg-search svg{flex-shrink:0;opacity:.3}
.stg-search input{border:none;background:transparent;color:#fff;font:400 12px/1 var(--font-display);outline:none;width:140px}
.stg-search input::placeholder{color:rgba(255,255,255,.15)}

/* ═══ BODY ═══ */
/* Layer 2 container — matches pipeline .ps-kanban-col glass. 10ms transitions, no blur. */
.stg-body{flex:1;display:flex;overflow:hidden;min-height:0;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  border-radius:12px;
  padding:10px;
  margin:12px 16px 16px}
.stg-content{flex:1;overflow:auto;position:relative}
.stg-preview{width:0;overflow:hidden;border-left:1px solid rgba(255,255,255,.06);transition:max-width 150ms;flex-shrink:0;background:rgba(255,255,255,.03)}
.stg-preview.open{flex:1;min-width:220px;max-width:400px;width:auto;overflow-y:auto}

/* ═══ LIST VIEW ═══ */
.stg-list table{width:100%;border-collapse:collapse}
.stg-list th{text-align:left;font:500 10px/1 var(--font-display);color:rgba(255,255,255,.15);text-transform:uppercase;letter-spacing:.05em;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;background:#0a0e16;z-index:2;cursor:pointer;white-space:nowrap;user-select:none}
.stg-list th:hover{color:rgba(255,255,255,.6)}
.stg-list th .sort-arrow{font-size:8px;margin-left:3px;opacity:.4}
.stg-list td{padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.02);font:400 12px/1.3 var(--font-display);color:rgba(255,255,255,.6);white-space:nowrap}
.stg-list tr{cursor:pointer;transition:background 10ms}
.stg-list tbody tr:hover{background:rgba(255,255,255,.03)}
.stg-list tbody tr.selected{background:rgba(41,151,255,.08)}
.stg-list .name-cell{color:#fff;font-weight:500;display:flex;align-items:center;gap:8px}
.stg-list .name-cell svg{width:16px;height:16px;flex-shrink:0}
.stg-list .expand-arrow{width:12px;color:rgba(255,255,255,.15);font-size:9px;text-align:center;flex-shrink:0;transition:transform 10ms}
.stg-list .expand-arrow.open{transform:rotate(90deg)}
.stg-list .child-row td{padding-left:48px;color:rgba(255,255,255,.3);font-size:11px}
.stg-list .child-row{background:rgba(255,255,255,.01)}
.stg-list .child-row:hover{background:rgba(255,255,255,.04)!important}
.stg-list .type-badge{display:inline-block;padding:2px 6px;border-radius:4px;font:500 9px/1 var(--font-display);text-transform:uppercase;letter-spacing:.03em}
.stg-list .type-badge.folder{background:rgba(41,151,255,.1);color:var(--blue)}
.stg-list .type-badge.image{background:rgba(191,90,242,.1);color:#bf5af2}
.stg-list .type-badge.video{background:rgba(255,69,58,.1);color:#ff453a}
.stg-list .type-badge.doc{background:rgba(255,159,10,.1);color:#ff9f0a}
.stg-list .type-badge.audio{background:rgba(52,211,153,.1);color:#34d399}
.stg-list .type-badge.other{background:rgba(255,255,255,.05);color:rgba(255,255,255,.3)}

/* ═══ COLUMN VIEW ═══ */
.stg-columns{display:flex;height:100%;overflow-x:auto}
.stg-col-pane{min-width:240px;max-width:280px;flex-shrink:0;border-right:1px solid rgba(255,255,255,.06);overflow-y:auto;height:100%}
.stg-col-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;transition:background 10ms;font:400 12px/1.3 var(--font-display);color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.02)}
.stg-col-item:hover{background:rgba(255,255,255,.05)}
.stg-col-item.selected{background:rgba(41,151,255,.1);color:#fff}
.stg-col-item svg{width:14px;height:14px;flex-shrink:0}
.stg-col-item .col-arrow{margin-left:auto;color:rgba(255,255,255,.15);font-size:10px}
.stg-col-item .col-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══ GRID VIEW ═══ */
.stg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;padding:16px}
.stg-grid-card{display:flex;flex-direction:column;align-items:center;padding:16px 8px 10px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition: transform 10ms, opacity 10ms, background-color 10ms, color 10ms, box-shadow 10ms, border-color 10ms;text-align:center}
.stg-grid-card:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.06)}
.stg-grid-card.selected{background:rgba(41,151,255,.08);border-color:rgba(41,151,255,.2)}
.stg-grid-card .card-icon{width:56px;height:56px;margin-bottom:8px;display:flex;align-items:center;justify-content:center}
.stg-grid-card .card-icon svg{width:48px;height:48px}
.stg-grid-card .card-icon img{width:56px;height:56px;border-radius:6px;object-fit:cover}
.stg-grid-card .card-name{font:500 11px/1.3 var(--font-display);color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stg-grid-card .card-size{font:400 10px/1 var(--font-display);color:rgba(255,255,255,.15);margin-top:3px}

/* ═══ GALLERY VIEW ═══ */
.stg-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;padding:16px}
.stg-gal-card{aspect-ratio:1;border-radius:10px;overflow:hidden;position:relative;cursor:pointer;border:2px solid transparent;transition: transform 10ms, opacity 10ms, background-color 10ms, color 10ms, box-shadow 10ms, border-color 10ms;background:rgba(255,255,255,.03)}
.stg-gal-card:hover{border-color:rgba(255,255,255,.15)}
.stg-gal-card.selected{border-color:var(--blue)}
.stg-gal-card img{width:100%;height:100%;object-fit:cover}
.stg-gal-card .gal-overlay{position:absolute;bottom:0;left:0;right:0;padding:6px 8px;background:linear-gradient(transparent,rgba(0,0,0,.7));font:500 10px/1.3 var(--font-display);color:#fff}
.stg-gal-card .gal-badge{position:absolute;top:6px;right:6px;padding:2px 6px;border-radius:4px;font:500 8px/1 var(--font-display);text-transform:uppercase;background:rgba(0,0,0,.6);color:#fff}
.stg-gal-card .gal-folder-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05)}
.stg-gal-card .gal-folder-icon svg{width:64px;height:64px;opacity:.3}

/* ═══ PREVIEW PANEL ═══ */
.stg-pv-inner{padding:20px 16px}
.stg-pv-thumb{width:100%;min-height:100px;border-radius:8px;overflow:hidden;margin-bottom:14px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center}
.stg-pv-thumb img{max-width:100%;max-height:320px;object-fit:contain}
.stg-pv-thumb svg{width:48px;height:48px;opacity:.15}
.stg-pv-name{font:500 14px/1.3 var(--font-display);color:#fff;margin-bottom:4px;word-break:break-word}
.stg-pv-type{font:400 11px/1 var(--font-display);color:rgba(255,255,255,.3);margin-bottom:16px}
.stg-pv-meta{display:flex;flex-direction:column;gap:0}
.stg-pv-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);font:400 11px/1.4 var(--font-display)}
.stg-pv-row:last-child{border:none}
.stg-pv-row .label{color:rgba(255,255,255,.3)}
.stg-pv-row .value{color:rgba(255,255,255,.6);text-align:right}
.stg-pv-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px 20px;text-align:center}
.stg-pv-empty svg{width:40px;height:40px;opacity:.08;margin-bottom:12px}
.stg-pv-empty p{font:400 12px/1.4 var(--font-display);color:rgba(255,255,255,.15)}

/* ═══ INFO BAR ═══ */
.stg-infobar{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;border-top:1px solid rgba(255,255,255,.06);font:400 11px/1 var(--font-display);color:rgba(255,255,255,.3);flex-shrink:0;background:rgba(255,255,255,.03)}

/* ═══ EMPTY / LOADING ═══ */
.stg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px;text-align:center}
.stg-empty svg{width:48px;height:48px;opacity:.08;margin-bottom:12px}
.stg-empty h3{font:500 15px/1 var(--font-display);color:rgba(255,255,255,.3);margin-bottom:6px}
.stg-empty p{font:400 12px/1.4 var(--font-display);color:rgba(255,255,255,.15)}
.stg-loading{display:flex;align-items:center;justify-content:center;height:100%;padding:40px}

/* ═══ TEAM — Health Hero, Payout, Reports, Assignment Board ═══ */
/* ── Personal Health Hero ── */
/* ── Teammate Cards ── */
/* ── Team mode toggle (Dashboard / Pipeline) ── */
/* Match Studio status-island quality exactly */
.tm-mode-btn.active{background:linear-gradient(135deg,rgba(41,151,255,.2) 0%,rgba(41,151,255,.1) 100%);
  color:#fff;box-shadow:0 2px 8px rgba(41,151,255,.15),inset 0 1px 0 rgba(255,255,255,.08);
  border:1px solid rgba(41,151,255,.2)}
.tm-mode-btn:hover:not(.active){color:rgba(255,255,255,.7);background:rgba(255,255,255,.04)}
/* Sub-tabs inside dashboard */
.tm-sub-tab.active{color:#fff;background:rgba(255,255,255,.06)}
.tm-sub-tab:hover:not(.active){color:rgba(255,255,255,.65)}
/* Project Pipeline board — matches Studio pipeline exactly */
.tm-team-pill.active{background:rgba(41,151,255,.15);color:#fff;border-color:rgba(41,151,255,.25)}
.tm-team-pill:hover:not(.active){background:rgba(255,255,255,.04);color:rgba(255,255,255,.7)}
/* Assignment board */
.tm-assign-col.drag-over{border-color:rgba(41,151,255,.4);background:rgba(41,151,255,.04)}
.tm-person-card.dragging{opacity:.4}
.tm-role-badge.editor{background:rgba(41,151,255,.15);color:#2997ff}
.tm-role-badge.client{background:rgba(48,209,88,.15);color:#30d158}
.tm-role-badge.trial{background:rgba(255,159,10,.15);color:#ff9f0a}
/* Create team button */
/* Context menu for team delete */
.tm-ctx-item.danger{color:#ff453a}
.tm-ctx-item.danger:hover{background:rgba(255,69,58,.1)}
/* ── Payout Explainer ── */
/* ── Payout Projection Cards ── */
.po-tier-badge.active{background:rgba(48,209,88,.15);color:#30d158;border:1px solid rgba(48,209,88,.2)}
.po-tier-badge.inactive{background:rgba(255,255,255,.03);color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.04)}
/* ── Payout History ── */
.po-hist-status.paid{background:rgba(48,209,88,.15);color:#30d158}
.po-hist-status.failed{background:rgba(255,69,58,.15);color:#ff453a}
/* ── Reports ── */
.rpt-tab.active{color:#fff;background:rgba(255,255,255,.06)}
.rpt-tab:hover:not(.active){color:rgba(255,255,255,.65)}

/* ── Team mobile breakpoint ── */
/* BUG FIX: these rules were previously UNWRAPPED (no @media query),
   causing the team pipe board to render as a single vertical column
   on ALL viewports. Now correctly scoped to <=768px. */
@media(max-width:768px){
  .tm-panel{padding:8px}
  .tm-assign-board{flex-direction:column;padding:8px}
  .tm-assign-col{min-width:0}
  .page-head{flex-wrap:wrap}
  .po-exp-grid{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════
   TRIAL PAGE
   Used by public/trial.html — standalone trial workspace with
   header, macro step rail, step content panels, FrameLab promo,
   result panel, countdown timer, loading + error states.
   ═══════════════════════════════ */

@keyframes cb-offer-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

/* ── Header ── */
.trial-header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.3);flex-shrink:0;min-height:60px}
.trial-logo{height:28px;display:flex;align-items:center}
.trial-logo svg{height:28px;width:auto}
.trial-badge{font:500 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:5px 12px}

/* ── Macro Step Rail ── */
.trial-rail{display:flex;align-items:center;justify-content:center;padding:20px 28px 0;gap:0;flex-shrink:0}
.trial-step{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.trial-step-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:500 13px/1 var(--font);flex-shrink:0;transition: transform 150ms ease, opacity 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);color:rgba(255,255,255,.35)}
.trial-step-label{font:500 13px/1 var(--font);color:rgba(255,255,255,.3);white-space:nowrap;
  transition:color 150ms ease}
.trial-step-wire{width:56px;height:1px;background:rgba(255,255,255,.08);margin:0 4px;flex-shrink:0;
  transition:background 300ms ease;position:relative}
.trial-step-wire.done{background:rgba(255,255,255,.25)}
.trial-step.active .trial-step-num{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff}
.trial-step.active .trial-step-label{color:#fff}
.trial-step.done .trial-step-num{background:linear-gradient(135deg,rgba(100,210,120,.25) 0%,rgba(60,180,90,.15) 100%);
  border-color:rgba(100,210,120,.4);color:#6fd68a}
.trial-step.done .trial-step-label{color:rgba(255,255,255,.5)}

/* ── Sub-label ── */
.trial-sub{text-align:center;padding:8px 28px 0;
  font:400 13px/1.4 var(--font);color:rgba(255,255,255,.3);
  flex-shrink:0;min-height:28px;transition:opacity 200ms}

/* ── Main iframe area ── */
.trial-body{flex:1;overflow:hidden;position:relative;padding:16px 0 0}

/* cb-panel-in keyframe shared in design-system.css */
.trial-panel{position:absolute;inset:0;display:none;flex-direction:column;animation:cb-panel-in 200ms ease}
.trial-panel.active{display:flex}
.trial-panel iframe{width:100%;flex:1;border:none;background:transparent;display:block;min-height:0}

/* ── Step 3: FrameLab promo (NOTE: these .framelab-* classes are
   trial-page-specific, distinct from public/framelab/index.html) ── */
.framelab-wrap{flex:1;overflow-y:auto;padding:24px 28px 40px;
  display:flex;flex-direction:column;align-items:center;gap:24px}
.framelab-hero{text-align:center;max-width:520px}
.framelab-icon{width:64px;height:64px;margin:0 auto 20px;
  background:linear-gradient(135deg,rgba(41,151,255,.2) 0%,rgba(41,151,255,.08) 100%);
  border:1px solid rgba(41,151,255,.25);border-radius:18px;
  display:flex;align-items:center;justify-content:center}
.framelab-title{font:500 26px/1.2 var(--font);color:var(--txt);margin:0 0 12px}
.framelab-sub{font:400 15px/1.6 var(--font);color:rgba(255,255,255,.5);margin:0}
.framelab-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:680px}
@media(max-width:600px){.framelab-cards{grid-template-columns:1fr}}
.framelab-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:18px 16px;text-align:center}
.framelab-card-icon{width:36px;height:36px;margin:0 auto 12px;
  background:rgba(255,255,255,.06);border-radius:10px;
  display:flex;align-items:center;justify-content:center}
.framelab-card-title{font:500 13px/1.3 var(--font);color:var(--txt);margin-bottom:6px}
.framelab-card-desc{font:400 12px/1.5 var(--font);color:rgba(255,255,255,.4)}

.framelab-cal{width:100%;max-width:680px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;overflow:hidden}
.framelab-cal-head{padding:20px 24px 0;display:flex;align-items:center;gap:14px}
.framelab-cal-dot{width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,#2997ff,#5ec4ff);flex-shrink:0}
.framelab-cal-title{font:500 15px/1 var(--font);color:var(--txt)}
.framelab-cal-sub{font:400 12px/1 var(--font);color:rgba(255,255,255,.4);margin-top:3px}
.framelab-cal-embed{padding:16px;min-height:360px}
.framelab-cal-embed iframe{width:100%;height:360px;border:none;border-radius:12px}

/* ── Result Panel ── */
.result-panel{position:absolute;inset:0;z-index:20;
  background:transparent;display:none;
  flex-direction:column;align-items:center;justify-content:flex-start;
  overflow-y:auto;padding:40px 24px 60px;animation:cb-panel-in 300ms ease}
.result-panel.active{display:flex}
.result-inner{width:100%;max-width:540px;display:flex;flex-direction:column;gap:20px}

.result-success-ring{width:72px;height:72px;margin:0 auto 4px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(100,210,120,.25),rgba(60,180,90,.12));
  border:1.5px solid rgba(100,210,120,.35)}

.result-download{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:16px}
.result-download-label{font:500 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.result-download-title{font:500 20px/1.2 var(--font);color:var(--txt)}
.result-download-meta{font:400 13px/1 var(--font);color:rgba(255,255,255,.4)}

.result-offer{background:linear-gradient(135deg,rgba(41,151,255,.12) 0%,rgba(41,80,180,.08) 100%);
  border:1px solid rgba(41,151,255,.2);border-radius:20px;padding:24px;
  display:flex;flex-direction:column;gap:14px}
.result-offer-eyebrow{display:flex;align-items:center;gap:8px;
  font:500 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:rgba(41,151,255,.8)}
.result-offer-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#2997ff;animation:cb-offer-pulse 1.8s ease infinite}
.result-offer-title{font:500 22px/1.2 var(--font);color:var(--txt)}
.result-offer-desc{font:400 14px/1.6 var(--font);color:rgba(255,255,255,.55)}

/* Countdown timer */
.offer-timer{display:flex;gap:10px;align-items:center}
.timer-block{display:flex;flex-direction:column;align-items:center;gap:4px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:10px 14px;min-width:52px}
.timer-num{font:500 22px/1 var(--font);color:#fff;font-variant-numeric:tabular-nums}
.timer-lbl{font:500 9px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.timer-sep{font:500 20px/1 var(--font);color:rgba(255,255,255,.2);margin-bottom:14px}

/* Note: trial.html's .spinner / #loadWrap / .load-msg / #errorWrap /
   .error-title / .error-sub remain page-local because their styles
   collide with other pages' versions of the same class names with
   different dimensions. See trial.html's \3c style> block. */

/* ═══════════════════════════════
   FRAMELAB / PIPELINE PAGE — additions
   Absorbed from public/pipeline.html local \3c style> block.
   Most .pipe-* / .psn-* / .pcr-* / .pc-* / .kanban / .ctx-* / .studio-dock / .sd-*
   classes are already defined in design-system.css elsewhere; this
   section only holds the pieces that were still page-local.
   ═══════════════════════════════ */

/* Recording countdown keyframe (was page-local; .rec-countdown.warn
   references it globally from design-system.css line ~7627). */
@keyframes pulse-red{from{opacity:1}to{opacity:.5}}

/* Pipeline controls row pill-group (tier/type filter pills) */
.pcr-pill.active{background:rgba(41,151,255,.18);color:#fff;
  border:1px solid rgba(41,151,255,.25);box-shadow:0 0 8px rgba(41,151,255,.12)}

/* FrameLab view toggle (kanban <-> list) — added in A-2 */
.pc-vt-btn{transition:background 10ms,color 10ms}
.pc-vt-btn.fl-vt-active{
  background:rgba(41,151,255,.18);color:#fff;
  border:1px solid rgba(41,151,255,.25);
  box-shadow:0 0 8px rgba(41,151,255,.12)
}

/* FrameLab list view table — Layer-2 glass header, no black bar */
#flListTable th{
  text-align:left;font:500 var(--text-xs)/1 var(--font-display);
  color:var(--txt3);text-transform:uppercase;letter-spacing:.08em;
  padding:var(--s1) var(--s2);border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;background:transparent;z-index:1;
  white-space:nowrap;cursor:pointer;user-select:none
}
#flListTable thead{background:var(--cb-glass-2-bg)}
#flListTable th:hover{color:var(--txt)}
#flListTable td{
  padding:var(--s1) var(--s2);border-bottom:1px solid rgba(255,255,255,.04);
  font:400 var(--text-sm)/var(--lh-tight) var(--font-display);color:var(--txt2)
}
#flListTable tbody tr{cursor:pointer;transition:background 10ms}
#flListTable tbody tr:hover{background:rgba(255,255,255,.03)}
#flListTable .fl-name-cell{color:#fff;font-weight:500}
@media(max-width:640px){
  #flListTable th:nth-child(n+5),
  #flListTable td:nth-child(n+5){display:none}
}

/* ═══════════════════════════════
   ONBOARDING TESTS PAGE
   Used by public/onboarding-tests.html — standalone page (loaded
   directly, not via shell iframe). Body applies .bg-dark via class
   attribute for the navy gradient background.
   ═══════════════════════════════ */

.ot-wrap{max-width:820px;margin:0 auto}

/* Header */
.ot-header{text-align:center;margin-bottom:28px}
.ot-logo-ring{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  background:radial-gradient(circle,rgba(10,20,40,.95) 55%,rgba(20,40,80,.8) 100%);
  display:flex;align-items:center;justify-content:center;position:relative}
.ot-logo-ring::before{content:'';position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg,#2979ff,#00b0ff,#2979ff,#1565c0,#2979ff);
  animation:cb-ring-spin 3s linear infinite;z-index:-1}
.ot-logo-ring img{width:36px;height:36px;filter:brightness(10)}
.ot-eyebrow{font:500 10px/1 var(--font-display);color:#2997ff;letter-spacing:.22em;text-transform:uppercase;margin:0 0 6px}
.ot-content-studio{font:500 32px/1 var(--font-display);letter-spacing:-1px;color:#fff;margin:0 0 14px}
.ot-sep{width:44px;height:1px;margin:0 auto 14px;background:linear-gradient(90deg,transparent,rgba(41,151,255,.55),transparent)}
.ot-user-name{font:500 18px/1.1 var(--font-display);color:#fff;margin:0;min-height:20px}
.ot-user-role{display:inline-block;margin-top:6px;padding:5px 14px;border-radius:8px;font:500 10px/1 var(--font-display);letter-spacing:1px;text-transform:uppercase;
  background:rgba(41,151,255,.1);border:1px solid rgba(41,151,255,.3);color:#2997ff;
  box-shadow:0 0 18px rgba(41,151,255,.15)}
.ot-sub{font:500 12px/1.4 var(--font);color:rgba(255,255,255,.55);margin-top:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Overall progress card */
.ot-progress-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;
  padding:18px 22px;margin-bottom:24px;display:flex;align-items:center;gap:16px}
.ot-progress-info{flex:1}
.ot-progress-label{font:500 11px/1 var(--font);color:rgba(255,255,255,.4);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.ot-progress-text{font:500 16px/1.2 var(--font);color:#fff}
.ot-progress-pct{font:500 24px/1 var(--font);color:#2997ff}
.ot-progress-bar{height:6px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden;margin-top:10px}
.ot-progress-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#2997ff,#34c759);border-radius:3px;transition:transform .5s ease}

/* Test cards */
.ot-list{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.ot-card.passed{background:rgba(52,199,89,.04);border-color:rgba(52,199,89,.2)}
.ot-card.locked{opacity:.5}

.ot-check{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,255,255,.15);font-size:16px;color:rgba(255,255,255,.3)}
.ot-card.passed .ot-check{background:rgba(52,199,89,.2);border-color:rgba(52,199,89,.5);color:#34c759}

.ot-body{flex:1;min-width:0}
.ot-name{font:500 15px/1.2 var(--font);color:#fff;margin-bottom:4px}
.ot-desc{font:400 12px/1.5 var(--font);color:rgba(255,255,255,.45)}
.ot-meta{display:flex;gap:10px;margin-top:6px;font:500 10px/1 var(--font);color:rgba(255,255,255,.35)}
.ot-meta span{padding:3px 8px;border-radius:4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}

.ot-actions{display:flex;gap:8px;flex-shrink:0}
.ot-btn{padding:10px 16px;border-radius:8px;border:1px solid;font:500 12px/1 var(--font);cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition: transform .15s, opacity .15s, background-color .15s, color .15s, box-shadow .15s, border-color .15s}
.ot-btn-study{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.65)}
.ot-btn-study:hover{background:rgba(255,255,255,.08);color:#fff}
.ot-btn-test{background:rgba(41,151,255,.15);border-color:rgba(41,151,255,.35);color:#2997ff}
.ot-btn-test:hover{background:rgba(41,151,255,.25)}
.ot-card.passed .ot-btn-test{background:rgba(52,199,89,.1);border-color:rgba(52,199,89,.3);color:#34c759}
.ot-card.passed .ot-btn-test:hover{background:rgba(52,199,89,.18)}

/* Footer actions */
.ot-footer{text-align:center;padding:20px 0}
.ot-back{font:500 12px/1 var(--font);color:rgba(255,255,255,.4);text-decoration:none;padding:10px 20px;border-radius:8px;
  border:1px solid rgba(255,255,255,.08);transition: transform .15s, opacity .15s, background-color .15s, color .15s, box-shadow .15s, border-color .15s}
.ot-back:hover{background:rgba(255,255,255,.05);color:#fff}

.ot-complete-banner{background:linear-gradient(135deg,rgba(52,199,89,.1),rgba(41,151,255,.08));
  border:1px solid rgba(52,199,89,.3);border-radius:14px;padding:22px 26px;margin-bottom:24px;text-align:center}
.ot-complete-icon{font-size:36px;margin-bottom:8px}
.ot-complete-title{font:500 18px/1.2 var(--font);color:#34c759;margin-bottom:6px}
.ot-complete-msg{font:500 13px/1.5 var(--font);color:rgba(255,255,255,.7);margin-bottom:14px}
.ot-complete-btn{padding:12px 28px;border-radius:10px;background:#34c759;border:none;color:#000;
  font:500 13px/1 var(--font);cursor:pointer;text-decoration:none;display:inline-block}
.ot-complete-btn:hover{background:#2ea84d}

.ot-loading{text-align:center;padding:80px 20px;color:rgba(255,255,255,.4);font:500 13px/1 var(--font)}

@media(max-width:640px){
  .ot-wrap .ot-sub{white-space:normal}
  .ot-card{flex-direction:column;align-items:flex-start}
  .ot-actions{width:100%}
  .ot-actions a{flex:1;justify-content:center}
}

/* ═══════════════════════════════
   LAUNCHER PAGE
   Used by public/launcher.html — standalone app chooser for
   admins/owners (KB vs Content Portal).
   ═══════════════════════════════ */

.launcher-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:32px;flex-direction:column;gap:40px}

/* Logo block (uses cb-ring-spin shared keyframe) */
.launcher-logo{position:relative;width:72px;height:72px;margin:0 auto}
.launcher-logo::before{content:'';position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg,#2979ff,#00b0ff,#2979ff,#1565c0,#2979ff);
  animation:cb-ring-spin 3s linear infinite}
.launcher-logo::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(10,20,40,.95) 55%,rgba(20,40,80,.8) 100%)}
.launcher-logo img{position:absolute;inset:0;margin:auto;width:40px;height:40px;z-index:1;filter:brightness(10)}
.launcher-title{font-size:22px;font-weight:500;color:#f5f5f7;text-align:center;letter-spacing:-.4px;margin-top:12px}
.launcher-sub{font-size:12px;font-weight:500;color:rgba(255,255,255,.35);text-align:center;letter-spacing:1.5px;text-transform:uppercase;margin-top:4px}

/* Card grid — bigger, glass app-icon feel */
.launcher-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:760px;width:100%}

/* Glass app-icon cards — premium iOS/Mac feel */
.launcher-card{
  border-radius:36px;padding:56px 32px 40px;text-align:center;
  cursor:pointer;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s,border-color .25s,background .25s;
  text-decoration:none;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.04) 40%,rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.12);
  border-top-color:rgba(255,255,255,.22);
  box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12);
  }

/* Top rim light */
.launcher-card::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2) 20%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.2) 80%,transparent);
  transition:opacity .25s}

/* Ambient glow */
.launcher-card::after{content:'';position:absolute;top:-40%;left:-20%;right:-20%;height:80%;border-radius:50%;
  opacity:0;transition:opacity .4s;pointer-events:none}
.launcher-card.kb::after{background:radial-gradient(ellipse,rgba(255,159,10,.08),transparent 70%)}
.launcher-card.portal::after{background:radial-gradient(ellipse,rgba(41,151,255,.08),transparent 70%)}

.launcher-card:hover{transform:translateY(-4px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 40px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.1)}
.launcher-card:hover::before{opacity:1}
.launcher-card:hover::after{opacity:1}
.launcher-card:active{transform:translateY(-1px);transition-duration:.1s}

/* Glass app-icon — big, square-rounded, chrome-ish */
.launcher-icon{
  width:156px;height:156px;border-radius:34px;margin:0 auto 28px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 40%,rgba(255,255,255,.025) 100%);
  border:1px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.32);
  box-shadow:
    0 12px 40px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.06)}

/* Icon top rim highlight */
.launcher-icon::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4) 30%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.4) 70%,transparent);border-radius:2px}

/* Ambient radial reflection on hover */
.launcher-icon::after{content:'';position:absolute;top:-30%;left:-10%;right:-10%;height:60%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.08),transparent 65%);
  opacity:0;transition:opacity .3s;pointer-events:none;border-radius:50%}

.launcher-card:hover .launcher-icon::after{opacity:1}
.launcher-card:hover .launcher-icon{
  border-top-color:rgba(255,255,255,.4);
  box-shadow:0 16px 48px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.08)}

/* Bug SVG inside icon */
.launcher-icon img{width:86px;height:86px;filter:brightness(10) drop-shadow(0 2px 8px rgba(41,151,255,.25));transition:filter .25s,transform .25s;position:relative;z-index:1}
.launcher-card:hover .launcher-icon img{filter:brightness(10) drop-shadow(0 4px 14px rgba(41,151,255,.4));transform:scale(1.04)}

.launcher-card-title{font:500 clamp(18px,1.6vw,22px)/1.15 var(--font-display);color:#fff;margin-bottom:10px;letter-spacing:-.025em}
.launcher-card-desc{font:400 13px/1.55 var(--font);color:rgba(255,255,255,.5);max-width:240px;margin:0 auto}

@media(max-width:720px){
  .launcher-grid{grid-template-columns:1fr;max-width:360px;gap:28px}
  .launcher-card{padding:44px 24px 32px}
  .launcher-icon{width:128px;height:128px;border-radius:28px}
  .launcher-icon img{width:70px;height:70px}
}
@media(max-width:480px){
  .launcher-icon{width:112px;height:112px;border-radius:24px}
  .launcher-icon img{width:60px;height:60px}
}

/* ═══════════════════════════════
   LOGIN PAGE — brand lockup
   Used by public/login.html. The 4 .cs-brand-* classes render the
   "Content Bug Video Editing / Content Studio / LOGIN" typography
   stack underneath the animated bug logo ring. Kept as !important
   to guarantee layout stability against any future .login-card
   inner-element style that might try to restyle them.
   ═══════════════════════════════ */

.cs-brand-eyebrow{font:500 8.8px/1 var(--font-display)!important;color:#2997ff!important;letter-spacing:.22em!important;text-transform:uppercase;text-align:center;margin:18px 0 10px!important;white-space:nowrap!important}
.cs-brand-title{font:500 35px/1 var(--font-display)!important;letter-spacing:-1.2px!important;text-align:center;margin:0 0 18px!important;color:#fff!important;text-transform:none!important;white-space:nowrap!important}
.cs-brand-divider{width:70%;height:1px;background:rgba(255,255,255,.12);margin:0 auto 14px!important}
.cs-brand-label{font:500 13px/1 var(--font-display)!important;color:rgba(255,255,255,.65)!important;letter-spacing:.18em!important;text-transform:uppercase;text-align:center;margin:0 0 8px!important}

/* ═══════════════════════════════
   CREATIVE REVIEW PAGE
   Used by public/framelab/creative-review.html — standalone page
   accessed via direct URL + token. 2-column layout (framelab
   iframe + Jitsi call panel) with sync indicator + loading/error.
   ═══════════════════════════════ */

/* Top bar */
/* cb-live-pulse keyframe shared in design-system.css SHARED ANIMATIONS */

/* Main split layout */
@media(max-width:900px){
  .cr-main{grid-template-columns:1fr;grid-template-rows:1fr 260px}
}

/* FrameLab panel (left) */

/* Call panel (right) */

/* Sync indicator overlay (uses cb-fade-in-up + cb-live-pulse from SHARED ANIMATIONS) */

/* Collapsed sidebar toggle (mobile) */
@media(max-width:900px){.cr-toggle-call{display:flex}}

/* ═══════════════════════════════
   HELP PAGE — Base components
   Used by public/help.html. design-system.css already has
   .help-card-guided, .help-guided-badge, .help-visual, .help-feature*,
   .help-table, .help-section h2 svg, .help-card svg, .help-detail h3/
   h4/p/ul/ol/li/em/b elsewhere (line ~8926+). This section adds the
   BASE classes that were still page-local.
   ═══════════════════════════════ */
.help-detail.open{display:block}

/* ═══════════════════════════════
   TRIAL WIZARD PAGE
   Used by public/trial-wizard.html — 4-step trial upload wizard.
   ═══════════════════════════════ */

.tw-step{display:none;flex-direction:column;align-items:center;animation:cb-fade-up .3s cubic-bezier(.16,1,.3,1)}
.tw-step.active{display:flex}
.tw-step iframe{width:100%;min-height:500px;border:none}
.tw-title{font:500 24px/1.2 var(--font);text-align:center;margin-bottom:8px;width:100%;max-width:580px}
.tw-sub{font:400 14px/1.5 var(--font);color:rgba(255,255,255,.4);text-align:center;margin-bottom:28px;width:100%;max-width:580px}
.tw-drop{border:2px dashed rgba(255,255,255,.1);border-radius:16px;padding:40px 20px;text-align:center;cursor:pointer;transition:border-color .1s,background .1s;width:100%;max-width:580px}
.tw-drop:hover,.tw-drop.dragover{border-color:rgba(41,151,255,.3);background:rgba(41,151,255,.03)}
.tw-drop-title{font:500 15px/1.3 var(--font);color:rgba(255,255,255,.6);margin-top:12px}
.tw-drop-sub{font:400 12px/1.3 var(--font);color:rgba(255,255,255,.25);margin-top:4px}
.tw-file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:16px;width:100%;max-width:580px}
.tw-fcard{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;position:relative}
.tw-fcard video{width:100%;aspect-ratio:9/16;max-height:180px;object-fit:cover;display:block}
.tw-fcard-info{padding:8px 10px}
.tw-fcard-name{font:500 11px/1.2 var(--font);color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-fcard-meta{font:400 10px/1 var(--font);color:rgba(255,255,255,.3);margin-top:3px}
.tw-fcard-rm{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);border:none;color:rgba(255,255,255,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}
.tw-link-row{display:flex;gap:8px;margin-top:12px;width:100%;max-width:580px}
.tw-chip{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;margin-top:8px;font:400 12px/1.3 var(--font);color:rgba(255,255,255,.5);max-width:580px;width:100%}
.tw-chip-rm{background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;font-size:16px;padding:0 4px}
.tw-summary{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px;width:100%;max-width:580px}
.tw-summary-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04);font:400 13px/1.4 var(--font)}
.tw-summary-row:last-child{border:none}
.tw-summary-lbl{color:rgba(255,255,255,.4)}
.tw-summary-val{color:#fff;text-align:right;max-width:60%}
.tw-cal{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;margin-top:20px;width:100%;max-width:580px}
.tw-cal-head{padding:16px 20px;display:flex;align-items:center;gap:12px}
.tw-cal-dot{width:8px;height:8px;border-radius:50%;background:#2997ff}
.tw-cal-title{font:500 14px/1 var(--font)}
.tw-cal iframe{width:100%;height:480px;border:none}
#twLoad{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#060a14;z-index:100}

/* ═══════════════════════════════
   REQUEST PAGE — Premium Tiers
   Used by public/request.html step 4 (Editing Tier selection).
   3-column premium tier card grid with gradient halos.
   ═══════════════════════════════ */

.premium-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;align-items:stretch;width:100%;max-width:100%}
@media(max-width:760px){.premium-tiers{grid-template-columns:1fr}}
.ptier{position:relative;border-radius:18px;padding:22px 20px 18px;cursor:pointer;
  background:rgba(8,14,28,.7);border:1px solid rgba(255,255,255,.08);overflow:hidden;
  transition:transform .25s cubic-bezier(.25,.46,.45,.94),border-color .2s,box-shadow .25s;
  font-family:var(--font-display);
  display:flex;flex-direction:column;min-height:340px}
.ptier::before{content:'';position:absolute;inset:0;border-radius:18px;opacity:.12;pointer-events:none;transition:opacity .25s}
.ptier[data-tier="1"]::before{background:radial-gradient(ellipse at top,rgba(255,255,255,.35),transparent 70%)}
.ptier[data-tier="2"]::before{background:radial-gradient(ellipse at top,rgba(90,200,250,.45),transparent 70%)}
.ptier[data-tier="3"]::before{background:radial-gradient(ellipse at top,rgba(191,90,242,.45),transparent 70%)}
.ptier:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.ptier:hover::before{opacity:.20}
.ptier[data-tier="1"].selected{border-color:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(255,255,255,.55),0 12px 48px rgba(255,255,255,.10)}
.ptier[data-tier="2"].selected{border-color:rgba(90,200,250,.65);box-shadow:0 0 0 1px rgba(90,200,250,.65),0 12px 48px rgba(90,200,250,.18)}
.ptier[data-tier="3"].selected{border-color:rgba(191,90,242,.65);box-shadow:0 0 0 1px rgba(191,90,242,.65),0 12px 48px rgba(191,90,242,.18)}
.ptier.selected::before{opacity:.22}
.ptier-badge{display:inline-block;font:500 9px/1 var(--font-display);letter-spacing:1.2px;text-transform:uppercase;
  padding:5px 9px;border-radius:5px;margin-bottom:14px;align-self:flex-start}
.ptier[data-tier="1"] .ptier-badge{background:rgba(255,255,255,.12);color:#fff}
.ptier[data-tier="2"] .ptier-badge{background:rgba(90,200,250,.15);color:#5ac8fa}
.ptier[data-tier="3"] .ptier-badge{background:rgba(191,90,242,.15);color:#bf5af2}
.ptier[data-tier="1"].selected .ptier-badge{background:#fff;color:#000}
.ptier[data-tier="2"].selected .ptier-badge{background:#5ac8fa;color:#000}
.ptier[data-tier="3"].selected .ptier-badge{background:#bf5af2;color:#fff}
.ptier-features{list-style:none;padding:0;margin:0 0 16px 0;display:flex;flex-direction:column;gap:9px}
.ptier-features li{font:500 13px/1.4 var(--font-display);color:rgba(255,255,255,.82);
  display:flex;align-items:flex-start;gap:9px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptier-features li::before{content:'\2713';width:14px;height:14px;border-radius:50%;flex-shrink:0;margin-top:2px;
  display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:#000;font-weight:500}
.ptier[data-tier="1"] .ptier-features li::before{background:rgba(255,255,255,.92)}
.ptier[data-tier="2"] .ptier-features li::before{background:rgba(90,200,250,.95);color:#000}
.ptier[data-tier="3"] .ptier-features li::before{background:rgba(191,90,242,.95);color:#fff}
.ptier-time{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between}
.ptier-time-label{font:500 9px/1 var(--font-display);letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.40)}
.ptier-time-value{font:500 13px/1 var(--font-display);color:#fff}
.ptier-format{font:500 9px/1 var(--font-display);letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:8px;align-self:flex-start}
.ptier-lf-note{
  max-width:680px;margin:18px auto 0;padding:10px 14px;
  background:rgba(255,159,10,.06);border:1px solid rgba(255,159,10,.22);
  border-radius:10px;
  font:500 12px/1.4 var(--font-display);
  color:rgba(255,210,150,.90);text-align:center;
}
.ptier-lf-note strong{color:#ffb74d;font-weight:500}

/* ═══ FAQ — Title, Filters, Items ═══ */
.faq-wrap{max-width:720px;margin:0 auto;padding:24px 28px 60px}
.faq-titlebar{padding:20px 0 16px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:20px}
.faq-title{font:500 20px/1.2 var(--font-display);color:#fff;letter-spacing:-.02em}
.faq-sub{font:400 13px/1.4 var(--font-display);color:rgba(255,255,255,.4);margin-top:4px}
/* Filter pills */
.faq-filters{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.faq-filter{padding:6px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:rgba(255,255,255,.5);font:500 12px/1 var(--font-display);cursor:pointer;transition: transform 10ms, opacity 10ms, background-color 10ms, color 10ms, box-shadow 10ms, border-color 10ms}
.faq-filter:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.7)}
.faq-filter.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.25);color:#2997ff}
/* Search */
.faq-search{width:100%;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#fff;font:400 13px/1 var(--font-display);outline:none;margin-bottom:20px;transition:border-color 10ms}
.faq-search:focus{border-color:rgba(41,151,255,.3)}
.faq-search::placeholder{color:rgba(255,255,255,.25)}
/* Accordion */
.faq-section-title{font:500 11px/1 var(--font-display);color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.06em;padding:16px 0 8px}
.faq-empty{text-align:center;padding:40px 0;color:rgba(255,255,255,.25);font-size:14px}

/* ═══ HEALTH PAGE ═══ */
.hd-tabs{display:flex;gap:6px;padding:var(--s1) var(--card-lg);flex-shrink:0}
.hd-tab.active{background:rgba(255,255,255,.1);color:var(--txt)}
.hd-body{flex:1;overflow-y:auto;padding:var(--s2) var(--card-lg)}
.hd-pipeline{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;min-height:calc(100vh - 120px)}
.hd-card{display:flex;gap:12px;padding:10px 12px;border-radius:var(--r-lg);background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);transition: transform 10ms, opacity 10ms, background-color 10ms, color 10ms, box-shadow 10ms, border-color 10ms;cursor:pointer}
.hd-card:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.hd-av{width:48px;height:48px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font:500 16px/1 var(--font);color:#fff;overflow:hidden}
.hd-name{font:500 13px/1.2 var(--font);color:var(--txt);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.hd-pills{display:flex;gap:3px;flex-wrap:wrap}
.hd-pill{padding:2px 6px;border-radius:var(--r-pill);font:500 9px/1.2 var(--font);background:rgba(255,255,255,.06);color:var(--txt3)}
.hd-bars{flex:1;min-width:100px;display:flex;flex-direction:column;gap:3px;justify-content:center}
.hd-bar-row{display:flex;align-items:center;gap:6px}
.hd-bar-label{font:400 9px/1 var(--font);color:var(--txt4);width:56px;text-align:right}
.hd-bar-track{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.06)}
.hd-bar-fill{height:100%;border-radius:2px;transition:transform .3s}
.hd-bar-val{font:500 9px/1 var(--font);width:28px;text-align:right}
.hd-grade-circle{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 16px/1 var(--font);flex-shrink:0;border:2px solid}
.hd-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:var(--s2)}
.hd-report-card{padding:var(--card-md);border-radius:var(--r-xl);background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
.hd-panel-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;display:none;justify-content:flex-end}
.hd-panel-bg.open{display:flex}
.hd-panel{width:min(420px,90vw);background:var(--bg-dark,#060c1a);border-left:1px solid rgba(255,255,255,.08);overflow-y:auto;padding:var(--card-lg)}
@media(max-width:768px){.hd-pipeline{flex-direction:column}.hd-card{flex-wrap:wrap}}

/* ═══ SHELL — Sidebar, Notifications, Chat Bubble, DM Rail ═══ */
#pageFrame,.shell-frame{contain:strict}
/* Pre-loaded iframe system — all frames stacked, only active one visible */
.shell-frame{position:absolute;inset:0;width:100%;height:100%;border:none;background:transparent;display:none}
.shell-frame.active{display:block}
/* ── Toast enhancements ── */
.toast-content{display:flex;align-items:center;gap:10px}
.toast-msg{flex:1;font:500 13px/1.3 var(--font-display)}
/* ── Notification items ── */
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05);transition:background 10ms}
.notif-empty{padding:24px;text-align:center;color:var(--txt4);font:400 12px/1.4 var(--font-display)}
body[data-role="editor"] .sb-tab.staff-only,
body[data-role="admin"] .sb-tab.staff-only,
body[data-role="owner"] .sb-tab.staff-only{display:block}
.sb-nav-dot{width:6px;height:6px;border-radius:50%;background:#34d399;margin-left:auto;flex-shrink:0}
/* ── Sidebar chat channel items ── */
.sb-ch-item.active{background:rgba(41,151,255,.08)}

/* ═══ FRAMELAB HOME — Project Table, Status Pills, Modal ═══ */
tbody tr.s{background:rgba(41,151,255,.06)}
.sp.queue{background:rgba(255,255,255,.06);color:var(--t3)}
.sp.active{background:rgba(41,151,255,.1);color:var(--blue)}
.sp.review{background:rgba(191,90,242,.1);color:#bf5af2}
.sp.revisions{background:rgba(255,159,10,.1);color:#ff9f0a}
.sp.approved{background:rgba(52,211,153,.1);color:var(--green)}
.pvd .ic{font-size:48px;text-align:center;margin-bottom:10px;opacity:.5}
.pvd .nm{font:500 17px/1.3 var(--font);margin-bottom:4px;text-align:center}
.pvd .sub{font:400 11px/1 var(--font);color:var(--t3);text-align:center;margin-bottom:18px}
.pvd .r{display:flex;justify-content:space-between;padding:6px 0;font:400 12px/1.4 var(--font);border-bottom:1px solid rgba(255,255,255,.04)}
.pvd .r:last-child{border:none}
.pvd .r .l{color:var(--t3)}
.pvd .r .v{color:var(--t2);text-align:right}
.pvd .btn{display:block;width:100%;margin-top:16px;padding:12px;border:1px solid rgba(41,151,255,.3);border-radius:10px;background:rgba(41,151,255,.08);color:var(--blue);font:500 13px/1 var(--font);cursor:pointer;text-align:center}
.pvd .btn:hover{background:rgba(41,151,255,.15)}
/* ═══ REQUEST WIZARD — Blueprint Selection (horizontal scroll rows) ═══ */
#bpSelectRow{width:100%;max-width:100%;overflow:hidden}
/* Blueprint cards — 9:16 aspect ratio like blueprint library */
.rq-bp-card{flex-shrink:0;width:120px;aspect-ratio:9/16;padding:0;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  cursor:pointer;scroll-snap-align:start;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  overflow:hidden;position:relative;
  transition:border-color 10ms,transform 10ms,background 10ms;}
.rq-bp-card:hover{border-color:rgba(255,255,255,.16);transform:translateY(-2px)}
.rq-bp-card.selected{border-color:var(--blue)!important;background:rgba(41,151,255,.08);
  box-shadow:0 0 16px rgba(41,151,255,.15),inset 0 0 0 1px rgba(41,151,255,.2)}
.rq-bp-card.selected:hover{border-color:var(--blue)!important}
.rq-bp-card:active{transform:scale(.97)}

/* Unified dissolving glass now applied directly as background + box-shadow on .dock-bubble and .pv-thread-float */

/* ═══ Thread input — match dock toolbox sizing ═══ */
.pv-thread-float .dk-send{width:32px;height:32px;border-radius:50%;
  background:var(--imsg);color:#fff;box-shadow:0 2px 8px rgba(11,132,254,.3)}
.pv-thread-float .dk-send svg{width:14px;height:14px}
.pv-thread-float .dk-send:hover{background:var(--imsg-dk);transform:scale(1.05)}
.pv-thread-float .chat-pill{min-height:36px}
.pv-thread-float .imsg-field{font-size:14px}
.pv-thread-float .ps-chat-plus{width:32px;height:32px;font-size:18px}

/* ═══ TOP-RIGHT EDITOR AVATAR ═══ */

/* ═══ SUBMIT DRAFT BUTTON (editors) ═══ */

/* ═══ THREAD PARTICIPANT AVATARS ═══ */
.th-participants .th-prt{width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);
  font:500 8px/22px var(--font);text-align:center;
  border:2px solid rgba(10,14,22,.8);
  margin-left:-6px;cursor:pointer;flex-shrink:0;overflow:hidden;
  background-size:cover;background-position:center;
  transition:transform 10ms,border-color 10ms}
.th-participants .th-prt:first-child{margin-left:0}
.th-participants .th-prt:hover{transform:scale(1.15);border-color:rgba(41,151,255,.3);z-index:2}
.th-participants .th-prt img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.th-participants .th-prt-more{background:rgba(255,255,255,.06);font:500 8px/22px var(--font);color:rgba(255,255,255,.4)}

/* ═══ MESSAGE REACTIONS (TAPBACK) ═══ */
/* Reaction bar — fits inside thread width, anchored to message right edge */
.th-reaction-bar .th-rb-btn{width:28px;height:28px;border:none;background:transparent;
  border-radius:50%;cursor:pointer;font-size:16px;line-height:28px;text-align:center;
  transition:background 10ms,transform 10ms}
.th-reaction-bar .th-rb-btn:hover{background:rgba(255,255,255,.08);transform:scale(1.15)}
.th-reaction-bar .th-rb-reply{width:auto;padding:0 8px;border-radius:10px;
  font:500 10px/28px var(--font);color:rgba(255,255,255,.5)}
.th-reaction-bar .th-rb-reply:hover{color:#fff;background:rgba(41,151,255,.15)}
/* Reactions row below message */
.th-reactions .th-rx{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;
  border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);
  font-size:14px;cursor:pointer;transition:background 10ms}
.th-reactions .th-rx:hover{background:rgba(255,255,255,.1)}
.th-reactions .th-rx-count{font:500 10px/1 var(--font);color:rgba(255,255,255,.5)}
.th-reactions .th-rx.mine{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.2)}

/* Reply quote in rendered message */
/* Reply input strip above compose area */
.th-reply-strip .th-rs-text{flex:1;font:400 11px/1.3 var(--font);color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-reply-strip .th-rs-close{background:none;border:none;color:rgba(255,255,255,.3);
  cursor:pointer;font-size:16px;padding:0;line-height:1}

/* ═══ HELP & TUTORIALS — guided walkthrough badges ═══ */

/* ═══ HELP — Visual UI diagrams ═══ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ═══ HELP — Feature grid + table ═══ */

/* ═══ HELP — Detail content styling ═══ */

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — comprehensive overrides for ≤640px and ≤480px
   Tablets: ≤1024px get reduced density. Phones get single-column.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  /* Tablets — reduce sidebar width, allow main content to breathe */
  .shell:not(:has(.app-dock-inner.collapsed)){ --dock-w: 180px; }
  .ac-section { padding:0 }
  .ac-sec-body { padding:16px 18px }
  .ac-profile { gap:14px }
  .ac-avatar { width:80px; height:80px }
}

@media (max-width:768px) {
  /* Phones landscape + small tablets */
  body { font-size:14px }
  .app-dock { padding:6px 0 6px 6px }
  .shell:not(:has(.app-dock-inner.collapsed)){ --dock-w: 72px; }
  .app-dock-inner .sb-bottom-expanded { display:none }
  .app-dock-inner .sb-bottom-collapsed { display:flex }
  /* Compact tiles with labels */
  .sb-nav-item { flex-direction:column; justify-content:center; align-items:center; padding:6px 4px; gap:3px; width:58px; height:auto; margin:2px auto; font-size:9px; font-weight:500 }
  .sb-nav-item .sb-nav-tile { width:42px!important; height:42px!important; border-radius:12px!important }
  .sb-nav-item .sb-nav-tile svg { width:24px!important; height:24px!important }
  /* Page shell */
  .page-shell { padding:0 }
  .page-head { padding:14px 16px 8px }
  .page-body { padding:0 }
  .page-inner { padding:8px 10px 16px }
  /* Pipeline kanban — stack vertical */
  .pipeline-card { width:100% !important }
  /* Filter/dropdown bars wrap */
  .pipe-filters,.kanban-filters { flex-wrap:wrap; gap:6px; padding:8px 12px }
  .pipe-filters select,.kanban-filters select { font-size:12px; padding:6px 8px }
  /* Account page */
  .ac-section { margin-bottom:14px }
  .ac-sec-body { padding:14px 16px }
  .ac-profile { flex-direction:column; align-items:flex-start; gap:14px }
  .ac-avatar { width:88px; height:88px; align-self:center }
  .ac-info { width:100%; text-align:center }
  .ac-info h3 { font-size:18px }
  .ac-form-row { flex-direction:column; gap:10px }
  .ac-method-grid { grid-template-columns:repeat(2,1fr) }
  .ac-stat-grid { grid-template-columns:1fr 1fr }
  /* Modals */
  .modal,.cb-modal { width:96vw !important; max-width:96vw !important }
  /* Wiki */
  .wk-wrap { padding:14px 14px 60px; gap:14px }
  .wk-toc { display:none }
  .wk-tabs { padding:0 14px; gap:0 }
  .wk-tab { padding:12px 12px; font-size:11px }
  .wk-tab-icon { font-size:13px }
  .wk-roles-bar { padding:12px 14px; flex-wrap:wrap }
  .wk-role-pill { padding:5px 10px; font-size:10px }
  .wk-section h2 { font-size:18px }
  .wk-hero-title { font-size:24px }
  /* Onboarding cards */
  .ob-wrap { padding:20px 14px 60px }
  .ob-card { padding:20px 18px }
  .ob-row { flex-direction:column; gap:10px }
  .ob-card-title { font-size:17px }
  .ob-step-pill { padding:8px 4px; font-size:9px }
  .ob-step-icon { font-size:14px }
  /* Premium tier cards in request wizard */
  .premium-tiers { grid-template-columns:1fr !important; gap:12px }
  .ptier { padding:20px 18px }
  .ptier-name { font-size:20px }
  /* Top bar */
  .top-bar { padding:8px 14px; height:auto; min-height:44px }
  .wk-search { width:100% !important; max-width:none; margin-left:0; margin-top:8px }
  /* FrameLab dock */
  .ps-thread { width:100%; max-height:50vh }
  /* Hide secondary helper labels on mobile */
  .wk-search-key,.hf-icon { display:none }
}

@media (max-width:480px) {
  /* Phones portrait — most aggressive */
  body { font-size:13px }
  .ob-wrap { padding:14px 10px 50px }
  .ob-card { padding:16px 14px; border-radius:14px }
  .ob-steps { gap:4px }
  .ob-step-pill { padding:6px 2px }
  .ob-step-pill .ob-step-icon { font-size:13px; margin-bottom:2px }
  .ob-step-pill { font-size:8px }
  .ob-card-title { font-size:16px }
  .ob-card-desc { font-size:11px }
  /* Hero titles smaller */
  .wk-hero-title { font-size:21px }
  .wk-hero-desc { font-size:12px }
  /* Buttons full width */
  .btn,.ob-btn { min-height:42px; padding:11px 16px }
  /* Pipeline cards */
  .pipeline-card { font-size:11px }
  .pipe-name { font-size:11px }
  /* Discord step */
  .ob-discord-option { padding:14px 16px !important }
  /* Toast & notifications */
  .toast-stack { left:8px; right:8px; bottom:8px; width:auto; max-width:none }
  .sb-notif-popup { left:8px; right:8px; top:60px; width:auto !important; max-width:none }
  /* Tier cards */
  .ptier { padding:18px 14px }
  .ptier-features { gap:8px }
  .ptier-features li { font-size:12px }
  /* Avatar editor modal */
  .av-editor { max-width:100vw; border-radius:0; margin:0 }
  .av-editor-canvas-wrap { aspect-ratio:1/1 }
}

/* Touch device tap targets — 44px minimum */
@media (hover:none) and (pointer:coarse) {
  button,.btn,.ob-btn,.wk-tab,.wk-role-pill,.sb-nav-item,a.btn,a.ob-btn { min-height:44px }
  .av-tool-btn { min-height:44px; padding:12px }
  .premium-tiers .ptier { -webkit-tap-highlight-color:rgba(41,151,255,.1) }
  /* Disable hover transforms on touch — they cause stuck states */
  .pipeline-card:hover,.ob-discord-option:hover,.ptier:hover,.support-card:hover { transform:none }
  /* Bigger close buttons */
  .modal-close,.cb-modal-close,.av-editor-close,.rv-ctx-close { min-width:32px; min-height:32px }
}

/* Prevent input zoom on iOS Safari (font-size:16px+ disables auto-zoom) */
@media (max-width:768px) {
  input[type="text"],input[type="email"],input[type="tel"],input[type="number"],
  input[type="date"],input[type="password"],input[type="search"],
  textarea,select,.ob-input,.ob-select,.ob-textarea,.form-input { font-size:16px !important }
}

/* ═══════════════════════════════
   ONBOARDING — STAFF WIZARD
   Used by onboarding-editor.html and onboarding-admin.html
   (byte-for-byte identical style blocks in both pages).
   ═══════════════════════════════ */

/* Payout method grid */
.wiz-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.wiz-method.selected{background:rgba(41,151,255,.10);border-color:rgba(41,151,255,.35)}
.wiz-method-name{font:500 13px/1 var(--font);color:var(--txt);margin-bottom:3px}
.wiz-method-hint{font:400 11px/1.3 var(--font);color:var(--txt3)}
.wiz-method-badge{position:absolute;top:8px;right:8px;font:500 8px/1 var(--font);letter-spacing:.5px;
  padding:3px 6px;border-radius:4px;background:rgba(52,199,89,.15);color:#34c759;text-transform:uppercase}

/* PIN inputs */
.wiz-pin-inputs{display:flex;gap:10px;justify-content:center;margin-bottom:6px}
.wiz-pin-box{width:52px;height:58px;text-align:center;font:500 22px/1 var(--font);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  color:var(--txt);outline:none;-moz-appearance:textfield}
.wiz-pin-box::-webkit-outer-spin-button,.wiz-pin-box::-webkit-inner-spin-button{-webkit-appearance:none}
.wiz-pin-box:focus{border-color:rgba(41,151,255,.35)}

/* Contract scroll */
.wiz-contract-scroll{max-height:260px;overflow-y:auto;padding:18px 20px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;
  font:400 12px/1.65 var(--font);color:rgba(255,255,255,.72);margin-bottom:14px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent;text-align:left}
.wiz-contract-scroll::-webkit-scrollbar{width:5px}
.wiz-contract-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.wiz-contract-scroll h3{font:500 14px/1.3 var(--font);color:var(--txt);margin:16px 0 8px}
.wiz-contract-scroll h3:first-child{margin-top:0}
.wiz-contract-scroll h4{font:500 12px/1.3 var(--font);color:rgba(255,255,255,.85);margin:12px 0 4px}
.wiz-contract-scroll p{margin-bottom:8px}
.wiz-contract-scroll ul{margin:6px 0 10px 18px}
.wiz-contract-scroll li{margin-bottom:3px}
.wiz-contract-scroll .c-highlight{background:rgba(41,151,255,.08);padding:2px 6px;border-radius:3px;color:var(--blue)}

/* Signature pad */
.wiz-sig-wrap{background:#fff;border-radius:12px;padding:8px;margin-bottom:8px;position:relative}
.wiz-sig-canvas{display:block;width:100%;height:120px;background:#fff;border-radius:8px;cursor:crosshair;touch-action:none}
.wiz-sig-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;font:500 12px/1 var(--font);color:rgba(0,0,0,.3)}
.wiz-sig-clear{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  color:var(--txt3);padding:7px 14px;border-radius:8px;font:500 11px/1 var(--font);cursor:pointer}
.wiz-sig-clear:hover{background:rgba(255,255,255,.06)}

/* ID verify result */
.wiz-match-result{padding:14px 16px;border-radius:12px;text-align:center;margin-top:10px}
.wiz-match-result.pass{background:rgba(52,199,89,.06);border:1px solid rgba(52,199,89,.25);color:#34c759}
.wiz-match-result.review,.wiz-match-result.pending{background:rgba(255,159,10,.06);border:1px solid rgba(255,159,10,.25);color:#ff9f0a}
.wiz-match-score{font:500 22px/1 var(--font);margin-bottom:4px}
.wiz-match-msg{font:500 11px/1.3 var(--font)}

/* Nav row inside card */
.wiz-nav{display:flex;gap:10px;justify-content:space-between;align-items:center;padding-top:16px}

/* Discord option cards */
.wiz-discord-option{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.08)!important;
  border-radius:14px!important;padding:20px 22px!important;cursor:pointer;display:flex;align-items:center;
  gap:16px;text-decoration:none!important;color:#fff!important;transition: transform 150ms, opacity 150ms, background-color 150ms, color 150ms, box-shadow 150ms, border-color 150ms}
.wiz-discord-option:hover{background:rgba(20,26,46,.5)!important;border-color:rgba(41,151,255,.3)!important;transform:translateY(-1px)}

@media(max-width:640px){.wiz-methods{grid-template-columns:1fr}}

/* ═══════════════════════════════
   ONBOARDING — OWNER WIZARD
   Used by onboarding-owner.html. The 4 shared bits that ALSO appear
   in the staff wizard (.wiz-contract-scroll, .wiz-sig-canvas,
   .wiz-sig-clear, .wiz-discord-option) are intentionally NOT here
   because owner uses visually distinct variants (compact contract,
   translucent sig canvas, link-style clear button, no-!important
   discord cards) — those stay local to onboarding-owner.html.
   ═══════════════════════════════ */

/* Progress bar (header under step rail) */
.wiz-progress-bar{height:3px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden;margin:0 24px 16px}
.wiz-progress-fill{height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,var(--blue),#1a6dd4);
  transition:transform .5s cubic-bezier(.16,1,.3,1);box-shadow:0 0 8px rgba(41,151,255,.4)}

/* Theme picker cards (preferences step) */
.wiz-theme-card.selected{border-color:rgba(41,151,255,.55);background:rgba(41,151,255,.10);
  box-shadow:0 0 24px rgba(41,151,255,.15)}

/* Capture frame (ID verification camera / still) */
.wiz-capture-frame{width:100%;max-width:400px;aspect-ratio:16/10;background:rgba(0,0,0,.3);
  border:2px dashed rgba(255,255,255,.12);border-radius:14px;margin:0 auto;overflow:hidden;
  position:relative;display:flex;align-items:center;justify-content:center}
.wiz-capture-frame video,.wiz-capture-frame img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.wiz-capture-frame canvas{display:none}
.wiz-capture-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}

/* ID status badges */
.wiz-id-status{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font:500 13px/1.3 var(--font)}
.wiz-id-status.ok{background:rgba(52,199,89,.08);border:1px solid rgba(52,199,89,.15);color:#34c759}

/* Owner page sticky footer (different from the staff wizard footer) */
.wiz-page .wiz-footer{position:sticky;bottom:0;z-index:10;
  background:rgba(10,14,24,.85);border-top:1px solid rgba(255,255,255,.05)}

/* ═══════════════════════════════
   ONBOARDING — BRAND WIZARD (Wiz 2)
   Used by onboarding-brand.html: social-handle rows with live verify,
   hex-color picker rows.
   ═══════════════════════════════ */
.social-row{display:flex;align-items:center;gap:var(--s2);max-width:520px;margin:0 auto var(--s2);padding:var(--s2) var(--s2);border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);transition:border-color .2s}
.social-row.verified{border-color:rgba(52,199,89,.55);background:rgba(52,199,89,.07)}
.social-row.checking{border-color:rgba(41,151,255,.4)}
.social-row.notfound{border-color:rgba(255,69,58,.45);background:rgba(255,69,58,.05)}
.social-row .social-ico{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.social-row .social-ico img{width:100%;height:100%;object-fit:cover}
.social-row .social-body{flex:1;text-align:left;min-width:0}
.social-row .social-name{font:600 13px/1.2 var(--font);color:var(--txt)}
.social-row .social-prefix{font:400 11px/1 var(--font);color:var(--txt3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.social-row .social-match{font:500 11px/1.2 var(--font);color:var(--green);margin-top:3px;display:flex;align-items:center;gap:5px}
.social-row input{flex:2;max-width:260px}
.social-row .social-status{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.social-row .social-spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--blue);border-radius:50%;animation:socialSpin .7s linear infinite}
@keyframes socialSpin{to{transform:rotate(360deg)}}

.hex-row{display:flex;align-items:center;gap:10px;max-width:440px;margin:0 auto var(--s2)}
.hex-row .hex-swatch{width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.14);flex-shrink:0}
.hex-row input[type=color]{width:44px;height:44px;border:0;border-radius:10px;background:transparent;padding:0;cursor:pointer;flex-shrink:0}
.hex-row input[type=text]{flex:1}

/* ═══════════════════════════════
   ONBOARDING — EMPLOYEE WIZARD (Wiz 3)
   Used by onboarding-employee.html: contract display frame + skip btn.
   ═══════════════════════════════ */
.contract-frame{width:100%;max-width:720px;height:360px;margin:16px auto 0;background:#0a0a0a;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;display:block}
.skip-btn{color:var(--txt3);background:transparent;border:1px solid rgba(255,255,255,.12);padding:10px 18px;border-radius:10px;font:500 13px/1 var(--font);cursor:pointer;margin-right:auto}
.skip-btn:hover{color:var(--txt);border-color:rgba(255,255,255,.28)}

/* ═══════════════════════════════
   ONBOARDING — shared rq-step helpers (Wiz 1/2 centered-form layouts)
   ═══════════════════════════════ */
.rq-step-centered{text-align:center}
.rq-edit-details{width:100%;max-width:480px;margin:0 auto;text-align:center}
.rq-edit-details .form-group{margin-bottom:20px}
.input-centered{text-align:center}

/* ═══════════════════════════════
   ONBOARDING — CLIENT WIZARD
   Used by onboarding-client.html. Note: the client page keeps the
   .wiz-page .wiz-shell overrides and entrance inline because they
   use !important to fight the base wiz-page layout. The form and
   animation elements below are truly shared.
   ═══════════════════════════════ */

.ob-in{opacity:0;transform:translateY(10px);animation:obIn .7s cubic-bezier(.16,1,.3,1) forwards}

/* Hero typography */
.ob-hero-label{font:500 10px/1 var(--font);text-transform:uppercase;letter-spacing:1.5px;color:#2997ff;margin:0;position:relative;z-index:2}
.ob-hero-title{font:500 clamp(32px,5.5vw,44px)/1.05 var(--font-display);letter-spacing:-.04em;color:#fff;margin:2px 0 0;position:relative;z-index:2}
.ob-hero-name{font:500 clamp(18px,2.8vw,24px)/1.1 var(--font-display);letter-spacing:-.02em;color:#fff;margin:12px 0 0}
.ob-hero-greeting{font:500 var(--text-sm)/var(--lh-normal) var(--font-display);color:rgba(255,255,255,.6);margin:4px 0 0}
.ob-hero-desc{font:400 var(--text-xs)/var(--lh-relaxed) var(--font);color:rgba(255,255,255,.4);margin:4px 0 0;max-width:340px;margin-left:auto;margin-right:auto}
.ob-role-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;background:rgba(41,151,255,.12);border:1px solid rgba(41,151,255,.2);font:500 11px/1 var(--font);color:#2997ff;margin-top:10px;letter-spacing:.5px;text-transform:uppercase}

.ob-avatar-opt.active{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:#2997ff}

/* Toggle row */
.ob-toggle.on{background:#2997ff}
.ob-toggle.on::after{transform:translateX(20px)}

/* Chips */
.ob-chip.selected{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.3);color:#2997ff}

/* Review rows */

/* Social card + info box */

.login-link{display:inline-block;margin-top:16px;padding:10px 28px;border-radius:10px;
  background:rgba(41,151,255,.15);border:1px solid rgba(41,151,255,.2);
  color:#f5f5f7;font:500 14px/1 var(--font),sans-serif;text-decoration:none}

/* ═══════════════════════════════
   PORTAL THEME PICKER — 3 GRADIENT TILES
   Used by onboarding client wizard "How do you like your portal?"
   Three vibes sharing the same bottom-half-black base; the top half
   accent color shifts between black / blue / white. Slow, gradual,
   premium — no emojis, gradient previews render from CSS only.
   ═══════════════════════════════ */
.ob-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:100%;max-width:880px;margin:0 auto}
@media(max-width:760px){.ob-theme-grid{grid-template-columns:1fr}}
.ob-theme-card{position:relative;display:flex;flex-direction:column;align-items:stretch;padding:0;
  background:rgba(255,255,255,.02);border:1.5px solid rgba(255,255,255,.06);border-radius:18px;
  cursor:pointer;overflow:hidden;
  transition:transform 180ms cubic-bezier(.16,1,.3,1),border-color 180ms ease,box-shadow 180ms ease,background 180ms ease}
.ob-theme-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.ob-theme-card.selected{border-color:rgba(41,151,255,.55);background:rgba(41,151,255,.05);
  box-shadow:0 0 0 3px rgba(41,151,255,.12),0 18px 46px rgba(0,0,0,.35)}
.ob-theme-card__preview{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
.ob-theme-card__preview::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,transparent 38%,rgba(0,0,0,.15) 60%,rgba(0,0,0,.45) 100%);pointer-events:none}
.ob-theme-card__label{padding:14px 16px 16px;text-align:center;font:500 14px/1.2 var(--font-display);color:var(--txt);letter-spacing:-.01em}
.ob-theme-card__sub{display:block;margin-top:4px;font:400 11px/1.3 var(--font);color:var(--txt3);letter-spacing:.02em}
/* Black vibe — deep ink gradient, soft grey haze top */
.ob-theme-card[data-theme="black"] .ob-theme-card__preview{
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%,rgba(60,66,82,.55) 0%,rgba(28,32,44,.35) 28%,rgba(12,16,24,0) 58%),
    linear-gradient(180deg,#1d2231 0%,#11151f 32%,#070a11 65%,#030508 100%)}
/* Blue vibe — CB brand gradient, matches current dark default */
.ob-theme-card[data-theme="blue"] .ob-theme-card__preview{
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%,rgba(41,151,255,.55) 0%,rgba(31,140,240,.30) 28%,rgba(12,16,24,0) 58%),
    linear-gradient(180deg,#0f2a5c 0%,#0a1f48 25%,#05132c 55%,#030811 85%,#020408 100%)}
/* White vibe — luxe pearl top fading into the same deep-black floor */
.ob-theme-card[data-theme="white"] .ob-theme-card__preview{
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%,rgba(255,255,255,.85) 0%,rgba(255,255,255,.45) 22%,rgba(255,255,255,0) 58%),
    linear-gradient(180deg,#e9ecf4 0%,#8f95a6 22%,#353c4d 52%,#0a0d14 82%,#020408 100%)}

/* ═══════════════════════════════
   PORTAL BODY THEMES — live preview targets for onboarding picker
   Applied to <body> via class. Each gives the full-page backdrop
   its signature "top color → deep black floor" gradient.
   ═══════════════════════════════ */
body.theme-v2-black{background:
  radial-gradient(ellipse 140% 80% at 50% 0%,rgba(60,66,82,.55) 0%,rgba(28,32,44,.35) 28%,rgba(12,16,24,0) 60%),
  linear-gradient(180deg,#1d2231 0%,#11151f 32%,#070a11 62%,#030508 100%) fixed !important}
body.theme-v2-blue{background:
  radial-gradient(ellipse 140% 80% at 50% 0%,rgba(41,151,255,.42) 0%,rgba(31,140,240,.22) 28%,rgba(12,16,24,0) 60%),
  linear-gradient(180deg,#0f2a5c 0%,#0a1f48 25%,#05132c 55%,#030811 82%,#020408 100%) fixed !important}
body.theme-v2-white{background:
  radial-gradient(ellipse 140% 80% at 50% 0%,rgba(255,255,255,.82) 0%,rgba(255,255,255,.4) 22%,rgba(255,255,255,0) 58%),
  linear-gradient(180deg,#e9ecf4 0%,#8f95a6 22%,#353c4d 52%,#0a0d14 80%,#020408 100%) fixed !important}
body.theme-v2-black .cb-grid,
body.theme-v2-blue .cb-grid,
body.theme-v2-white .cb-grid{background-image:none !important}

/* ═══════════════════════════════
   ICON UTILITIES — inline SVG data URLs, no emoji anywhere
   Use .ico.ico-<name> as a span or i element. Sized by font-size.
   ═══════════════════════════════ */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-2px;background-repeat:no-repeat;background-position:center;background-size:contain;flex-shrink:0}
.ico-check{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334c759' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")}
.ico-check-white{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")}
.ico-camera{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/><circle cx='12' cy='13' r='4'/></svg>")}
.ico-upload{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>")}
.ico-outbox{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 12 16 12 14 15 10 15 8 12 2 12'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>")}
.ico-star{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffd60a' stroke='%23ffd60a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>")}
.ico-link{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>")}

/* ═══════════════════════════════
   AVATAR EDITOR MODAL
   Used by account.html when the user opens the avatar editor to
   zoom/crop/mirror an image before saving as their profile picture.
   ═══════════════════════════════ */

@keyframes cb-av-fade-in{from{opacity:0}to{opacity:1}}

.av-editor-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);
  z-index:9999;display:none;align-items:center;justify-content:center;padding:24px}
.av-editor-bg.open{display:flex;animation:cb-av-fade-in .2s ease}
.av-editor{background:rgba(12,18,30,.98);border:1px solid rgba(255,255,255,.1);border-radius:20px;
  width:100%;max-width:480px;box-shadow:0 20px 80px rgba(0,0,0,.6);overflow:hidden;
  font-family:var(--font-display)}
.av-editor-hdr{padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between}
.av-editor-title{font:500 16px/1 var(--font-display);color:#fff;letter-spacing:-.2px}
.av-editor-close{width:28px;height:28px;border:none;background:rgba(255,255,255,.06);border-radius:50%;
  color:rgba(255,255,255,.5);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s}
.av-editor-close:hover{background:rgba(255,255,255,.12);color:#fff}

.av-editor-canvas-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#000;overflow:hidden;
  display:flex;align-items:center;justify-content:center;cursor:grab}
.av-editor-canvas-wrap:active{cursor:grabbing}
.av-editor-img{position:absolute;left:50%;top:50%;transform-origin:center center;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
  max-width:none}
.av-editor-circle{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at center,transparent 49%,rgba(0,0,0,.65) 50%)}
.av-editor-circle::before{content:'';position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.4) inset;
  width:calc(100% - 4px);height:calc(100% - 4px);left:2px;top:2px;border-radius:50%}

.av-editor-controls{padding:18px 24px 8px}
.av-control-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.av-control-label{font:500 11px/1 var(--font-display);color:rgba(255,255,255,.5);
  text-transform:uppercase;letter-spacing:.8px;width:60px;flex-shrink:0}
.av-zoom-slider{flex:1;-webkit-appearance:none;height:4px;background:rgba(255,255,255,.08);
  border-radius:2px;outline:none;cursor:pointer}
.av-zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#2997ff;cursor:pointer;border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .12s}
.av-zoom-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}
.av-zoom-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#2997ff;
  cursor:pointer;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}

.av-tools{display:flex;gap:6px;margin-top:6px}
.av-tool-btn{flex:1;padding:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;color:rgba(255,255,255,.7);font:500 11px/1 var(--font-display);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .15s,border-color .15s,color .15s}
.av-tool-btn:hover{background:rgba(41,151,255,.08);border-color:rgba(41,151,255,.25);color:#2997ff}
.av-tool-btn.active{background:rgba(41,151,255,.15);border-color:rgba(41,151,255,.4);color:#2997ff}
.av-tool-btn svg{width:14px;height:14px}

.av-editor-actions{padding:14px 24px 20px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;gap:10px;justify-content:flex-end}
.av-editor-btn{padding:11px 22px;border-radius:10px;font:500 13px/1 var(--font-display);cursor:pointer;
  border:none;transition:background .15s,transform .12s}
.av-editor-btn:active{transform:scale(.97)}
.av-editor-btn-cancel{background:rgba(255,255,255,.05);color:rgba(255,255,255,.6)}
.av-editor-btn-cancel:hover{background:rgba(255,255,255,.1);color:#fff}
.av-editor-btn-save{background:#2997ff;color:#fff}
.av-editor-btn-save:hover{background:#0a84ff}
.av-editor-btn-save:disabled{opacity:.4;cursor:not-allowed}

/* ═══════════════════════════════
   DISCORD WIZARD
   Used by public/discord.html. NOTE: button + spinner classes are
   intentionally scoped as .dc-btn* / .dc-spinner (not .btn / .spinner)
   to avoid polluting the global .btn namespace and colliding with
   other pages' .spinner definitions.
   ═══════════════════════════════ */

@keyframes cb-fade-slide-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── Embed (fills remaining space below title bar) ── */
#embed-container{flex:1;display:none;min-height:0}
#embed-container iframe{width:100%;height:100%;border:none}

/* ── Wizard Container ── */
#wizard{display:none;height:100vh;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
#wizard.active{display:flex}

/* Ambient glow behind card — cb-pulse-glow from shared animations */
.ambient-glow{position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(41,151,255,.15) 0%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:.5;
  animation:cb-pulse-glow 6s ease-in-out infinite}

/* ── Wizard Card ── */
.wizard-card{background:rgba(15,19,32,.45);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-xl);width:100%;max-width:520px;padding:48px 40px;
  position:relative;z-index:1}

/* ── Steps ── */
.step{display:none;animation:cb-fade-slide-in 220ms cubic-bezier(.16,1,.3,1) forwards}
.step.active{display:block}

/* ── Step Progress ── */
.step-progress{display:flex;gap:8px;margin-bottom:36px;justify-content:center}
.step-dot{width:32px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);transition:10ms}
.step-dot.active{background:var(--blue)}
.step-dot.done{background:rgba(48,209,88,1)}

/* ── Discord Icon ── */
.discord-icon{width:56px;height:56px;border-radius:16px;background:#5865f2;
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.discord-icon svg{width:32px;height:32px;fill:#fff}

/* ── Typography ── */
.wizard-title{font-size:28px;font-weight:500;letter-spacing:-.02em;
  text-align:center;margin-bottom:8px;line-height:1.2}
.wizard-subtitle{font-size:15px;color:rgba(255,255,255,.55);
  text-align:center;line-height:1.5;margin-bottom:32px}

/* ── Option Cards ── */
.option-cards{display:flex;flex-direction:column;gap:12px}
.option-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg);padding:20px 24px;cursor:pointer;transition:10ms;
  display:flex;align-items:center;gap:16px}
.option-card:hover{background:rgba(20,26,46,.5);border-color:rgba(41,151,255,.3);transform:translateY(-1px)}
.option-card:active{transform:translateY(0)}

.option-icon{width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.option-icon.blue{background:rgba(41,151,255,.15)}
.option-icon.purple{background:rgba(88,101,242,.15)}
.option-icon svg{width:22px;height:22px}

.option-text h3{font-size:16px;font-weight:500;margin-bottom:2px}
.option-text p{font-size:13px;color:rgba(255,255,255,.55)}

.option-arrow{margin-left:auto;color:rgba(255,255,255,.28);transition:10ms}
.option-card:hover .option-arrow{color:var(--blue);transform:translateX(2px)}

/* ── Loading state in option card ── */
.option-card.loading{pointer-events:none;opacity:.7}
.option-card .dc-spinner{display:none;width:20px;height:20px;
  border:2px solid rgba(255,255,255,.28);border-top-color:var(--blue);
  border-radius:50%;animation:spin .8s linear infinite;margin-left:auto}
.option-card.loading .dc-spinner{display:block}
.option-card.loading .option-arrow{display:none}

/* ── Buttons (scoped as .dc-btn* to avoid global .btn collision) ── */
.dc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:var(--r-md);border:none;
  font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;
  transition:10ms;width:100%;text-decoration:none}
.dc-btn-primary{background:var(--blue);color:#fff}
.dc-btn-primary:hover{background:var(--blue-hv);transform:translateY(-1px)}
.dc-btn-primary:active{transform:translateY(0)}
.dc-btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.dc-btn-discord{background:#5865f2;color:#fff}
.dc-btn-discord:hover{background:#6b74f7;transform:translateY(-1px)}
.dc-btn-discord:active{transform:translateY(0)}
.dc-btn-success{background:rgba(48,209,88,1);color:#fff}
.dc-btn-success:hover{opacity:.9;transform:translateY(-1px)}
.dc-btn svg{width:20px;height:20px;fill:currentColor}

/* ── Form ── */
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:13px;font-weight:500;
  color:rgba(255,255,255,.55);margin-bottom:8px}
.form-input{width:100%;padding:14px 16px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);
  color:var(--txt);font-family:inherit;font-size:15px;transition:10ms;outline:none}
.form-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(41,151,255,.15)}
.form-input:read-only{opacity:.5;cursor:not-allowed}

/* ── Checkbox ── */
.checkbox-row{display:flex;align-items:center;gap:12px;margin:24px 0;cursor:pointer;user-select:none}
.checkbox-row input[type="checkbox"]{display:none}
.checkbox-custom{width:22px;height:22px;border-radius:6px;
  border:2px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;
  transition:10ms;flex-shrink:0}
.checkbox-custom svg{width:14px;height:14px;fill:#fff;opacity:0;transform:scale(.5);transition:10ms}
.checkbox-row input:checked+.checkbox-custom{background:var(--blue);border-color:var(--blue)}
.checkbox-row input:checked+.checkbox-custom svg{opacity:1;transform:scale(1)}
.checkbox-label{font-size:14px;color:rgba(255,255,255,.55)}

/* ── Divider ── */
.divider{display:flex;align-items:center;gap:16px;margin:24px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06)}
.divider span{font-size:12px;color:rgba(255,255,255,.28);text-transform:uppercase;letter-spacing:.05em}

/* ── Back Link ── */
.back-link{display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.55);font-size:13px;cursor:pointer;transition:10ms;
  margin-bottom:24px;background:none;border:none;font-family:inherit}
.back-link:hover{color:var(--txt)}
.back-link svg{width:16px;height:16px;fill:currentColor}

/* ── Success Step (cb-avatar-reveal + cb-check-pulse from shared animations) ── */
.success-avatar{width:88px;height:88px;border-radius:50%;margin:0 auto 20px;
  display:block;border:3px solid rgba(48,209,88,1);box-shadow:0 0 0 8px rgba(48,209,88,.15);
  animation:cb-avatar-reveal .6s cubic-bezier(.34,1.56,.64,1) forwards;object-fit:cover}
.success-avatar-placeholder{width:88px;height:88px;border-radius:50%;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  border:3px solid rgba(48,209,88,1);box-shadow:0 0 0 8px rgba(48,209,88,.15);
  background:#5865f2;animation:cb-avatar-reveal .6s cubic-bezier(.34,1.56,.64,1) forwards}
.success-avatar-placeholder svg{width:40px;height:40px;fill:#fff}
.success-checkmark{width:64px;height:64px;border-radius:50%;background:rgba(48,209,88,1);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px;
  animation:cb-check-pulse .6s cubic-bezier(.34,1.56,.64,1) forwards;
  box-shadow:0 0 0 8px rgba(48,209,88,.15)}
.success-checkmark svg{width:32px;height:32px;fill:#fff}
.success-name{font-size:20px;font-weight:500;text-align:center;margin-bottom:4px}
.success-tag{font-size:14px;color:rgba(255,255,255,.55);text-align:center;margin-bottom:8px}
.success-note{font-size:13px;color:rgba(255,255,255,.28);text-align:center;margin-bottom:32px;line-height:1.5}

/* ── Loading overlay ── */
.loading-screen{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:transparent;z-index:100;gap:16px}
.loading-screen.hidden{display:none}
.loading-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.28);
  border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
.loading-text{font-size:14px;color:rgba(255,255,255,.55)}

/* Legacy .notification top-center bar DELETED — Sean 2026-05-26: all toasts
   funnel through #opsToastStack only (top:60px;right:12px, under the bell). */
.notification{display:none !important}

@media(max-width:560px){
  .wizard-card{padding:36px 24px}
  .wizard-title{font-size:24px}
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT BUG OS — White-themed internal tools shell
   Used by: tool-index.html, blenderbug.html, mercury.html
   ═══════════════════════════════════════════════════════════════ */

/* ── OS Shell Layout ── */
.os-shell{display:flex;height:100vh;overflow:hidden}

/* ── Sidebar — white/light ── */
.os-dock{width:200px;flex-shrink:0;display:flex;flex-direction:column;
  background:#fff;border-right:1px solid rgba(0,0,0,.08)}
.os-dock-logo{padding:16px;text-align:center;border-bottom:1px solid rgba(0,0,0,.06)}
.os-dock-logo img{width:48px;height:48px;border-radius:14px;margin-bottom:6px;filter:invert(1) brightness(0)}
.os-dock-title{font:500 14px/1 var(--font-display);color:#1d1d1f;letter-spacing:-.2px}
.os-dock-sub{font:400 10px/1 var(--font);color:#86868b;margin-top:3px;text-transform:uppercase;letter-spacing:1.5px}
.os-dock-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.os-nav-label{font:500 9px/1 var(--font);text-transform:uppercase;letter-spacing:1.5px;
  color:rgba(0,0,0,.25);padding:12px 10px 4px;margin-top:4px}
.os-nav-label:first-child{margin-top:0}
.os-nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  cursor:pointer;color:#6e6e73;font:500 13px/1 var(--font);transition: transform 60ms, opacity 60ms, background-color 60ms, color 60ms, box-shadow 60ms, border-color 60ms;
  border:1px solid transparent;background:none;width:100%;text-align:left;text-decoration:none}
.os-nav-item:hover{background:rgba(0,0,0,.03);color:#1d1d1f}
.os-nav-item.active{background:rgba(0,122,255,.08);color:#007aff;border-color:rgba(0,122,255,.15)}
.os-nav-item .icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.os-back{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:10px;
  color:#86868b;font:400 12px/1 var(--font);cursor:pointer;transition: transform 60ms, opacity 60ms, background-color 60ms, color 60ms, box-shadow 60ms, border-color 60ms;
  border:none;background:none;width:100%;text-align:left;text-decoration:none;margin-top:auto}
.os-back:hover{color:#1d1d1f;background:rgba(0,0,0,.03)}
.os-dock-footer{padding:12px;border-top:1px solid rgba(0,0,0,.06);display:flex;align-items:center;gap:10px}
.os-av{width:32px;height:32px;border-radius:50%;background:rgba(0,122,255,.1);display:flex;
  align-items:center;justify-content:center;font:500 12px/1 var(--font);color:#007aff;flex-shrink:0;overflow:hidden}
.os-av img{width:100%;height:100%;object-fit:cover}
.os-user-name{font:500 12px/1 var(--font);color:#1d1d1f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-user-role{font:500 9px/1 var(--font);color:#007aff;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.os-body{flex:1;min-width:0;position:relative;overflow:hidden;background:#f5f5f7}
.os-frame{position:absolute;inset:0;width:100%;height:100%;border:none;background:transparent;display:none}
.os-frame.active{display:block}

@media(max-width:768px){
  .os-dock{width:60px}
  .os-dock-title,.os-dock-sub,.os-nav-item span:not(.icon),.os-user-name,.os-user-role,.os-nav-label{display:none}
  .os-nav-item{justify-content:center;padding:10px}
  .os-dock-logo{padding:10px}
  .os-dock-footer{justify-content:center;padding:8px}
  .os-back span{display:none}
  .os-back{justify-content:center}
}

/* ── BLENDERBUG — 3D Rendering Engine UI ── */
.rb-page{padding:24px 28px}
.rb-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px}
.rb-title{font:500 24px/1 var(--font-display);color:#1d1d1f;letter-spacing:-.4px}
.rb-sub{font:400 13px/1 var(--font);color:#86868b;margin-top:5px}
.rb-tabs{display:flex;gap:6px;margin-bottom:24px}
.rb-tab{font:500 13px/1 var(--font);padding:7px 18px;border-radius:20px;
  border:1px solid transparent;background:transparent;color:#86868b;cursor:pointer;transition: transform .15s, opacity .15s, background-color .15s, color .15s, box-shadow .15s, border-color .15s}
.rb-tab:hover{color:#1d1d1f;background:rgba(0,0,0,.04)}
.rb-tab.active{background:#1d1d1f;border-color:#1d1d1f;color:#fff}
.rb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.rb-type-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:20px 16px;
  cursor:pointer;transition: transform 80ms, opacity 80ms, background-color 80ms, color 80ms, box-shadow 80ms, border-color 80ms;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.rb-type-card:hover{border-color:rgba(0,0,0,.15);box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-1px)}
.rb-type-card.selected{border-color:#007aff;background:rgba(0,122,255,.03);box-shadow:0 0 0 2px rgba(0,122,255,.15)}
.rb-type-icon{font-size:32px;margin-bottom:10px}
.rb-type-name{font:500 14px/1 var(--font);color:#1d1d1f;margin-bottom:4px}
.rb-type-desc{font:400 11px/1.3 var(--font);color:#86868b}
.rb-status{margin-top:24px;padding:12px 16px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;gap:10px;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.rb-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rb-status-dot.green{background:#34c759}
.rb-status-dot.yellow{background:#ff9f0a}
.rb-status-dot.red{background:#ff3b30}
.rb-status-text{font:400 13px/1 var(--font);color:#86868b}
.rb-sec{font:500 11px/1 var(--font);text-transform:uppercase;letter-spacing:2px;color:rgba(0,0,0,.3);margin:28px 0 12px}
.rb-sec:first-child{margin-top:0}
.rb-job-list{display:flex;flex-direction:column;gap:8px}
.rb-job-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.rb-job-thumb{width:48px;height:48px;border-radius:10px;background:#f0f0f2;display:flex;
  align-items:center;justify-content:center;font-size:22px;flex-shrink:0;overflow:hidden}
.rb-job-thumb img{width:100%;height:100%;object-fit:cover}
.rb-job-meta{flex:1;min-width:0}
.rb-job-name{font:500 14px/1 var(--font);color:#1d1d1f}
.rb-job-info{font:400 11px/1 var(--font);color:#86868b;margin-top:3px}
.rb-job-status{font:500 11px/1 var(--font);padding:3px 10px;border-radius:20px}
.rb-job-status.queued{background:rgba(255,159,10,.1);color:#cc7e00}
.rb-job-status.rendering{background:rgba(0,122,255,.1);color:#007aff}
.rb-job-status.done{background:rgba(52,199,89,.1);color:#248a3d}
.rb-job-status.failed{background:rgba(255,59,48,.1);color:#d70015}
.rb-empty{text-align:center;padding:48px 20px;color:#86868b;font:400 14px/1.5 var(--font)}
.rb-empty-icon{font-size:40px;margin-bottom:12px;opacity:.5}

/* ═══════════════════════════════════════════════════════════════════════
   WEBSITE MARKETING COMPONENTS — centralized from inline \3c style> blocks
   Previously duplicated across 12 website pages (~40k lines of redundant CSS).
   Consolidated into design-system.css on 2026-04-15 per owner mandate:
   "we only use the design system css for all pages"
   ═══════════════════════════════════════════════════════════════════════ */
.site-tab.active{background:rgba(255,255,255,.08);color:var(--txt)}

/* Website-in-preview styles (light theme) */
.ws-sub{font-size:20px;color:#6e6e73;max-width:640px;margin:0 auto 36px;line-height:1.5}
.ws-sec-hd .label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:3px;color:var(--blue);margin-bottom:12px;display:block}
.ws-sec-hd h2.light{color:#f5f5f7}
.ws-sec-hd p.light{color:rgba(255,255,255,.6)}
.ws-stat .num{font-size:32px;font-weight:500;letter-spacing:-.03em;color:var(--txt)}
.ws-stat .lbl{font-size:12px;color:rgba(255,255,255,.5);font-weight:500;margin-top:2px}
/* Token indicator */
.tok.new{color:var(--green);border-color:rgba(48,209,88,.2);background:rgba(48,209,88,.05)}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ═══════════════════════════════════════════════════════════════
   WEBSITE MARKETING — Light Theme Components
   Used by: home, pricing, faq, booking, portfolio, careers
   ═══════════════════════════════════════════════════════════════ */

/* ── GHL Text Color Nuclear Override ── */
.row,.col-lg-12,.col-lg-6,.col-md-12,.col-sm-12,.hl_page-preview--content,.hl_page-preview,.section_wrapper,.inner-section,
[class*="hl_"],[class*="col-"],[id*="section"],[id*="row"]{color:var(--t1) !important;font-family:var(--font) !important}

/* ── Dark-Theme Tokens — EXACT MATCH to portal design-system.css ── */

/* ── Layout ── */

/* ═══ SECTION — Unified Dark Background ═══ */

/* All sections use dark theme tokens — no nth-child color rotation needed */

/* Dark section text overrides */
.section .card,
.section .table-card{background:var(--glass-card-bg);border-color:var(--glass-card-border);border-top-color:var(--glass-card-rim)}
.section .card:hover{border-color:rgba(41,151,255,.3);box-shadow:var(--shadow-hover)}
.section .card::before{background:linear-gradient(90deg,transparent 3%,rgba(255,255,255,.35) 25%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.35) 75%,transparent 97%)}
.section .btn-ghost{color:var(--blue);border-color:rgba(41,151,255,.3)}
.section .btn-ghost:hover{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.5)}

/* ═══ CARD — Premium glass card (matched to email template) ═══ */
.ws-page .card{position:relative;background:var(--glass-card-bg);border:1px solid var(--glass-card-border);border-top-color:var(--glass-card-rim);border-radius:var(--r-2xl);padding:var(--s4);box-shadow:var(--glass-card-shadow);transition:transform .08s var(--ease),box-shadow .08s var(--ease);color:var(--t1)}
.ws-page .card::before{content:'';position:absolute;top:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent 3%,rgba(255,255,255,.35) 25%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.35) 75%,transparent 97%);pointer-events:none}
.ws-page .card:hover{transform:translateY(-4px);border-color:rgba(41,151,255,.3);box-shadow:var(--shadow-hover)}

/* ═══ TYPOGRAPHY SCALE (bumped 2026-04-15: bigger/easier to read per owner) ═══ */
.hero-title .line1{display:block;color:var(--t1) !important;font-weight:500}
.hero-title .line2{display:block;color:var(--t2) !important;font-weight:500;font-size:.85em;letter-spacing:-.02em;margin-top:var(--s1)}

/* ═══ BUTTONS ═══ */
.ws-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);height:56px;padding:0 28px;border-radius:var(--r-lg);font-size:16px;font-weight:500;text-decoration:none;cursor:pointer;border:none;font-family:var(--font);letter-spacing:-.01em;transition:transform 80ms var(--ease);}
.btn-lg{padding:0 32px;font-size:16px}
.ws-page .btn-ghost{background:transparent;color:var(--blue-brand);border:1px solid rgba(0,113,227,.3);padding:0 28px;font-size:16px}
.ws-page .btn-ghost:active{transform:scale(.97);transition-duration:40ms}

/* ═══ HERO SECTION ═══ */
.section.hero .hero-title,.section.hero .hero-title .line1,.section.hero .hero-title em{color:var(--t1) !important}
.section.hero .hero-title .line2{color:var(--t2) !important}
.section.hero .showcase-card.active{border-color:rgba(41,151,255,.3);box-shadow:var(--shadow-hover)}
.section.hero .showcase-card.inactive::after{background:rgba(0,0,0,.35)}

/* ═══ STATS ROW ═══ */
.stat-value.accent{color:var(--blue-brand)}
.stat-label.accent{color:var(--blue-brand)}

/* ═══ SHOWCASE CARDS ═══ */
.showcase-card.active{transform:scale(1.04);border-color:rgba(41,151,255,.3);box-shadow:var(--shadow-hover);z-index:2}
.showcase-card.inactive::after{content:'';position:absolute;inset:0;border-radius:var(--r-xl);background:rgba(0,0,0,.3);z-index:3;pointer-events:none;transition:opacity .12s var(--ease)}
.showcase-card.inactive:hover::after{opacity:.15}

/* ═══ TRUST — Creator Rail ═══ */
.section .creator-chip.active{background:rgba(41,151,255,.1)}
.section .creator-chip.active .creator-chip-handle{color:var(--t1)}
.section .creator-chip.active .creator-chip-subs{color:var(--blue)}
.creator-rail.grabbing{cursor:grabbing;scroll-behavior:auto}
.creator-chip.active::after{width:48px}
.creator-chip.active{background:rgba(0,113,227,.04)}
.creator-chip.active .creator-chip-avatar{border-color:var(--blue-brand);box-shadow:0 0 0 4px rgba(0,113,227,.15),0 0 24px rgba(0,113,227,.12);transform:scale(1.08)}
.creator-chip.active .creator-chip-handle{color:var(--t1)}
.creator-chip.active .creator-chip-subs{color:var(--blue-brand)}
.creator-chip.no-click{cursor:default;pointer-events:none}
.creator-chip.no-click .creator-chip-avatar{border-color:rgba(255,255,255,.12)}
.creator-chip.no-click:hover{background:transparent}

/* Showcase Stage */
.showcase-stage.open{opacity:1;transform:translateY(0);max-height:600px;overflow:visible}

/* Marquee */
/* Unified dark background — no nth-child variation */
.section .showcase-card.active{border-color:rgba(41,151,255,.3);box-shadow:var(--shadow-hover)}
.section .showcase-card.inactive::after{background:rgba(0,0,0,.3)}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══ STEPS ═══ */

/* ═══ PORTFOLIO ═══ */

/* ═══ FEATURES ═══ */

/* ═══ COMPARISON TABLES ═══ */

/* Founders */

/* ═══ REVIEWS ═══ */

/* Featured Testimonial */

/* Mini Reviews */

/* ═══ STICKY CTA (Mobile) ═══ */
.sticky-cta.on{transform:translateY(0)}
.sticky-cta .btn{height:48px;padding:0 var(--s3);font-size:16px;width:100%;max-width:300px}

/* ═══ WEBSITE RESPONSIVE ═══ */
@media(max-width:1000px){.features-grid{grid-template-columns:repeat(2,1fr)}.portfolio-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.tables-grid{grid-template-columns:1fr}.mini-grid{grid-template-columns:repeat(2,1fr)}.showcase-videos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .ws-page .container{padding:0 var(--s2)}
  .section{padding:60px 20px 40px}
  .hero{padding:60px 20px 40px}
  .hero-logo{height:44px;margin-bottom:var(--s2)}
  .hero-title{font-size:24px}
  .hero-title .line2{font-size:.85em}
  .btn-lg{height:48px;padding:0 24px;font-size:16px}
  .btn-hero{height:48px;padding:0 28px;font-size:16px}
  .stats-row{gap:0;flex-wrap:wrap}
  .stat{padding:var(--s1) var(--s2)}
  .stat-value{font-size:14px}
  .stat-label{font-size:8px}
  .showcase-grid{grid-template-columns:1fr;max-width:340px;gap:var(--s2)}
  .showcase-card{padding:var(--s1) var(--s2) var(--s2)}
  .creator-rail{gap:var(--s2);padding:var(--s1) 0;justify-content:flex-start}
  .creator-chip{min-width:80px;padding:var(--s1)}
  .creator-chip-avatar{width:64px;height:64px}
  .creator-chip-handle{font-size:10px}
  .creator-chip-subs{font-size:11px}
  .showcase-stage.open{max-height:1400px}
  .showcase-videos{grid-template-columns:1fr;gap:var(--s2)}
  .showcase-meta-name{font-size:16px}
  .showcase-meta-focus{font-size:12px}
  .steps-grid{grid-template-columns:1fr;gap:var(--s2)}
  .portfolio-grid{grid-template-columns:repeat(3,1fr);gap:var(--s1)}
  .features-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .mini-grid{grid-template-columns:1fr}
  .section-header{margin-bottom:var(--s3)}
  .section-cta{margin-top:var(--s3)}
  .sticky-cta{display:flex}
  .ws-page{padding-bottom:70px}
  .section::before{transform:scale(.6)}
}
@media(max-width:480px){
  .ws-page .container{padding:0 var(--s2)}
  .stats-row .stat{width:33.33%;padding:var(--s1)}
  .stat+.stat::before{display:none}
  .reviews-grid{grid-template-columns:1fr;max-width:360px;margin:0 auto var(--s3)}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .founders-row{gap:var(--s3)}
  .founder-avatar{width:72px;height:72px}
  .showcase-grid{max-width:300px}
}

/* ═══════════════════════════════════════════════════════════════
   WEBSITE: SHARED HEADER COMPONENT
   Used on: pricing, faq, booking, portfolio, careers, etc.
   ═══════════════════════════════════════════════════════════════ */
/* ── Header Bar — static, logo left, glass island centered ── */
.ws-page .cb-header-bar{
  position:sticky!important;top:0!important;z-index:999!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;max-width:100%!important;margin:0 auto!important;
  padding:var(--s2) 40px!important;
  background:transparent;
  border-bottom:none!important;
  font-family:var(--font)!important;
  -webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;
}
.ws-page .cb-header-bar .cb-logo{
  display:none!important;
}
.ws-page .cb-studio-login{
  position:absolute!important;right:40px!important;top:50%!important;transform:translateY(-50%)!important;
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  font-size:12px!important;font-weight:500!important;color:rgba(255,255,255,.65)!important;
  text-decoration:none!important;letter-spacing:.01em!important;
  padding:6px 16px!important;border-radius:var(--r-pill)!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  transition: transform .08s var(--ease)!important, opacity .08s var(--ease)!important, background-color .08s var(--ease)!important, color .08s var(--ease)!important, box-shadow .08s var(--ease)!important, border-color .08s var(--ease)!important;
}
.ws-page .cb-studio-login:hover{color:var(--txt);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
/* ── Dark glass nav island — ALWAYS sticky at top center ── */
.ws-page .cb-header{
  position:fixed!important;top:14px!important;left:50%!important;right:auto!important;
  transform:translateX(-50%)!important;
  width:auto!important;height:auto!important;
  display:inline-flex!important;align-items:center!important;gap:2px!important;
  padding:5px!important;
  background:rgba(10,10,14,.92)!important;
  border:1px solid rgba(255,255,255,.08)!important;border-radius:980px!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 4px 24px rgba(0,0,0,.35),0 0 0 .5px rgba(255,255,255,.05) inset,0 1px 0 rgba(255,255,255,.06) inset!important;
  z-index:9999!important;
  transition:box-shadow .08s var(--ease)!important;
}
.ws-page .cb-nav-link.active{color:var(--txt);font-weight:500;background:rgba(255,255,255,.12)}
/* ── Start Free Trial CTA inside island ── */

/* ═══════════════════════════════════════════════════════════════
   WEBSITE: SHARED FOOTER COMPONENT
   ═══════════════════════════════════════════════════════════════ */
.ws-page .cb-footer{
  position:relative!important;width:100%!important;max-width:100%!important;margin:0 auto!important;
  background:transparent!important;border:none!important;
  border-top:none!important;
  border-radius:0!important;box-shadow:none!important;
  padding:var(--s6) var(--s4) var(--s4)!important;font-family:var(--font)!important;
  -webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;overflow:hidden!important;
}
.ws-page .cb-footer>.cb-ft-grid,.ws-page .cb-footer>.cb-ft-divider,.ws-page .cb-footer>.cb-ft-legal{max-width:1200px;margin-left:auto;margin-right:auto}
.ws-page .cb-ft-brand{display:flex;flex-direction:column;gap:var(--s2)}
.ws-page .cb-ft-tagline{font-size:14px;color:var(--t3);line-height:1.6;max-width:280px}
.ws-page .cb-ft-col{display:flex;flex-direction:column;gap:var(--s1)}
.ws-page .cb-ft-col-title{font-size:14px;font-weight:500;color:var(--blue-brand);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:var(--s1)}
.ws-page .cb-ft-col a{font-size:14px;font-weight:500;text-decoration:none;color:var(--t2);line-height:1.8}
.ws-page .cb-ft-col a:hover{color:var(--blue-brand)}
.ws-page .cb-ft-contact-item{font-size:14px;color:var(--t3);line-height:1.7;word-break:break-all}
.ws-page .cb-ft-contact-item a{color:var(--t2);text-decoration:none}
.ws-page .cb-ft-contact-item a:hover{color:var(--blue-brand)}
.ws-page .cb-ft-hours{font-size:14px;color:var(--t3);line-height:1.6;margin-top:var(--s1);padding-top:var(--s1);border-top:none!important}
.ws-page .cb-ft-hours strong{color:var(--t2);font-weight:500}
.ws-page .cb-ft-legal{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s1) var(--s2);width:100%}
.ws-page .cb-ft-legal span,.ws-page .cb-ft-legal a{font-size:14px;color:var(--t3)}
.ws-page .cb-ft-legal a{text-decoration:none}
.ws-page .cb-ft-legal a:hover{color:var(--blue-brand)}

/* ═══════════════════════════════════════════════════════════════
   WEBSITE: PRICING PAGE COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Hero Pill */
.ws-page .hero-pill{
  display:inline-flex!important;align-items:center!important;gap:var(--s1)!important;
  padding:var(--s1) var(--s3) var(--s1) var(--s2)!important;
  border-radius:var(--radius-pill)!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important;
  font-size:14px!important;font-weight:500!important;color:var(--t1)!important;margin-bottom:var(--s3)!important;letter-spacing:.02em!important;
}
.ws-page .hero-pill::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--blue-brand);box-shadow:0 0 8px rgba(0,113,227,.4)}
.ws-page .hero-title .accent{color:var(--blue-brand)}

/* Pricing Stats */
.ws-page .stats{display:flex;justify-content:center;gap:var(--s1);flex-wrap:nowrap;margin-bottom:var(--s2)}
.ws-page .pricing-stats .stat{
  flex:1!important;max-width:130px!important;text-align:center!important;padding:var(--s1)!important;
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:var(--r-lg)!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;
}
.ws-page .stat-icon{width:14px;height:14px;color:var(--t3);opacity:.7}
.ws-page .stat-val{font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:-.03em;line-height:1}
.ws-page .stat-lbl{font-family:var(--font);font-size:11px;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px}
.ws-page .pricing-explainer{text-align:center;font-size:14px;font-weight:500;color:var(--t2);margin-bottom:var(--s2);line-height:1.5}

/* Billing Toggle */
.ws-page .toggle-wrap{display:flex;justify-content:center;margin-bottom:var(--s3)}
.ws-page .toggle{display:flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-pill);padding:var(--s0);position:relative}
.ws-page .toggle-btn{
  position:relative!important;z-index:2!important;padding:var(--s1) var(--s4)!important;border:none!important;
  background:transparent!important;color:var(--t3)!important;font-family:var(--font)!important;font-size:14px!important;
  font-weight:500!important;cursor:pointer!important;border-radius:var(--radius-pill)!important;white-space:nowrap!important;
  display:inline-flex!important;align-items:center!important;gap:var(--s1)!important;
}
.ws-page .toggle-btn.active{color:var(--t1)}
.ws-page .toggle-slider{
  position:absolute!important;top:4px!important;left:4px!important;height:calc(100% - 8px)!important;width:calc(50% - 4px)!important;
  background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:var(--radius-pill)!important;
  transition:transform .08s var(--ease)!important;box-shadow:0 2px 8px rgba(0,0,0,.3)!important;
}
.ws-page .toggle-slider.yearly{transform:translateX(100%)}

/* Pricing Cards Grid */
.ws-page .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:var(--s2)}
.ws-page .card[data-tier="basic"]{--accent:var(--blue-brand);--accent-g:rgba(0,113,227,.1)}
.ws-page .card[data-tier="silver"]{--accent:var(--silver);--accent-g:rgba(161,161,166,.1)}
.ws-page .card[data-tier="gold"]{--accent:var(--gold);--accent-g:rgba(240,192,64,.15);border-color:rgba(212,168,83,.15)}
.ws-page .card-badge{
  position:absolute!important;top:var(--s2)!important;right:var(--s2)!important;
  background:var(--gold)!important;color:#000!important;font-size:14px!important;font-weight:500!important;
  text-transform:uppercase!important;letter-spacing:2px!important;padding:var(--s1) var(--s2)!important;border-radius:var(--radius-pill)!important;
}
.ws-page .card-name{font-family:var(--font-display);font-size:28px;font-weight:500;letter-spacing:-.03em;margin-bottom:var(--s2)}
.ws-page .card-price-row{display:flex;align-items:baseline;gap:var(--s0);margin-bottom:var(--s1)}
.ws-page .card-price{font-family:var(--font-display);font-size:clamp(32px,4vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1}
.ws-page .card-mo{font-size:16px;color:var(--t3)}
.ws-page .card-note{font-size:14px;color:var(--t3);margin-bottom:var(--s3);min-height:24px}
.ws-page .card-note .sv{color:var(--accent);font-weight:500}
.ws-page .card-line{height:1px;background:var(--glass-border);margin-bottom:var(--s3)}
.ws-page .card-label{font-family:var(--font);font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:2px;color:var(--t3);margin-bottom:var(--s2)}

/* Features List */
.ws-page .features{list-style:none;display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s4)}
.ws-page .features li{display:flex;align-items:flex-start;gap:var(--s1);font-size:14px;font-weight:500;line-height:1.5;color:var(--t1)}
.ws-page .features .ck{flex-shrink:0;width:16px;height:16px;margin-top:2px;color:var(--accent)}
.ws-page .features li.off{color:#6e6e73;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.08)}
.ws-page .features li.off .ck{color:var(--t3);opacity:.25}

/* FrameLab Tooltip */

/* Card CTA */
.ws-page .card-cta{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;height:56px!important;border-radius:var(--r-lg)!important;
  background:var(--blue-brand)!important;border:1px solid rgba(0,113,227,.1)!important;
  color:var(--txt)!important;font-family:var(--font)!important;font-size:16px!important;font-weight:500!important;
  text-align:center!important;cursor:pointer!important;
  transition:transform 80ms var(--ease)!important;box-shadow:var(--shadow-btn)!important;
}
.ws-page .card-cta:hover{transform:translateY(-1px)}
.ws-page .card-cta:active{transform:scale(.97);transition-duration:40ms}
.ws-page .card[data-tier="gold"] .card-cta{
  background:linear-gradient(135deg,var(--gold),var(--gold2))!important;border-color:transparent!important;color:#000!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 8px rgba(240,192,64,.2),0 8px 24px rgba(240,192,64,.15)!important;
}

/* Installment Note */
.ws-page .installment-note{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:var(--s1)!important;
  margin-top:var(--s2)!important;font-size:14px!important;color:var(--t3)!important;
  opacity:0!important;transform:translateY(4px)!important;
  transition:transform .08s var(--ease),opacity .08s var(--ease)!important;
}
.ws-page .installment-note.show{opacity:1;transform:translateY(0)}
.ws-page .installment-note span{color:var(--t1);font-weight:500}

/* Trust Row */
.ws-page .trust{display:flex;justify-content:center;gap:var(--s3);flex-wrap:wrap}
.ws-page .trust-item{display:flex;align-items:center;gap:var(--s1);font-size:14px;color:var(--t3)}
.ws-page .trust-item svg{opacity:.4}

/* Value Grid */
.ws-page .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.ws-page .vcard{
  position:relative!important;background:var(--glass-card-bg)!important;border:1px solid var(--glass-card-border)!important;border-top-color:var(--glass-card-rim)!important;border-radius:var(--r-2xl)!important;
  padding:var(--s3)!important;cursor:default!important;transition:transform .08s var(--ease)!important;
  overflow:hidden!important;box-shadow:var(--glass-card-shadow)!important;
}
.ws-page .vcard::before{content:'';position:absolute;top:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent 3%,rgba(255,255,255,.35) 25%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.35) 75%,transparent 97%)}
.ws-page .vcard:hover{transform:translateY(-4px)}
.ws-page .vcard-icon{font-size:clamp(22px,3vw,32px);margin-bottom:var(--s2)}
.ws-page .vcard h3{font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:-.02em;margin-bottom:var(--s1)}
.ws-page .vcard h3 .accent{color:var(--blue-brand);font-weight:500}
.ws-page .vcard-peek{font-size:14px;color:var(--t2);transition:opacity .06s var(--ease)}
.ws-page .vcard-full{max-height:0;overflow:hidden;opacity:0;transition:opacity .08s var(--ease)}
.ws-page .vcard:hover .vcard-peek{opacity:0;height:0;margin:0}
.ws-page .vcard:hover .vcard-full{max-height:200px;opacity:1}
.ws-page .vcard-full p{font-size:14px;color:var(--t1);line-height:1.6;margin-top:var(--s1)}
.ws-page .vcard-full p strong{color:var(--t1);font-weight:500}
.ws-page .vcard-full .src{font-size:14px;color:var(--t3);margin-top:var(--s1);font-style:italic}

/* Bottom CTA Block */
.ws-page .cta-block{text-align:center;margin-top:var(--s8);padding-top:var(--s6);border-top:none!important}
.ws-page .cta-block h3{font-family:var(--font-display);font-size:clamp(24px,3.5vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.2;margin-bottom:var(--s1)}
.ws-page .cta-block p{font-size:clamp(16px,2vw,22px);color:var(--blue-brand);font-weight:500;font-style:italic;margin-bottom:var(--s3)}
.ws-page .cta-pill{
  display:inline-flex!important;align-items:center!important;gap:var(--s1)!important;height:56px!important;padding:0 var(--s4)!important;
  border-radius:var(--r-lg)!important;font-family:var(--font)!important;font-size:16px!important;font-weight:500!important;
  color:var(--t1)!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important;
  transition:transform 80ms var(--ease)!important;cursor:pointer!important;
}
.ws-page .cta-pill:hover{transform:translateY(-1px)}
.ws-page .cta-pill:active{transform:scale(.97);transition-duration:40ms}
.ws-page .cta-pill svg{width:16px;height:16px;transition:transform .08s var(--ease);}
.ws-page .cta-pill:hover svg{transform:translateX(4px)}

/* Pricing Dark Section Overrides — token-based for 3-color rotation */
.ws-page .section .pricing-explainer{color:var(--t2)}
.ws-page .section .stat-val{color:var(--t1)}
.ws-page .section .stat-lbl{color:var(--t2)}
.ws-page .section .stat-icon{color:var(--t2)}
.ws-page .section .toggle{background:var(--glass-bg);border-color:var(--glass-border)}
.ws-page .section .toggle-btn{color:var(--t2)}
.ws-page .section .toggle-btn.active{color:var(--t1)}
.ws-page .section .toggle-slider{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.15);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.ws-page .section .card{background:var(--glass-card-bg);border-color:var(--glass-card-border);border-top-color:var(--glass-card-rim);border-radius:var(--r-2xl);box-shadow:var(--glass-card-shadow)}
.ws-page .section .card::before{background:linear-gradient(90deg,transparent 3%,rgba(255,255,255,.35) 25%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.35) 75%,transparent 97%)}
.ws-page .section .card:hover{border-color:rgba(41,151,255,.3);box-shadow:var(--shadow-hover)}
.ws-page .section .card-name{color:var(--t1)}
.ws-page .section .card-price{color:var(--t1)}
.ws-page .section .card-mo{color:var(--t2)}
.ws-page .section .card-note{color:var(--t2)}
.ws-page .section .card-note .sv{color:var(--blue)}
.ws-page .section .card-line{background:var(--glass-border)}
.ws-page .section .card-label{color:var(--t2)}
.ws-page .section .features li{color:var(--t1)}
.ws-page .section .features li.off{color:var(--t2)}
.ws-page .section .features li.off .ck{color:var(--t2)}
.ws-page .section .trust-item{color:var(--t2)}
.ws-page .section .installment-note{color:var(--t2)}
.ws-page .section .installment-note span{color:var(--t1)}

/* Pricing Tokens (append to root) */
/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.ws-page .anim{animation:fadeUp .08s var(--ease) both}
.ws-page .anim:nth-child(1){animation-delay:.05s}
.ws-page .anim:nth-child(2){animation-delay:.1s}
.ws-page .anim:nth-child(3){animation-delay:.06s}

/* ═══ Website Responsive: Header + Footer + Pricing ═══ */
@media(max-width:900px){
  .ws-page .cards{grid-template-columns:1fr;max-width:480px;margin:0 auto var(--s2)}
  .ws-page .card[data-tier="gold"]{order:-1}
}
@media(max-width:768px){
  .ws-page .hero-title{white-space:normal}
  .ws-page .stats{flex-wrap:wrap;gap:var(--s1)}
  .ws-page .stat{min-width:calc(50% - 4px);flex:none;max-width:none}
  .ws-page .value-grid{grid-template-columns:1fr}
  .ws-page .vcard-peek{display:none}
  .ws-page .vcard-full{max-height:none;opacity:1}
  .ws-page .card-cta{height:48px}
  .ws-page .cta-pill{height:48px;padding:0 var(--s3)}
  .ws-page .cta-block h3{font-size:clamp(22px,5vw,32px)}
  /* Header mobile */
  .ws-page .cb-header-bar{padding:12px 16px}
  .ws-page .cb-header{padding:3px!important;gap:2px!important;top:8px!important}
  .ws-page .cb-logo img{height:18px}
  .ws-page .cb-nav-link{padding:6px 10px!important;font-size:12px!important}
  .ws-page .cb-nav-cta{padding:6px 14px!important;font-size:12px!important}
  /* Footer mobile */
  .ws-page .cb-footer{padding:var(--s4) var(--s3) var(--s3);border-radius:var(--r-lg)}
  .ws-page .cb-ft-grid{grid-template-columns:1fr;gap:var(--s3);margin-bottom:var(--s3)}
  .ws-page .cb-ft-brand{align-items:center;text-align:center}
  .ws-page .cb-ft-tagline{max-width:100%;text-align:center}
  .ws-page .cb-ft-social{justify-content:center}
  .ws-page .cb-ft-col{align-items:center;text-align:center}
  .ws-page .cb-ft-col-title{text-align:center}
  .ws-page .cb-ft-contact-item{text-align:center}
  .ws-page .cb-ft-hours{text-align:center}
  .ws-page .cb-ft-legal{justify-content:center;text-align:center}
  .ws-page .cb-ft-legal-links{justify-content:center}
}
@media(min-width:769px) and (max-width:1024px){
  .ws-page .value-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .ws-page .stat{min-width:calc(50% - 4px)}
}

/* ═══════════════════════════════════════════════════════
   FAQ PAGE COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* FAQ List */

/* FAQ Item (details element) */
.ws-page .faq-item{
  position:relative!important;background:var(--glass-card-bg)!important;border:1px solid var(--glass-card-border)!important;
  border-top-color:var(--glass-card-rim)!important;
  border-radius:var(--r-lg)!important;padding:0!important;box-shadow:var(--glass-card-shadow)!important;
  transition:transform .08s var(--ease),box-shadow .08s var(--ease),border-color .08s var(--ease)!important;
  list-style:none!important;
}
.ws-page .faq-item::before{
  content:''!important;position:absolute!important;top:0!important;left:5%!important;right:5%!important;height:1px!important;
  background:linear-gradient(90deg,transparent 3%,rgba(255,255,255,.35) 25%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.35) 75%,transparent 97%)!important;
}
.ws-page .faq-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:rgba(0,113,227,.2)}
.ws-page .faq-item[open]{border-color:rgba(0,113,227,.25)}

/* FAQ Summary (question row) */
.ws-page .faq-summary{
  display:flex!important;align-items:center!important;gap:var(--s2)!important;padding:var(--s3)!important;
  cursor:pointer!important;list-style:none!important;-webkit-user-select:none!important;user-select:none!important;
}
.ws-page .faq-summary::-webkit-details-marker{display:none}
.ws-page .faq-summary::marker{display:none;content:''}

/* FAQ Number Badge */
.ws-page .faq-number{
  flex-shrink:0!important;width:36px!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  border-radius:50%!important;background:linear-gradient(135deg,var(--blue-brand),var(--blue-hover))!important;
  color:var(--txt) !important;font-family:var(--font-display);font-size:14px;font-weight:500;
  box-shadow:0 4px 12px rgba(0,113,227,.25)!important;
}

/* FAQ Question Text */
.ws-page .faq-question{
  flex:1!important;font-family:var(--font-display)!important;font-size:clamp(16px,1.5vw,18px)!important;
  font-weight:500!important;line-height:1.4!important;color:var(--t1)!important;
}

/* FAQ Plus/Minus Toggle */
.ws-page .faq-toggle{flex-shrink:0;width:28px;height:28px;position:relative;display:flex;align-items:center;justify-content:center}
.ws-page .faq-toggle::before,.ws-page .faq-toggle::after{
  content:''!important;position:absolute!important;background:var(--text-3)!important;border-radius:2px!important;
  transition:transform .08s var(--ease),opacity .08s var(--ease)!important;
}
.ws-page .faq-toggle::before{width:16px;height:2px}
.ws-page .faq-toggle::after{width:2px;height:16px}
.ws-page .faq-item[open] .faq-toggle::after{transform:rotate(90deg);opacity:0}
.ws-page .faq-item[open] .faq-toggle::before{background:var(--blue-brand)}

/* FAQ Answer Content */
.ws-page .faq-content{padding:0 var(--s3) var(--s3);padding-left:calc(var(--s3) + 36px + var(--s2))}
.ws-page .faq-answer{font-family:var(--font);font-size:15px;line-height:1.7;color:var(--text-2)}

/* FAQ Slide Animation */
.ws-page .faq-item .faq-content{animation:faqSlideDown .08s var(--ease)}
@keyframes faqSlideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* FAQ Dark Section Overrides */
.ws-page .section .faq-question,
.ws-page .section .faq-number{color:var(--t1) !important}
.ws-page .section .faq-answer{color:var(--t2) !important}
.ws-page .section .faq-item{background:var(--glass-card-bg);border-color:var(--glass-card-border);border-top-color:var(--glass-card-rim);box-shadow:var(--glass-card-shadow)}
.ws-page .section .faq-item:hover{border-color:rgba(41,151,255,.3);box-shadow:var(--shadow-hover)}
.ws-page .section .faq-item[open]{border-color:rgba(41,151,255,.35)}
.ws-page .section .faq-item::before{background:linear-gradient(90deg,transparent 3%,rgba(255,255,255,.35) 25%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.35) 75%,transparent 97%)}
.ws-page .section .faq-number{background:linear-gradient(135deg,var(--blue),var(--blue-brand));box-shadow:0 4px 16px rgba(41,151,255,.3)}
.ws-page .section .faq-toggle::before,
.ws-page .section .faq-toggle::after{background:#a1a1a6}
.ws-page .section .faq-item[open] .faq-toggle::before{background:var(--blue)}

/* CTA Section */

/* btn-ghost (FAQ / general use) */
.ws-page .btn-ghost{
  background:transparent!important;border:1px solid var(--glass-border)!important;color:var(--blue-brand)!important;
  font-family:var(--font)!important;font-size:16px!important;font-weight:500!important;height:56px!important;padding:0 28px!important;
  border-radius:var(--r-lg)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:var(--s1)!important;
  transition: transform .08s var(--ease)!important, opacity .08s var(--ease)!important, background-color .08s var(--ease)!important, color .08s var(--ease)!important, box-shadow .08s var(--ease)!important, border-color .08s var(--ease)!important;cursor:pointer!important;
}
.ws-page .btn-ghost:hover{background:rgba(0,113,227,.06);border-color:rgba(0,113,227,.35)}
.ws-page .section .btn-ghost{color:var(--blue);border-color:rgba(41,151,255,.3)}
.ws-page .section .btn-ghost:hover{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.5)}

/* ═══ FAQ Responsive ═══ */
@media(max-width:768px){
  .ws-page .faq-summary{padding:var(--s2)}
  .ws-page .faq-content{padding:0 var(--s2) var(--s2);padding-left:calc(var(--s2) + 36px + var(--s2))}
  .ws-page .faq-number{width:32px;height:32px;font-size:13px}
  .ws-page .faq-question{font-size:15px}
  .ws-page .faq-answer{font-size:14px}
  .ws-page .faq-toggle{width:24px;height:24px}
  .ws-page .faq-toggle::before{width:14px}
  .ws-page .faq-toggle::after{height:14px}
}
@media(max-width:480px){
  .ws-page .faq-summary{gap:var(--s1)}
  .ws-page .faq-content{padding-left:calc(var(--s2) + 32px + var(--s1))}
}

/* ═══════════════════════════════════════════════════════
   BOOKING PAGE COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* Hero title accent (subtitle line) */
.ws-page .hero-title .accent{
  display:block;color:#6e6e73 !important;font-weight:500;font-size:.85em;
  letter-spacing:-.02em!important;margin-top:var(--s1)!important;
}

/* Booking Grid — Two columns: info left, calendar right */
.ws-page .booking-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--s4);align-items:stretch}
.ws-page .booking-info .section-label,.ws-page .booking-info .section-title,.ws-page .booking-info .section-sub{text-align:left!important;margin-left:0!important;margin-right:0!important}
.ws-page .booking-info{display:flex;flex-direction:column;gap:var(--s3)}
.ws-page .booking-info .section-label{margin-bottom:0}
.ws-page .booking-info .hero-title{margin-bottom:var(--s1);max-width:500px}
.ws-page .booking-info .section-sub{margin-bottom:var(--s2)}

/* Checklist */
.ws-page .checklist{display:flex;flex-direction:column;gap:var(--s2)}
.ws-page .checklist-icon{
  flex-shrink:0!important;width:28px!important;height:28px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  background:var(--blue-brand)!important;border-radius:50%!important;margin-top:1px!important;
}
.ws-page .checklist-icon svg{width:14px;height:14px;fill:none;stroke:var(--txt);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ws-page .checklist-text{font-family:var(--font);font-size:15px;font-weight:500;color:var(--text-1);line-height:1.5}

/* Calendar Embed Wrapper */

/* ═══ Booking Responsive ═══ */
@media(max-width:900px){
  .ws-page .booking-grid{grid-template-columns:1fr;gap:var(--s4)}
  .ws-page .booking-info{text-align:center;align-items:center}
  .ws-page .booking-info .hero-title{max-width:100%}
  .ws-page .booking-info .section-sub{margin-left:auto;margin-right:auto}
  .ws-page .checklist{max-width:520px;width:100%}
  .ws-page .checklist-item{text-align:left}
}
@media(max-width:768px){
  .ws-page .cal-wrap iframe{min-height:620px}
}
@media(max-width:480px){
  .ws-page .checklist-item{padding:12px}
  .ws-page .cal-wrap iframe{min-height:580px}
}

/* ═══════════════════════════════════════════════════════
   PORTFOLIO PAGE COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* Hero Badge */
.ws-page .hero-badge{
  font-family:var(--font)!important;font-size:14px!important;font-weight:500!important;letter-spacing:.06em!important;text-transform:uppercase!important;
  color:var(--blue-brand)!important;margin-bottom:var(--s2)!important;
}

/* Trust Inline (stars + text) */
.ws-page .trust-inline{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-bottom:var(--s4);margin-top:var(--s3)}
.ws-page .trust-inline .stars{display:flex;gap:6px}
.ws-page .trust-inline .stars svg{width:22px;height:22px;fill:var(--blue-brand)}
.ws-page .trust-text{font-family:var(--font);font-size:clamp(16px,2vw,20px);font-weight:500;color:var(--text-2)}

/* Brands Row (logo rotation) */
.ws-page .brands-row{display:flex;justify-content:center;align-items:center;gap:var(--s6);flex-wrap:nowrap;max-width:1200px;margin:0 auto var(--s4);padding:0 var(--s3);overflow:hidden}
.ws-page .brands-2row{display:flex;flex-direction:column;align-items:center;gap:var(--s3);max-width:900px;margin:0 auto var(--s4);padding:0 var(--s3)}
.ws-page .brands-row-inner{display:flex;justify-content:center;align-items:center;gap:var(--s6);flex-wrap:nowrap}
.ws-page .brand-slot{position:relative;width:110px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ws-page .brand-slot img{position:absolute;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;filter:brightness(0) invert(1);opacity:0;transition:opacity 3s ease-in-out}
.ws-page .brand-slot img.active{opacity:.6}
.ws-page .brand-slot:hover img.active{opacity:1}
.ws-page .section .brand-slot img{mix-blend-mode:normal;filter:brightness(0) invert(1);opacity:0}
.ws-page .section .brand-slot img.active{opacity:.6}
.ws-page .section .brand-slot:hover img.active{opacity:.85}

/* Creators Row */
.ws-page .creators-row{display:flex;justify-content:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.ws-page .creator{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .08s var(--ease)}
.ws-page .creator:hover{transform:translateY(-4px)}
.ws-page .creator-avatar{width:100px;height:100px;border-radius:50%;overflow:hidden;margin-bottom:var(--s1);border:2px solid var(--glass-border);transition:border-color .08s var(--ease)}
.ws-page .creator:hover .creator-avatar{border-color:var(--blue-brand)}
.ws-page .creator-avatar img{width:100%;height:100%;object-fit:cover}
.ws-page .creator-name{font-family:var(--font);font-size:14px;font-weight:500;color:var(--text-1);display:flex;align-items:center;gap:var(--s0)}
.ws-page .creator-name svg{width:14px;height:14px;fill:var(--blue-brand)}
.ws-page .creator-subs{font-family:var(--font);font-size:14px;font-weight:500;color:var(--blue-brand)}
.ws-page .creator-subs span{font-size:14px;color:var(--text-3);font-weight:400}

/* Hero CTAs */
.ws-page .hero-ctas{display:flex;justify-content:center;gap:var(--s2);flex-wrap:wrap}

/* Video Grids */
.ws-page .transform-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
.ws-page .video-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)}
.ws-page .video-card{
  position:relative!important;aspect-ratio:9/16!important;border-radius:var(--r-lg)!important;overflow:hidden!important;
  background:var(--glass-inner-bg)!important;border:1px solid var(--glass-inner-border)!important;border-top-color:var(--glass-inner-rim)!important;
  transition:transform .08s var(--ease),box-shadow .08s var(--ease)!important;
  box-shadow:var(--shadow-card)!important;contain:layout paint!important;
}
.ws-page .video-card:hover{transform:translateY(-4px);border-color:rgba(41,151,255,.25);box-shadow:var(--shadow-hover)}
.ws-page .video-card video{width:100%;height:100%;object-fit:cover}
.ws-page .video-overlay{
  position:absolute!important;bottom:0!important;left:0!important;right:0!important;padding:var(--s4) var(--s2) var(--s2)!important;
  background:linear-gradient(to top,rgba(0,0,0,.9),transparent)!important;
  opacity:0!important;transition:opacity .08s var(--ease)!important;
}
.ws-page .video-card:hover .video-overlay{opacity:1}
.ws-page .video-overlay-label{font-family:var(--font);font-size:14px;font-weight:500;color:#f5f5f7}
.ws-page .video-overlay-meta{font-family:var(--font);font-size:14px;color:var(--text-3)}
.ws-page .video-badge{
  position:absolute!important;top:var(--s1)!important;left:var(--s1)!important;padding:var(--s0) var(--s2)!important;
  font-family:var(--font)!important;font-size:14px!important;font-weight:500!important;text-transform:uppercase!important;
  background:rgba(0,113,227,.06)!important;color:var(--text-1)!important;border-radius:var(--r-pill)!important;
  border:1px solid rgba(0,113,227,.3)!important;z-index:2!important;
}

/* Dark section video overrides */
.ws-page .section .video-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.ws-page .section .video-card:hover{border-color:rgba(41,151,255,.25);box-shadow:0 4px 16px rgba(0,0,0,.2),0 12px 32px rgba(0,0,0,.15)}
.ws-page .section .video-badge{background:rgba(41,151,255,.15);color:var(--t1);border-color:rgba(41,151,255,.3)}

/* Testimonials */
.ws-page .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.ws-page .testimonial-card{
  position:relative!important;background:var(--glass-inner-bg)!important;border:1px solid var(--glass-inner-border)!important;border-top-color:var(--glass-inner-rim)!important;
  border-radius:var(--r-lg)!important;padding:var(--s3)!important;
  transition:transform .08s var(--ease),box-shadow .08s var(--ease)!important;
  box-shadow:var(--shadow-card)!important;contain:layout paint!important;
}
.ws-page .testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.ws-page .testimonial-header{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.ws-page .testimonial-avatar{
  width:40px!important;height:40px!important;border-radius:50%!important;
  background:linear-gradient(180deg,var(--blue-hover),var(--blue-brand) 40%,var(--blue-hover))!important;
  display:flex!important;align-items:center!important;justify-content:center!important;font-weight:500!important;color:var(--txt)!important;font-size:14px!important;font-family:var(--font)!important;
}
.ws-page .testimonial-name{font-family:var(--font);font-size:16px;font-weight:500;color:var(--text-1)}
.ws-page .testimonial-stars{color:var(--gold);font-size:14px;letter-spacing:1px}
.ws-page .testimonial-headline{font-family:var(--font);font-size:16px;font-weight:500;color:var(--text-1);margin-bottom:var(--s1)}
.ws-page .testimonial-quote{font-family:var(--font);font-size:16px;font-weight:400;color:var(--text-2);line-height:1.6;font-style:italic}

/* Dark section testimonial overrides */
.ws-page .section .testimonial-card{background:var(--glass-inner-bg);border-color:var(--glass-inner-border);border-top-color:var(--glass-inner-rim);box-shadow:var(--shadow-card)}
.ws-page .section .testimonial-card:hover{border-color:rgba(41,151,255,.25);box-shadow:var(--shadow-hover)}
.ws-page .section .testimonial-name{color:var(--t1) !important}
.ws-page .section .testimonial-headline{color:var(--t1) !important}
.ws-page .section .testimonial-quote{color:var(--t2) !important}
.ws-page .section .testimonial-stars{color:var(--gold)}

/* Niche Pills */
.ws-page .niche-pills{display:flex;justify-content:center;gap:var(--s1);flex-wrap:wrap;margin-bottom:var(--s3)}
.ws-page .niche-pill{
  padding:var(--s1) var(--s2)!important;background:rgba(0,113,227,.06)!important;
  border:1px solid rgba(0,113,227,.3)!important;border-radius:var(--r-pill)!important;
  font-family:var(--font)!important;font-size:14px!important;color:var(--text-2)!important;transition:background .08s var(--ease),color .08s var(--ease)!important;
}
.ws-page .niche-pill:hover{background:rgba(0,113,227,.2);color:var(--text-1)}
.ws-page .section .niche-pill{background:rgba(41,151,255,.1);color:var(--t2);border-color:rgba(41,151,255,.2)}
.ws-page .section .niche-pill:hover{background:rgba(41,151,255,.2);color:var(--t1)}

/* Long-Form Creator Cards */
.ws-page .longform-creator{
  position:relative!important;background:var(--glass-inner-bg)!important;border:1px solid var(--glass-inner-border)!important;border-top-color:var(--glass-inner-rim)!important;
  border-radius:var(--r-lg)!important;margin-bottom:var(--s3)!important;overflow:hidden!important;
  transition:transform .08s var(--ease),box-shadow .08s var(--ease)!important;
  box-shadow:var(--shadow-card)!important;contain:layout paint!important;
}
.ws-page .longform-creator:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.ws-page .longform-header{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-bottom:1px solid var(--glass-border)}
.ws-page .longform-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid rgba(0,113,227,.3)}
.ws-page .longform-avatar img{width:100%;height:100%;object-fit:cover}
.ws-page .longform-name{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--text-1);margin-bottom:var(--s0)}
.ws-page .longform-subs{font-family:var(--font);font-size:16px;color:var(--blue-brand);margin-bottom:var(--s0)}
.ws-page .longform-link{font-family:var(--font);font-size:14px;color:var(--text-3);text-decoration:none;display:flex;align-items:center;gap:var(--s1);transition:color .08s var(--ease)}
.ws-page .longform-link:hover{color:#ff0000}
.ws-page .longform-link svg{fill:currentColor}
.ws-page .longform-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);padding:var(--s3)}
.ws-page .longform-video{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9}
.ws-page .longform-video img{width:100%;height:100%;object-fit:cover;transition:transform .08s var(--ease)}
.ws-page .longform-video:hover img{transform:scale(1.04)}
.ws-page .longform-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.9;transition:opacity .08s var(--ease)}
.ws-page .longform-video:hover .longform-play{opacity:1}

/* Dark section longform overrides */
.ws-page .section .longform-creator{background:var(--glass-inner-bg);border-color:var(--glass-inner-border);border-top-color:var(--glass-inner-rim);box-shadow:var(--shadow-card)}
.ws-page .section .longform-creator:hover{border-color:rgba(41,151,255,.25);box-shadow:var(--shadow-hover)}
.ws-page .section .longform-header{border-bottom-color:rgba(255,255,255,.08)}
.ws-page .section .longform-name{color:var(--t1)}
.ws-page .section .longform-subs{color:var(--blue)}
.ws-page .section .longform-link{color:var(--t2)}

/* Final CTA */
.ws-page .final-cta-title{
  font-family:var(--font-display)!important;font-size:clamp(28px,3.5vw,40px)!important;font-weight:500!important;color:var(--text-1)!important;
  margin-bottom:var(--s2)!important;letter-spacing:-.035em!important;
}
.ws-page .final-cta-subtitle{font-family:var(--font);font-size:18px;font-weight:400;color:var(--text-2);margin-bottom:var(--s3)}
.ws-page .final-cta-note{font-family:var(--font);font-size:14px;color:var(--text-3);margin-top:var(--s2);font-style:italic}

/* Dark section final CTA overrides */
.ws-page .section .final-cta-title{color:var(--t1) !important}
.ws-page .section .final-cta-subtitle{color:var(--t2) !important}
.ws-page .section .final-cta-note{color:var(--t2) !important}

/* Dark section general text overrides (portfolio) */
.ws-page .section .section-subtitle{color:var(--t2) !important}
.ws-page .section .video-overlay-label{color:var(--t1) !important}
.ws-page .section .video-overlay-meta{color:var(--t2) !important}
.ws-page .section .trust-text{color:var(--t2) !important}

/* ═══ Portfolio Responsive ═══ */
@media(max-width:1100px){
  .ws-page .transform-grid{grid-template-columns:repeat(4,1fr)}
  .ws-page .video-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:768px){
  .ws-page .transform-grid{grid-template-columns:repeat(3,1fr)}
  .ws-page .video-grid{grid-template-columns:repeat(3,1fr)}
  .ws-page .testimonials-grid{grid-template-columns:1fr}
  .ws-page .longform-videos{grid-template-columns:repeat(2,1fr)}
  .ws-page .brands-row{gap:var(--s3)}
  .ws-page .creators-row{gap:var(--s2)}
  .ws-page .creator-avatar{width:72px;height:72px}
}
@media(max-width:480px){
  .ws-page .transform-grid{grid-template-columns:repeat(2,1fr)}
  .ws-page .video-grid{grid-template-columns:repeat(2,1fr)}
  .ws-page .longform-videos{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════
   CONTACT DETAILS PAGE COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* Two-Column Grid */
.ws-page .contact-grid{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:var(--s6)!important;
  align-items:stretch!important;position:relative!important;z-index:1!important;
}

/* Left Column — Info */
.ws-page .contact-info{display:flex;flex-direction:column;gap:var(--s4);padding-top:var(--s2)}

/* Contact Title */
.ws-page .contact-title{
  font-family:var(--font-display)!important;font-size:clamp(30px,4.5vw,56px)!important;font-weight:500!important;
  letter-spacing:-.04em!important;line-height:1.08!important;color:var(--text-1)!important;
}
.ws-page .contact-title .title-line-2{
  display:block!important;color:var(--text-2)!important;font-weight:500!important;font-size:.85em!important;
}

/* Subtitle */
.ws-page .contact-subtitle{
  font-family:var(--font)!important;font-size:17px!important;line-height:1.65!important;color:var(--text-2)!important;max-width:480px!important;
}

/* Check Items (contact-details style) */
.ws-page .check-item{
  display:flex!important;align-items:flex-start!important;gap:12px!important;
  background:var(--glass-tint)!important;border:1px solid var(--glass-border)!important;
  border-radius:var(--r-md)!important;padding:14px var(--s2)!important;
  transition:box-shadow .08s var(--ease),transform .08s var(--ease)!important;
}
.ws-page .check-item:hover{box-shadow:var(--shadow-card);transform:translateY(-1px)}

/* Form Wrap */
.ws-page .form-wrap{
  background:var(--glass-tint)!important;border:1px solid var(--glass-border)!important;
  border-radius:var(--r-lg)!important;box-shadow:var(--shadow-card)!important;
  padding:var(--s4)!important;position:relative!important;z-index:1!important;
height:100%!important;}

/* ═══ Contact Details Responsive ═══ */
@media(max-width:860px){
  .ws-page .contact-grid{grid-template-columns:1fr;gap:var(--s4)}
  .ws-page .contact-info{padding-top:0;text-align:center;align-items:center}
  .ws-page .contact-subtitle{max-width:100%}
  .ws-page .checklist{max-width:480px;width:100%}
  .ws-page .check-item{text-align:left}
}
@media(max-width:480px){
  .ws-page .contact-title{font-size:clamp(26px,7vw,36px)}
  .ws-page .form-wrap{padding:var(--s3)}
  .ws-page .check-item{padding:12px 14px}
}

/* ═══════════════════════════════════════════════════════
   CONFIRMATION PAGE COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* Main Section */
.ws-page .confirmation-section{
  position:relative!important;overflow:hidden!important;padding:var(--s10) var(--s3)!important;
  background:transparent!important;border-top:none!important;
}
.ws-page .confirmation-section::before{
  content:''!important;position:absolute!important;top:-120px!important;right:-80px!important;
  width:400px!important;height:400px!important;
  background:radial-gradient(circle,rgba(0,113,227,.06) 0%,rgba(0,113,227,.02) 40%,transparent 70%)!important;
  border-radius:50%!important;pointer-events:none!important;z-index:0!important;
}

/* Content Wrap */
.ws-page .confirmation-wrap{position:relative;z-index:1;max-width:680px;margin:0 auto;text-align:center}

/* Fireworks Canvas */

/* Checkmark Circle */
.ws-page .checkmark-circle{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:80px!important;height:80px!important;background:var(--green)!important;border-radius:50%!important;
  margin-bottom:var(--s4)!important;animation:checkPop .08s var(--ease) both!important;
}
.ws-page .checkmark-circle svg{width:40px;height:40px}
@keyframes checkPop{
  0%{transform:scale(0)!important;opacity:0}
  50%{transform:scale(1.15)}
  100%{transform:scale(1)!important;opacity:1}
}

/* Title */
.ws-page .confirmation-title{
  font-family:var(--font-display)!important;font-size:clamp(30px,4.5vw,56px)!important;font-weight:500!important;
  letter-spacing:-.04em!important;color:var(--text-1)!important;line-height:1.1!important;margin-bottom:var(--s2)!important;
}

/* Subtitle */
.ws-page .confirmation-subtitle{
  font-family:var(--font)!important;font-size:clamp(16px,1.8vw,20px)!important;font-weight:400!important;
  color:var(--text-2)!important;line-height:1.5!important;margin-bottom:var(--s6)!important;
}

/* Next Steps Card */
.ws-page .steps-card{
  background:var(--glass-card-bg)!important;border:1px solid var(--glass-card-border)!important;border-top-color:var(--glass-card-rim)!important;
  border-radius:var(--r-2xl)!important;box-shadow:var(--glass-card-shadow)!important;
  padding:var(--s6) var(--s4)!important;text-align:left!important;margin-bottom:var(--s6)!important;
}
.ws-page .step{display:flex;align-items:flex-start;gap:var(--s3)}
.ws-page .step + .step{margin-top:var(--s4)}

/* Bottom Note */
.ws-page .confirmation-note{font-family:var(--font);font-size:14px;font-weight:400;color:var(--text-3);line-height:1.5}

/* Fade-in Animations */
.ws-page .fade-up{opacity:0;transform:translateY(20px);animation:fadeUp .08s var(--ease) forwards}
.ws-page .fade-up-d1{animation-delay:.06s}
.ws-page .fade-up-d2{animation-delay:.08s}
.ws-page .fade-up-d3{animation-delay:.08s}
.ws-page .fade-up-d4{animation-delay:.08s}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* ═══ Confirmation Responsive ═══ */
@media(max-width:600px){
  .ws-page .confirmation-section{padding:var(--s8) var(--s2)}
  .ws-page .steps-card{padding:var(--s4) var(--s3)}
  .ws-page .step{gap:var(--s2)}
  .ws-page .confirmation-section::before{width:260px;height:260px;top:-80px;right:-40px}
}

/* ═══════════════════════════════════════════════════════
   LEGAL PAGE COMPONENTS (Privacy Policy & Terms)
   ═══════════════════════════════════════════════════════ */

/* Page Header */
.ws-page .page-header{text-align:center;margin-bottom:var(--s6)}

/* Legal Section Cards — alternating styles */
.ws-page .legal-section{
  position:relative!important;overflow:hidden!important;border-radius:var(--r-lg)!important;
  padding:var(--s3)!important;box-shadow:var(--shadow-card)!important;margin-bottom:var(--s3)!important;
}
.ws-page .legal-section:nth-of-type(odd){background:var(--glass-card-bg);border:1px solid var(--glass-card-border);border-top-color:var(--glass-card-rim)}
.ws-page .legal-section:nth-of-type(even){background:var(--glass-card-bg);border:1px solid var(--glass-card-border);border-top-color:var(--glass-card-rim)}
.ws-page .legal-section h2{
  font-family:var(--font-display)!important;font-size:clamp(22px,2.5vw,32px)!important;font-weight:500!important;
  color:var(--text-1)!important;margin-bottom:var(--s2)!important;padding-bottom:var(--s1)!important;
  border-bottom:1px solid var(--glass-border)!important;
}
.ws-page .legal-section h3{font-size:16px;font-weight:500;color:var(--blue-brand);margin:var(--s2) 0 var(--s1)}
.ws-page .legal-section p{font-size:16px;font-weight:400;color:var(--text-2);line-height:1.65;margin-bottom:var(--s1)}
.ws-page .legal-section ul,.ws-page .legal-section ol{margin:var(--s1) 0;padding-left:var(--s3)}
.ws-page .legal-section li{font-size:16px;font-weight:400;color:var(--text-2);line-height:1.55;margin-bottom:var(--s0)}
.ws-page .legal-section strong{color:var(--text-1)}

/* Highlight Box */
.ws-page .highlight-box{
  position:relative!important;overflow:hidden!important;background:var(--glass-tint)!important;
  border:1px solid var(--glass-border)!important;border-radius:var(--r-md)!important;
  padding:var(--s2) var(--s3)!important;margin:var(--s2) 0!important;box-shadow:var(--shadow-card)!important;
}
.ws-page .highlight-box p{margin:0;color:var(--text-1);font-size:16px;line-height:1.65}

/* Contact Box (dark section) */
.ws-page .contact-box{
  position:relative!important;overflow:hidden!important;
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.1)!important;
  border-radius:var(--r-lg)!important;padding:var(--s4)!important;box-shadow:var(--shadow-card)!important;
}
.ws-page .contact-box h3{font-family:var(--font-display);font-size:22px;font-weight:500;margin-bottom:var(--s2)}
.ws-page .contact-box > p{font-size:16px;margin-bottom:var(--s2)}
.ws-page .contact-item{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s1);font-size:16px}
.ws-page .contact-item svg{width:18px;height:18px;color:var(--blue);flex-shrink:0}
.ws-page .contact-item a{color:var(--blue);text-decoration:none;transition:color .08s var(--ease)}
.ws-page .contact-item a:hover{color:#6cb4ff}
.ws-page .response-time{margin-top:var(--s2);font-size:14px;color:var(--t2)}
.ws-page .response-time strong{color:var(--t1)}

/* Dark section overrides for legal pages */
.ws-page .section .contact-box h3{color:var(--t1)}
.ws-page .section .contact-box > p{color:var(--t2)}
.ws-page .section .contact-item{color:var(--t2)}
.ws-page .section .contact-item svg{color:var(--blue)}
.ws-page .section .response-time strong{color:var(--t1)}

/* Last Updated */
.ws-page .last-updated{font-size:14px;color:var(--text-3);margin-top:var(--s1)}

/* Warning Box */
.ws-page .warning-box{
  background:var(--glass-tint)!important;border:1px solid var(--glass-border)!important;
  border-radius:var(--r-md)!important;padding:var(--s2) var(--s3)!important;margin:var(--s2) 0!important;
}
.ws-page .warning-box p{margin:0;color:var(--text-1);font-size:16px;line-height:1.65}
.ws-page .warning-box strong{color:var(--text-1)}

/* Plan Table */
.ws-page .plan-table{
  width:100%!important;border-collapse:collapse!important;margin:var(--s3) 0!important;
  background:var(--glass-bg,var(--txt))!important;border:1px solid var(--glass-border)!important;
  border-radius:var(--r-md)!important;overflow:hidden!important;box-shadow:var(--shadow-card)!important;
}
.ws-page .plan-table th,.ws-page .plan-table td{
  padding:var(--s2) var(--s3)!important;text-align:left!important;border-bottom:1px solid var(--glass-border)!important;
}
.ws-page .plan-table th{
  background:var(--glass-tint)!important;color:var(--text-1)!important;font-weight:500!important;
  font-size:14px!important;text-transform:uppercase!important;letter-spacing:.5px!important;
}
.ws-page .plan-table td{color:var(--text-2);font-size:16px}
.ws-page .plan-table tr:last-child td{border-bottom:none}
.ws-page .plan-table .plan-name{font-weight:500;color:var(--blue-brand)}
.ws-page .plan-table tbody tr:hover{background:var(--glass-tint)}

/* Button Row */
.ws-page .btn-row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}

/* Staggered Legal Section Fade-Up Animations */
.ws-page .legal-section:nth-of-type(1){animation:fadeUp .08s var(--ease) .03s both}
.ws-page .legal-section:nth-of-type(2){animation:fadeUp .08s var(--ease) .06s both}
.ws-page .legal-section:nth-of-type(3){animation:fadeUp .08s var(--ease) .09s both}
.ws-page .legal-section:nth-of-type(4){animation:fadeUp .08s var(--ease) .12s both}
.ws-page .legal-section:nth-of-type(5){animation:fadeUp .08s var(--ease) .06s both}
.ws-page .legal-section:nth-of-type(6){animation:fadeUp .08s var(--ease) .18s both}
.ws-page .legal-section:nth-of-type(7){animation:fadeUp .08s var(--ease) .21s both}
.ws-page .legal-section:nth-of-type(8){animation:fadeUp .08s var(--ease) .24s both}
.ws-page .legal-section:nth-of-type(9){animation:fadeUp .08s var(--ease) .27s both}
.ws-page .legal-section:nth-of-type(10){animation:fadeUp .08s var(--ease) .30s both}
.ws-page .legal-section:nth-of-type(11){animation:fadeUp .08s var(--ease) .33s both}
.ws-page .legal-section:nth-of-type(12){animation:fadeUp .08s var(--ease) .36s both}
.ws-page .legal-section:nth-of-type(13){animation:fadeUp .08s var(--ease) .39s both}
.ws-page .legal-section:nth-of-type(14){animation:fadeUp .08s var(--ease) .42s both}
.ws-page .legal-section:nth-of-type(15){animation:fadeUp .08s var(--ease) .45s both}
.ws-page .legal-section:nth-of-type(16){animation:fadeUp .08s var(--ease) .48s both}
.ws-page .legal-section:nth-of-type(17){animation:fadeUp .08s var(--ease) .51s both}

/* ═══ Legal Responsive ═══ */
@media(max-width:768px){
  .ws-page .legal-section h2{font-size:22px}
  .ws-page .contact-box{padding:var(--s3)}
  .ws-page .legal-section{margin-bottom:var(--s2)}
  .ws-page .btn-row{flex-direction:column}
  .ws-page .btn-row .btn{width:100%;justify-content:center}
  .ws-page .plan-table th,.ws-page .plan-table td{padding:var(--s1) var(--s2);font-size:14px}
  .ws-page .legal-section{padding:var(--s2)}
}

/* ═══════════════════════════════════════════════════════════════════
   CAREERS PAGE COMPONENTS
   Standalone page: dark nav + dark hero + white roles + wizard modal
   ═══════════════════════════════════════════════════════════════════ */

/* ── Careers Nav ── */
.ws-page .careers-nav{
  position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:100!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:0 var(--s6)!important;height:52px!important;
  background:rgba(12,22,39,0.92)!important;
  border-bottom:1px solid rgba(255,255,255,0.07)!important;
}
.ws-page .nav-logo{
  font-family:var(--font-display)!important;font-size:17px!important;font-weight:500!important;
  color:var(--txt)!important;text-decoration:none!important;letter-spacing:-0.02em!important;
}
.ws-page .nav-back{
  font-family:var(--font)!important;font-size:14px!important;font-weight:500!important;
  color:var(--blue)!important;text-decoration:none!important;
  transition:opacity 80ms var(--ease)!important;
}
.ws-page .nav-back:hover{opacity:0.75}

/* ── Careers Hero ── */
.ws-page .hero .hero-label{
  font-family:var(--font)!important;font-size:13px!important;font-weight:500!important;
  text-transform:uppercase!important;letter-spacing:2px!important;color:var(--blue)!important;
  margin-bottom:var(--s3)!important;
}
.ws-page .roles-section .hero-sub{
  font-size:clamp(16px,1.8vw,20px)!important;font-weight:400!important;
  color:rgba(255,255,255,0.58)!important;max-width:100%!important;margin:0 auto!important;
  line-height:1.5!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;
}
.ws-page .hero-pills{
  display:flex!important;gap:10px!important;justify-content:center!important;
  margin-top:var(--s6)!important;flex-wrap:wrap!important;
}
.ws-page .hero .hero-pill{
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  padding:var(--s1) 16px!important;border-radius:var(--r-pill,100px)!important;
  border:1px solid rgba(255,255,255,0.15)!important;
  background:rgba(255,255,255,0.06)!important;
  font-family:var(--font)!important;font-size:13px!important;font-weight:500!important;
  color:rgba(255,255,255,0.7)!important;white-space:nowrap!important;
}
.ws-page .hero .hero-pill::before{display:none}

/* ── Careers Roles Section ── */
.ws-page .roles-section{
  background:transparent!important;
  padding:var(--s10) 20px 60px!important;
}
.ws-page .roles-section .section-label{
  font-size:13px!important;text-align:center!important;margin-bottom:var(--s3)!important;
}
.ws-page .roles-section .section-title{
  font-size:clamp(28px,4vw,48px)!important;
  text-align:center!important;margin-bottom:var(--s2)!important;
}
.ws-page .roles-section .section-sub{
  font-family:var(--font-display)!important;
  font-size:clamp(16px,1.8vw,20px)!important;font-weight:400!important;
  color:var(--t2)!important;text-align:center!important;
  max-width:100%!important;margin:0 auto var(--s8)!important;
  display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;
}
.ws-page .roles-grid{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  gap:var(--s4)!important;max-width:1080px!important;margin:0 auto!important;
}
.ws-page .role-card{
  background:var(--glass-card-bg)!important;border:1px solid var(--glass-card-border)!important;
  border-top-color:var(--glass-card-rim)!important;
  border-radius:var(--r-2xl,24px)!important;padding:var(--s6) var(--s4)!important;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  box-shadow:var(--glass-card-shadow)!important;
  transition:transform .08s var(--ease)!important;
  
  position:relative!important;overflow:hidden!important;
}
.ws-page .role-card::before{
  content:''!important;position:absolute!important;top:0!important;left:0!important;right:0!important;height:3px!important;
  background:linear-gradient(90deg,var(--blue-brand),var(--blue))!important;
  opacity:0!important;transition:opacity .08s var(--ease)!important;
}
.ws-page .role-card:hover{transform:translateY(-5px)}
.ws-page .role-card:hover::before{opacity:1}
.ws-page .role-icon{
  width:52px!important;height:52px!important;border-radius:var(--r-lg)!important;
  background:rgba(41,151,255,.12)!important;border:1px solid rgba(41,151,255,.2)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  margin-bottom:var(--s3)!important;font-size:24px!important;
}
.ws-page .role-card h3{
  font-family:var(--font-display)!important;font-size:22px!important;font-weight:500!important;
  letter-spacing:-0.025em!important;color:var(--t1)!important;margin-bottom:var(--s2)!important;
}
.ws-page .role-card p{
  font-family:var(--font)!important;font-size:15px!important;color:var(--t2)!important;
  line-height:1.58!important;flex:1!important;margin-bottom:var(--s4)!important;
}
.ws-page .role-card .btn-primary{width:100%}

/* ── Careers Wizard Overlay ── */
.ws-page .wizard-overlay{
  position:fixed!important;inset:0!important;z-index:1000!important;
  background:rgba(0,0,0,0.72)!important;
  display:none!important;align-items:center!important;justify-content:center!important;
  padding:var(--s3)!important;overflow-y:auto!important;
}
.ws-page .wizard-overlay.active{display:flex}

.ws-page .wizard-modal{
  background:rgba(8,12,20,.96)!important;border:1px solid var(--glass-card-border)!important;border-radius:var(--r-island)!important;
  width:100%!important;max-width:700px!important;
  max-height:92vh!important;overflow-y:auto!important;
  box-shadow:0 32px 100px rgba(0,0,0,0.4)!important;
  position:relative!important;animation:wIn .08s var(--ease) forwards!important;
  scrollbar-width:thin!important;scrollbar-color:var(--glass-border,#d2d2d7) transparent!important;
}
@keyframes wIn{
  from{opacity:0;transform:translateY(28px) scale(0.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.ws-page .wizard-modal::-webkit-scrollbar{width:6px}
.ws-page .wizard-modal::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:3px}

/* Wizard Header */
.ws-page .wizard-header{
  padding:var(--s4) var(--s6) var(--s3)!important;
  position:sticky!important;top:0!important;z-index:10!important;
  background:rgba(8,12,20,.96)!important;
  border-bottom:1px solid var(--glass-border)!important;
}
.ws-page .wizard-header-row{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  margin-bottom:var(--s3)!important;
}
.ws-page .role-badge{
  font-family:var(--font)!important;font-size:11px!important;font-weight:500!important;
  text-transform:uppercase!important;letter-spacing:1.5px!important;color:var(--blue-brand)!important;
  background:rgba(0,113,227,0.09)!important;padding:5px 12px!important;
  border-radius:var(--r-pill,100px)!important;
}
.ws-page .wizard-close{
  width:32px!important;height:32px!important;border-radius:50%!important;
  background:var(--glass-bg-alt,#f5f5f7)!important;border:none!important;cursor:pointer!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font-size:16px!important;color:var(--t2)!important;
  transition:opacity 80ms var(--ease)!important;
}
.ws-page .wizard-close:hover{background:var(--glass-border);color:var(--t1)}
.ws-page .progress-row{display:flex;align-items:center;gap:10px}
.ws-page .progress-track{
  flex:1!important;height:4px!important;background:var(--glass-bg-alt)!important;
  border-radius:2px!important;overflow:hidden!important;
}
.ws-page .progress-label{
  font-family:var(--font)!important;font-size:12px!important;font-weight:500!important;
  color:var(--t3)!important;white-space:nowrap!important;
}

/* Wizard Body */
.ws-page .step-sub{
  font-family:var(--font)!important;font-size:15px!important;color:var(--t2)!important;
  line-height:1.55!important;margin-bottom:var(--s4)!important;
}

/* ── Careers Form Controls ── */
.ws-page .form-group{margin-bottom:var(--s3)}
.ws-page .form-label{
  display:block!important;font-family:var(--font)!important;font-size:13px!important;
  font-weight:500!important;color:var(--t1)!important;margin-bottom:6px!important;letter-spacing:-0.01em!important;
}
.ws-page .req{color:var(--blue-brand);margin-left:2px}
.ws-page .optional{color:var(--t3);font-weight:400;font-size:12px}

.ws-page .form-input,.ws-page .form-select,.ws-page .form-textarea{
  width:100%!important;padding:11px 14px!important;
  font-family:var(--font)!important;font-size:15px!important;color:var(--t1)!important;
  background:var(--glass-bg-alt)!important;border:1px solid var(--glass-border)!important;
  border-radius:var(--r-lg)!important;outline:none!important;
  transition:border-color 80ms var(--ease),box-shadow 80ms var(--ease)!important;
  -webkit-appearance:none!important;
}
.ws-page .form-input:focus,.ws-page .form-select:focus,.ws-page .form-textarea:focus{
  border-color:var(--blue-brand)!important;
  box-shadow:0 0 0 3px rgba(0,113,227,0.12)!important;
  background:var(--txt)!important;
}
.ws-page .form-input::placeholder,.ws-page .form-textarea::placeholder{color:var(--t3)}
.ws-page .form-textarea{min-height:120px;resize:vertical;line-height:1.55}
.ws-page .form-textarea.tall{min-height:165px}
.ws-page .form-input.err,.ws-page .form-textarea.err,.ws-page .form-select.err{border-color:var(--red)}

/* Info / Warning Boxes */
.ws-page .info-box{
  background:rgba(0,113,227,0.05)!important;border:1px solid rgba(0,113,227,0.14)!important;
  border-radius:var(--r-lg)!important;padding:var(--s3)!important;margin-bottom:var(--s4)!important;
}
.ws-page .info-box-label{
  font-family:var(--font)!important;font-size:11px!important;font-weight:500!important;
  text-transform:uppercase!important;letter-spacing:0.8px!important;color:var(--blue-brand)!important;
  margin-bottom:var(--s1)!important;
}
.ws-page .info-box p{font-family:var(--font);font-size:14px;color:var(--t1);line-height:1.6}
.ws-page .info-box a{color:var(--blue-brand);text-decoration:none;font-weight:500}
.ws-page .info-box a:hover{text-decoration:underline}

.ws-page .warn-box{
  background:rgba(245,166,35,0.07)!important;border:1px solid rgba(245,166,35,0.22)!important;
  border-radius:var(--r-lg)!important;padding:var(--s3)!important;margin-bottom:var(--s4)!important;
}
.ws-page .warn-box p{font-family:var(--font);font-size:14px;color:#7a5500;line-height:1.6}

/* ── Radio Options ── */
.ws-page .radio-group{display:flex;flex-direction:column;gap:var(--s2)}
.ws-page .radio-opt{
  display:flex!important;align-items:center!important;gap:12px!important;
  padding:13px 16px!important;border:1px solid var(--glass-border)!important;
  border-radius:var(--r-lg)!important;cursor:pointer!important;user-select:none!important;
}
.ws-page .radio-opt:hover{border-color:rgba(0,113,227,0.3);background:rgba(0,113,227,0.025)}
.ws-page .radio-opt.sel{border-color:var(--blue-brand);background:rgba(0,113,227,0.055)}
.ws-page .radio-opt.sel .radio-dot{border-color:var(--blue-brand)}
.ws-page .radio-dot-inner{
  width:8px!important;height:8px!important;border-radius:50%!important;
  background:var(--blue-brand)!important;opacity:0!important;transform:scale(0.6)!important;
  transition:opacity .08s var(--ease),transform .08s var(--ease)!important;
  
}
.ws-page .radio-opt.sel .radio-dot-inner{opacity:1;transform:scale(1)}
.ws-page .radio-text{font-family:var(--font);font-size:15px;color:var(--t1);font-weight:500}

/* ── Chips ── */
.ws-page .chips-wrap{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s3)}
.ws-page .chip.sel{background:var(--blue-brand);border-color:var(--blue-brand);color:var(--txt)}
.ws-page .custom-chip-row{display:flex;gap:var(--s2)}
.ws-page .custom-chip-row input{flex:1}
.ws-page .custom-chip-row .add-btn{
  padding:10px 18px!important;background:var(--glass-bg-alt)!important;
  border:1px solid var(--glass-border)!important;border-radius:var(--r-lg)!important;
  font-family:var(--font)!important;font-size:13px!important;font-weight:500!important;
  color:var(--t1)!important;cursor:pointer!important;white-space:nowrap!important;
}
.ws-page .custom-chip-row .add-btn:hover{background:rgba(0,113,227,0.07);border-color:var(--blue-brand);color:var(--blue-brand)}

/* ── File Upload ── */
.ws-page .upload-zone{
  border:2px dashed var(--glass-border)!important;border-radius:var(--r-xl)!important;
  padding:var(--s6) var(--s4)!important;text-align:center!important;cursor:pointer!important;
}
.ws-page .upload-zone:hover,.ws-page .upload-zone.drag{border-color:var(--blue-brand);background:rgba(0,113,227,0.03)}
.ws-page .upload-zone input[type="file"]{display:none}
.ws-page .upload-icon{font-size:30px;margin-bottom:var(--s2)}
.ws-page .upload-title{font-family:var(--font);font-size:15px;font-weight:500;color:var(--t1);margin-bottom:var(--s0)}
.ws-page .upload-hint{font-family:var(--font);font-size:13px;color:var(--t3)}
.ws-page .upload-fname{
  margin-top:var(--s2)!important;font-family:var(--font)!important;
  font-size:13px!important;color:var(--blue-brand)!important;font-weight:500!important;min-height:18px!important;
}

/* ── Checkbox (Careers) ── */
.ws-page .check-opt{
  display:flex!important;align-items:flex-start!important;gap:12px!important;
  padding:14px 16px!important;border:1px solid var(--glass-border)!important;
  border-radius:var(--r-lg)!important;cursor:pointer!important;user-select:none!important;
}
.ws-page .check-opt:hover{border-color:rgba(0,113,227,0.3)}
.ws-page .check-opt.sel{border-color:var(--blue-brand);background:rgba(0,113,227,0.04)}
.ws-page .check-box{
  width:18px!important;height:18px!important;border-radius:5px!important;
  border:2px solid var(--glass-border)!important;flex-shrink:0!important;margin-top:2px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font-size:11px!important;color:var(--txt)!important;
}
.ws-page .check-opt.sel .check-box{background:var(--blue-brand);border-color:var(--blue-brand)}
.ws-page .check-opt.sel .check-box::after{content:'\2713'}
.ws-page .check-text{font-family:var(--font);font-size:15px;color:var(--t1);font-weight:500;line-height:1.5}

/* ── Video Container ── */
.ws-page .video-wrap{
  background:#0c1627!important;border-radius:var(--r-xl)!important;
  overflow:hidden!important;aspect-ratio:16/9!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  margin-bottom:var(--s3)!important;position:relative!important;
}
.ws-page .video-placeholder{text-align:center;padding:var(--s4)}
.ws-page .video-placeholder .vi{font-size:44px;margin-bottom:var(--s2)}
.ws-page .video-placeholder p{
  font-family:var(--font)!important;font-size:14px!important;
  color:rgba(255,255,255,0.5)!important;line-height:1.55!important;
}
.ws-page .video-placeholder .vt-btn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:var(--s1)!important;margin-top:var(--s3)!important;padding:12px 24px!important;
  background:var(--blue-brand)!important;color:var(--txt)!important;
  font-family:var(--font)!important;font-size:15px!important;font-weight:500!important;
  border:none!important;border-radius:var(--r-lg)!important;cursor:pointer!important;
  box-shadow:var(--shadow-btn)!important;
  transition:transform 80ms var(--ease)!important;
}
.ws-page .video-placeholder .vt-btn:hover{transform:translateY(-1px)}
.ws-page .video-placeholder .vt-btn:active{transform:scale(.97);transition-duration:40ms}
.ws-page .videotiny-iframe{width:100%;height:100%;border:none}

/* ── Field Error ── */
.ws-page .ferr{font-family:var(--font);font-size:12px;color:var(--red);margin-top:5px;font-weight:500}

/* ── Success Screen ── */
.ws-page .success-check{
  width:76px!important;height:76px!important;border-radius:50%!important;
  background:linear-gradient(135deg,var(--green),var(--green))!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  margin:0 auto var(--s4)!important;font-size:34px!important;color:var(--txt)!important;
  box-shadow:0 8px 24px rgba(126,203,161,0.35)!important;
}
.ws-page .success-close{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:13px 28px!important;background:var(--t1)!important;color:var(--txt)!important;
  font-family:var(--font)!important;font-size:15px!important;font-weight:500!important;
  border:none!important;border-radius:var(--r-lg)!important;cursor:pointer!important;
  transition:opacity 80ms var(--ease)!important;
}
.ws-page .success-close:hover{opacity:0.8}

/* ── Wizard Footer ── */
.ws-page .wizard-footer{
  padding:var(--s4) var(--s6)!important;
  border-top:none!important;
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  position:sticky!important;bottom:0!important;background:rgba(8,12,20,.96)!important;z-index:5!important;
}
.ws-page .wizard-footer .btn-primary{width:auto;min-width:150px}

/* ── Review Table ── */
.ws-page .review-table{width:100%;border-collapse:collapse}
.ws-page .review-table tr td{
  padding:9px 0!important;border-bottom:1px solid var(--glass-bg-alt)!important;
  font-family:var(--font)!important;font-size:14px!important;vertical-align:top!important;
}
.ws-page .review-table tr td:first-child{color:var(--t3);font-weight:500;width:45%;padding-right:12px}
.ws-page .review-table tr td:last-child{color:var(--t1)}

/* ── Careers Page Footer ── */
.ws-page .page-footer{
  background:transparent!important;padding:var(--s8) var(--s6)!important;text-align:center!important;
}
.ws-page .page-footer p{font-family:var(--font);font-size:13px;color:rgba(255,255,255,0.3)}

/* ── Careers Animations ── */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}
.ws-page .shake{animation:shake .08s ease}

/* ── Careers Responsive ── */
@media(max-width:768px){
  .ws-page .careers-nav{padding:0 var(--s4)}
  .ws-page .hero{padding:60px 20px 40px}
  .ws-page .roles-section{padding:60px 20px 40px}
  .ws-page .roles-grid{grid-template-columns:1fr}
  .ws-page .wizard-body{padding:var(--s4)}
  .ws-page .wizard-header{padding:var(--s3) var(--s4)}
  .ws-page .wizard-footer{padding:var(--s3) var(--s4);gap:var(--s2)}
  .ws-page .form-row{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .ws-page *,.ws-page *::before,.ws-page *::after{animation-duration:0s !important;transition-duration:0s !important}
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER COMPONENT (GHL Embed Partial)
   Fixed nav bar — white bg, logo left, links + CTA right, mobile hamburger
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header Shell (portal pages only, NOT .ws-page) ── */
body:not(.ws-page) .cb-header{
  position:fixed;top:0;left:0;right:0;
  width:100%;
  background:#0a0a0a;
  border-bottom:1px solid rgba(255,255,255,.08);
  z-index:1000;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── Mobile Dropdown ── */
.cb-mobile-nav.is-open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}

/* ── Header Responsive ── */
@media(max-width:768px){
  .cb-header-inner{padding:0 var(--s3);height:56px}
  .cb-logo img{height:22px}
  .cb-nav{display:none}
  .cb-hamburger{display:flex}
  .cb-mobile-nav{display:flex}
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER COMPONENT (GHL Embed Partial)
   ═══════════════════════════════════════════════════════════════════ */

/* ── GHL Text Color Nuclear Override (Dark — scoped to footer) ── */
#cb-footer .row,#cb-footer .col-lg-12,#cb-footer .col-lg-6,
#cb-footer .col-md-12,#cb-footer .col-sm-12,
#cb-footer [class*="hl_"],#cb-footer [class*="col-"],
#cb-footer [id*="section"],#cb-footer [id*="row"]{
  color:var(--ft-text) !important;
  font-family:var(--font) !important;
}

/* ── Footer Tokens ── */
.cb-footer{
  --ft-bg:transparent;
  --ft-text:#f5f5f7;--ft-text2:rgba(255,255,255,.65);--ft-text3:rgba(255,255,255,.4);
  --ft-link:var(--blue);--ft-link-hover:var(--blue-hv);
  --ft-icon:rgba(255,255,255,.5);--ft-icon-hover:var(--blue);
  --ft-divider:rgba(255,255,255,.08);
}

/* ── Footer Container ── */
.cb-footer{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  background:var(--ft-bg);
  padding:var(--s8) var(--s6) var(--s4);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  color:var(--ft-text);
}

/* Liquid glass bubble — subtle radial glow */
.cb-footer::before{
  content:none;
  position:absolute;
  top:-120px;
  left:50%;
  transform:translateX(-50%);
  width:600px;
  height:600px;
  background:radial-gradient(circle,rgba(41,151,255,.02) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* ── 4-Column Link Grid ── */
.cb-ft-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:var(--s6);
  margin-bottom:var(--s4);
  align-items:start;
}

/* ── Social Row ── */
.cb-ft-social{
  display:flex;
  gap:var(--s1);
  margin-top:var(--s2);
  flex-wrap:wrap;
}
.cb-ft-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:var(--ft-icon);
  text-decoration:none;
  transition:background 160ms var(--ease),color 160ms var(--ease),transform 160ms var(--ease);
}
.cb-ft-social a:hover{
  background:rgba(41,151,255,.14);
  color:var(--ft-icon-hover);
  transform:translateY(-1px);
}
.cb-ft-social svg{
  width:16px;height:16px;
  display:block;
}

/* ── Divider ── */
.cb-ft-divider{
  height:1px;
  background:var(--ft-divider);
  margin:var(--s4) 0 var(--s3);
}

/* ── Bottom Bar (Legal + Copyright) ── */
.cb-ft-legal-sep{color:var(--ft-text3);margin:0 var(--s0)}
.cb-ft-legal-links{display:flex;align-items:center;gap:var(--s1)}

/* ── Footer Responsive: Tablet ── */
@media(max-width:900px){
  .cb-ft-grid{
    grid-template-columns:repeat(4, 1fr);
    gap:var(--s3);
  }
}

/* ── Footer Responsive: Mobile ── */
@media(max-width:600px){
  .cb-footer{
    padding:var(--s6) var(--s3) var(--s3);
  }
  .cb-ft-logo{
    height:30px;
  }
  .cb-ft-grid{
    grid-template-columns:1fr 1fr;
    gap:var(--s4) var(--s3);
    margin-bottom:var(--s4);
  }
  .cb-ft-social{
    justify-content:flex-start;
  }
  .cb-ft-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--s1);
  }
  .cb-ft-legal-links{
    justify-content:flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   QUALIFICATION PAGE
   ═══════════════════════════════════════════════════════════════════ */

/* ── Qualification Section ── */
.ws-page .qualification-section{
  position:relative!important;
  width:100%!important;
  background:transparent!important;
  border-top:none!important;
  padding:var(--s10) var(--s3)!important;
  overflow:hidden!important;
}
.ws-page .qualification-section::before{
  content:''!important;
  position:absolute!important;
  top:-200px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:800px!important;
  height:800px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(0,113,227,.05) 0%,rgba(0,113,227,.02) 40%,transparent 70%)!important;
  pointer-events:none!important;
  z-index:0!important;
}

/* ── Two-Column Layout ── */
.ws-page .qualification-container{
  position:relative!important;
  z-index:1!important;
  max-width:1120px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:var(--s8)!important;
  align-items:start!important;
}

/* ── Left Column — Info ── */
.ws-page .qualification-info{
  display:flex!important;
  flex-direction:column!important;
  gap:var(--s4)!important;
  padding-top:var(--s2)!important;
}

/* Step Badge */
.ws-page .step-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:var(--s1)!important;
  align-self:flex-start!important;
}
.ws-page .step-badge span{
  font-size:14px!important;
  font-weight:500!important;
  text-transform:uppercase!important;
  letter-spacing:2px!important;
  color:var(--blue-brand)!important;
  font-family:var(--font)!important;
}

/* Hero Title (qualification-specific override) */
.ws-page .qualification-section .hero-title{
  font-family:var(--font-display)!important;
  font-size:clamp(30px,4.5vw,56px)!important;
  font-weight:500!important;
  letter-spacing:-.04em!important;
  color:var(--t1) !important;
  line-height:1.08!important;
}
.ws-page .hero-title .line-two{
  display:block!important;
  color:var(--t2)!important;
  font-weight:500!important;
  font-size:.85em!important;
}

/* Subtitle */
.ws-page .qualification-subtitle{
  font-family:var(--font)!important;
  font-size:17px!important;
  line-height:1.65!important;
  color:var(--t2)!important;
  max-width:480px!important;
}

/* ── Checklist ── */
.ws-page .checklist{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  list-style:none!important;
  padding:0!important;
  margin:0!important;
}
.ws-page .checklist-item{
  display:flex!important;
  align-items:flex-start!important;
  gap:14px!important;
  padding:var(--s2) var(--s3)!important;
  background:var(--glass-bg-alt)!important;
  border:1px solid var(--glass-border)!important;
  border-radius:var(--r-lg)!important;
  transition:box-shadow .08s var(--ease),transform .08s var(--ease)!important;
}
.ws-page .checklist-item:hover{
  box-shadow:var(--shadow-hover)!important;
  transform:translateY(-1px)!important;
}
.ws-page .check-icon{
  flex-shrink:0!important;
  width:24px!important;
  height:24px!important;
  margin-top:1px!important;
}
.ws-page .check-icon svg{
  width:24px!important;
  height:24px!important;
  display:block!important;
}
.ws-page .checklist-item p{
  font-family:var(--font)!important;
  font-size:15px!important;
  line-height:1.55!important;
  color:var(--t1)!important;
  margin:0!important;
}

/* ── Right Column — Form Wrap ── */
.ws-page .form-wrap{
  background:var(--glass-card-bg)!important;
  border:1px solid var(--glass-card-border)!important;
  border-top-color:var(--glass-card-rim)!important;
  border-radius:var(--r-2xl)!important;
  box-shadow:var(--glass-card-shadow)!important;
  padding:var(--s4)!important;
  overflow:hidden!important;
}
.ws-page .form-wrap iframe{
  width:100%!important;
  border:none!important;
  display:block!important;
}

/* ── Qualification Responsive ── */
@media(max-width:900px){
  .ws-page .qualification-container{
    grid-template-columns:1fr!important;
    gap:var(--s6)!important;
  }
  .ws-page .qualification-info{
    padding-top:0!important;
    text-align:center!important;
    align-items:center!important;
  }
  .ws-page .step-badge{
    align-self:center!important;
  }
  .ws-page .qualification-subtitle{
    max-width:560px!important;
  }
  .ws-page .form-wrap{
    padding:var(--s3)!important;
  }
}
@media(max-width:600px){
  .ws-page .qualification-section{
    padding:var(--s6) var(--s2)!important;
  }
  .ws-page .checklist-item{
    padding:14px var(--s2)!important;
  }
  .ws-page .form-wrap{
    padding:var(--s2)!important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FRAMELAB REVIEW TOOLBOX — Portal Blueprint Demo
   Scoped to #panel-portal so it only renders inside the blueprint.
   Copied from portal/assets/design-system.css (.pipeline-page scope).
   ═══════════════════════════════════════════════════════════════════ */

/* Dock bubble — glass morphism container */
#panel-portal .dock-bubble{width:100%;max-width:640px;background:linear-gradient(135deg,rgba(22,24,30,.96) 0%,rgba(14,16,22,.98) 50%,rgba(18,20,26,.97) 100%);border:1px solid rgba(255,255,255,.16);border-top-color:rgba(255,255,255,.25);border-radius:var(--r-island);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.03),0 2px 4px rgba(0,0,0,.3),0 8px 32px -4px rgba(0,0,0,.5);padding:var(--s1) 14px 10px;display:flex;flex-direction:column;gap:0;position:relative}

/* Play button */
#panel-portal .dk-play{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s,border-color .15s}
#panel-portal .dk-play:hover{background:rgba(255,255,255,.16);transform:scale(1.08);border-color:rgba(255,255,255,.24)}
#panel-portal .dk-play svg{width:10px;height:10px;margin-left:1px}

/* Video timeline */
#panel-portal .dk-timeline{flex:1;min-width:0;height:24px;display:flex;align-items:center;padding:0 4px}
#panel-portal .dk-timeline-track{width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.1);position:relative;cursor:pointer}
#panel-portal .dk-timeline-bar{height:100%;border-radius:2px;background:var(--blue);position:relative}
#panel-portal .dk-timeline-head{position:absolute;top:50%;transform:translate(-50%,-50%);left:35%;width:10px;height:10px;border-radius:50%;background:var(--txt);box-shadow:0 0 6px rgba(41,151,255,.4);transition:transform .15s}
#panel-portal .dk-timeline-track:hover .dk-timeline-head{transform:translate(-50%,-50%) scale(1.3)}

/* Row 2: Timestamp | Note + Send | 5 tool icons */

/* Timestamp badge */
#panel-portal .dk-ts{font-size:11px;font-weight:500;color:var(--blue);font-family:var(--mono,'SF Mono',monospace);min-width:40px;text-align:center;flex-shrink:0}

/* Revision note input */
#panel-portal .dk-inp-wrap{flex:1;min-width:0;display:flex;align-items:center;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:0 12px;transition:border-color .2s var(--ease)}
#panel-portal .dk-inp-wrap:focus-within{border-color:rgba(41,151,255,.3)}
#panel-portal .dk-textarea{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--txt);font-size:12px;font-family:var(--font);padding:10px 0;resize:none;line-height:1.4}
#panel-portal .dk-textarea::placeholder{color:var(--txt4)}
#panel-portal .dk-send{width:28px;height:28px;border-radius:var(--r-md);border:none;background:linear-gradient(180deg,#2aaaff 0%,#1090e8 100%);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s;flex-shrink:0}
#panel-portal .dk-send:hover{transform:scale(1.05)}
#panel-portal .dk-send svg{width:13px;height:13px}

/* Separator between input and tools */
#panel-portal .dk-sep{width:1px;height:24px;margin:0 2px;flex-shrink:0;background:linear-gradient(180deg,transparent,rgba(255,255,255,.1),transparent)}

/* Mode buttons */
#panel-portal .dk-btn{flex:none;width:30px;height:30px;min-width:0;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0;transition:background .1s,border-color .1s,color .1s,transform .1s;box-shadow:0 1px 2px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.06)}
#panel-portal .dk-btn:hover{background:rgba(255,255,255,.14);color:var(--txt);transform:scale(1.08);border-color:rgba(255,255,255,.2)}
#panel-portal .dk-btn.active{background:linear-gradient(180deg,rgba(41,151,255,.18),rgba(41,151,255,.08));color:var(--blue);border-color:rgba(41,151,255,.3);box-shadow:inset 0 0 8px rgba(41,151,255,.12),0 0 10px rgba(41,151,255,.1)}
#panel-portal .dk-btn svg{width:14px;height:14px}

/* 3D Rotary knobs */
#panel-portal .dk-knob{position:relative;width:24px;height:24px;cursor:grab;user-select:none;flex-shrink:0;margin-bottom:var(--s1)}
#panel-portal .dk-knob-body{width:24px;height:24px;border-radius:50%;background:linear-gradient(145deg,rgba(40,42,50,.95),rgba(22,24,30,.98));border:1px solid rgba(255,255,255,.14);box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 1px rgba(0,0,0,.15);position:relative;transition:transform .06s var(--ease),border-color .1s;}
#panel-portal .dk-knob:hover .dk-knob-body{transform:scale(1.12);border-color:rgba(255,255,255,.22);box-shadow:0 4px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.15),0 0 10px rgba(255,255,255,.05)}
#panel-portal .dk-knob-tick{position:absolute;width:2px;height:5px;border-radius:1px;background:rgba(255,255,255,.7);top:2px;left:50%;margin-left:-1px;transform-origin:1px 10px;box-shadow:0 0 3px rgba(255,255,255,.3)}
#panel-portal .dk-knob-lbl{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;font-size:9px;font-weight:500;color:var(--txt4);font-family:var(--mono,'SF Mono',monospace);white-space:nowrap;pointer-events:none;letter-spacing:.3px;line-height:1}

/* Drawing toolbar */
#panel-portal .draw-bar{display:flex;align-items:center;gap:3px;padding:var(--s0) 6px;background:linear-gradient(180deg,rgba(38,38,40,.92),rgba(22,22,24,.95));border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.16);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.5)}
#panel-portal .draw-tool{width:32px;height:32px;border-radius:var(--r-md);border:1px solid transparent;background:transparent;color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .08s,border-color .08s,color .08s}
#panel-portal .draw-tool:hover{background:rgba(255,255,255,.1);color:var(--txt)}
#panel-portal .draw-tool.active{background:rgba(41,151,255,.15);color:var(--blue);border-color:rgba(41,151,255,.3)}
#panel-portal .draw-tool svg{width:16px;height:16px}
#panel-portal .draw-sep{width:1px;height:20px;background:rgba(255,255,255,.1);margin:0 2px}
#panel-portal .draw-colors{display:flex;gap:3px;align-items:center}
#panel-portal .draw-color{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s}
#panel-portal .draw-color:hover{transform:scale(1.15)}
#panel-portal .draw-color.active{border-color:var(--txt);transform:scale(1.15)}
#panel-portal .draw-sizes{display:flex;gap:var(--s0);align-items:center}
#panel-portal .draw-size{border-radius:50%;background:var(--txt2);cursor:pointer;transition:opacity .15s;opacity:.4;border:none}
#panel-portal .draw-size:hover,#panel-portal .draw-size.active{opacity:1}

/* Recording indicator */
#panel-portal .rec-indicator{display:inline-flex;align-items:center;gap:var(--s1);padding:6px 14px;background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.3);border-radius:var(--r-pill)}
#panel-portal .rec-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:flRecPulse 1s ease infinite}
#panel-portal .rec-label{font-size:11px;font-weight:500;color:var(--red);text-transform:uppercase;letter-spacing:.5px}
#panel-portal .rec-timer{font-size:11px;font-weight:500;color:var(--txt);font-family:var(--mono,'SF Mono',monospace);font-variant-numeric:tabular-nums}
#panel-portal .rec-stop{width:24px;height:24px;border-radius:var(--r-sm);border:none;background:var(--red);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s}
#panel-portal .rec-stop:hover{transform:scale(1.1)}
#panel-portal .rec-stop svg{width:12px;height:12px}
@keyframes flRecPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Audio waveform */
#panel-portal .audio-wave{display:inline-flex;align-items:center;gap:2px;height:20px}
#panel-portal .audio-wave span{width:3px;border-radius:2px;background:var(--red);animation:flWave 1.2s ease-in-out infinite}
#panel-portal .audio-wave span:nth-child(1){height:8px;animation-delay:0s}
#panel-portal .audio-wave span:nth-child(2){height:14px;animation-delay:.1s}
#panel-portal .audio-wave span:nth-child(3){height:18px;animation-delay:.2s}
#panel-portal .audio-wave span:nth-child(4){height:12px;animation-delay:.04s}
#panel-portal .audio-wave span:nth-child(5){height:6px;animation-delay:.4s}
@keyframes flWave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* Right-click context menu — 2-row layout */
#panel-portal .rv-ctx{width:auto;padding:10px;background:linear-gradient(180deg,rgba(38,38,40,.92),rgba(22,22,24,.95));border:1px solid rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.22);border-radius:var(--r-island);box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:var(--s1)}
/* Row 1: timestamp + input + close */
#panel-portal .rv-ctx-row1{display:flex;align-items:center;justify-content:space-between;gap:6px}
#panel-portal .rv-ctx-ts{font-size:11px;font-weight:500;color:var(--blue);font-family:var(--mono,'SF Mono',monospace);padding:3px 10px;background:rgba(41,151,255,.12);border-radius:var(--r-md);font-variant-numeric:tabular-nums;flex-shrink:0}
#panel-portal .rv-ctx-close{width:22px;height:22px;border:none;background:rgba(255,255,255,.06);color:var(--txt3);border-radius:7px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .08s,color .08s}
#panel-portal .rv-ctx-close:hover{background:rgba(192,57,43,.2);color:var(--red)}
#panel-portal .rv-ctx-row2{display:flex;align-items:center;gap:6px}
/* Row 2: icon-only mode buttons */
#panel-portal .rv-ctx-btn{width:34px;height:34px;border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:background .1s,color .1s,border-color .1s}
#panel-portal .rv-ctx-btn:hover{background:rgba(255,255,255,.1);color:var(--txt)}
#panel-portal .rv-ctx-btn.active{background:rgba(41,151,255,.12);color:var(--blue);border-color:rgba(41,151,255,.25)}
#panel-portal .rv-ctx-btn svg{width:16px;height:16px}
/* Hover label — appears below on hover */
#panel-portal .rv-ctx-btn:hover .rv-ctx-lbl{opacity:1}
/* Input wrap */
#panel-portal .rv-ctx-inp-wrap{display:flex;align-items:center;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:0 10px;min-width:0;width:154px}
#panel-portal .rv-ctx-textarea{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-size:11px;font-family:var(--font);padding:var(--s1) 0;resize:none;line-height:1.4;min-width:0}
#panel-portal .rv-ctx-textarea::placeholder{color:var(--txt4)}
#panel-portal .rv-ctx-send{width:26px;height:26px;border-radius:var(--r-md);border:none;background:linear-gradient(180deg,#2aaaff 0%,#1090e8 100%);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#panel-portal .rv-ctx-send svg{width:12px;height:12px}

/* ═══════════════════════════════════════════════════════════════════
   PORTAL SHELL DEMO — Interactive portal layout preview
   Scoped to #panel-portal .portal-shell
   ═══════════════════════════════════════════════════════════════════ */

/* Shell container */
/* Left-edge white glow hint (always visible, signals nav is there) */
/* Bottom-edge white glow hint (always visible, signals island is there) */

/* Left nav inside shell — reuses real .left-nav, overrides position for retract/hover */

/* Bottom island inside shell — reuses real .bottom-island, scaled 75% to match left-nav size */

/* Main content area — absolute positioned */
#panel-portal .ps-page-title{font:500 10px/1 var(--font);text-transform:uppercase;letter-spacing:.8px;color:var(--txt4);padding-bottom:var(--s1);flex-shrink:0}
/* Stage badge row — sits under the page title */

/* Video player container */

/* ── Video-overlay timeline row — sits inside the 16:9 video area at the bottom ── */
#panel-portal .ps-vid-controls .dk-play{width:30px;height:30px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
#panel-portal .ps-vid-controls .dk-play svg{width:12px;height:12px}
#panel-portal .ps-vid-controls .dk-timeline{flex:1;min-width:0;height:30px;display:flex;align-items:center;padding:0 2px}
#panel-portal .ps-vid-controls .dk-timeline-track{height:5px;border-radius:2.5px}
#panel-portal .ps-vid-controls .dk-timeline-head{width:12px;height:12px}
#panel-portal .ps-vid-controls .dk-knob{margin-bottom:0;width:28px;height:28px}
#panel-portal .ps-vid-controls .dk-knob-body{width:28px;height:28px}
#panel-portal .ps-vid-controls .dk-knob-tick{height:6px;top:3px;transform-origin:1px 11px}
#panel-portal .ps-vid-controls .dk-knob-lbl{font-size:8px;margin-top:2px}

/* Thread panel — right side */
#panel-portal .ps-thread{width:240px;flex-shrink:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
#panel-portal .ps-th-hdr{padding:14px 16px 10px;font-size:13px;font-weight:500;color:var(--txt);border-bottom:1px solid rgba(255,255,255,.06);letter-spacing:-.2px}

/* Thread sections */
#panel-portal .ps-th-section.open .ps-th-toggle svg{transform:rotate(90deg)}
#panel-portal .ps-th-section.open .ps-th-body{max-height:200px}

/* ── Project Card Island — top center of video player ── */
#panel-portal .ps-card-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--s1);padding:5px 12px;
  background:rgba(8,8,12,.82);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-xl);-webkit-backdrop-filter:none;z-index:2}
/* Request type — SF or LF */
#panel-portal .ps-ci-type{font-size:9px;font-weight:500;letter-spacing:.6px;padding:2px 6px;border-radius:var(--r-xs);
  color:var(--txt2);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
#panel-portal .ps-ci-type[data-type="SF"]{color:var(--blue);background:rgba(41,151,255,.14);border-color:rgba(41,151,255,.25);
  }
#panel-portal .ps-ci-type[data-type="LF"]{color:var(--purple,#b48eff);background:rgba(180,142,255,.14);border-color:rgba(180,142,255,.25);
  }
/* Tier badge — T1, T2, T3 */
#panel-portal .ps-ci-tier{font-size:8px;font-weight:500;letter-spacing:.4px;padding:2px 5px;border-radius:var(--r-xs)}
#panel-portal .ps-ci-tier[data-tier="1"]{color:var(--green);background:rgba(126,203,161,.12)}
#panel-portal .ps-ci-tier[data-tier="2"]{color:var(--blue);background:rgba(41,151,255,.12)}
#panel-portal .ps-ci-tier[data-tier="3"]{color:var(--orange);background:rgba(255,159,67,.12)}
/* Version nav — arrows + number */
#panel-portal .ps-ci-ver{font-size:10px;font-weight:500;color:var(--txt);min-width:18px;text-align:center}
/* Blueprint icon — pill matching type/tier */
/* Health grade — pill matching type/tier */
#panel-portal .ps-ci-grade{font-size:9px;font-weight:500;padding:2px 6px;border-radius:var(--r-xs);border:1px solid transparent}
#panel-portal .ps-ci-grade[data-grade="A"]{color:var(--green);background:rgba(126,203,161,.12);border-color:rgba(126,203,161,.18)}
#panel-portal .ps-ci-grade[data-grade="B"]{color:var(--blue);background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.18)}
#panel-portal .ps-ci-grade[data-grade="C"]{color:var(--orange);background:rgba(255,159,67,.12);border-color:rgba(255,159,67,.18)}
#panel-portal .ps-ci-grade[data-grade="D"],#panel-portal .ps-ci-grade[data-grade="F"]{color:#ff5c5c;background:rgba(255,92,92,.12);border-color:rgba(255,92,92,.18)}

/* ── Pipeline cards — full-cover image with overlay ── */
#panel-portal .pipeline-card{overflow:hidden;border-radius:var(--r-lg);padding:0!important;
  position:relative;min-height:160px;background-size:cover;background-position:center;
  background-color:rgba(255,255,255,.03);display:flex;flex-direction:column;justify-content:flex-end;
  cursor:grab;transition:transform 60ms var(--ease),box-shadow 60ms var(--ease),filter 60ms;
  box-shadow:0 2px 12px rgba(0,0,0,.5),0 0 20px rgba(15,30,60,.25)}
#panel-portal .pipeline-card:active{cursor:grabbing;transform:scale(.98);transition-duration:30ms}
#panel-portal .pipeline-card[draggable="true"]:hover{transform:scale(1.03);
  box-shadow:0 6px 28px rgba(0,0,0,.5),0 0 32px rgba(41,151,255,.12)}
#panel-portal .ps-kanban-col.drag-over{outline:1px solid rgba(41,151,255,.3);outline-offset:-1px;border-radius:var(--r-lg)}
/* Gradient overlay — more intense cinematic look */
#panel-portal .pipeline-card::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 35%,rgba(0,0,0,.92) 100%);
  transition:background 80ms var(--ease);z-index:1}
#panel-portal .pipeline-card:hover::before{background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.85) 100%)}
/* Top-edge glare — premium glass highlight */
#panel-portal .pipeline-card::after{content:'';position:absolute;top:0;left:0;right:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 40%,transparent 100%);
  z-index:1;pointer-events:none;transition:opacity 80ms}
#panel-portal .pipeline-card:hover::after{opacity:.7}
#panel-portal .pipe-bottom{position:relative;z-index:2;padding:0 8px 6px;display:flex;flex-direction:column;gap:var(--s0)}
#panel-portal .pipe-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
#panel-portal .pipe-name{font:500 10px/1.3 var(--font);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#panel-portal .pipe-timer{font:500 8px/1 var(--mono,'SF Mono',monospace);color:var(--orange);white-space:nowrap;flex-shrink:0;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,159,67,.15);padding:3px 7px;border-radius:var(--r-pill);
}
#panel-portal .pipe-tl{height:2px;background:rgba(255,255,255,.12);border-radius:1px;overflow:hidden}
#panel-portal .pipe-tl-bar{height:100%;background:rgba(255,255,255,.6);border-radius:1px;transition:width .3s var(--ease)}

#panel-portal .ps-dock-under .dk-btn{width:30px;height:30px}
#panel-portal .ps-dock-under .dk-btn svg{width:14px;height:14px}
#panel-portal .ps-dock-under .dk-send{width:30px;height:30px}
#panel-portal .ps-dock-under .dk-ts{font-size:12px;min-width:44px}

/* ── Chat messages in thread ── */
/* Chat input (shell) */
#panel-portal .ps-chat-input{display:flex;gap:5px;padding:var(--s1) 10px;border-top:none!important;align-items:center}
#panel-portal .ps-chat-input .chat-pill{flex:1;display:flex;align-items:center;gap:3px;min-width:0;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:3px 5px 3px 8px}
#panel-portal .ps-chat-input .chat-pill:focus-within{border-color:rgba(255,255,255,.12)}
#panel-portal .ps-chat-input input::placeholder{color:var(--txt4)}
#panel-portal .ps-chat-input .chat-voice{width:20px;height:20px;border-radius:50%;border:none;background:rgba(255,255,255,.06);
  color:var(--txt4);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#panel-portal .ps-chat-plus{width:22px;height:22px;border-radius:var(--r-sm);border:none;background:rgba(255,255,255,.06);
  color:var(--txt3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;flex-shrink:0;font-size:12px}
#panel-portal .ps-chat-plus:hover{background:rgba(255,255,255,.12);color:var(--txt)}
#panel-portal .ps-chat-input .chat-emoji{width:22px;height:22px;border-radius:var(--r-sm);border:none;background:rgba(255,255,255,.04);
  color:var(--txt4);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── Pipeline kanban inside shell ── */
#panel-portal .ps-pipeline-kanban{display:flex;gap:var(--s1);flex:1;min-height:0;overflow-x:auto}
#panel-portal .ps-kanban-col{flex:1;min-width:100px;display:flex;flex-direction:column;gap:var(--s1);
  border-right:1px solid rgba(255,255,255,.06);padding:0 6px}
#panel-portal .ps-kanban-col:last-child{border-right:none;padding-right:0}
#panel-portal .ps-kanban-col:first-child{padding-left:0}
#panel-portal .ps-kanban-hdr{display:flex;align-items:center;gap:5px;font:500 9px/1 var(--font);
  text-transform:uppercase;letter-spacing:.5px;color:var(--txt3);padding-bottom:6px;flex-shrink:0}
#panel-portal .ps-kanban-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
#panel-portal .ps-kanban-count{font-size:8px;color:var(--txt4);margin-left:auto;
  background:rgba(255,255,255,.06);padding:1px 5px;border-radius:var(--r-xs)}
#panel-portal .ps-pipeline-shell .pipeline-card{min-height:140px}

/* Shell variant note */

/* ── Empty template shell — shows page chrome with empty content area ── */

/* ── Info Dot (tutorial hover icon) ── */

/* ── Health Timer Icons (color-coded by project grade) ── */
#panel-portal .health-timer{display:inline-flex;align-items:center;gap:5px;
  padding:var(--s0) 10px;border-radius:var(--r-pill);background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);}
#panel-portal .ht-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;
  animation:ht-pulse 2s ease-in-out infinite}
#panel-portal .ht-time{font:500 9px/1 var(--mono,'SF Mono',monospace);color:var(--txt2);
  font-variant-numeric:tabular-nums;letter-spacing:.3px}
#panel-portal .health-timer[data-health="A"] .ht-dot{background:#34d399;box-shadow:0 0 6px rgba(52,211,153,.5)}
#panel-portal .health-timer[data-health="B"] .ht-dot{background:#86efac;box-shadow:0 0 6px rgba(134,239,172,.5)}
#panel-portal .health-timer[data-health="C"] .ht-dot{background:#fbbf24;box-shadow:0 0 6px rgba(251,191,36,.5)}
#panel-portal .health-timer[data-health="D"] .ht-dot{background:var(--orange);box-shadow:0 0 6px rgba(255,159,67,.5)}
#panel-portal .health-timer[data-health="F"] .ht-dot{background:var(--red);box-shadow:0 0 6px rgba(192,57,43,.5)}
@keyframes ht-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ══ ALIGNMENT — CENTER ALL SECTION HEADERS ══ */

/* ══ BRAND LOGO GRID — invert for dark bg ══ */

/* ══ VIDEO HOVER — ONE AT A TIME ══ */

/* ══ CHECKOUT PAGES (.co-*) ══ */
.ws-page .co-back{display:inline-flex;align-items:center;gap:6px;color:var(--blue-brand,var(--blue));font-size:14px;font-weight:500;text-decoration:none;margin-bottom:var(--s3,24px)}
.ws-page .co-back:hover{opacity:.7}
.ws-page .co-promo{background:linear-gradient(135deg,rgba(41,151,255,.15),rgba(41,151,255,.08));border:1px solid rgba(41,151,255,.25);border-radius:var(--r-lg,12px);padding:var(--s2) 24px;display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3,24px)}
.ws-page .co-promo-label{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:rgba(41,151,255,.15);padding:var(--s0) 10px;border-radius:var(--r-sm);white-space:nowrap}
.ws-page .co-promo-text{font-size:15px;font-weight:500;color:var(--t1,#f5f5f7)}
.ws-page .co-layout{display:grid;grid-template-columns:380px 1fr;gap:var(--s5,40px);align-items:start;max-width:960px;margin:0 auto}
@media(max-width:768px){.ws-page .co-layout{grid-template-columns:1fr}}
.ws-page .co-plan{background:var(--glass-card-bg);border:1px solid var(--glass-card-border);border-top-color:var(--glass-card-rim);border-radius:var(--r-2xl,20px);padding:var(--s4,32px);box-shadow:var(--glass-card-shadow);position:relative;}
.ws-page .co-plan::before{content:'';position:absolute;top:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent 3%,rgba(255,255,255,.35) 25%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.35) 75%,transparent 97%);pointer-events:none}
.ws-page .co-plan-badge{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#d4a017;margin-bottom:var(--s1)}
.ws-page .co-plan-tier{font-size:22px;font-weight:500;color:var(--t1);margin-bottom:var(--s0)}
.ws-page .co-plan-price-row{display:flex;align-items:baseline;gap:var(--s0);margin-bottom:20px}
.ws-page .co-plan-price{font-size:42px;font-weight:500;color:var(--t1);letter-spacing:-.02em}
.ws-page .co-plan-mo{font-size:16px;color:var(--t2);font-weight:500}
.ws-page .co-plan-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ws-page .co-plan-features li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--t2);line-height:1.4}
.ws-page .co-plan-features .ck{width:16px;height:16px;flex-shrink:0;color:#34d399}
.ws-page .co-right{display:flex;flex-direction:column;gap:var(--s2,16px)}
.ws-page .co-tabs{display:flex;gap:10px;flex-wrap:wrap}
.ws-page .co-tab{position:relative;flex:1;min-width:140px;background:var(--glass-inner-bg);border:1px solid var(--glass-inner-border);border-radius:var(--r-lg,12px);padding:14px 16px;cursor:pointer;text-align:left;transition:border-color .08s,background .08s;display:flex;flex-direction:column;gap:2px;font-family:var(--font)}
.ws-page .co-tab:hover{border-color:rgba(41,151,255,.3);background:rgba(255,255,255,.06)}
.ws-page .co-tab.active{border-color:var(--blue);background:rgba(41,151,255,.1);box-shadow:0 0 16px rgba(41,151,255,.15)}
.ws-page .co-tab-tag{position:absolute;top:-8px;right:12px;font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;background:var(--blue);color:var(--txt);padding:2px 8px;border-radius:var(--r-xs)}
.ws-page .co-tab-label{font-size:14px;font-weight:500;color:var(--t1)}
.ws-page .co-tab-price{font-size:18px;font-weight:500;color:var(--t1)}
.ws-page .co-tab-note{font-size:11px;color:var(--t3)}
.ws-page .co-iframe-wrap{border-radius:var(--r-lg,12px);overflow:hidden;border:1px solid var(--glass-border);min-height:400px}
.ws-page .co-iframe-wrap iframe{width:100%;min-height:400px;border:none;display:block}
.ws-page .co-trust{display:flex;justify-content:center;gap:var(--s3);padding:20px 0;margin-top:var(--s2,16px)}
.ws-page .co-trust-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t3);font-weight:500}
.ws-page .co-trust-item svg{color:var(--t3);opacity:.7}

/* ── FADED BOTTOM — big cards only (login glass-bubble style) ── */

/* Pricing cards — faded glass bottom */
.ws-page .pricing-card::after,
.ws-page .co-plan::after {
  content:''!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,
    rgba(255,255,255,.05) 0%,
    rgba(20,50,140,.06) 30%,
    rgba(10,25,80,.04) 55%,
    transparent 80%
  );
  -webkit-mask-image:linear-gradient(180deg,black 0%,black 55%,transparent 85%)!important;
  mask-image:linear-gradient(180deg,black 0%,black 55%,transparent 85%)!important;
}

/* Pricing card borders also fade at bottom */
.ws-page .pricing-card,
.ws-page .co-plan {
  -webkit-mask-image:linear-gradient(180deg,black 0%,black 70%,rgba(0,0,0,.85) 85%,rgba(0,0,0,.5) 100%)!important;
  mask-image:linear-gradient(180deg,black 0%,black 70%,rgba(0,0,0,.85) 85%,rgba(0,0,0,.5) 100%)!important;
}

/* Larger feature/hero containers — subtle fade only */
.ws-page .checklist-grid > .glass-card,
.ws-page .features-grid > .glass-card,
.ws-page .transform-card,
.ws-page .why-card {
  -webkit-mask-image:linear-gradient(180deg,black 0%,black 72%,rgba(0,0,0,.8) 88%,rgba(0,0,0,.4) 100%)!important;
  mask-image:linear-gradient(180deg,black 0%,black 72%,rgba(0,0,0,.8) 88%,rgba(0,0,0,.4) 100%)!important;
}
/* ────────────────────────────────────────────────────────────── */

/* ── PERFORMANCE ─────────────────────────────────────────────── */
/* Promote animated/transitioning elements to their own layer */
.ws-page .glass-card,
.ws-page .pricing-card,
.ws-page .co-plan,
.ws-page .btn,
.ws-page .cb-nav-link{
  will-change:transform!important;
}
/* Contain paint to card bounds */
.ws-page .glass-card,
.ws-page .pricing-card{
  contain:layout style!important;
}
/* Instant click response */
.ws-page a,
.ws-page button,
.ws-page .btn{
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
/* ────────────────────────────────────────────────────────────── */

/* ── BLUE BUTTONS — electric with glow ── */
.ws-page .btn-cta,
.ws-page .btn-primary,
.ws-page .hero-cta-btn,
.ws-page a.btn-primary,
.ws-page button.btn-primary,
.ws-page .btn[data-color="blue"],
.ws-page .pricing-card.featured .plan-btn,
.ws-page .co-form-btn,
.ws-page .qual-btn,
.ws-page .booking-btn,
.ws-page .confirmation-btn {
  background:linear-gradient(180deg,#2aaaff 0%,#1090e8 100%)!important;
  color:var(--txt) !important;
  border:none !important;
  font-weight:500!important;
  box-shadow:0 0 0 1px rgba(26,160,255,.5),0 4px 12px rgba(0,140,255,.5),0 8px 32px rgba(0,130,255,.4),0 16px 60px rgba(0,110,255,.3),0 24px 80px rgba(0,90,220,.2),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
/* Catch-all: any .btn-g5 or primary action buttons inside ws-page */
.ws-page .btn-g5,
.ws-page .btn-blue,
.ws-page input[type="submit"],
.ws-page button[type="submit"] {
  background:linear-gradient(180deg,#2aaaff 0%,#1090e8 100%)!important;
  color:var(--txt) !important;
  border:none !important;
  font-weight:500!important;
  box-shadow:0 0 0 1px rgba(26,160,255,.5),0 4px 12px rgba(0,140,255,.5),0 8px 32px rgba(0,130,255,.4),0 16px 60px rgba(0,110,255,.3),0 24px 80px rgba(0,90,220,.2),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
/* ────────────────────────────────────────────────────────────── */

/* ── MOBILE OVERHAUL ─────────────────────────────────────────── */
@media(max-width:768px){

  /* ── CONTAINERS: kill wide side padding ── */
  .ws-page .container{padding:0 16px!important}
  .ws-page .section{padding:var(--s6) 16px!important}
  .ws-section-dark{padding:var(--s6) 16px!important}
  .ws-page .hero-section,.ws-page .hero{padding:60px 16px 40px!important}

  /* ── HEADER ── */
  .ws-page .cb-header-bar{padding:12px 16px!important}
  .ws-page .cb-header-bar .cb-logo{left:16px!important}
  .ws-page .cb-header-bar .cb-studio-login{right:16px!important}
  .cb-nav-links,.ws-page nav.cb-header .cb-nav-link:not(.cb-nav-cta){display:none!important}
  .ws-page .cb-header-bar nav.cb-header{gap:var(--s1)}

  /* ── FOOTER ── */
  .ws-page .cb-footer,.cb-footer{padding:var(--s5) 16px 24px!important}
  .ws-page .cb-ft-grid{grid-template-columns:1fr!important;gap:var(--s4)!important}
  .ws-page .cb-ft-legal{flex-direction:column!important;gap:var(--s1)!important;text-align:center!important;padding:0 16px!important}

  /* ── HERO TYPOGRAPHY ── */
  .ws-page .hero-title,.ws-page .section-title{font-size:clamp(26px,8vw,40px)!important;letter-spacing:-.03em!important}
  .ws-page .hero-sub,.ws-page .section-sub{font-size:15px!important}

  /* ── GRIDS → SINGLE COLUMN ── */
  .ws-page .feature-grid,
  .ws-page .cards-grid,
  .ws-page .pricing-grid,
  .ws-page .roles-grid,
  .ws-page .checklist-grid,
  .ws-page .portfolio-grid,
  .ws-page .shorts-grid,
  .ws-page .video-grid,
  .ws-page .reviews-grid,
  .ws-page .three-col,
  .ws-page .four-col{grid-template-columns:1fr!important;gap:12px!important}

  /* ── 2-COL GRIDS: keep side by side if content allows ── */
  .ws-page .two-col{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .ws-page .stats-row,.ws-page .stat-row{flex-wrap:wrap!important;gap:10px!important;padding:0 16px!important}
  .ws-page .stat{min-width:calc(50% - 5px)!important;flex:1 1 calc(50% - 5px)!important}

  /* ── CHECKOUT / CO LAYOUT ── */
  .ws-page .co-layout{grid-template-columns:1fr!important;gap:var(--s2)!important}
  .ws-page .co-plan,.ws-page .pricing-card{padding:20px 16px!important}
  .ws-page .co-plan-price,.ws-page .plan-price{font-size:36px!important}
  .ws-page .co-tabs{flex-direction:column!important}

  /* ── CARDS ── */
  .glass-card{padding:18px 16px!important}
  .ws-page .glass-card{padding:18px 16px!important}

  /* ── WIZARD ── */
  .ws-page .wizard-body{padding:var(--s2)!important}
  .ws-page .wizard-header{padding:var(--s2)!important}
  .ws-page .wizard-footer{padding:14px 16px!important}

  /* ── CTA BUTTONS ── */
  .ws-page .hero-cta,.ws-page .hero-btns{flex-direction:column!important;align-items:stretch!important;gap:10px!important;padding:0 0!important}
  .ws-page .hero-cta .btn,.ws-page .hero-btns .btn,
  .ws-page .hero-cta a,.ws-page .hero-btns a{width:100%!important;justify-content:center!important;text-align:center!important}

  /* ── LEGAL / LONG FORM TEXT ── */
  .ws-page .legal-section,.ws-page .privacy-section,.ws-page .terms-section{padding:var(--s5) 16px!important}
  .ws-page .legal-section h2,.ws-page .legal-section h3{font-size:20px!important}

  /* ── BOOKING / CAL ── */
  .ws-page .cal-wrap iframe{min-height:580px!important}
  .ws-page .cal-wrap{padding:0!important}

  /* ── TRANSFORM / BEFORE-AFTER GRIDS ── */
  .ws-page .transform-grid{grid-template-columns:repeat(2,1fr)!important}

  /* ── CAREERS ── */
  .ws-page .careers-nav{padding:0 16px!important}
  .ws-page .job-listings{padding:0 16px!important}

  /* ── CONFIRMATION / QUALIFICATION ── */
  .ws-page .confirmation-section,.ws-page .qualification-section{padding:var(--s5) 16px!important}

  /* ── CONTACT ── */
  .ws-page .contact-title{font-size:clamp(24px,7vw,34px)!important}
  .ws-page .contact-form{padding:0 0!important}
}

@media(max-width:480px){

  /* ── Even tighter on small phones ── */
  .ws-page .container{padding:0 12px!important}
  .ws-page .section,.ws-section-dark{padding:36px 12px!important}
  .ws-page .hero-section,.ws-page .hero{padding:var(--s6) 12px 32px!important}
  .ws-page .cb-header-bar{padding:10px 12px!important}
  .ws-page .cb-footer,.cb-footer{padding:var(--s4) 12px 20px!important}

  /* ── Stats: full width each ── */
  .ws-page .stat{min-width:100%!important;flex:1 1 100%!important}

  /* ── Transform grid: full width ── */
  .ws-page .transform-grid{grid-template-columns:1fr!important}

  /* ── Smaller hero text ── */
  .ws-page .hero-title,.ws-page .section-title{font-size:clamp(22px,9vw,34px)!important}

  /* ── Pricing/checkout cards ── */
  .ws-page .co-plan,.ws-page .pricing-card{padding:var(--s2) 12px!important}
  .glass-card,.ws-page .glass-card{padding:var(--s2) 12px!important}

  /* ── two-col → single on tiny screens ── */
  .ws-page .two-col{grid-template-columns:1fr!important}
}
/* ────────────────────────────────────────────────────────────── */

/* ── PERFORMANCE OVERRIDES ───────────────────────────────────────
   Targets verified rendered bottlenecks only. Visual output preserved.
   ──────────────────────────────────────────────────────────────── */

/* 1. GLASS HOVER SHADOW: 24-layer → 4-layer. Same perceived depth. */
.glass-card:hover{
  box-shadow:
    0 4px 20px rgba(0,0,0,.6),
    0 12px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,10,50,.3) !important;
}

/* 2. GLASS CARD BASE SHADOW: 8-layer → 4-layer. */
.ws-page .glass-card{
  box-shadow:
    0 2px 12px rgba(0,0,0,.5),
    0 8px 32px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,10,40,.25) !important;
}

/* 3. PRICING CARD SHADOW: reduce to 4 layers */
.ws-page .pricing-card,
.ws-page .co-plan{
  box-shadow:
    0 2px 12px rgba(0,0,0,.5),
    0 12px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,10,50,.35) !important;
}

/* 4. CONTAIN: scope paint to card bounds — big win on long pages */
.ws-page .glass-card,
.ws-page .pricing-card,
.ws-page .co-plan,
.ws-page .stat,
.ws-page .checklist-item,
.ws-page .review-card,
.ws-page .testimonial-card,
.ws-page .why-card,
.ws-page .transform-card{
  contain: layout style!important;
}

/* 5. CONTENT-VISIBILITY: skip rendering off-screen sections */

/* 6. TRANSITION: replace transition: transform on btn-ghost with specific props */, opacity on btn-ghost with specific props */, background-color on btn-ghost with specific props */, color on btn-ghost with specific props */, box-shadow on btn-ghost with specific props */, border-color on btn-ghost with specific props */
.ws-page .btn-ghost,
.btn-ghost{
  transition:
    transform 80ms var(--ease),
    box-shadow 80ms var(--ease),
    opacity 60ms !important;
}

/* 7. WILL-CHANGE: only on elements that actually animate on interaction.
      Remove from static decorative elements. */
.ws-page .stat,
.ws-page .review-card,
.ws-page .testimonial-card,
.ws-page .why-card,
.ws-page .checklist-item,
.ws-page .careers-card,
.ws-page .job-card{
  
}

/* 8. HERO LOGO GLOW: replace filter:blur div with cheaper box-shadow */

/* 9. BACKDROP-FILTER: only the header needs it on website pages.
      Kill it on everything else to reduce composite layers. */
.ws-page .cb-header-bar{
  /* No blur — backdrop-filter globally banned; no bottom border — removed to fix horizontal line */
}

/* 10. FONT RENDERING: force GPU text rendering on hero */

/* 11. IMAGE RENDERING: crisp decode on cards */
.ws-page .glass-card img,
.ws-page .pricing-card img{
  image-rendering: auto!important;
}

/* ────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   CB BUG OVERLAY — Atmospheric logo mark behind page titles
   Used on: faq, careers, and any inner page with a section-header
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cb-bug-overlay  { margin-bottom: -220px; padding-top: var(--s3); }
  .cb-bug-glow     { width: 300px; height: 300px; }
  .cb-bug-img-wrap { width: 260px; height: 260px; }
}
/* ────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   FUNNEL LAYOUT — Shared stacked layout for all 4 funnel steps
   Used on: contact-details, qualification, booking, confirmation
   Pattern: step-badge → funnel-title → funnel-sub → funnel-bullets → funnel-body
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  .funnel-title{ font-size:26px }
  .funnel-sub  { font-size:15px }
}
/* ────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   CHECKOUT PAGES — co- component classes
   Used on: checkout-basic, checkout-silver, checkout-gold
   ═══════════════════════════════════════════════════════════════ */

/* Step progress bar */

/* Step panels */
@keyframes coFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Buttons */

/* Billing / plan heading */

/* Tab active state extra */
.co-tab-sel,.co-tab.active{border-color:rgba(41,151,255,.5)!important;background:rgba(41,151,255,.1)!important}

/* Order summary */

/* Mobile */
@media(max-width:860px){
  .co-layout{grid-template-columns:1fr!important}
  .co-plan{display:none}
  .co-frow,.co-field-row{grid-template-columns:1fr}
}
@media(max-width:480px){
  .co-btn,.co-proceed-btn,.co-form-btn{padding:14px}
  .co-step-title{font-size:18px}
}
/* ────────────────────────────────────────────────────────────── */

/* ── Sticky CTA Button — fixed top-right on scroll ── */

/* ── Pricing Hero ── */
@media(max-width:768px){
  .pricing-hero{padding:var(--s6) 0 24px}
  .pricing-hero .hero-title{font-size:clamp(28px,6vw,40px)}
}
/* ── Card Price Layout: Monthly + Annual stacked ── */
.ws-page .card-price-label{font-family:var(--font);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3);margin-bottom:var(--s0)}
.ws-page .card-monthly-price{display:flex;align-items:baseline;gap:2px;margin-bottom:var(--s0)}
.ws-page .card-annual-price{display:flex;align-items:center;gap:var(--s0);margin-bottom:var(--s2);flex-wrap:nowrap}
.ws-page .card-annual-amt{font-family:var(--font-display);font-size:clamp(26px,4vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--t1)}
.ws-page .card-annual-mo{font-size:14px;color:var(--t3);font-weight:400}
.ws-page .card-free-badge{display:inline-flex;align-items:center;white-space:nowrap;margin-left:auto;padding:3px 8px;border-radius:var(--r-sm);font-size:10px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--accent,var(--blue));background:rgba(41,151,255,.1);border:1px solid rgba(41,151,255,.2)}

.ws-page .features li.off strong{font-weight:500;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.08)}

/* pricing-3fm.html checkout modal — mobile grid collapse (moved from inline block 2026-04-15) */
@media(max-width:800px){
  #coModal > div{grid-template-columns:1fr!important;max-width:95vw!important;margin:20px auto!important}
  #coLeft{display:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   QUALIFICATION WIZARD — moved from inline block in qualification.html
   ═══════════════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);color:var(--txt);display:flex;flex-direction:column}

/* ── Chip selectors ── */
.q-chip.selected{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.45);color:var(--txt);
  box-shadow:0 0 12px rgba(41,151,255,.15)}

/* ── Field rows ── */
.q-field .q-optional{font:400 10px/1 var(--font);color:rgba(255,255,255,.25);margin-left:var(--s0)}
.q-field .q-error{font:400 11px/1 var(--font);color:#ff6b6b;margin-top:var(--s0);display:none}

/* ── Question blocks ── */

/* ── Result screen ── */
.q-result-icon.qualified{background:rgba(52,211,153,.12);border:1.5px solid rgba(52,211,153,.3);
  animation:qPulse 2s ease-in-out infinite}
.q-result-icon.not-qualified{background:rgba(245,166,35,.12);border:1.5px solid rgba(245,166,35,.3)}
@keyframes qPulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.2)}50%{box-shadow:0 0 0 14px rgba(52,211,153,0)}}

/* ── Calendar ── */
.q-day-card.selected{background:rgba(41,151,255,.10);border-color:rgba(41,151,255,.4);
  box-shadow:0 0 16px rgba(41,151,255,.12)}
.q-slot.selected{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.45);color:var(--txt)}
.q-slots-loading .spinner-sm{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.15);
  border-top-color:rgba(255,255,255,.5);border-radius:50%;animation:spin .6s linear infinite;
  vertical-align:middle;margin-right:var(--s1)}

/* ── Summary card ── */

/* ── Activate glow ── */
@keyframes qGlow{0%,100%{opacity:.3}50%{opacity:.8}}
.btn-activate .spinner-sm{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);
  border-top-color:var(--txt);border-radius:50%;animation:spin .6s linear infinite;margin-right:var(--s1)}
.btn-activate.loading .spinner-sm{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Remind-me row ── */

/* ── Step content ── */
.qw-step.active{display:flex}

@keyframes cb-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── Step 4 sub-sections ── */

/* ── Style picker cards ── */
.q-preset-chip.selected{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.45);color:var(--txt)}

/* ═══════════════════════════════════════════════════════════════════════
   PRICING-6FM CHECKOUT MODAL — moved from inline block in pricing-6fm.html
   ═══════════════════════════════════════════════════════════════════════ */
/* ── OVERLAY ── */
#cb-overlay{display:none;position:fixed;inset:0;background:rgba(6,9,16,.92);
z-index:9999;align-items:center;justify-content:center;padding:var(--s2)}
#cb-overlay.open{display:flex}

/* ── MODAL ── */
#cb-modal{background:rgba(12,12,14,.98);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;width:100%;max-width:560px;max-height:94vh;
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,.9)}

/* ── CLOSE ── */

/* ── HEADER ── */
#cb-header{padding:18px 22px 0;flex-shrink:0}
.cb-step{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:500;
  color:rgba(255,255,255,.22);transition:color .2s;white-space:nowrap}
.cb-step.active{color:var(--txt)}
.cb-step.done{color:rgba(52,199,89,.8)}
.cb-step.active .cb-step-dot{background:#1a9eff;border-color:#1a9eff;color:var(--txt)}
.cb-step.done .cb-step-dot{background:rgba(52,199,89,.15);border-color:rgba(52,199,89,.5);color:rgba(52,199,89,.9)}

/* ── BODY ── */
#cb-body{flex:1;overflow-y:auto;padding:var(--s2) 22px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent}
#cb-body::-webkit-scrollbar{width:3px}
#cb-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06)}
.cb-sub{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:var(--s2);line-height:1.5}

/* ── BILLING ── */
.cb-bill.selected{border-color:#1a9eff;background:rgba(26,160,255,.08)}

/* ── PAYMENT PLAN ── */
.cb-pay-opt.selected{border-color:#1a9eff;background:rgba(26,160,255,.07)}

/* ── CONTACT ── */

/* ── SUMMARY ── */

/* ── IFRAME ── */

/* ── FOOTER ── */
#cb-footer{padding:12px 22px 16px;border-top:none!important;flex-shrink:0}

/* ── PAGE HEADER ── */

/* ── Dual pricing display ── */
.ws-page .card-monthly-price{display:flex;align-items:baseline;gap:var(--s0);margin-bottom:2px}
.ws-page .card-monthly-amt{font-family:var(--font-display);font-size:clamp(36px,4vw,48px);font-weight:500;letter-spacing:-.03em;color:var(--t1);line-height:1}
.ws-page .card-monthly-mo{font-size:14px;color:var(--t2);font-weight:400}
.ws-page .card-annual-row{font-size:12px;color:var(--accent);font-weight:500;margin-bottom:var(--s1)}
.ws-page .card-annual-row span{color:var(--t3);font-weight:400;font-size:11px}

/* ═══════════════════════════════════════════════════════════════════════
   PRICING CARDS + 2-STEP CHECKOUT MODAL
   Added 2026-04-15 — restores the 3-tier pricing grid deleted in 6bb5d1f
   and wires it to a popup modal (step 1 contact details, step 2 plan & pricing).
   ═══════════════════════════════════════════════════════════════════════ */

/* Pricing cards grid */
@media(max-width:860px){.cb-plans{grid-template-columns:1fr;max-width:440px}}

/* Modal overlay */
@keyframes cbFade{from{opacity:0}to{opacity:1}}

.cb-modal{position:relative;width:100%;max-width:540px;max-height:94vh;overflow-y:auto;
  background:linear-gradient(160deg,rgba(14,20,32,.99) 0%,rgba(8,12,22,.99) 100%);
  border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.22);
  border-radius:var(--r-2xl);
  box-shadow:0 24px 80px rgba(0,0,0,.7),0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);
  padding:var(--s5) var(--s5) var(--s4);
  animation:cbSlideUp .24s cubic-bezier(.16,1,.3,1)}

/* ═══ Canonical modal primitive — replaces ad hoc .cb-modal consumers ═══ */
.modal-panel{
  position:relative;
  background:var(--cb-glass-2-bg);
  border:var(--cb-glass-2-border);
  border-top-color:var(--cb-glass-2-border-top);
  border-radius:var(--r-xl);
  box-shadow:var(--cb-glass-2-shadow);
  padding:var(--s3);
  color:var(--txt);
}
.modal-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 40%);
}
@keyframes cbSlideUp{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.cb-modal-dot.on{border-color:#2997ff;background:#0071e3;color:#fff;box-shadow:0 0 14px rgba(41,151,255,.5)}
.cb-modal-dot.ok{border-color:#34c759;background:#34c759;color:#fff}
.cb-modal-bar.ok{background:#34c759}
.cb-modal-step.active{display:block}
@media(max-width:480px){.cb-modal-row{grid-template-columns:1fr}}
.cb-modal-opt.sel{border-color:#2997ff;background:rgba(41,151,255,.08)}
.cb-modal-opt.sel .cb-modal-radio{border-color:#2997ff;background:#2997ff}
.cb-modal-opt.sel .cb-modal-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff}

.cb-modal-btns{display:flex;gap:var(--s1);margin-top:var(--s3)}

body.cb-modal-open{overflow:hidden}

/* ═══════════════════════════════════════════════════════════════════════
   FINAL POLISH — section glass separators, responsive, 60fps GPU hints
   Added 2026-04-15. Matches portal premium feel across mobile/iPad/desktop.
   ═══════════════════════════════════════════════════════════════════════ */

/* Subtle top-edge highlight between sections — premium section separator,
   no mask-fade awkwardness, matches Apple marketing-page aesthetic */

/* ─── 60fps GPU compositing hints for interactive elements ─── */
.cb-plan,.cb-modal,.cb-modal-btn,.cb-modal-opt,.cb-plan-cta,.cb-modal-close{
  
  
  
  }

/* ─── Tablet breakpoint (iPad portrait 768-1024px) ─── */
@media(max-width:1024px){
  .cb-plans{gap:var(--s2);max-width:960px}
  .cb-plan{padding:var(--s4) var(--s3)}
  .cb-plan-name{font-size:24px}
  .cb-plan-price{font-size:38px}
  .cb-plan-feat{font-size:14px;line-height:1.75}
}

/* ─── Tablet portrait / large phone (max 860px) — collapse to single column ─── */
@media(max-width:860px){
  .cb-plans{grid-template-columns:1fr;max-width:460px;padding:var(--s2) var(--s2) 0;gap:var(--s3)}
  .cb-plan{padding:var(--s4)}
  .cb-plan--featured{transform:none}
  .cb-plan-feat{max-width:360px;margin-left:auto;margin-right:auto}
}

/* ─── Mobile (max 560px) — full-screen modal, tighter card padding ─── */
@media(max-width:560px){
  .cb-modal-overlay{padding:0;align-items:stretch;justify-content:stretch}
  .cb-modal{max-width:100%;max-height:100vh;min-height:100vh;border-radius:0;padding:var(--s5) var(--s3) var(--s3);animation:cbSlideUpMobile .24s cubic-bezier(.16,1,.3,1)}
  @keyframes cbSlideUpMobile{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
  .cb-modal-close{top:var(--s1);right:var(--s1);width:40px;height:40px;font-size:24px}
  .cb-modal-title{font-size:22px}
  .cb-modal-sub{font-size:14px}
  .cb-modal-input{font-size:16px;padding:12px 14px}
  .cb-modal-btns{flex-direction:column-reverse;gap:8px}
  .cb-modal-btn{padding:14px}
  .cb-plan{padding:var(--s3)}
  .cb-plan-name{font-size:22px}
  .cb-plan-price{font-size:36px}
  .cb-plan-feat{font-size:14px}
  /* Section separator hairlines shrink to page-edge-respecting on phones */
  .ws-page section.section + section.section::before{left:8%;right:8%}
}

/* ─── Mobile small (max 380px) — extra-tight ─── */
@media(max-width:380px){
  .cb-plan-price{font-size:32px}
  .cb-modal-title{font-size:20px}
  .cb-modal{padding:var(--s4) var(--s2) var(--s3)}
}

/* ─── Reduced motion respect (a11y) — already partially set elsewhere, reinforce for new elements ─── */
@media(prefers-reduced-motion:reduce){
  .cb-plan,.cb-plan-cta,.cb-modal,.cb-modal-btn,.cb-modal-opt,.cb-modal-close,
  .cb-modal-overlay{animation:none!important;transition:none!important}
  .cb-plan:hover,.cb-plan-cta:hover{transform:none!important}
}

/* ─── Enforce SF Pro Display on all pricing/modal titles (defense-in-depth) ─── */
/* Body/UI text uses SF Pro Text */

/* ─── White text enforcement on primary value copy ─── */

/* ─── Ensure cards don't inherit weird colors from ambient CSS ─── */
.cb-plan *,.cb-modal *{font-family:inherit}

/* ══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM LOCK — GLOBAL NO-BOLD ENFORCEMENT (Sean 2026-04-15)
   Demotes every inline font-weight 600/700/800/900 across the portal.
   Covers portal pages and iframe pages that import this stylesheet.
   strong/b keep semantic meaning via italic stress, not heavy weight.
   ══════════════════════════════════════════════════════════════════ */
body [style*="font-weight:500"],body [style*="font-weight:500"],
body [style*="font-weight:500"],body [style*="font-weight:500"],
body [style*="font:600"],body [style*="font:700"],
body [style*="font:800"],body [style*="font:900"]{font-weight:500!important}
body b,body strong{font-weight:500!important}
body h1,body h2,body h3,body h4,body h5,body h6{font-weight:500}

/* ══════════════════════════════════════════════════════════════════
   UNIFIED HEADER ALIASES — legacy classes inherit canonical .page-head / .pg-title / .pg-sub treatment
   (Added 2026-04-16 to stop GHL/onboarding/blueprints pages rendering as unstyled divs.)
   ══════════════════════════════════════════════════════════════════ */
.cc-hdr{flex-shrink:0;padding:26px 20px 0;width:100%;margin:0 0 var(--s1)}
.cc-title{font:500 28px/var(--lh-tight) var(--font-display);color:var(--txt);letter-spacing:-.02em;margin:0 0 var(--s0)}
.cc-sub{color:var(--txt3);font:400 var(--text-md)/var(--lh-normal) var(--font);margin:0 0 var(--s2)}
.banner-title{font:500 28px/var(--lh-tight) var(--font-display);color:var(--txt);letter-spacing:-.02em}
.brand-title{font:500 20px/var(--lh-snug) var(--font-display);color:var(--txt);letter-spacing:-.02em}
.complete-title{font:500 24px/var(--lh-tight) var(--font-display);color:var(--txt);letter-spacing:-.02em}

/* ══════════════════════════════════════════════════════════════════
   PIPE-HEAD-ROW — canonical page-head horizontal row (title left + controls right)
   Referenced in master CLAUDE.md. CSS had been missing causing controls to stack below titles.
   ══════════════════════════════════════════════════════════════════ */
.pipe-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.pipe-head-row>*{min-width:0}
.stg-head,.stg-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.stg-head-titles{min-width:0;flex:1 1 auto}

/* ══════════════════════════════════════════════════════════════════
   ORPHAN-CLASS DEFENSIVE STYLES — notif/detail/cal/dz/stg headers
   (Added 2026-04-16. These were referenced in markup with zero CSS; items below
   align them with the design-system tokens + page-head typography.)
   ══════════════════════════════════════════════════════════════════ */
.notif-item{display:flex;gap:var(--s1);padding:var(--s1) var(--s3);cursor:pointer;border-left:2px solid transparent}
.notif-item:hover{background:rgba(255,255,255,.04)}
.dz-title{font:500 var(--text-md)/var(--lh-snug) var(--font-display);color:var(--txt);margin:0 0 var(--s1)}

/* ══════════════════════════════════════════════════════════════════
   UNIFORM LOCK — Sean 2026-04-16
   ONE background, ONE font-family, ONE padding token across every
   page, shell, container, wizard, card, subtitle, and word.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. BACKGROUND — REVERTED 2026-04-16. Do not apply gradient to
   html; it double-stacked with body.bg-dark and made the top too
   bright. The canonical master BG stays on .bg-dark only. ── */

/* ── 2. ONE FONT — SF Pro on every text element. Mono stays mono for
   code/terminals; icons/SVG unaffected. No Arial drift, no Helvetica
   fallback chain leaking through. ── */
html,body,input,textarea,select,button,
h1,h2,h3,h4,h5,h6,p,span,div,a,label,
li,td,th,figcaption,strong,em,b,i{
  font-family:var(--cb-font-text) !important
}
code,pre,.mono,.font-mono,[class*="terminal"],[class*="ps-kanban-count"],.xterm *{
  font-family:var(--cb-font-mono) !important
}

/* ── 3. UNIFORM CONTAINER PADDING — every primary surface shares
   the 10/16/24 rhythm. Shell-body-glass is an iframe wrapper — leaves
   its own padding to the iframe's inner .page-shell so content isn't
   double-padded. ── */
.page-shell{padding:var(--s1)}body{padding:0}
/* page-head/cc-hdr + glass-card/opt-card/dock-bubble padding consolidated into their canonical rules above. */
.pipeline-card{padding:10px}

/* ── 4. UNIFORM TEXT SIZES — the four canonical title sizes ── */
/* pg-title/cc-title/banner-title + pg-sub/cc-sub consolidated into line ~4452 canonical rule */
/* ══ RESCUED FROM QUARANTINE ══
   These classes were flagged dead by static HTML+JS analysis, but
   appear in JS template strings (innerHTML='<div class="foo">...').
   Moved back into the active stylesheet on 2026-04-16.
   ══ */
.wiz-summary-title{font:500 var(--text-lg)/var(--lh-tight) var(--font);color:var(--txt);margin-bottom:var(--s2)}
.wiz-summary-row{display:flex;justify-content:space-between;align-items:center;
  padding:var(--s1) 0;border-bottom:1px solid rgba(255,255,255,.04)}
.wiz-summary-row:last-child{border-bottom:none}
.wiz-summary-lbl{display:flex;align-items:center;gap:var(--s1);
  font:500 var(--text-sm)/1 var(--font);color:var(--txt3)}
.wiz-summary-lbl svg{width:14px;height:14px;opacity:.6}
.wiz-summary-val{font:500 var(--text-sm)/1 var(--font);color:var(--txt);text-align:right;max-width:60%}
.wiz-summary-user{display:flex;flex-direction:column;gap:var(--s0);
  padding:var(--s2) 0;border-bottom:1px solid rgba(255,255,255,.04);margin-bottom:var(--s1)}
.wiz-summary-name{font:500 var(--text-lg)/1 var(--font);color:var(--txt)}
.wiz-summary-email{font:400 var(--text-sm)/1 var(--font);color:var(--txt3)}
.wiz-summary-dest{margin-top:var(--s2);padding:var(--s1) var(--s2);
  border-radius:var(--r-md);background:rgba(41,151,255,.06);border:1px solid rgba(41,151,255,.1);
  font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--blue)}
.rs-title{font:500 26px/1.1 var(--font-display);letter-spacing:-.6px;color:#fff;text-align:center;margin:0 0 8px}
.rs-divider{width:48px;height:2px;margin:0 auto 22px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#2997ff,transparent)}
.rs-section{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.rs-section:last-child{border-bottom:none}
.rs-label{font:500 10px/1 var(--font-display);
  letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.45);
  margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.rs-count{font:500 10px/1 var(--font);color:rgba(255,255,255,.5);letter-spacing:.3px;text-transform:none}
.rs-value{font:500 14px/1.4 var(--font-display);color:#fff;position:relative}
.rs-files{display:flex;flex-direction:column;gap:8px}
.rs-file{display:flex;align-items:center;gap:12px;padding:10px 12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px}
.rs-file-ico{width:18px;height:18px;flex-shrink:0;color:rgba(41,151,255,.8)}
.rs-file-body{flex:1;min-width:0}
.rs-file-name{font:500 13px/1.3 var(--font-display);color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-file-meta{font:500 11px/1.3 var(--font-display);color:rgba(255,255,255,.5);margin-top:2px}
.rs-empty{font:500 12px/1 var(--font);color:rgba(255,255,255,.4);padding:10px 0}
.rs-bp-trigger{cursor:default}
.rs-bp-hint{font:500 10px/1 var(--font);color:rgba(255,255,255,.35);margin-left:8px;text-transform:uppercase;letter-spacing:.5px}
.rs-bp-hover{position:absolute;top:100%;left:0;right:auto;margin-top:8px;z-index:50;
  background:rgba(8,14,28,.96);border:1px solid rgba(255,255,255,.12);border-radius:12px;
  padding:12px 14px;min-width:260px;box-shadow:0 16px 48px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .15s,transform .15s}
.rs-bp-trigger:hover .rs-bp-hover{opacity:1;pointer-events:auto;transform:translateY(0)}
.rs-bp-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  font:500 11px/1.3 var(--font-display);border-bottom:1px solid rgba(255,255,255,.05)}
.rs-bp-row:last-child{border-bottom:none}
.rs-bp-row span:first-child{color:rgba(255,255,255,.5);text-transform:capitalize}
.rs-bp-row span:last-child{color:#fff;text-align:right;text-transform:capitalize}
.dm-strip-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:500 10px/1 var(--font);color:#fff;cursor:pointer;transition:border-radius 10ms,background 10ms;
  overflow:hidden;position:relative;flex-shrink:0;background:linear-gradient(135deg,rgba(52,211,153,.4),rgba(41,151,255,.4))}
.dm-strip-av:hover{border-radius:12px}
.dm-strip-av:hover::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:4px;height:10px;border-radius:0 4px 4px 0;background:#fff}
.dm-strip-av img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.payout-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);
  border-radius:var(--r-xl);padding:var(--s2);box-shadow:var(--sh)}
.empty{text-align:center;padding:var(--s5) var(--card-md);color:var(--txt3);font:400 var(--text-md)/var(--lh-relaxed) var(--font)}
.empty svg{width:48px;height:48px;margin-bottom:var(--card-sm);opacity:.3}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 6px rgba(41,151,255,.4)}
.scroll-x{overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}
.pc-top-row{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;flex-direction:row;align-items:center;gap:8px;
  padding:10px 10px 0;
  pointer-events:none
}
.pc-title{
  font:500 12.5px/1.25 var(--font);
  color:#fff;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
  }
.pc-top-row > *{pointer-events:auto}
.pc-status-row{
  position:absolute;top:46px;left:10px;right:10px;z-index:2;
  display:flex;align-items:center;gap:4px;pointer-events:none
}
.pc-status-row > *{pointer-events:auto}
.pc-status-tag[data-status="queue"]{background:rgba(148,163,184,.18);color:#cbd5e1;border-color:rgba(148,163,184,.35)}
.pc-status-tag[data-status="active"]{background:rgba(41,151,255,.2);color:#5eb8ff;border-color:rgba(41,151,255,.4)}
.pc-status-tag[data-status="review"]{background:rgba(191,90,242,.2);color:#d1a9ff;border-color:rgba(191,90,242,.4)}
.pc-status-tag[data-status="revisions"]{background:rgba(255,159,10,.2);color:#ff9f0a;border-color:rgba(255,159,10,.4)}
.pc-status-tag[data-status="approved"]{background:rgba(52,199,89,.2);color:#34d399;border-color:rgba(52,199,89,.4)}
/* .pc-pool-pill is covered by the shared small-icon rule above
   (merged Sean 2026-04-20 v4). Do not re-declare here. */
.pc-date-pill{
  display:inline-flex;align-items:center;
  height:16px;padding:0 6px;
  border-radius:3px;
  font:500 9px/1 var(--font);letter-spacing:.2px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.78);
  flex-shrink:0;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.4)
}
.pc-bottom-row{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  padding:0 10px 10px;
  pointer-events:none
}
.pc-meta{
  display:flex;align-items:center;gap:3px;
  flex-wrap:nowrap;min-width:0
}
/* Bottom-left icons — type, ver, tier, grade, pool — SMALL and uniform.
   Kept visually distinct from status-tag, timer, and date pills by being
   noticeably smaller (15px vs 18px). Sean 2026-04-20 v4: icons were too big. */
.pc-type-icon,.pc-ver-icon,.pc-tier-icon,.pc-grade-icon,.pc-pool-pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:15px;min-width:16px;padding:0 5px;
  border-radius:3px;
  font:600 9px/1 var(--font);letter-spacing:.3px;
  background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.1) 100%);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);
flex-shrink:0;white-space:nowrap
}
/* Status tag + timer tag KEEP the larger 18px size per spec — they live
   in different regions (status under the avatar, timer next to the editor
   avatar) and need to read at a glance. Dates + timer + avatars stay full size. */
.pc-status-tag,.pc-timer-tag{
  display:inline-flex;align-items:center;justify-content:center;
  height:15px;min-width:16px;padding:0 5px;
  border-radius:3px;
  font:600 8.5px/1 var(--font);letter-spacing:.3px;
  background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.1) 100%);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);
flex-shrink:0;white-space:nowrap
}
.pc-status-tag{text-transform:uppercase;letter-spacing:.35px;padding:0 6px}
.pc-type-icon[data-type="SF"],.pc-type-icon[data-type="LF"],.pc-type-icon[data-type="FT"]{background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.1) 100%);color:#fff;border-color:rgba(255,255,255,.22)}
.pc-ver-icon{background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.1) 100%);color:#fff;border-color:rgba(255,255,255,.22)}
.pc-tier-icon[data-tier="1"],.pc-tier-icon[data-tier="2"],.pc-tier-icon[data-tier="3"]{background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.1) 100%);color:#fff;border-color:rgba(255,255,255,.22)}
.pc-grade-icon[data-grade="A"]{background:rgba(52,211,153,.2);color:#34d399;border-color:rgba(52,211,153,.4)}
.pc-grade-icon[data-grade="B"]{background:rgba(134,239,172,.18);color:#86efac;border-color:rgba(134,239,172,.35)}
.pc-grade-icon[data-grade="C"]{background:rgba(251,191,36,.18);color:#fbbf24;border-color:rgba(251,191,36,.35)}
.pc-grade-icon[data-grade="D"]{background:rgba(255,159,10,.18);color:#ff9f0a;border-color:rgba(255,159,10,.35)}
.pc-grade-icon[data-grade="F"]{background:rgba(192,57,43,.2);color:#ff453a;border-color:rgba(192,57,43,.4)}
/* Running editor grade (non-approved cards) — same color as matching letter
   but dashed border so it's visually distinct from the locked project grade. */
.pc-grade-icon.pc-grade-live{border-style:dashed;opacity:.88}
.pc-grade-icon.pc-grade-live::after{content:"•";margin-left:2px;opacity:.55;font-weight:500}
/* At-risk dot — small red pulsing dot beside status tag when the card triggers
   any of: past due, revisions over tier, low editor grade (admin/owner/editor). */
.pc-risk-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#ff3b30;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.45),0 0 10px rgba(255,59,48,.65);
  animation:pcRiskPulse 1.6s ease-in-out infinite;
  flex-shrink:0;margin-left:2px;cursor:help
}
@keyframes pcRiskPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%    {transform:scale(1.25);opacity:.75}
}
.pipeline-card.is-at-risk{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(255,59,48,.20),
    0 6px 14px rgba(0,0,0,.28),
    0 14px 30px rgba(0,0,0,.3),
    0 0 26px rgba(255,59,48,.08)
}
@media(prefers-reduced-motion:reduce){
  .pc-risk-dot{animation:none}
}
.pc-editor-col{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  pointer-events:auto
}
.pc-timer-tag{
  background:rgba(0,0,0,.6);
  border-color:rgba(255,255,255,.1);
  color:rgba(255,255,255,.85);
  white-space:nowrap;gap:4px
}
.pc-timer-tag svg{flex-shrink:0}
.pc-av-sm{
  width:28px;height:28px;border-radius:50%;
  overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.1) 100%);
  border:1.5px solid rgba(255,255,255,.35);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto
}
.pc-av-sm img{width:100%;height:100%;object-fit:cover;display:block}
.pc-av-client,.pc-av-editor{border-color:rgba(255,255,255,.45)}
.pc-av-sm:hover{transform:scale(1.08);transition:transform 120ms var(--ease-q)}
.pc-av-empty{border-style:dashed!important;border-color:rgba(255,255,255,.2)!important;background:rgba(255,255,255,.03)!important}
.dk-mark{position:absolute;top:50%;width:3px;height:14px;
  transform:translate(-50%,-50%);border-radius:1.5px;
  background:rgba(255,255,255,.6);
  box-shadow:0 0 4px rgba(255,255,255,.2);
  pointer-events:auto;cursor:pointer;transition:transform 10ms}
.dk-mark:hover{transform:translate(-50%,-50%) scaleY(1.3)}
.dk-mark-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  white-space:normal;max-width:260px;min-width:160px;padding:12px 14px;border-radius:12px;
  background:linear-gradient(180deg,rgba(12,14,24,.95) 0%,rgba(6,8,14,.98) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  color:rgba(255,255,255,.9);font:400 12px/1.5 var(--font);letter-spacing:.01em;
  pointer-events:none;opacity:0;transition:opacity 10ms}
.dk-mark:hover .dk-mark-tip{opacity:1}
.pv-ft-row{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;font:400 12px/1.3 var(--font);color:var(--txt2);border-radius:var(--r-sm);transition:background 10ms;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid rgba(255,255,255,.02)}
.pv-ft-row:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.pv-ft-row svg{width:16px;height:16px;flex-shrink:0}
.pv-ft-file{padding-left:24px}
.pv-ft-children{padding-left:12px;border-left:1px solid rgba(255,255,255,.06);margin-left:11px}
.pv-ft-folder{margin:0}
.person:hover{border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
.p-avatar{width:var(--h-sm);height:var(--h-sm);border-radius:50%;display:flex;align-items:center;
  justify-content:center;font:500 var(--text-4xs)/var(--lh-none) var(--font);flex-shrink:0;color:#fff}
.p-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.p-info{flex:1;min-width:0}
.p-name{font:500 var(--text-sm)/var(--lh-none) var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-meta{font:400 var(--text-4xs)/var(--lh-none) var(--font);color:var(--txt3);margin-top:2px}
.p-tag{padding:2px var(--s1);border-radius:var(--r-pill);font:500 var(--text-3xs)/var(--lh-none) var(--font);
  text-transform:uppercase;flex-shrink:0}
.col-empty{padding:var(--s3);text-align:center;font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt4)}
.sc-hi{color:var(--green)}
.po-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s1)}
.po-label{font:400 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt2)}
.po-val{font:500 var(--text-md)/var(--lh-none) var(--font)}
.po-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:var(--card-sm)}
.po-tier{padding:10px;border-radius:var(--r-lg);text-align:center;font:400 var(--text-sm)/var(--lh-none) var(--font);
  border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.po-tier-pct{font:500 var(--text-lg)/var(--lh-none) var(--font);margin-bottom:2px}
.po-tier-label{color:var(--txt3);font:400 var(--text-xs)/var(--lh-none) var(--font);text-transform:uppercase}
.po-total{font:500 var(--text-3xl)/var(--lh-none) var(--font);color:var(--green);margin-top:var(--card-sm)}
.po-total-sub{font:500 var(--text-md)/var(--lh-none) var(--font);color:var(--txt3);margin-left:var(--s1)}
.grade-pill{display:inline-block;padding:2px var(--s1);border-radius:var(--r-sm);font:500 var(--text-xs)/var(--lh-tight) var(--font)}
.tm-table{width:100%;border-collapse:collapse}
.tm-table th{font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3);text-align:left;padding:var(--s1) var(--s2);border-bottom:1px solid rgba(255,255,255,.06);text-transform:uppercase;letter-spacing:.5px}
.tm-table td{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt2);padding:var(--s1) var(--s2);border-bottom:1px solid rgba(255,255,255,.04)}
.oa-island-hdr{font:500 var(--text-3xs)/var(--lh-none) var(--font);color:var(--txt3);
  text-transform:uppercase;letter-spacing:.08em;padding:var(--s0) 0}
.oa-sep{width:18px;height:1px;background:rgba(255,255,255,.06)}
.oa-step{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--s0);
  border-radius:var(--r-sm);cursor:pointer;transition:background 10ms}
.oa-step:hover{background:rgba(255,255,255,.04)}
.oa-dot{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font:500 var(--text-3xs)/var(--lh-none) var(--font);color:var(--txt3);transition:background 10ms,border-color 10ms,color 10ms}
.oa-flabel{font:500 var(--text-2xs)/var(--lh-none) var(--font);color:var(--txt4);white-space:nowrap}
.oa-prog{font:500 var(--text-3xs)/var(--lh-none) var(--font);color:var(--txt4);padding:var(--s0) 0}
.ix-dm{display:flex;align-items:center;gap:10px;padding:var(--s1) var(--s2);cursor:pointer;
  transition:background 10ms}
.ix-dm:hover{background:rgba(255,255,255,.04)}
.ix-dm-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:500 var(--text-4xs)/var(--lh-none) var(--font);color:#fff;
  background:linear-gradient(135deg,rgba(41,151,255,.3),rgba(191,90,242,.2));flex-shrink:0;overflow:hidden}
.ix-dm-av img{width:100%;height:100%;object-fit:cover}
.ix-dm-info{flex:1;min-width:0}
.ix-dm-name{font:500 var(--text-sm)/var(--lh-none) var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-dm-preview{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.ix-dm-badge{min-width:18px;height:18px;padding:0 var(--s-micro-3);border-radius:var(--r-pill);
  background:var(--blue);color:#fff;font:500 var(--text-xs)/18px var(--font);text-align:center;flex-shrink:0}
.ix-msg{padding:var(--s0) var(--s1);border-radius:var(--r-md);font:400 var(--text-sm)/var(--lh-normal) var(--font);
  max-width:85%;word-wrap:break-word}
.nav-event-tag{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);
  font:500 8px/var(--lh-none) var(--font);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.nav-event-title{font:500 11px/1.3 var(--font);color:var(--txt);margin-bottom:2px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nav-event-body{font:400 9px/1.35 var(--font);color:var(--txt3);margin-bottom:4px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nav-event-cta{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);
  font:500 8px/var(--lh-none) var(--font);color:var(--blue);background:rgba(41,151,255,.1);
  border:1px solid rgba(41,151,255,.15);text-decoration:none;transition:background 10ms,color 10ms;letter-spacing:.02em}
.nav-event-cta:hover{background:rgba(41,151,255,.2);color:#fff}
.bb-slide-card{padding:var(--s1);border-radius:var(--r-md);background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);margin-bottom:var(--s1)}
.bb-slide-card label{font:500 9px/var(--lh-none) var(--font);color:var(--txt3);width:44px;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em}
.bb-slide-card input,.bb-slide-card textarea,.bb-slide-card select{flex:1;font:400 11px/1.3 var(--font);color:var(--txt);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);padding:4px 6px;outline:none}
.bb-slide-card input:focus,.bb-slide-card textarea:focus,.bb-slide-card select:focus{border-color:rgba(41,151,255,.3)}
.bb-slide-card textarea{resize:vertical;min-height:32px}
.bb-slide-card select{-webkit-appearance:none;appearance:none}
.bb-slide-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s0)}
.bb-slide-hdr span{font:500 10px/var(--lh-none) var(--font);color:var(--txt2)}
.bb-remove{width:18px;height:18px;border-radius:50%;border:none;background:rgba(231,76,60,.12);color:var(--red);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-size:11px;flex-shrink:0}
.bp-q-title{font:500 var(--text-2xl)/var(--lh-tight) var(--font-display);color:var(--txt);margin-bottom:var(--s0)}
.bp-v9-card{position:relative;aspect-ratio:9/16;width:180px;flex-shrink:0;scroll-snap-align:start;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color 10ms,transform 10ms}
.bp-v9-card:hover{transform:translateY(-2px)}
.bp-v9-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bp-v9-grad{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.85))}
.bp-v9-info{position:absolute;bottom:0;left:0;right:0;padding:var(--card-sm)}
.bp-v9-title{font:500 var(--text-md)/var(--lh-tight) var(--font);color:var(--txt)}
.bp-v9-desc{font:400 var(--text-xs)/var(--lh-normal) var(--font);color:var(--txt3)}
.bp-v9-check{position:absolute;top:var(--s1);right:var(--s1);width:24px;height:24px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:transform 10ms var(--ease),opacity 10ms var(--ease)}
.bp-vid-grid{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;width:100%;justify-content:center;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}
.bp-vid-grid::-webkit-scrollbar{height:4px}
.bp-vid-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.bp-vid-name{position:absolute;bottom:0;left:0;right:0;padding:10px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.85))}
.bp-vid-title{font:500 var(--text-md)/var(--lh-tight) var(--font);color:var(--txt);margin-bottom:2px}
.bp-vid-desc{font:400 var(--text-4xs)/var(--lh-normal) var(--font);color:var(--txt3)}
.bp-sound-opts{display:flex;flex-direction:column;gap:var(--s2)}
.bp-sound-level{display:flex;align-items:flex-end;gap:3px;height:56px;margin-bottom:var(--s2)}
.bp-sbar{width:4px;height:var(--sl-mx,20px);border-radius:var(--r-pill);background:var(--blue);transform-origin:bottom;animation:bpSoundPulse var(--sl-spd,.5s) var(--sl-del,0s) ease-in-out infinite alternate}
.bp-sound-title{font:500 var(--text-3xl)/var(--lh-tight) var(--font);color:var(--txt);margin-bottom:var(--s0)}
.bp-sound-desc{font:400 var(--text-lg)/var(--lh-relaxed) var(--font);color:var(--txt3);max-width:240px}
/* 2026-04-22: bgm_genre cards are now a horizontal 1:1 row (7 options).
   Was auto-fill which collapsed to single column when parent was narrow. */
.bp-music-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s1);width:100%;max-width:960px;margin:0 auto}
.bp-music-card{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.bp-music-card .bp-music-wave{height:40px;margin-bottom:var(--s1)}
@media(max-width:900px){.bp-music-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.bp-music-grid{grid-template-columns:repeat(2,1fr)}}
.bp-music-wave{display:flex;align-items:flex-end;gap:2px;height:32px;margin-bottom:var(--s1)}
.bp-mbar{width:3px;height:var(--mw-mx,15px);border-radius:var(--r-pill);background:var(--green);transform-origin:bottom;animation:bpMusicPulse var(--mw-spd,.5s) var(--mw-del,0s) ease-in-out infinite alternate}
.bp-music-title{font:500 var(--text-md)/var(--lh-tight) var(--font);color:var(--txt);margin-bottom:var(--s-micro-3)}
.bp-music-desc{font:400 var(--text-4xs)/var(--lh-normal) var(--font);color:var(--txt3)}
.bp-preview{display:flex;align-items:center;justify-content:center;
  min-height:200px;width:min(300px,80%);aspect-ratio:9/16;margin:0 auto var(--s3);
  border-radius:20px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);
  position:relative;overflow:hidden}
/* 2026-04-22: caption-font live sample — big centered preview shown above
   the font scroll grid. Replaces the old fake-phone frame for this step. */
.bp-font-sample-wrap{display:flex;justify-content:center;align-items:center;margin:0 auto var(--s3);padding:var(--s4) var(--s3);width:100%;max-width:720px;min-height:140px;border-radius:var(--r-lg);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}
.bp-font-sample{font-size:48px;line-height:1.1;color:var(--txt);text-align:center;letter-spacing:-.01em}

/* 2026-04-22: caption_style — 1:1 block grid (was horizontal scroll). */
.bp-style-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2);width:100%;max-width:960px;margin:0 auto}
@media(max-width:900px){.bp-style-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.bp-style-grid{grid-template-columns:repeat(2,1fr)}}
.bp-style-card{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);padding:var(--s2);border-radius:var(--r-lg);background:var(--glass-flat);border:2px solid transparent;cursor:pointer;text-align:center;transition:border-color 10ms,transform 10ms}
.bp-style-card:hover{transform:translateY(-2px)}
.bp-style-card.selected{border-color:var(--blue)}
.bp-style-preview{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0}

/* 2026-04-22: caption_size — 5-col row of 1:1 cards (was flex-wrap column). */
.bp-size-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);width:100%;max-width:720px;margin:var(--s3) auto 0}
@media(max-width:520px){.bp-size-grid{grid-template-columns:repeat(3,1fr)}}
.bp-size-card{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);padding:var(--s2);border-radius:var(--r-lg);background:var(--glass-flat);border:2px solid transparent;cursor:pointer;text-align:center;transition:border-color 10ms,transform 10ms}
.bp-size-card:hover{transform:translateY(-2px)}
.bp-size-card.selected{border-color:var(--blue)}
.bp-size-card.selected .bp-size-circle{border-color:var(--blue);color:var(--blue)}

/* 2026-04-22: thumbnail_style — real 16:9 creator thumbnail preview
   in a 3-col grid (was a 90px gradient bar, looked meaningless). */
.bp-thumb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);width:100%;max-width:1080px;margin:0 auto}
@media(max-width:900px){.bp-thumb-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.bp-thumb-grid{grid-template-columns:1fr}}
.bp-thumb-card{padding:0;border-radius:var(--r-lg);background:var(--glass-flat);border:2px solid transparent;cursor:pointer;overflow:hidden;transition:border-color 10ms,transform 10ms;display:flex;flex-direction:column}
.bp-thumb-card:hover{transform:translateY(-2px)}
.bp-thumb-card.selected{border-color:var(--blue)}
.bp-thumb-art{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bp-thumb-face{position:absolute;right:8%;bottom:0;width:45%;height:85%;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.18),transparent 60%);border-radius:50% 50% 0 0 / 55% 55% 0 0}
.bp-thumb-hook{position:absolute;left:6%;top:50%;transform:translateY(-50%);max-width:55%;font:800 clamp(18px,2.4vw,32px)/1 var(--font);color:#fff;letter-spacing:-.02em;text-shadow:0 2px 8px rgba(0,0,0,.6);text-align:left}
.bp-thumb-tier{position:absolute;top:8px;right:8px;font:600 11px/1 var(--font);color:#fff;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:999px;letter-spacing:.02em}
.bp-thumb-body{padding:var(--s2) var(--s3);text-align:left}
.bp-thumb-title{font:600 var(--text-lg)/var(--lh-tight) var(--font);color:var(--txt);margin-bottom:var(--s-micro-3)}
.bp-thumb-desc{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3)}
.bp-font-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;width:100%;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}
.bp-font-scroll::-webkit-scrollbar{height:4px}
.bp-font-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.bp-anim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s2)}
.bp-phone-wrap{display:flex;align-items:center;gap:var(--s4);justify-content:center;flex-wrap:wrap}
.bp-phone{width:200px;aspect-ratio:9/19;border-radius:var(--r-2xl);border:2px solid rgba(255,255,255,.15);background:rgba(0,0,0,.6);position:relative;overflow:hidden;flex-shrink:0}
.bp-phone-notch{position:absolute;top:var(--s1);left:50%;transform:translateX(-50%);width:80px;height:22px;border-radius:var(--r-pill);background:rgba(0,0,0,.9);z-index:2}
.bp-phone-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(41,151,255,.08),transparent)}
.bp-phone-speaker{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.06);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.bp-pos-btns{display:flex;flex-direction:column;gap:var(--s1)}
.bp-size-btns{display:flex;gap:var(--s2);align-items:flex-end}
.bp-size-circle{border:2px solid rgba(255,255,255,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt);transition:border-color 10ms,color 10ms;margin-bottom:var(--s0)}
.bp-size-range{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3)}
.opt-grid-3{grid-template-columns:repeat(3,1fr);justify-items:center}
/* 2026-04-22: standardize 9:16 placement cards — cards stretch to fill
   column, icons are portrait (9:16) matching the actual short-form format. */
.bp-place-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2);width:100%;max-width:960px;margin:0 auto}
.bp-place-card{text-align:center;padding:var(--s1);cursor:pointer;border:2px solid transparent;border-radius:var(--r-lg);background:var(--glass-flat);transition:border-color 10ms,transform 10ms;display:flex;flex-direction:column;align-items:stretch}
.bp-place-card:hover{transform:translateY(-2px)}
.bp-place-icon{width:100%;aspect-ratio:9/16;border-radius:var(--r-sm);background:rgba(255,255,255,.04);margin-bottom:var(--s1);position:relative;overflow:hidden}
.bp-place-title{font:500 var(--text-xs)/var(--lh-tight) var(--font);color:var(--txt);margin-bottom:1px}
.bp-place-desc{font:400 var(--text-2xs)/var(--lh-none) var(--font);color:var(--txt3)}
.bp-color-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:8px 0}
.bp-color-circle{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.15);flex-shrink:0}
.bp-color-name{font:500 var(--text-xs)/1 var(--font);color:var(--txt3)}
.bp-outline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.bp-lib-empty{font:400 var(--text-md)/var(--lh-normal) var(--font);color:var(--txt3);padding:var(--s3) 0}
.bp-lib-bg{position:absolute;inset:0}
.bp-lib-bg video{width:100%;height:100%;object-fit:cover}
.bp-lib-darken{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.7))}
.bp-lib-island{position:absolute;top:var(--s1);left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);border-radius:var(--r-pill);padding:var(--s-micro-3) var(--s1);display:flex;align-items:center;gap:var(--s-micro-3)}
.bp-lib-island-dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.bp-lib-island-lbl{font:500 var(--text-2xs)/var(--lh-none) var(--font);color:var(--txt);text-transform:uppercase;letter-spacing:1px}
.bp-lib-info{position:absolute;bottom:0;left:0;right:0;padding:var(--card-sm)}
.bp-lib-name{font:500 var(--text-md)/var(--lh-tight) var(--font);color:var(--txt)}
.bp-lib-type{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3);margin-top:2px}
.bp-lib-tier{position:absolute;top:var(--s5);right:var(--s1);font:500 var(--text-xs)/var(--lh-none) var(--font);padding:var(--s-micro-2) var(--s1);border-radius:var(--r-sm);}
.bp-lib-tier.tier-1{background:rgba(255,255,255,.12);color:var(--txt)}
.bp-lib-tier.tier-2{background:rgba(41,151,255,.2);color:var(--blue)}
.bp-lib-tier.tier-3{background:rgba(191,90,242,.2);color:var(--purple)}
.bp-tier-title{font:500 var(--text-xl)/var(--lh-tight) var(--font-display);color:var(--txt);margin-bottom:var(--s0)}
.bp-tier-sub{font:400 var(--text-md)/var(--lh-normal) var(--font);color:var(--txt3);margin-bottom:var(--s3)}
.bp-tier-cards{display:flex;flex-direction:column;gap:var(--s4)}
.bp-tier-row{margin-bottom:var(--s2)}
.bp-tier-card{background:var(--glass-flat);border-radius:var(--r-2xl);padding:var(--card-lg);border:1px solid rgba(255,255,255,.06)}
.bp-tc-hdr{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s1)}
.bp-tc-badge{font:500 var(--text-sm)/var(--lh-none) var(--font);padding:var(--s-micro-3) var(--s1);border-radius:var(--r-sm);background:rgba(255,255,255,.08);color:var(--txt)}
.bp-tc-name{font:500 var(--text-xl)/var(--lh-tight) var(--font);color:var(--txt)}
.bp-tc-desc{font:400 var(--text-md)/var(--lh-normal) var(--font);color:var(--txt3);margin-bottom:var(--s2)}
.bp-tc-list{list-style:none;padding:0;margin:0 0 var(--s2);display:flex;flex-direction:column;gap:var(--s1)}
.bp-tc-list li{display:flex;align-items:center;gap:var(--s1);font:400 var(--text-md)/var(--lh-normal) var(--font);color:var(--txt2)}
.bp-tc-list li svg{width:16px;height:16px;color:var(--green);flex-shrink:0}
.bp-tc-ta{background:rgba(255,255,255,.03);border-radius:var(--r-lg);padding:var(--s2);margin-bottom:var(--s1)}
.bp-tc-ta-title{font:500 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt3);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--s1)}
.bp-tc-ta-grid{display:grid;grid-template-columns:1fr auto auto;gap:var(--s1) var(--s2);align-items:center}
.bp-tc-ta-hdr{font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3);text-transform:uppercase;letter-spacing:1px}
.bp-tc-ta-lbl{font:400 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt2)}
.bp-tc-ta-val{font:500 var(--text-md)/var(--lh-none) var(--font);color:var(--txt);text-align:center}
.bp-tc-lf-toggle{font:500 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt3);cursor:pointer;display:flex;align-items:center;gap:var(--s0);padding:var(--s1) 0}
.bp-tc-lf-toggle svg{width:14px;height:14px;transition:transform 10ms}
.bp-tc-lf-expand{max-height:0;overflow:hidden;transition:max-height 150ms var(--ease)}
.bp-tc-lf-expand>*{min-height:0;overflow:hidden}
.bp-tc-lf-row{display:flex;justify-content:space-between;padding:var(--s0) 0;font:400 var(--text-sm)/var(--lh-normal) var(--font)}
.bp-tc-lf-dur{color:var(--txt3)}
.bp-tc-lf-time{color:var(--txt);font-weight:500}
.bp-tier-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s2);margin-top:var(--s2)}
.bp-lib-section{margin-bottom:20px}
.bp-lib-tier-label{font:500 11px/1 var(--font);color:rgba(255,255,255,.3);text-transform:uppercase;
  letter-spacing:.6px;margin-bottom:12px;padding-left:2px}
.bp-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.bp-lib-card-info{position:absolute;bottom:0;left:0;right:0;padding:14px 14px;
  background:linear-gradient(transparent,rgba(0,0,0,.9))}
.bp-lib-card-name{font:500 13px/1.2 var(--font);color:#fff}
.bp-lib-card-tier{font:400 10px/1 var(--font);color:rgba(255,255,255,.4);margin-top:4px}
.bp-detail-field{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) 0;border-bottom:1px solid rgba(255,255,255,.04)}
.bp-detail-field-ico{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--blue);flex-shrink:0}
.bp-detail-field-ico svg{width:16px;height:16px}
.bp-detail-field-lbl{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3)}
.bp-detail-field-val{font:500 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt)}
.rq-fcard{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--glass-flat);border:1px solid rgba(255,255,255,.06)}
.rq-fcard video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.rq-fcard-info{padding:var(--s1);display:flex;flex-direction:column;gap:2px}
.rq-fcard-name{font:500 var(--text-sm)/var(--lh-tight) var(--font);color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rq-fcard-rm{position:absolute;top:var(--s1);right:var(--s1);width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity 10ms}
.rq-fcard:hover .rq-fcard-rm{opacity:1}
.rq-fcard-rm svg{width:12px;height:12px}
.rq-add-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);border:2px dashed rgba(255,255,255,.1);border-radius:var(--r-xl);min-height:160px;cursor:pointer;color:var(--txt3);transition:border-color 10ms,color 10ms}
.rq-add-card:hover{border-color:var(--blue);color:var(--blue)}
.rq-add-card svg{width:24px;height:24px}
.rq-fcard[data-up-state="uploading"]{border-color:rgba(56,189,248,.45)}
.rq-fcard[data-up-state="done"]{border-color:rgba(34,197,94,.45)}
.rq-fcard[data-up-state="failed"]{border-color:rgba(239,68,68,.5)}
.rq-fcard-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.4);overflow:hidden;z-index:2}
.rq-up-hud-head{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s1)}
.rq-up-hud-title{font:500 var(--text-md)/var(--lh-tight) var(--font-display);letter-spacing:-.01em;color:var(--txt);flex:1}
.rq-up-hud-net{font:500 var(--text-xs)/1 var(--font-display);padding:3px var(--s1);border-radius:var(--r-pill);background:rgba(34,197,94,.18);color:#4ade80;text-transform:uppercase;letter-spacing:.08em}
.rq-up-hud-progress{height:6px;background:rgba(255,255,255,.08);border-radius:var(--r-pill);overflow:hidden;margin-bottom:var(--s1)}
.rq-up-hud-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--blue),#22c55e);will-change:transform;transition:transform 180ms cubic-bezier(.16,1,.3,1)}
.rq-up-hud-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1) var(--s2);font:400 var(--text-sm)/var(--lh-normal) var(--font)}
.rq-up-hud-row{display:flex;flex-direction:column;gap:2px}
.rq-up-hud-lbl{font:500 var(--text-xs)/1 var(--font-display);color:var(--txt3);text-transform:uppercase;letter-spacing:.08em}
.rq-up-hud-val{font:500 var(--text-sm)/var(--lh-snug) var(--font);color:var(--txt)}
.rq-up-hud-foot{margin-top:var(--s1);padding-top:var(--s1);border-top:1px solid rgba(255,255,255,.06);font:400 var(--text-xs)/var(--lh-normal) var(--font);color:var(--txt3);display:flex;justify-content:space-between;gap:var(--s1)}
.sub-cinema{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;overflow:hidden}
.sub-glow-ring{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center;
  transition:transform 10ms cubic-bezier(.34,1.56,.64,1)}
.sub-ring-svg{width:140px;height:140px;animation:subRingSpin 2.4s linear infinite}
.sub-ring-arc{transition:stroke-dasharray .4s ease}
.sub-ring-pulse{position:absolute;inset:16px;border-radius:50%;
  background:radial-gradient(circle,rgba(52,211,153,.08) 0%,rgba(16,185,129,.03) 50%,transparent 70%);
  animation:subPulseGlow 2.8s ease-in-out infinite}
.sub-phase{font:500 18px/1 var(--font);color:rgba(255,255,255,.85);letter-spacing:.01em;
  transition:opacity 10ms ease;text-align:center}
.sub-detail{font:400 13px/1 var(--font);color:rgba(255,255,255,.35);min-height:18px;
  text-align:center;transition:opacity .15s ease}
.sub-steps{display:flex;gap:10px;margin-top:8px}
.sub-pip-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.1);transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .4s cubic-bezier(.34,1.56,.64,1), background-color .4s cubic-bezier(.34,1.56,.64,1), color .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s cubic-bezier(.34,1.56,.64,1), border-color .4s cubic-bezier(.34,1.56,.64,1)}
.sub-done-title{font:500 24px/1.2 var(--font-display);color:var(--txt);margin:0 0 8px;letter-spacing:-.3px}
.sub-done-sub{font:400 14px/1.5 var(--font);color:rgba(255,255,255,.45);margin:0 0 24px;max-width:340px;text-align:center}
.sub-fail{animation:subFadeUp .6s cubic-bezier(.16,1,.3,1) both}
.sub-fail-ring{width:80px;height:80px;border-radius:50%;
  background:rgba(239,68,68,.12);border:2px solid rgba(239,68,68,.25);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.sub-fail-ring svg{width:32px;height:32px}
.ch-sb-cat-hdr{display:flex;align-items:center;gap:var(--s0);padding:var(--s3) var(--card-sm) var(--s0);cursor:pointer;user-select:none}
.ch-sb-cat-hdr:hover .ch-sb-cat-name{color:rgba(255,255,255,.65)}
.ch-sb-chevron{width:8px;height:8px;color:rgba(255,255,255,.25);flex-shrink:0;transition:transform 10ms}
.ch-sb-cat-name{font:500 var(--text-2xs)/var(--lh-none) var(--font);color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;flex:1}
.ch-sb-cat-count{font:500 var(--text-2xs)/var(--lh-none) var(--font);color:rgba(255,255,255,.2)}
.ch-sb-ch-hash{color:rgba(255,255,255,.2);font:500 var(--text-md)/1 var(--font);flex-shrink:0}
.ch-sb-ch-icon{width:16px;height:16px;flex-shrink:0;color:rgba(255,255,255,.2);transition:color 10ms}
.ch-sb-ch-name{font:500 var(--text-sm)/var(--lh-tight) var(--font);color:rgba(255,255,255,.35);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 10ms;flex:1}
.ch-sb-av{width:var(--h-sm);height:var(--h-sm);border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt2);flex-shrink:0;overflow:hidden}
.ch-sb-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ch-sb-ch-info{flex:1;min-width:0}
.ch-sb-ch-sub{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.ch-sb-badge{min-width:18px;height:18px;border-radius:var(--radius-pill);background:var(--blue);color:#fff;font:500 var(--text-2xs)/18px var(--font);text-align:center;padding:0 var(--s0);flex-shrink:0}
.ch-sb-dm-sep{height:1px;background:rgba(255,255,255,.06);margin:var(--s1) var(--card-sm)}
.ch-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:var(--s1);padding:var(--s4)}
.ch-empty svg{width:48px;height:48px;color:var(--txt4)}
.ch-date-div{display:flex;align-items:center;gap:var(--s2);margin:var(--s1) 0}
.ch-date-div::before,.ch-date-div::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.06)}
.ch-date-div span{font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt4);white-space:nowrap}
.ch-msg-av{width:var(--h-sm);height:var(--h-sm);border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt2);background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.08));flex-shrink:0;overflow:hidden}
.ch-msg-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ch-msg-body{flex:1;min-width:0}
.ch-msg-top{display:flex;align-items:center;gap:var(--s1);margin-bottom:2px;flex-wrap:wrap}
.ch-msg-name{font:500 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt)}
.ch-msg-role{font:500 var(--text-2xs)/var(--lh-none) var(--font);padding:2px var(--s1);border-radius:var(--r-sm)}
.ch-msg-role.role-owner{background:rgba(255,204,0,.12);color:#ffd60a}
.ch-msg-time{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt4);margin-left:auto}
.ch-msg-text{font:400 var(--text-sm)/var(--lh-relaxed) var(--font);color:var(--txt2);word-wrap:break-word}
.ch-msg-text a{color:var(--blue);text-decoration:underline}
.ch-mention-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.08));display:flex;align-items:center;justify-content:center;font:500 var(--text-2xs)/var(--lh-none) var(--font);color:var(--txt2);overflow:hidden;flex-shrink:0}
.ch-mention-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ch-mention-name{font:500 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt)}
.ch-mention-role{font:500 var(--text-2xs)/var(--lh-none) var(--font);padding:2px var(--s1);border-radius:var(--r-sm)}
.ch-forum-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:var(--s1);padding:var(--s4);text-align:center}
.ch-forum-empty svg{width:40px;height:40px;color:var(--txt4)}
.ch-pcard{padding:var(--card-sm);border-radius:var(--r-lg);background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background 10ms,border-color 10ms;animation:fadeSlideIn 10ms ease both}
.ch-pcard:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.ch-pcard-top{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s1)}
.ch-pcard-icon{width:28px;height:28px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ch-pcard-icon svg{width:14px;height:14px}
.ch-pcard-info{flex:1;min-width:0}
.ch-pcard-name{font:500 var(--text-sm)/var(--lh-tight) var(--font);color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-pcard-type{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt4)}
.ch-pcard-version{font:500 var(--text-2xs)/var(--lh-none) var(--font);color:var(--txt4);background:rgba(255,255,255,.04);padding:2px var(--s1);border-radius:var(--r-sm);flex-shrink:0}
.ch-pcard-meta{display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap}
.ch-pcard-bp{font:400 var(--text-2xs)/var(--lh-none) var(--font);color:var(--txt4)}
.ch-pcard-date{font:400 var(--text-2xs)/var(--lh-none) var(--font);color:var(--txt4)}
.ch-pcard-instructions{font:400 var(--text-xs)/var(--lh-normal) var(--font);color:var(--txt3);margin-top:var(--s1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-th-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:var(--s1);padding:var(--s4);text-align:center;color:var(--txt4)}
.ch-th-empty svg{width:36px;height:36px}
.ch-th-msg{display:flex;gap:var(--s1)}
.ch-th-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 var(--text-2xs)/var(--lh-none) var(--font);color:var(--txt2);flex-shrink:0}
.ch-th-msg-bd{flex:1;min-width:0}
.ch-th-msg-top{display:flex;align-items:center;gap:var(--s1);margin-bottom:2px}
.ch-th-msg-nm{font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt)}
.ch-th-msg-badge{font:500 var(--text-2xs)/var(--lh-none) var(--font);padding:2px var(--s1);border-radius:var(--r-sm)}
.ch-th-msg-tm{font:400 var(--text-2xs)/var(--lh-none) var(--font);color:var(--txt4);margin-left:auto}
.ch-th-msg-txt{font:400 var(--text-xs)/var(--lh-normal) var(--font);color:var(--txt2);word-wrap:break-word}
.ac-section{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);margin-bottom:var(--s3);overflow:hidden}
.ac-sec-head{display:flex;align-items:center;gap:var(--s1);padding:var(--card-md);border-bottom:1px solid rgba(255,255,255,.06)}
.ac-sec-head svg{width:18px;height:18px;color:var(--blue);flex-shrink:0}
.ac-sec-head h2{font:500 var(--text-md)/var(--lh-none) var(--font);color:var(--txt);flex:1}
.ac-sec-cnt{font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt4);background:rgba(255,255,255,.04);padding:2px var(--s1);border-radius:var(--r-sm)}
.ac-sec-body{padding:var(--card-md)}
.ac-sec-title{font:500 var(--text-md)/var(--lh-tight) var(--font);color:var(--txt);margin-bottom:var(--s2)}
.ac-profile{display:flex;align-items:center;gap:var(--s3)}
.ac-avatar{width:var(--s8);height:var(--s8);border-radius:50%;position:relative;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.08));font:500 var(--text-xl)/var(--lh-none) var(--font);color:var(--txt2);flex-shrink:0}
.ac-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ac-avatar-cam{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);opacity:0;transition:opacity 10ms}
.ac-avatar:hover .ac-avatar-cam{opacity:1}
.ac-avatar-cam svg{width:20px;height:20px;color:#fff}
.ac-info h3{font:500 var(--text-lg)/var(--lh-tight) var(--font);color:var(--txt);margin-bottom:var(--s0)}
.ac-info p{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3);margin-bottom:var(--s1)}
.ac-role{display:inline-block;padding:2px var(--s1);border-radius:var(--r-sm);font:500 var(--text-2xs)/var(--lh-tight) var(--font);text-transform:capitalize}
.ac-role.role-owner{background:rgba(255,204,0,.12);color:#ffd60a}
/* Hero profile banner — premium treatment for the top of /account. Sean
   asked for the same avatar aesthetic as the pipeline cards (circle,
   gradient, glow), at hero scale, with a visible change-photo affordance
   rather than a hover-only camera overlay. 2026-04-21. */
.ac-hero{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);background:linear-gradient(135deg,rgba(41,151,255,.06),rgba(41,151,255,.02) 55%,transparent);border:var(--cb-glass-2-border);border-radius:var(--r-xl)}
.ac-hero-avatar-col{display:flex;flex-direction:column;align-items:center;gap:var(--s1);flex-shrink:0}
.ac-avatar-lg{width:128px;height:128px;font:500 var(--text-4xl)/var(--lh-none) var(--font);box-shadow:0 0 0 1px rgba(41,151,255,.18) inset,0 12px 40px -12px rgba(41,151,255,.35);background:radial-gradient(120% 120% at 30% 20%,rgba(41,151,255,.35) 0%,rgba(41,151,255,.12) 45%,rgba(6,18,40,.9) 100%)}
.ac-avatar-action{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--txt2);font:500 var(--text-xs)/1 var(--font);padding:6px var(--s2);border-radius:999px;cursor:pointer;transition:color 10ms,border-color 10ms}
.ac-avatar-action:hover{color:var(--txt);border-color:rgba(41,151,255,.35)}
.ac-hero-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ac-hero-name{font:500 var(--text-2xl)/var(--lh-tight) var(--font-display);color:var(--txt);letter-spacing:-.01em;margin:0}
.ac-hero-email{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt2)}
.ac-hero-sub{font:400 var(--text-sm)/var(--lh-normal) var(--font);color:var(--txt3)}
.ac-hero-tags{display:flex;gap:var(--s1);align-items:center;margin-top:var(--s1)}
@media(max-width:640px){.ac-hero{flex-direction:column;align-items:flex-start;text-align:left}.ac-hero-avatar-col{align-self:center}}
.ac-status{display:inline-block;padding:2px var(--s1);border-radius:var(--r-sm);font:500 var(--text-2xs)/var(--lh-tight) var(--font);margin-left:var(--s1)}
.ac-form-row{display:flex;gap:var(--s2)}
.ac-fg{flex:1;display:flex;flex-direction:column;gap:var(--s0);margin-bottom:var(--s2)}
.ac-fg label{font:500 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt2);text-transform:uppercase;letter-spacing:.5px}
.ac-fg input,.ac-fg select{padding:var(--s1) var(--s2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);background:rgba(0,0,0,.2);color:var(--txt);font:400 var(--text-sm)/var(--lh-normal) var(--font);outline:none;transition:border-color 10ms}
.ac-fg input:focus,.ac-fg select:focus{border-color:rgba(41,151,255,.4)}
.ac-fg input::placeholder{color:var(--txt4)}
.ac-fg select{appearance:none;cursor:pointer}
.ac-save{margin-top:var(--s2);display:flex;justify-content:flex-end}
.ac-color-row{display:flex;gap:var(--s3)}
.ac-color-item{display:flex;flex-direction:column;align-items:center;gap:var(--s0)}
.ac-color-item input[type=color]{width:var(--h-md);height:var(--h-md);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);background:transparent;cursor:pointer;padding:2px}
.ac-color-item span{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3)}
.ac-logo-row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.ac-logo{width:var(--s7);height:var(--s7);border-radius:var(--r-md);overflow:hidden;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.ac-logo img{width:100%;height:100%;object-fit:contain}
.ac-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:var(--s2)}
.ac-stat{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);padding:var(--s2);text-align:center}
.ac-stat-val{font:500 var(--text-xl)/var(--lh-tight) var(--font)}
.ac-stat-label{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt3);margin-top:var(--s0)}
.ac-detail-row{display:flex;justify-content:space-between;padding:var(--s1) 0;border-bottom:1px solid rgba(255,255,255,.04)}
.ac-detail-lbl{font:400 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt3)}
.ac-detail-val{font:500 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt)}
.ac-method-grid{display:flex;gap:var(--s1);flex-wrap:wrap;margin-bottom:var(--s2)}
.ac-method-hint{font:400 var(--text-xs)/var(--lh-none) var(--font);color:var(--txt4);margin-top:var(--s0)}
.ac-health{text-align:center;margin-bottom:var(--s2)}
.ac-health-score{font:500 var(--text-4xl)/var(--lh-none) var(--font)}
.ac-health-grade{margin:var(--s0) 0}
.ac-health-label{font:400 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt3)}
.ac-score-bars{display:flex;flex-direction:column;gap:var(--s1)}
.ac-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s2)}
.person{position:relative}
.person:hover .p-del{opacity:1}
.th-avatar-img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
.th-avatar-text{width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font:500 11px/1 var(--font);color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06)}
.pv-ver-dd-item{width:100%;display:flex;flex-direction:column;gap:2px;padding:6px 8px;
  border-radius:var(--r-sm);border:none;background:transparent;color:var(--txt2);
  cursor:pointer;text-align:left;transition:background 10ms}
.pv-ver-dd-item:hover{background:rgba(255,255,255,.06)}
.pv-ver-dd-label{font:500 var(--text-xs)/1 var(--font)}
.pv-ver-dd-meta{font:400 9px/1 var(--font);color:var(--txt4)}
.dk-mark[data-round="1"],.erw-tick[data-round="1"]{background:rgba(41,151,255,.8)}
.dk-mark[data-round="2"],.erw-tick[data-round="2"]{background:rgba(255,159,10,.8)}
.dk-mark[data-round="3"],.erw-tick[data-round="3"]{background:rgba(255,69,58,.8)}
.dk-mark[data-round="4"],.erw-tick[data-round="4"]{background:rgba(191,90,242,.8)}
.glass-audio-play{width:28px;height:28px;flex-shrink:0;border-radius:50%;border:none;
  background:rgba(255,255,255,.1);color:var(--txt);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background 10ms}
.glass-audio-play:hover{background:rgba(255,255,255,.18)}
.glass-audio-play svg{width:12px;height:12px;margin-left:1px}
.glass-audio-mid{flex:1;min-width:0;display:flex;align-items:center}
.glass-audio-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.1);
  cursor:pointer;position:relative}
.th-msg{display:flex;gap:10px;align-items:flex-start;max-width:95%}
.th-msg-me{margin-left:auto;flex-direction:row-reverse}
.th-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.th-meta{display:flex;align-items:center;gap:8px;padding:0 4px}
.th-msg-me .th-meta{flex-direction:row-reverse}
.th-name{font:500 12px/1 var(--font);color:#fff}
.th-time{display:block;font:400 10px/1 var(--font);color:rgba(255,255,255,.25);margin-bottom:4px;padding:0 2px}
.th-msg-me .th-time{text-align:right}
.th-msg-them .th-time{text-align:left}
.th-bubble{font:400 14px/1.5 var(--font);color:#fff;word-break:break-word;
  padding:10px 14px;border-radius:16px;position:relative}
.th-msg-them .th-bubble{
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.06) 100%);
  border:1px solid rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  border-bottom-left-radius:6px}
.th-msg-me .th-bubble{
  background:linear-gradient(180deg,rgba(41,151,255,.35) 0%,rgba(41,151,255,.20) 100%);color:#fff;
  border:1px solid rgba(41,151,255,.25);border-top-color:rgba(41,151,255,.40);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
  border-bottom-right-radius:6px}
.th-bubble a{color:var(--blue);text-decoration:none}
.th-bubble a:hover{text-decoration:underline}
.th-loom-card{
  border-radius:12px;padding:10px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.14);border-left:3px solid;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  max-width:280px;
}
.th-loom-hdr{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.th-loom-card video,.th-loom-card audio{outline:none}
.th-loom-card video::-webkit-media-controls-panel,
.th-loom-card audio::-webkit-media-controls-panel{background:rgba(0,0,0,.6)}
.th-event-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.th-status-card{padding:10px 12px;margin:4px 8px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.th-sc-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.th-sc-title{font:500 13px/1.2 var(--font);color:var(--txt)}
.th-sc-details{display:flex;flex-direction:column;gap:3px;padding-left:14px;margin-top:5px}
.th-sc-detail{font:400 12px/1.4 var(--font);color:var(--txt2)}
.th-status-wrap{display:flex;flex-direction:column;align-items:flex-start;margin:4px 8px;gap:4px}
.th-status-wrap .th-status-card{margin:0;width:100%}
.th-status-time-outside{font:400 10px/1 var(--mono);color:rgba(255,255,255,.32);padding:0 4px;letter-spacing:.2px}
.th-status-card[data-status="active"] .th-event-dot{background:var(--blue)}
.th-status-card[data-status="review"] .th-event-dot{background:var(--purple,#bf5af2)}
.th-status-card[data-status="revisions"] .th-event-dot{background:var(--orange)}
.th-status-card[data-status="approved"] .th-event-dot{background:var(--green)}
.th-status-card[data-status="queue"] .th-event-dot,.th-status-card .th-event-dot{background:rgba(255,255,255,.25)}
.th-event[data-status="queue"] .th-event-dot,.th-event .th-event-dot{background:rgba(255,255,255,.2)}
.th-event[data-status="active"] .th-event-dot{background:var(--blue)}
.th-event[data-status="review"] .th-event-dot{background:var(--purple)}
.th-event[data-status="revisions"] .th-event-dot{background:var(--orange)}
.th-event[data-status="approved"] .th-event-dot{background:var(--green)}
.rev-round-hdr{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) 0;
  font:500 var(--text-4xs)/var(--lh-none) var(--font);color:var(--txt3);
  text-transform:uppercase;letter-spacing:.5px}
.rev-round-hdr::before,.rev-round-hdr::after{content:'';flex:1;height:1px;
  background:rgba(255,255,255,.06)}
.rev-bubble{padding:var(--s1);border-radius:var(--r-lg);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  margin-bottom:var(--s1)}
.rev-item{display:flex;align-items:flex-start;gap:var(--s1);padding:var(--s0) 0;
  cursor:pointer;transition:background 10ms}
.rev-item:hover{background:rgba(255,255,255,.03);border-radius:var(--r-sm)}
.rev-item-icon{font-size:12px;flex-shrink:0;margin-top:2px}
.rev-item-ts{font:500 var(--text-2xs)/1 var(--mono);color:var(--blue);flex-shrink:0}
.rev-item-note{font:400 var(--text-4xs)/1.4 var(--font);color:var(--txt2);flex:1;
  white-space:pre-line;word-break:break-word}
.rev-item-del{width:16px;height:16px;border:none;border-radius:50%;
  background:transparent;color:var(--txt4);font-size:11px;cursor:pointer;
  opacity:0;transition:opacity 10ms}
.rev-item:hover .rev-item-del{opacity:1}
.rev-submit-btn{display:flex;align-items:center;justify-content:center;gap:8px;
  width:calc(100% - 24px);margin:12px auto 0;padding:10px 16px;border:none;
  border-radius:10px;background:linear-gradient(135deg,#34d399,#10b981);color:#fff;
  font:500 13px/1 var(--font);cursor:pointer;transition: transform .15s var(--ease), opacity .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
  box-shadow:0 2px 8px rgba(52,211,153,.2)}
.rev-submit-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(52,211,153,.3)}
.rev-submit-btn:active{transform:translateY(0)}
.rev-submit-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.rev-draft-count{font:500 10px/1 var(--font);
  background:rgba(255,255,255,.2);color:#fff;padding:2px 7px;
  border-radius:100px}
.rev-review-item{display:flex;gap:var(--s1);padding:var(--s1) 0;
  border-bottom:1px solid rgba(255,255,255,.04)}
.rev-review-item:last-child{border-bottom:none}
.rev-review-item-body{flex:1;min-width:0}
.rev-review-item-top{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s0)}
.rev-review-item-note{font:400 var(--text-sm)/1.5 var(--font);color:var(--txt);
  white-space:pre-line;word-break:break-word}
.rev-review-item-del{width:20px;height:20px;border:none;border-radius:50%;
  background:transparent;color:var(--txt4);font-size:14px;cursor:pointer;
  flex-shrink:0;opacity:0;transition:opacity 10ms}
.rev-review-item:hover .rev-review-item-del{opacity:1}
.rev-review-empty{text-align:center;padding:var(--s4);color:var(--txt4);
  font:400 var(--text-sm)/var(--lh-normal) var(--font)}
.rev-media{margin-top:var(--s1);border-radius:var(--r-md);overflow:hidden}
.rev-media audio{width:100%;height:36px;display:none}
.rev-media video{width:100%;max-height:200px;border-radius:var(--r-md)}
.rev-media img{width:100%;border-radius:var(--r-md)}
.erw-tick{position:absolute;top:-4px;width:2px;height:11px;background:var(--orange);
  border-radius:1px;transform:translateX(-50%);}
.erw-tick-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  white-space:nowrap;padding:4px 8px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.85);color:var(--txt);font:400 var(--text-2xs)/1.3 var(--font);
  pointer-events:none;opacity:0;transition:opacity 10ms}
.erw-tick:hover .erw-tick-tip{opacity:1}
.erw-rev-ts{font:500 var(--text-xs)/var(--lh-none) var(--mono);color:var(--blue);
  flex-shrink:0;min-width:32px}
.erw-rev-body{flex:1;min-width:0}
.erw-rev-note{font:400 var(--text-4xs)/1.4 var(--font);color:var(--txt2);word-break:break-word}
.erw-check-box{width:20px;height:20px;flex-shrink:0;border-radius:var(--r-sm);
  border:2px solid rgba(255,255,255,.15);display:flex;align-items:center;
  justify-content:center;transition:background 10ms,border-color 10ms}
.erw-check-box svg{width:14px;height:14px;opacity:0;transition:opacity 10ms}
.erw-check-ts{font:500 var(--text-2xs)/1 var(--mono);color:var(--blue);margin-bottom:2px}
.erw-check-note{font:400 var(--text-4xs)/1.4 var(--font);color:var(--txt2)}
.pv-st-card{text-align:center}
.pv-st-row{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s1);
  font:500 var(--text-lg)/var(--lh-none) var(--font)}
.pv-st-from{color:var(--txt3)}
.pv-st-to{color:var(--green)}
.pv-st-sub{font:400 var(--text-sm)/var(--lh-none) var(--font);color:var(--txt3)}
.pv-st-check{margin-top:var(--s2)}
.pipe-grade-letter{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:22px;padding:0 8px;
  border-radius:6px;
  font:500 12px/1 var(--font-display),sans-serif;
  letter-spacing:.4px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  
}
.pipe-grade-letter[data-grade="A"]{color:#00d084;border-color:rgba(0,208,132,.45);box-shadow:0 0 10px rgba(0,208,132,.45),0 0 22px rgba(0,208,132,.2)}
.pipe-grade-letter[data-grade="B"]{color:#34d399;border-color:rgba(52,211,153,.35);box-shadow:none}
.pipe-grade-letter[data-grade="C"]{color:#f59e0b;border-color:rgba(245,158,11,.35);box-shadow:none}
.pipe-grade-letter[data-grade="D"]{color:#f97316;border-color:rgba(249,115,22,.35);box-shadow:none}
.pipe-grade-letter[data-grade="F"]{color:#ef4444;border-color:rgba(239,68,68,.45);box-shadow:0 0 10px rgba(239,68,68,.45),0 0 22px rgba(239,68,68,.2)}
.pipe-grade-letter[data-grade="-"]{color:rgba(255,255,255,.25);border-color:rgba(255,255,255,.08);box-shadow:none}
.pc-avatars{position:absolute;bottom:28px;left:8px;display:flex;z-index:3}
.pc-av-chip{position:relative;width:26px;height:26px;border-radius:50%;border:2px solid rgba(8,12,22,.9);overflow:visible;flex-shrink:0;cursor:default}
.pc-av-chip img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pc-av-chip:nth-child(2){margin-left:-8px}
.pc-av-chip .pc-tooltip{
  position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(4px);
  width:260px;
  background:linear-gradient(160deg,rgba(14,18,30,.96),rgba(8,12,22,.98));
  border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.2);
  border-radius:var(--r-xl);padding:var(--card-md);
  box-shadow:var(--sh-4);
  opacity:0;pointer-events:none;
  transition:opacity 20ms,transform 20ms;z-index:999
}
.pc-av-chip:hover .pc-tooltip{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.pc-av-chip:nth-child(2) .pc-tooltip{left:auto;right:0;transform:translateY(4px)}
.pc-av-chip:nth-child(2):hover .pc-tooltip{transform:translateY(0)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;
  max-height:200px;overflow-y:auto}
.mg-grid{display:flex;gap:12px;height:100%;overflow-x:auto;align-items:stretch;padding-bottom:8px}
.mg-col{width:280px;min-width:280px;flex:0 0 280px;display:flex;flex-direction:column;
  background:var(--glass-premium);border:var(--border-glow);border-top-color:var(--border-glass-top);
  border-radius:var(--r-2xl);box-shadow:var(--sh-3);overflow:hidden;animation:colIn 25ms var(--ease) both}
.mg-col-hdr{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:10px}
.mg-col-stats{display:flex;gap:2px;padding:6px 16px 8px;border-bottom:1px solid rgba(255,255,255,.04)}
.mg-col-stat{flex:1;text-align:center;font:500 9px/1 var(--font);color:var(--txt3)}
.mg-col-stat b{display:block;font:500 13px/1.3 var(--font);color:var(--txt2)}
.mg-col-empty{border:1px dashed rgba(255,255,255,.08);border-radius:10px;padding:20px;text-align:center;
  color:rgba(255,255,255,.12);font:400 11px/1.4 var(--font)}
.mg-card-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--blue-hi),var(--blue-dk))}
.mg-card-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mg-card-av .mg-av-dot{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;
  border:2px solid var(--bg);z-index:1}
.mg-card-info{flex:1;min-width:0}
.mg-card-name{font:500 12px/1.2 var(--font);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-card-meta{display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap}
.mg-card-tag{font:500 9px/1 var(--font);padding:2px 6px;border-radius:var(--r-pill);white-space:nowrap}
.mg-card-score{font:500 10px/1 var(--font);color:var(--txt3)}
.setup-hub-bg{position:fixed;inset:0;z-index:850;background:rgba(6,10,20,.95);
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s ease;pointer-events:none}
.setup-hub-content{text-align:center;max-width:720px;width:90%;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) 10ms both}
.setup-hub-title{font:500 28px/1.2 var(--font-display);color:#fff;margin-bottom:8px}
.setup-hub-sub{font:400 14px/1.5 var(--font);color:rgba(255,255,255,.4);margin-bottom:36px}
.setup-skip{position:absolute;top:24px;right:24px;background:none;border:none;color:rgba(255,255,255,.3);
  font:500 13px/1 var(--font);cursor:pointer;padding:8px 16px;border-radius:8px;transition:color 10ms}
.setup-skip:hover{color:rgba(255,255,255,.6)}
.setup-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.setup-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;
  padding:32px 20px;cursor:pointer;transition:background 120ms,transform 120ms,border-color 120ms;
  position:relative;overflow:hidden;text-align:center}
.setup-card:hover{background:rgba(255,255,255,.06);transform:translateY(-2px);border-color:rgba(255,255,255,.12)}
.setup-card-icon{margin:0 auto 16px;width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04)}
.setup-card-title{font:500 15px/1.2 var(--font);color:#fff;margin-bottom:6px}
.setup-card-desc{font:400 12px/1.4 var(--font);color:rgba(255,255,255,.35)}
.setup-check-glow{position:absolute;inset:0;border-radius:16px;
  box-shadow:inset 0 0 30px rgba(52,211,153,.06);pointer-events:none;animation:checkGlow 2s ease infinite}
.setup-ob-frame{width:90%;max-width:640px;height:80vh;max-height:740px;position:relative;
  background:var(--bg);border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden}
.setup-ob-close{position:absolute;top:12px;right:12px;z-index:10;background:rgba(255,255,255,.08);
  border:none;color:rgba(255,255,255,.5);font-size:22px;width:32px;height:32px;border-radius:8px;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.setup-ob-close:hover{background:rgba(255,255,255,.15);color:#fff}
.tour-loading-inner{text-align:center;animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .2s both}
.tour-loading-logo{width:56px;height:56px;animation:pulseLoad 1.5s ease infinite;margin-bottom:16px}
.tour-loading-text{font:500 14px/1 var(--font);color:rgba(255,255,255,.35)}
.tour-panel{position:fixed;background:rgba(0,0,0,.75);transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s cubic-bezier(.16,1,.3,1), background-color .35s cubic-bezier(.16,1,.3,1), color .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .35s cubic-bezier(.16,1,.3,1);pointer-events:all}
.tour-panel-top{top:0;left:0;width:100%;height:0}
.tour-panel-left{left:0;width:0}
.tour-panel-right{right:0}
.tour-panel-bottom{left:0;width:100%;bottom:0}
.tour-tooltip{position:fixed;z-index:870;width:300px;padding:20px;
  background:rgba(15,20,35,.96);border:1px solid rgba(120,170,255,.15);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);pointer-events:all}
.tour-tt-step{font:500 10px/1 var(--font);color:var(--blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.tour-tt-title{font:500 18px/1.2 var(--font-display);color:#fff;margin-bottom:8px}
.tour-tt-desc{font:400 13px/1.5 var(--font);color:rgba(255,255,255,.5);margin-bottom:16px}
.tour-tt-actions{display:flex;align-items:center;justify-content:space-between}
.tour-tt-skip{background:none;border:none;color:rgba(255,255,255,.25);font:500 12px/1 var(--font);
  cursor:pointer;padding:8px 0}
.tour-tt-skip:hover{color:rgba(255,255,255,.5)}
.tour-tt-next{padding:8px 20px;border:none;border-radius:8px;background:var(--blue);color:#fff;
  font:500 13px/1 var(--font);cursor:pointer;transition:background 10ms}
.tour-tt-next:hover{background:#1a8aef}
.card-tier{padding:1px 5px;border-radius:3px;font:500 8px/1.2 var(--font);text-transform:uppercase}
.bp-scroll-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:32px;height:32px;
  border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;
  transition:opacity 150ms}
.bp-scroll-arr:hover{background:rgba(0,0,0,.7)}
.help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0}
.help-card{background:var(--glass);border:var(--glass-b);border-radius:var(--r-lg);padding:20px;cursor:pointer;transition:background .1s,border-color .1s}
.help-card:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.help-card h3{font:500 14px/1.3 var(--font);color:var(--txt);margin:0 0 6px}
.help-card p{font:400 12px/1.5 var(--font);color:var(--txt3);margin:0}
.help-section{margin-bottom:32px}
.help-section h2{font:500 16px/1.2 var(--font);color:var(--txt);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.help-detail{display:none;background:var(--glass);border:var(--glass-b);border-radius:var(--r-lg);padding:20px;margin-top:16px}
.help-back{background:none;border:none;color:var(--blue);cursor:pointer;font:500 13px/1 var(--font);padding:0;margin-bottom:16px;display:flex;align-items:center;gap:4px}
.help-back:hover{text-decoration:underline}
.toast-close{background:none;border:none;color:rgba(255,255,255,.4);font-size:16px;cursor:pointer;padding:0 2px;line-height:1}
.toast-close:hover{color:#fff}
.notif-text{flex:1;font:400 12px/1.4 var(--font-display);color:var(--txt2)}
.notif-time{font:400 10px/1 var(--font-display);color:var(--txt4);flex-shrink:0;margin-top:2px}
.rq-bp-section{margin-bottom:16px}
.rq-bp-label{font:500 11px/1 var(--font-display);color:rgba(255,255,255,.45);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;padding-left:2px}
.rq-bp-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent}
.rq-bp-scroll::-webkit-scrollbar{height:4px}
.rq-bp-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}
.rq-bp-name{font:500 12px/1.2 var(--font-display);color:#fff;padding:8px 8px 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.rq-bp-type{font:400 9px/1 var(--font);color:rgba(255,255,255,.35);text-transform:capitalize;
  padding:0 8px 8px}
.rq-bp-preset{padding:0;overflow:hidden}
.rq-bp-preset video{width:100%;flex:1;object-fit:cover}
.rq-bp-preset .rq-bp-name{padding:8px 8px 2px}
.rq-bp-preset .rq-bp-type{padding:0 8px 8px}
.rq-bp-browse{display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:rgba(255,255,255,.4)}
.rq-bp-browse:hover{color:var(--blue);border-color:rgba(41,151,255,.2)}
.rq-bp-empty{font:400 12px/1 var(--font);color:rgba(255,255,255,.25);padding:16px;
  text-align:center;width:100%}
.help-guided-badge{display:inline-block;padding:2px 8px;border-radius:4px;
  background:rgba(41,151,255,.12);color:#2997ff;font:500 9px/1 var(--font);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.help-visual{margin:16px 0;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06)}
.hv-mock{display:flex;gap:4px;padding:12px;min-height:60px}
.hv-col{flex:1;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px}
.hv-col-hdr{font:500 9px/1 var(--font);color:rgba(255,255,255,.5);
  display:flex;justify-content:space-between;margin-bottom:2px}
.hv-btn{padding:4px 0;border:1px dashed rgba(41,151,255,.25);border-radius:4px;
  text-align:center;font:500 8px/1 var(--font);color:#2997ff}
.hv-card{height:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:4px}
.hv-caption{padding:8px 12px;border-top:1px solid rgba(255,255,255,.04);
  font:500 11px/1.3 var(--font);color:rgba(255,255,255,.4);text-align:center}
.hv-label{padding:10px 12px 0;font:500 11px/1 var(--font);color:rgba(255,255,255,.3);
  text-transform:uppercase;letter-spacing:.04em}
.help-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.help-feature{display:flex;gap:10px;align-items:flex-start;padding:10px;
  border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04)}
.help-feature>div{font:400 12px/1.5 var(--font);color:rgba(255,255,255,.55)}
.help-feature b{color:rgba(255,255,255,.85)}
.hf-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.hf-icon{width:32px;height:32px;border-radius:8px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center}
.hf-icon svg{width:16px;height:16px;color:rgba(255,255,255,.5)}
.help-table{width:100%;border-collapse:collapse;margin:12px 0;font:400 12px/1.5 var(--font)}
.help-table td,.help-table th{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04);
  color:rgba(255,255,255,.6);text-align:left}
.help-table th{color:rgba(255,255,255,.35);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em}
.help-table tr:last-child td{border-bottom:none}
.help-table-sep td{border-top:2px solid rgba(255,255,255,.08)}
.help-section h2 svg{width:20px;height:20px;flex-shrink:0;color:var(--blue,#2997ff)}
.help-card svg{width:20px;height:20px;color:var(--blue,#2997ff);margin-bottom:8px}
.help-detail h3{font:500 18px/1.2 var(--font-display);color:#fff;margin:0 0 12px}
.help-detail h4{font:500 13px/1.2 var(--font);color:rgba(255,255,255,.7);margin:20px 0 8px}
.help-detail p{font:400 13px/1.6 var(--font);color:rgba(255,255,255,.55);margin:8px 0}
.help-detail ul,.help-detail ol{padding-left:20px;margin:8px 0}
.help-detail li{font:400 13px/1.6 var(--font);color:rgba(255,255,255,.55);margin:4px 0}
.help-detail em{color:rgba(255,255,255,.35);font-style:italic}
.help-detail b{color:rgba(255,255,255,.85)}
.ws-page .card-tier{font-family:var(--font);font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:var(--s1)}

/* ═══════════════════════════════════════════════════════════════════════
   PORTAL THEME — live background swap driven by [data-portal-theme].
   Lighter at top, darker at bottom. Works for Onyx/Deep Blue/Pearl.
   Writes to --cb-bg so .bg-dark + .shell inherit without re-declaring.
   BOTH html[data-portal-theme] AND body[data-portal-theme] selectors so
   the variable reaches <html> (where .bg-dark paints) regardless of which
   element the JS stamps. ═══════════════════════════════════════════════ */
html[data-portal-theme="onyx"],body[data-portal-theme="onyx"]{--cb-bg:linear-gradient(180deg,#1e1e24 0%,#0f0f13 40%,#050508 100%)}
html[data-portal-theme="deep_blue"],body[data-portal-theme="deep_blue"]{--cb-bg:linear-gradient(180deg,#17294d 0%,#0a1228 40%,#020510 100%)}
html[data-portal-theme="pearl"],body[data-portal-theme="pearl"]{--cb-bg:linear-gradient(180deg,#ececf1 0%,#4a4a55 25%,#16161c 65%,#05050a 100%)}
/* Pearl text contrast — the top is near-white so shift default text darker */
html[data-portal-theme="pearl"] .wiz-shell,body[data-portal-theme="pearl"] .wiz-shell{color:#0b0b12}
html[data-portal-theme="pearl"] .theme-card h3,body[data-portal-theme="pearl"] .theme-card h3{color:inherit}
/* Theme-card self-contained contrast — each card previews its own colors
   so titles/desc must stay legible regardless of parent theme. */
.theme-card--pearl h3,.theme-card--pearl .theme-card-desc,.theme-card--pearl .theme-card-tag{color:#0b0b12}

/* Welcome screen rules live at line ~2727 (Sean's cinematic black canvas).
   This block previously duplicated them with a transparent background —
   removed to let the original #000 fullscreen reveal render correctly. */

/* ═══════════════════════════════════════════════════════════════════════
   THEME PICKER CARDS — Apple-event premium cards, one row, live-looking
   mini-portal preview. Used in client wiz step 1 + card-size step.
   ═══════════════════════════════════════════════════════════════════════ */
.theme-row{display:flex;flex-wrap:nowrap;gap:20px;width:100%;max-width:900px;margin:var(--s2) auto 0;align-items:stretch;justify-content:center}
.theme-card{flex:1 1 0;min-width:0;max-width:260px;aspect-ratio:3/4;position:relative;border-radius:22px;padding:18px 14px 20px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;cursor:pointer;overflow:hidden;border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 48px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);transition:transform 220ms cubic-bezier(.16,1,.3,1),box-shadow 220ms ease,border-color 220ms ease;isolation:isolate;-webkit-tap-highlight-color:transparent}
/* No top spotlight / no cone — just a hairline bottom vignette so labels stay legible */
.theme-card::before{content:'';position:absolute;inset:0;z-index:0;background:inherit}
.theme-card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 65%,rgba(0,0,0,.22) 100%)}
.theme-card > *{position:relative;z-index:2}
.theme-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.24);box-shadow:0 28px 72px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.20)}
.theme-card.is-selected{border-color:var(--blue,#2997ff);box-shadow:0 0 0 2px rgba(41,151,255,.65),0 0 40px rgba(41,151,255,.28),0 28px 72px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22);transform:translateY(-6px)}

/* Preview slot inside each card — empty, full-bleed gradient only.
   NO inner nav-strip / content-tile pseudos (user hated the squares-in-squares).
   The whole card IS the preview — the gradient = the theme's real background. */
.theme-card-preview{display:none}
.theme-card h3{font:500 17px/1.2 var(--font-display);color:#fff;margin:0;text-align:center;letter-spacing:-.01em}
.theme-card-desc{font:400 12px/1.4 var(--font);color:rgba(255,255,255,.68);margin:0;text-align:center}
.theme-card-tag{font:500 9px/1 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.54);margin-top:4px;text-align:center}

/* Individual theme variants: SMOOTH linear top→bottom gradients — no radial cones.
   Each card gradient matches the live portal theme gradient exactly, so the
   card IS a faithful preview of what that portal background looks like. */
.theme-card--onyx{background:linear-gradient(180deg,#26262e 0%,#12121a 50%,#040408 100%)}
.theme-card--deep_blue{background:linear-gradient(180deg,#24468f 0%,#0f1d48 50%,#03071a 100%)}
.theme-card--pearl{background:linear-gradient(180deg,#f5f5fa 0%,#a8a8b4 40%,#3e3e48 75%,#0a0a10 100%)}
/* Pearl: no top spotlight (killed the cone); keep just the soft bottom vignette */
.theme-card--pearl::after{background:linear-gradient(180deg,rgba(0,0,0,0) 65%,rgba(0,0,0,.22) 100%)}
.theme-card--pearl h3{color:#0a0a0e}
.theme-card--pearl .theme-card-desc{color:rgba(10,10,14,.68)}
.theme-card--pearl .theme-card-tag{color:rgba(10,10,14,.50)}

/* Card-size row (same row rules) */
.size-row{display:flex;flex-wrap:nowrap;gap:var(--s3);width:100%;max-width:780px;margin:var(--s2) auto 0;align-items:stretch;justify-content:center}
.size-card{flex:1 1 0;min-width:0;max-width:240px;padding:var(--s3) var(--s2);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.10);display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:transform 180ms cubic-bezier(.16,1,.3,1),border-color 180ms ease,box-shadow 180ms ease}
.size-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.20)}
.size-card.is-selected{border-color:var(--blue,#2997ff);box-shadow:0 0 0 2px rgba(41,151,255,.55),0 10px 28px rgba(0,0,0,.35);transform:translateY(-3px)}
.size-card-blocks{display:flex;gap:5px;align-items:center;margin-bottom:6px}
.size-card-blocks span{background:rgba(255,255,255,.15);border-radius:3px;display:block}
.size-card[data-size="compact"] .size-card-blocks span{width:12px;height:16px}
.size-card[data-size="normal"]  .size-card-blocks span{width:16px;height:20px}
.size-card[data-size="large"]   .size-card-blocks span{width:20px;height:26px}
.size-card h3{font:500 17px/1.15 var(--font-display);color:#fff;margin:0;text-align:center}
.size-card-desc{font:400 12px/1.4 var(--font);color:rgba(255,255,255,.55);margin:0;text-align:center}
.size-card-tag{font:500 10px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--blue,#2997ff);margin-top:2px;text-align:center}

/* ONE-ROW ABSOLUTE — all onboarding wizard answer grids enforce nowrap */
.rq-overlay .theme-row,.rq-overlay .size-row,.rq-overlay .bp-fmt-grid{flex-wrap:nowrap !important}

/* Make sure rq-overlay centering cannot be overridden by body theme classes */
.rq-overlay{display:flex !important;align-items:center !important;justify-content:center !important}
.rq-overlay .wiz-shell{margin:auto !important}

/* ══════════════════════════════════════════════════════════════════
   NEW-PROJECT (np-*) DRAWER + WIZARD
   Right-side slide-out drawer on pipeline.html containing the 5-step
   request wizard. Fits iframe to /studio/request.
   ══════════════════════════════════════════════════════════════════ */

/* --- Drawer shell (lives inside framelab-project-pipeline.html) --- */
.np-drawer-bg{position:fixed;inset:0;background:rgba(8,12,20,.55);z-index:950;opacity:0;transition:opacity 240ms ease;pointer-events:none}
.np-drawer-bg.open{opacity:1;pointer-events:auto}
.np-drawer{position:fixed;top:10px;right:10px;bottom:10px;width:min(380px,94vw);z-index:951;
  border-radius:var(--r-xl);overflow:hidden;
  /* Canonical Content Bug bg — amber horizon + 2× glass-1 wash over cb-bg. */
  background-color:#02050e;
  background-image:var(--cb-amber-horizon),var(--cb-glass-1-bg),var(--cb-glass-1-bg),var(--cb-bg);
  background-attachment:fixed,fixed,fixed,fixed;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  background-size:100% 100vh,100% 100vh,100% 100vh,100% 100vh;
  border:var(--cb-glass-2-border);border-top-color:var(--cb-glass-2-border-top);
  box-shadow:var(--cb-glass-1-shadow);
  transform:translate3d(calc(100% + 24px),0,0);
  transition:transform 340ms cubic-bezier(.22,1,.36,1);
  will-change:transform}
.np-drawer.open{transform:translate3d(0,0,0)}
.np-drawer iframe{width:100%;height:100%;border:0;background:transparent;display:block}

/* --- Wizard body (lives inside request.html iframe) --- */
.np-page{display:flex;flex-direction:column;height:100vh;padding:10px;gap:10px;box-sizing:border-box;min-height:0}

/* Pinned project card at top — builds up as user picks */
.np-card{border-radius:var(--r-lg);padding:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);flex-shrink:0;display:flex;flex-direction:column;gap:10px}
.np-card-top{display:flex;align-items:center;gap:8px}
.np-card-title{flex:1;background:transparent;border:0;color:var(--txt);font:500 var(--text-md)/1.2 var(--font);padding:4px 6px;outline:0;border-radius:6px;min-width:0;transition:background 120ms ease}
.np-card-title::placeholder{color:var(--txt3)}
.np-card-title:hover{background:rgba(255,255,255,.04)}
.np-card-title:focus{background:rgba(255,255,255,.06)}
.np-card-close{background:transparent;border:0;color:var(--txt3);cursor:pointer;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 120ms ease,color 120ms ease}
.np-card-close:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.np-card-close svg{width:14px;height:14px;stroke-width:2}

.np-card-slots{display:flex;gap:8px}
.np-slot{flex:1;min-width:0;height:44px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;gap:6px;opacity:.35;transition:opacity 220ms ease,background 220ms ease,border-color 220ms ease;padding:0 8px;overflow:hidden}
.np-slot svg{width:18px;height:18px;stroke:var(--txt);fill:none;stroke-width:1.6;flex-shrink:0}
.np-slot-txt{font:500 var(--text-xs)/1 var(--font);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.np-slot.on{opacity:1;background:rgba(41,151,255,.08);border-color:rgba(41,151,255,.22)}
.np-slot.on svg{stroke:var(--blue)}
.np-slot.on .np-slot-txt{color:var(--blue)}

.np-card-detail{margin:0;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);font:400 var(--text-xs)/1.4 var(--font);color:var(--txt3);display:flex;flex-direction:column;gap:6px}
.np-card-detail[hidden]{display:none}
.np-card-detail-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.np-card-detail-row b{color:var(--txt);font-weight:500}
.np-card-detail-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:2px}
.np-card-detail-bar span{display:block;height:100%;background:var(--blue);border-radius:2px;width:0;transition:width 180ms linear}

/* Step rail — 5 dots across the top of the content */
.np-rail{display:flex;align-items:center;gap:6px;padding:0 10px 2px;flex-shrink:0}
.np-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.1);transition:background 180ms ease,transform 180ms ease;flex-shrink:0}
.np-dot.active{background:var(--blue);transform:scale(1.35)}
.np-dot.done{background:rgba(41,151,255,.55)}
.np-line{flex:1;height:2px;background:rgba(255,255,255,.08);border-radius:1px;transition:background 180ms ease}
.np-line.done{background:rgba(41,151,255,.45)}

/* Content */
.np-body{flex:1;overflow-y:auto;padding:4px 10px 10px;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.np-body::-webkit-scrollbar{width:6px}
.np-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.np-step{display:none;flex-direction:column;gap:12px}
.np-step.active{display:flex;animation:npFadeIn 200ms ease}
@keyframes npFadeIn{from{opacity:0;transform:translate3d(0,4px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.np-q{font:500 var(--text-lg)/1.25 var(--font);color:var(--txt);margin:0}
.np-q-sub{font:400 var(--text-sm)/1.4 var(--font);color:var(--txt3);margin:-6px 0 0}

/* Footer */
.np-foot{display:flex;gap:8px;padding:10px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.06)}
.np-foot .btn{flex:1;justify-content:center;min-height:40px}
.np-foot #npBack{flex:0 0 auto;padding-left:14px;padding-right:14px}

/* Step 1 — footage dropzone & file cards */
.np-dz{border:1.5px dashed rgba(255,255,255,.12);border-radius:var(--r-lg);padding:20px 14px;text-align:center;background:rgba(255,255,255,.02);cursor:pointer;transition:border-color 150ms ease,background 150ms ease;outline:none}
.np-dz:hover,.np-dz:focus-visible{border-color:rgba(41,151,255,.35);background:rgba(41,151,255,.04)}
.np-dz.dragover{border-color:var(--blue);background:rgba(41,151,255,.07)}
.np-dz-icon{margin:0 auto 8px;width:32px;height:32px;opacity:.6}
.np-dz-title{font:500 var(--text-md)/1.2 var(--font);color:var(--txt);margin-bottom:4px}
.np-dz-sub{font:400 var(--text-xs)/1.4 var(--font);color:var(--txt3)}
.np-dz-sub kbd{display:inline-block;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font:500 10px/1.2 var(--font);margin:0 2px}

.np-netline{font:400 var(--text-xs)/1 var(--font);color:var(--txt3);padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.np-netline-pill{display:inline-flex;align-items:center;gap:4px}
.np-netline-dot{width:6px;height:6px;border-radius:50%;background:var(--green,#7ecba1)}
.np-netline-dot.warn{background:var(--amber,#f5a524)}

.np-files{display:flex;flex-direction:column;gap:8px}
.np-file{padding:10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:6px}
.np-file-top{display:flex;align-items:center;gap:8px;min-width:0}
.np-file-name{font:500 var(--text-sm)/1.2 var(--font);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.np-file-pct{font:600 var(--text-xs)/1 var(--font);color:var(--blue);font-variant-numeric:tabular-nums;flex-shrink:0}
.np-file-pct.done{color:var(--green,#7ecba1)}
.np-file-rm{background:transparent;border:0;color:var(--txt3);cursor:pointer;padding:0;width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.np-file-rm:hover{color:var(--txt)}
.np-file-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.np-file-bar span{display:block;height:100%;background:var(--blue);border-radius:2px;width:0;transition:width 150ms linear}
.np-file-bar.done span{background:var(--green,#7ecba1)}
.np-file-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 12px;font:400 var(--text-xs)/1.3 var(--font);color:var(--txt3);font-variant-numeric:tabular-nums}
.np-file-stats span b{color:var(--txt);font-weight:500}

.np-files-summary{display:flex;justify-content:space-between;align-items:center;padding:6px 4px 0;font:400 var(--text-xs)/1 var(--font);color:var(--txt3);font-variant-numeric:tabular-nums}
.np-files-summary b{color:var(--txt);font-weight:500}

/* Step 2 — format cards */
.np-opts{display:flex;flex-direction:column;gap:10px}
.np-opt{text-align:left;padding:14px;border-radius:var(--r-lg);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color 150ms ease,background 150ms ease;color:var(--txt)}
.np-opt:hover{border-color:rgba(255,255,255,.14)}
.np-opt.sel{border-color:var(--blue);background:rgba(41,151,255,.07)}
.np-opt-name{font:500 var(--text-md)/1.2 var(--font)}
.np-opt-meta{font:400 var(--text-sm)/1.2 var(--font);color:var(--txt3)}

/* Step 3 — tier cards */
.np-tiers{display:flex;flex-direction:column;gap:10px}
.np-tier-card{text-align:left;padding:12px;border-radius:var(--r-lg);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color 150ms ease,background 150ms ease;color:var(--txt)}
.np-tier-card:hover{border-color:rgba(255,255,255,.14)}
.np-tier-card.sel{border-color:var(--blue);background:rgba(41,151,255,.07)}
.np-tier-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.np-tier-name{font:500 var(--text-md)/1.2 var(--font)}
.np-tier-time{font:400 var(--text-xs)/1 var(--font);color:var(--txt3);font-variant-numeric:tabular-nums}
.np-tier-feats{font:400 var(--text-xs)/1.5 var(--font);color:var(--txt3);margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.np-tier-feats li{padding-left:14px;position:relative}
.np-tier-feats li::before{content:"·";position:absolute;left:5px;color:var(--txt3)}
.np-tier-note{font:400 var(--text-xs)/1.4 var(--font);color:var(--amber,#f5a524);padding:6px 10px;border-radius:8px;background:rgba(245,165,36,.06);border:1px solid rgba(245,165,36,.15);margin-top:4px}

/* Step 4 — blueprint cards */
.np-bp-list{display:flex;flex-direction:column;gap:8px}
.np-bp-card{padding:8px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;display:flex;align-items:center;gap:10px;transition:border-color 150ms ease,background 150ms ease;text-align:left;color:var(--txt);width:100%}
.np-bp-card:hover{border-color:rgba(255,255,255,.14)}
.np-bp-card.sel{border-color:var(--blue);background:rgba(41,151,255,.07)}
.np-bp-thumb{width:38px;height:58px;border-radius:6px;background:rgba(255,255,255,.05);background-size:cover;background-position:center;flex-shrink:0}
.np-bp-meta{flex:1;min-width:0}
.np-bp-name{font:500 var(--text-sm)/1.2 var(--font);color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-bp-fmt{font:400 var(--text-xs)/1 var(--font);color:var(--txt3);margin-top:2px}

/* Step 5 — finalize */
.np-subhead{font:500 var(--text-xs)/1 var(--font);color:var(--txt3);text-transform:uppercase;letter-spacing:.6px;margin-top:6px}
.np-input{width:100%;box-sizing:border-box;padding:12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:var(--txt);font:500 var(--text-md)/1.2 var(--font);outline:none;transition:border-color 150ms ease,background 150ms ease}
.np-input:focus{border-color:var(--blue);background:rgba(41,151,255,.04)}
.np-input::placeholder{color:var(--txt3)}

.np-pills{display:flex;flex-wrap:wrap;gap:6px}
.np-pill{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:var(--txt);font:500 var(--text-sm)/1 var(--font);cursor:pointer;transition:border-color 150ms ease,background 150ms ease}
.np-pill:hover{border-color:rgba(255,255,255,.14)}
.np-pill.sel{border-color:var(--blue);background:rgba(41,151,255,.1);color:var(--blue)}

.np-summary{padding:12px;border-radius:var(--r-lg);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:6px;font:400 var(--text-xs)/1.4 var(--font);color:var(--txt3);font-variant-numeric:tabular-nums}
.np-summary-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.np-summary-row b{color:var(--txt);font-weight:500}

.np-lf-note{font:400 var(--text-xs)/1.4 var(--font);color:var(--amber,#f5a524);padding:8px 10px;border-radius:8px;background:rgba(245,165,36,.06);border:1px solid rgba(245,165,36,.15)}

/* ═══════════════════════════════════════════════════════════════
   WEBSITE (GHL) PAGE COMPONENTS — 2026-04-20
   Components used by home/pricing/portfolio/contact/privacy/terms
   All rules scoped under .ws-page so portal pages unaffected.
   ═══════════════════════════════════════════════════════════════ */

/* ── NAV ISLAND ITEMS ──────────────────────────────────────────── */
.ws-page .cb-header-bar .cb-logo{position:absolute;left:var(--s3);top:50%;transform:translateY(-50%);display:flex;align-items:center;z-index:2}
.ws-page .cb-header-bar .cb-logo img{height:28px;width:auto;display:block}
.ws-page .cb-footer .cb-logo{position:static;display:inline-flex;align-items:center}
.ws-page .cb-footer .cb-logo img{height:28px;width:auto;display:block}

.ws-page .cb-nav-link{
  display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:var(--r-pill);
  font:500 14px/1 var(--font);color:var(--txt2);
  text-decoration:none;letter-spacing:.01em;
  transition:color .12s var(--ease), background-color .12s var(--ease);
}
.ws-page .cb-nav-link:hover{color:var(--txt);background:rgba(255,255,255,.08)}
.ws-page .cb-nav-link.active{color:var(--txt);background:rgba(255,255,255,.12)}

.ws-page .cb-nav-cta{
  display:inline-flex;align-items:center;
  padding:8px 16px;border-radius:var(--r-pill);
  font:500 14px/1 var(--font);color:var(--txt);
  background:linear-gradient(180deg,var(--blue) 0%,var(--blue-brand) 100%);
  text-decoration:none;letter-spacing:.01em;margin-left:4px;
  box-shadow:0 0 0 .5px rgba(26,160,255,.35),0 2px 8px rgba(0,130,255,.35);
  transition:transform .08s var(--ease), box-shadow .08s var(--ease);
}
.ws-page .cb-nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 0 .5px rgba(26,160,255,.5),0 4px 14px rgba(0,130,255,.5)}

/* ── HERO STATS ROW ────────────────────────────────────────────── */
.ws-page .stats-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4);margin-top:var(--s6);padding:var(--s4) 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.ws-page .stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s0)}
.ws-page .stat-item:not(:last-child){border-right:1px solid rgba(255,255,255,.06)}
@media(max-width:860px){.ws-page .stats-row{grid-template-columns:repeat(2,1fr);gap:var(--s3)}.ws-page .stat-item:not(:last-child){border-right:none}}

/* ── SECTION SUB-TITLE / KICKER ────────────────────────────────── */
.ws-page .sub-title{display:block;font:500 12px/1 var(--font);color:var(--blue);text-transform:uppercase;letter-spacing:.18em;margin-bottom:var(--s2)}

/* ── CREATORS RAIL ─────────────────────────────────────────────── */
.ws-page .creator-rail-wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3);margin-top:var(--s4)}
@media(max-width:1024px){.ws-page .creator-rail-wrap{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ws-page .creator-rail-wrap{grid-template-columns:repeat(2,1fr);gap:var(--s2)}}

/* ── HOW-IT-WORKS STEPS ────────────────────────────────────────── */
.ws-page .step-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s5)}
@media(max-width:860px){.ws-page .step-list{grid-template-columns:1fr;gap:var(--s3)}}
.ws-page .step-item{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);border-radius:var(--r-2xl);background:var(--cb-glass-2-bg,rgba(255,255,255,.03));border:var(--cb-glass-2-border,1px solid rgba(255,255,255,.06))}
.ws-page .step-head{display:flex;align-items:center;gap:var(--s2)}
.ws-page .step-number{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-pill);background:linear-gradient(180deg,var(--blue) 0%,var(--blue-brand) 100%);color:var(--txt);font:500 16px/1 var(--font)}
.ws-page .step-title{font:500 20px/1.2 var(--font);color:var(--txt)}
.ws-page .step-desc{font:400 15px/1.55 var(--font);color:var(--txt3)}

/* ── FEATURES / TEAM CARDS ─────────────────────────────────────── */
.ws-page .feature-icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-lg);background:rgba(41,151,255,.1);color:var(--blue);margin-bottom:var(--s2)}
.ws-page .feature-title{font:500 18px/1.25 var(--font);color:var(--txt);margin-bottom:var(--s1)}
.ws-page .feature-desc{font:400 14px/1.55 var(--font);color:var(--txt3)}

/* ── PORTFOLIO / SHOWCASE (before/after + shorts) ──────────────── */
.ws-page .portfolio-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-2xl);overflow:hidden;background:var(--cb-glass-2-bg,rgba(255,255,255,.03));border:var(--cb-glass-2-border,1px solid rgba(255,255,255,.06));transition:transform .15s var(--ease), box-shadow .15s var(--ease)}
.ws-page .portfolio-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.ws-page .portfolio-badge{position:absolute;top:var(--s2);left:var(--s2);display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-pill);font:500 11px/1 var(--font);color:var(--txt);background:rgba(0,0,0,.7);text-transform:uppercase;letter-spacing:.06em;z-index:2}

.ws-page .showcase-compare{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0;background:#000;border-radius:var(--r-2xl);overflow:hidden}
.ws-page .showcase-stage{position:relative;aspect-ratio:9/16;overflow:hidden}
.ws-page .showcase-divider{width:1px;background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.08) 100%)}
.ws-page .showcase-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill);background:rgba(0,0,0,.7);color:var(--txt);z-index:3}
.ws-page .showcase-labels-row{display:grid;grid-template-columns:1fr auto 1fr;padding:var(--s2) var(--s3)}
.ws-page .showcase-top-label,.ws-page .showcase-top-label-raw,.ws-page .showcase-top-label-edit{font:500 11px/1 var(--font);text-transform:uppercase;letter-spacing:.1em;color:var(--txt3)}
.ws-page .showcase-top-label-edit{color:var(--blue);text-align:right}
.ws-page .showcase-top-label-raw{text-align:left}
.ws-page .showcase-top-label-spacer{width:1px}
.ws-page .showcase-meta{padding:var(--s2) var(--s3) var(--s3);font:400 13px/1.4 var(--font);color:var(--txt2)}
.ws-page .showcase-meta-subs{color:var(--txt3);font-size:12px;margin-top:2px}
.ws-page .showcase-vcard{display:flex;flex-direction:column}

/* ── REVIEWS — review cards + mini cards + featured ────────────── */
.ws-page .stars-row{display:inline-flex;gap:2px;color:#f5a524;font-size:14px;margin-bottom:var(--s1)}

.ws-page .review-top,.ws-page .featured-top,.ws-page .mini-top{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.ws-page .review-avatar,.ws-page .mini-avatar,.ws-page .featured-avatar{width:44px;height:44px;border-radius:var(--r-pill);object-fit:cover;flex-shrink:0}
.ws-page .featured-avatar{width:64px;height:64px}
.ws-page .review-info,.ws-page .featured-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.ws-page .review-name,.ws-page .mini-name{font:500 15px/1.2 var(--font);color:var(--txt)}
.ws-page .mini-role{font:400 12px/1.2 var(--font);color:var(--txt3)}
.ws-page .review-badge,.ws-page .featured-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-pill);font:500 10px/1 var(--font);color:var(--blue);background:rgba(41,151,255,.1);text-transform:uppercase;letter-spacing:.08em}
.ws-page .review-quote,.ws-page .mini-quote{font:400 14px/1.6 var(--font);color:var(--txt2)}
.ws-page .review-stars,.ws-page .mini-stars{color:#f5a524;font-size:13px;margin-bottom:var(--s1)}

.ws-page .featured-review{padding:var(--s5);border-radius:var(--r-2xl);background:linear-gradient(180deg,rgba(41,151,255,.06),rgba(41,151,255,.02));border:1px solid rgba(41,151,255,.18);margin:var(--s4) 0}
.ws-page .featured-body{font:400 18px/1.55 var(--font);color:var(--txt);margin-top:var(--s2)}

.ws-page .mini-card{padding:var(--s3);border-radius:var(--r-xl,16px);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}

/* ── BRAND LOGO GRID ───────────────────────────────────────────── */
.ws-page .brand-logo-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s3) var(--s4);align-items:center;justify-items:center;margin-top:var(--s4);padding:var(--s4) 0;opacity:.75}
.ws-page .brand-logo-grid img{max-width:120px;max-height:32px;object-fit:contain;filter:grayscale(1) brightness(1.5) contrast(.8);transition:filter .15s var(--ease), opacity .15s var(--ease)}
.ws-page .brand-logo-grid img:hover{filter:none}
@media(max-width:860px){.ws-page .brand-logo-grid{grid-template-columns:repeat(3,1fr)}}

/* ── COMPARISON TABLES ─────────────────────────────────────────── */
.ws-page .table-cols{display:grid;grid-template-columns:2fr 1fr 1fr;align-items:center}
.ws-page .table-header{padding:var(--s2) var(--s3);font:500 13px/1 var(--font);text-transform:uppercase;letter-spacing:.08em;color:var(--txt3);border-bottom:1px solid rgba(255,255,255,.08)}
.ws-page .table-row{padding:var(--s2) var(--s3);font:400 14px/1.4 var(--font);color:var(--txt2);border-bottom:1px solid rgba(255,255,255,.04)}
.ws-page .table-row:last-child{border-bottom:none}
.ws-page .val-yes{color:var(--blue);font-weight:500}
.ws-page .val-no{color:var(--txt4);opacity:.6}

/* ── PRICING — plan tier variants + misc ───────────────────────── */
.ws-page .cb-plan-tier{font:500 12px/1 var(--font);text-transform:uppercase;letter-spacing:.14em;color:var(--txt3);margin-bottom:var(--s1)}
.ws-page .cb-plan-tier--basic{color:var(--txt3)}
.ws-page .cb-plan-tier--silver{color:#c0c9d6}
.ws-page .cb-plan-tier--gold{color:#e7c96e}

.ws-page .cb-plan-tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r-pill);font:500 11px/1 var(--font);text-transform:uppercase;letter-spacing:.1em}
.ws-page .cb-plan-annual{display:block;font:400 13px/1.4 var(--font);color:var(--txt3);margin-top:2px}
.ws-page .cb-plan-line{height:1px;background:rgba(255,255,255,.08);margin:var(--s3) 0}

.ws-page .cb-plan-cta--basic,.ws-page .cb-plan-cta--silver,.ws-page .cb-plan-cta--gold{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:var(--s2) var(--s3);border-radius:var(--r-pill);
  font:500 15px/1 var(--font);text-decoration:none;
  transition:transform .08s var(--ease), box-shadow .08s var(--ease);
}
.ws-page .cb-plan-cta--basic{background:rgba(255,255,255,.08);color:var(--txt);border:1px solid rgba(255,255,255,.14)}
.ws-page .cb-plan-cta--basic:hover{background:rgba(255,255,255,.14)}
.ws-page .cb-plan-cta--silver{background:linear-gradient(180deg,var(--blue) 0%,var(--blue-brand) 100%);color:var(--txt);box-shadow:0 0 0 .5px rgba(26,160,255,.35),0 2px 8px rgba(0,130,255,.35)}
.ws-page .cb-plan-cta--silver:hover{transform:translateY(-1px);box-shadow:0 0 0 .5px rgba(26,160,255,.5),0 4px 14px rgba(0,130,255,.5)}
.ws-page .cb-plan-cta--gold{background:linear-gradient(180deg,#e7c96e 0%,#c9a447 100%);color:#1a1203;box-shadow:0 0 0 .5px rgba(231,201,110,.35),0 2px 8px rgba(201,164,71,.35)}
.ws-page .cb-plan-cta--gold:hover{transform:translateY(-1px);box-shadow:0 0 0 .5px rgba(231,201,110,.5),0 4px 14px rgba(201,164,71,.5)}

/* ── CHECKOUT MODAL ────────────────────────────────────────────── */
.ws-page .cb-modal-progress{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s3)}
.ws-page .cb-modal-step{display:flex;align-items:center;gap:var(--s1);font:500 12px/1 var(--font);color:var(--txt3);text-transform:uppercase;letter-spacing:.1em}
.ws-page .cb-modal-bar{flex:1;height:3px;background:rgba(255,255,255,.08);border-radius:var(--r-xs);overflow:hidden;position:relative}
.ws-page .cb-modal-bar::after{content:"";position:absolute;inset:0;width:50%;background:linear-gradient(90deg,var(--blue),var(--blue-brand));border-radius:inherit}
.ws-page .cb-modal-dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--blue)}
.ws-page .cb-modal-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-pill);font:500 11px/1 var(--font);color:var(--blue);background:rgba(41,151,255,.1);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s2)}

.ws-page .cb-modal-form{display:flex;flex-direction:column;gap:var(--s2)}
.ws-page .cb-modal-field{display:flex;flex-direction:column;gap:var(--s0)}
.ws-page .cb-modal-label{font:500 12px/1 var(--font);color:var(--txt3);text-transform:uppercase;letter-spacing:.08em}

.ws-page .cb-modal-billing{display:flex;flex-direction:column;gap:var(--s2)}
.ws-page .cb-modal-opt-title{font:500 15px/1.2 var(--font);color:var(--txt)}
.ws-page .cb-modal-opt-sub{font:400 13px/1.4 var(--font);color:var(--txt3)}
.ws-page .cb-modal-opt-body{display:flex;flex-direction:column;gap:2px}

.ws-page .cb-modal-plan-summary{padding:var(--s3);border-radius:var(--r-lg);background:rgba(41,151,255,.06);border:1px solid rgba(41,151,255,.18);margin-bottom:var(--s3)}
.ws-page .cb-modal-plan-summary-name{font:500 16px/1.2 var(--font);color:var(--txt)}
.ws-page .cb-modal-plan-summary-sub{font:400 13px/1.4 var(--font);color:var(--txt3);margin-top:2px}

.ws-page .cb-modal-sum{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s2) 0;border-top:1px solid rgba(255,255,255,.08);margin-top:var(--s2)}
.ws-page .cb-modal-sum-row{display:flex;justify-content:space-between;font:400 14px/1.3 var(--font);color:var(--txt2)}
.ws-page .cb-modal-sum-row--total{font-weight:500;color:var(--txt);padding-top:var(--s1);border-top:1px solid rgba(255,255,255,.08);margin-top:var(--s1)}

.ws-page .cb-modal-btn--primary{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  padding:var(--s2) var(--s4);border-radius:var(--r-pill);
  font:500 15px/1 var(--font);color:var(--txt);text-decoration:none;
  background:linear-gradient(180deg,var(--blue) 0%,var(--blue-brand) 100%);
  border:none;cursor:pointer;
  box-shadow:0 0 0 .5px rgba(26,160,255,.35),0 2px 10px rgba(0,130,255,.4);
  transition:transform .08s var(--ease), box-shadow .08s var(--ease);
}
.ws-page .cb-modal-btn--primary:hover{transform:translateY(-1px);box-shadow:0 0 0 .5px rgba(26,160,255,.55),0 4px 16px rgba(0,130,255,.55)}
.ws-page .cb-modal-btn--ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  padding:var(--s2) var(--s4);border-radius:var(--r-pill);
  font:500 15px/1 var(--font);color:var(--txt2);text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);cursor:pointer;
  transition:color .08s var(--ease), background-color .08s var(--ease);
}
.ws-page .cb-modal-btn--ghost:hover{color:var(--txt);background:rgba(255,255,255,.1)}

/* ── LEGAL PAGE HEADER ─────────────────────────────────────────── */
.ws-page .legal-header{text-align:center;padding:var(--s8) var(--s4) var(--s5);margin-bottom:var(--s4)}

/* ── FOOTER VISUAL SEPARATORS ──────────────────────────────────── */
.ws-page .cb-ft-divider{height:1px;background:rgba(255,255,255,.08);margin:var(--s4) 0 var(--s3)}
.ws-page .cb-ft-legal-sep{color:var(--txt4);margin:0 var(--s0)}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL UI NORMALIZATION LOCK — 2026-04-20
   Purpose: enforce SF Pro typography, max-weight 500, and glass consistency
   across every page in cb-portal-shell without redesigning or rewriting copy.
   This block intentionally overrides page-local drift. Do NOT edit above —
   add lock rules here only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FONT LOCK v2 ── SF Pro everywhere, no system-ui/Arial/Helvetica fallbacks */
html,body,body *{font-family:var(--font),var(--cb-font),var(--font-display),var(--cb-font-display)}
body code,body pre,body kbd,body samp,body .font-mono{font-family:var(--font-mono),var(--cb-font-mono),ui-monospace,monospace}
body h1,body h2,body h3,body h4,body h5,body h6,body .pg-title,body .sec-title,body .ob-title,body .ob-q,body .op-prof-ttl,body .op-prof-av{font-family:var(--font-display),var(--cb-font-display)}

/* ── WEIGHT LOCK v2 ── max 500, demote 600/700/800/900 globally */
body [style*="font-weight:600"],body [style*="font-weight: 600"],
body [style*="font-weight:700"],body [style*="font-weight: 700"],
body [style*="font-weight:800"],body [style*="font-weight: 800"],
body [style*="font-weight:900"],body [style*="font-weight: 900"],
body [style*="font-weight:bold"],body [style*="font-weight: bold"]{font-weight:500!important}
body b,body strong{font-weight:500}

/* ── BLUR LOCK v2 ── redundant backstop; blur is permanently banned */
*{-webkit-backdrop-filter:none!important; backdrop-filter:none!important}
*:not(svg):not(svg *){filter:none}
[style*="blur("]{filter:none!important;}

/* ── TYPOGRAPHY NORMALIZATION — page titles / sub / section titles
   Keep existing tokens. Override only where page-local CSS drifts. */
.pg-title{font-family:var(--font-display)!important;font-size:26px;font-weight:500;line-height:1.15;letter-spacing:-.015em;color:var(--txt)}
.pg-sub{font-family:var(--font)!important;font-size:14px;font-weight:400;line-height:1.4;color:var(--txt2,rgba(255,255,255,.62))}
.sec-title{font-family:var(--font-display)!important;font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--txt)}
.sec-sub{font-family:var(--font)!important;font-size:13px;font-weight:400;color:var(--txt2,rgba(255,255,255,.62))}

/* ── OPERATOR HEADER — stay a touch smaller inside the Studio iframe */
#opShell .pg-title{font-size:22px;letter-spacing:-.015em}
#opShell .pg-sub{font-size:12.5px}

/* ── ONBOARDING BLEND — unify with portal glass Layer-2, kill system-ui
   drift, and downgrade title weight. Do not touch copy or behavior. */
body .ob-host{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s5)}
body .ob-card{max-width:720px;width:100%;padding:var(--s7);border-radius:var(--r-xl);
  background:var(--cb-glass-2-bg);border:var(--cb-glass-2-border);box-shadow:var(--cb-glass-2-shadow);
  border-top:var(--cb-glass-2-border-top)}
body .ob-title{font-family:var(--font-display)!important;font-size:26px;font-weight:500;letter-spacing:-.015em;margin:0 0 var(--s2);text-align:center;color:var(--txt)}
body .ob-q{font-family:var(--font)!important;font-size:14px;font-weight:400;line-height:1.5;color:var(--txt2,rgba(255,255,255,.62));margin:0 0 var(--s5);text-align:center}
body .ob-card-opt{padding:var(--s4);border-radius:var(--r-md);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);cursor:pointer;text-align:center;font-size:14px;font-weight:500;transition:background 150ms ease,border-color 150ms ease,color 150ms ease}
body .ob-card-opt:hover{background:rgba(255,255,255,.07)}
body .ob-card-opt.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.55);color:#2997ff}
body .ob-input,body .ob-select,body .ob-textarea{font-family:var(--font)!important;font-weight:400}
body .ob-btn{font-family:var(--font-display)!important;font-weight:500;border-radius:var(--r-sm);transition:background 150ms ease,color 150ms ease,transform 80ms ease}
body .ob-btn:active{transform:translateY(1px)}
body .ob-btn-primary{background:linear-gradient(180deg,#2997ff,#1e7ce0);color:#fff;border:1px solid rgba(122,189,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 12px rgba(41,151,255,.3)}
body .ob-btn-primary:hover{filter:brightness(1.08)}
body .ob-progress-fill{background:linear-gradient(90deg,#2997ff,#1e7ce0)}
body .ob-toggle.on .ob-toggle-dot{background:#2997ff}
body .ob-input:focus,body .ob-select:focus,body .ob-textarea:focus{outline:none;border-color:rgba(41,151,255,.55)}
body .ob-spinner{border-top-color:#2997ff}
body .ob-caption-hint{color:#2997ff}

/* ── OPERATOR WEIGHT DEMOTION — kill inline 600/700 in page-local styles */
.op-prof-av,.op-prof-ttl,.op-prof-sub .op-ed-chip,
.op-prof-grades .op-ed-grade-lbl,.op-prof-grades .op-ed-grade-val,
.op-prof-section-ttl,.op-prof-month-lbl,.op-prof-month-val,
.op-prof-pj-grade,.op-prof-pj-lbl,
.editor-profile-card .op-ed-init,
.editor-profile-card .op-ed-count,
.editor-profile-card .op-ed-chip,
.editor-profile-card .op-ed-grade-lbl,
.editor-profile-card .op-ed-grade-val{font-weight:500!important}

/* ── MOTION TIER RE-ENABLE ON INTERACTIVE SURFACES
   The global `transition-property:none` on *,*::before,*::after (line 74)
   intentionally freezes decorative motion. Re-enable it ONLY on the handful
   of affordances the user physically touches. Transform + opacity + color
   only — never filter, never blur. */
button,a,input,select,textarea,label,
.ob-btn,.ob-card-opt,.ob-toggle,
.psn-btn,.pipe-dropdown,.pcr-search,
.sb-nav-item,.op-nav-btn,.pg-tab,
.pipeline-card,.editor-profile-card,
.section-card,.glass-card,.stat-card,
.tog-row,.seg-ctrl,.opt-card,.dock-bubble,
.cb-modal,.op-modal,.modal-panel{
  transition-property:background,background-color,color,border-color,box-shadow,transform,opacity;
  transition-duration:150ms;
  transition-timing-function:ease}
button:active,.ob-btn:active,.psn-btn:active,.sb-nav-item:active,.op-nav-btn:active,.pg-tab:active{transition-duration:80ms}

/* ── MOBILE TIGHTENING (≤ 768px) */
@media (max-width:768px){
  .pg-title{font-size:22px}
  .pg-sub{font-size:13px}
  .sec-title{font-size:15px}
  .sec-sub{font-size:12.5px}
  body .ob-card{padding:var(--s5);border-radius:var(--r-lg)}
  body .ob-title{font-size:22px}
  body .ob-q{font-size:13.5px;margin-bottom:var(--s4)}
  body .ob-card-opt{padding:var(--s3);font-size:13.5px}
  body .ob-btn{padding:var(--s3) var(--s5);font-size:13.5px}
  #opShell .pg-title{font-size:19px}
  #opShell .pg-sub{font-size:12px}
  #opShell .shell-body-glass{padding:var(--s3) var(--s3) 0}
}

/* ── SMALLER-MOBILE TIGHTENING (≤ 480px) */
@media (max-width:480px){
  .pg-title{font-size:20px;letter-spacing:-.01em}
  .pg-sub{font-size:12.5px}
  body .ob-host{padding:var(--s3)}
  body .ob-card{padding:var(--s4);border-radius:var(--r-md)}
  body .ob-title{font-size:20px;margin-bottom:var(--s1)}
  body .ob-q{font-size:13px;margin-bottom:var(--s3)}
  body .ob-grid{grid-template-columns:1fr 1fr;gap:var(--s2)}
  body .ob-actions{flex-direction:column-reverse}
  body .ob-btn,body .ob-btn-primary{width:100%;min-width:0}
}
/* ═══ END PORTAL UI NORMALIZATION LOCK ═══ */

/* ═══════════════════════════════════════════════════════════════════
   FREE-TRIAL QUALIFICATION WIZARD — base rules (qw-step / q-field /
   q-chip / q-section / q-day / q-slot / q-summary / q-preset / q-style).
   These classes were referenced by the old and new wizards but only
   :selected/:active/:qualified/:done variants existed in design-system.
   Added 2026-04-20 to make /free-trial render correctly.
   ═════════════════════════════════════════════════════════════════ */
.qw-step{display:none;flex-direction:column;align-items:center;text-align:center;width:100%;animation:cb-fade-up 300ms ease-out}
.qw-title{font:600 26px/1.25 var(--font);color:var(--txt);margin:0 0 8px;text-align:center;letter-spacing:-.01em}
.qw-sub{font:400 14px/1.55 var(--font);color:rgba(255,255,255,.62);margin:0 0 18px;text-align:center;max-width:520px}

.q-row{display:flex;gap:12px;margin-bottom:12px;width:100%}
.q-row > .q-field{flex:1;margin-bottom:0}
.q-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;position:relative;width:100%}
.q-field label{font:500 13px/1.3 var(--font);color:var(--txt);display:flex;align-items:center;gap:6px}
.q-field input,.q-field textarea,.q-field select{padding:11px 14px;border-radius:var(--r-lg);font:400 14px/1.4 var(--font);color:var(--txt);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);outline:none;transition:border-color .15s,background .15s;font-family:inherit}
.q-field input:focus,.q-field textarea:focus,.q-field select:focus{border-color:rgba(41,151,255,.5);background:rgba(255,255,255,.06)}
.q-field input::placeholder{color:rgba(255,255,255,.25)}

.q-question{margin-bottom:18px;width:100%}
.q-question-label{font:500 14px/1.4 var(--font);color:var(--txt);margin-bottom:10px;text-align:left}
.q-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px}
.q-chip{padding:9px 14px;border-radius:100px;font:500 13px/1 var(--font);color:rgba(255,255,255,.75);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .1s;user-select:none}
.q-chip:hover{background:rgba(255,255,255,.07);color:var(--txt)}
.q-chip:active{transform:scale(.97)}
.q-chip-lg{padding:11px 18px;font-size:14px}

.q-subq{animation:cb-fade-up 260ms ease-out;width:100%}

.q-section{margin-top:20px;width:100%;text-align:left}
.q-section-title{font:600 15px/1.3 var(--font);color:var(--txt);margin-bottom:4px}
.q-section-sub{font:400 12px/1.5 var(--font);color:rgba(255,255,255,.55);margin-bottom:10px}

.q-style-tab{font:500 13px/1 var(--font);padding:9px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:rgba(255,255,255,.7);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.q-style-tab:hover{background:rgba(255,255,255,.07);color:var(--txt)}
.q-style-tab.active{background:rgba(41,151,255,.14);border-color:rgba(41,151,255,.45);color:var(--txt)}

.q-preset-chip{padding:14px;border-radius:var(--r-lg);font:500 13px/1.3 var(--font);color:rgba(255,255,255,.78);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);cursor:pointer;text-align:center;transition:background .15s,border-color .15s,color .15s,transform .1s;user-select:none}
.q-preset-chip:hover{background:rgba(255,255,255,.07);color:var(--txt)}
.q-preset-chip:active{transform:scale(.98)}

.q-day-cards{display:flex;gap:10px;margin-bottom:14px;width:100%}
.q-day-card{flex:1;padding:12px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);cursor:pointer;text-align:center;transition:background .15s,border-color .15s}
.q-day-card:hover{background:rgba(255,255,255,.07)}
.q-day-label{font:500 13px/1.2 var(--font);color:var(--txt);margin-bottom:2px}
.q-day-date{font:400 12px/1.2 var(--font);color:rgba(255,255,255,.5)}

.q-slots{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;justify-content:center}
.q-slot{padding:8px 14px;border-radius:100px;font:500 12px/1 var(--font);color:rgba(255,255,255,.78);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.q-slot:hover{background:rgba(255,255,255,.07);color:var(--txt)}
.q-slots-loading{font:400 12px/1.4 var(--font);color:rgba(255,255,255,.55);padding:12px;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}
.q-tz{font:400 11px/1.3 var(--font);color:rgba(255,255,255,.4);text-align:center;margin-top:8px}

.q-summary{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--r-lg);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);width:100%}
.q-summary-row{display:flex;justify-content:space-between;gap:12px;font:400 13px/1.4 var(--font)}
.q-summary-lbl{color:rgba(255,255,255,.55);flex-shrink:0}
.q-summary-val{color:var(--txt);font-weight:500;text-align:right}

.q-result-icon{width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin:0 auto 12px}

.q-benefits{display:flex;flex-direction:column;gap:8px;margin-top:14px;width:100%;max-width:380px}
.q-benefit{display:flex;align-items:flex-start;gap:10px;text-align:left}
.q-benefit-check{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(41,151,255,.15);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}

.q-bottom-links{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:14px}
.q-link-muted{font:400 13px/1 var(--font);color:rgba(255,255,255,.5);text-decoration:none}
.q-link-muted:hover{color:var(--txt)}

.q-remind{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.q-error{font:400 12px/1.3 var(--font);color:#ff6b6b;margin-top:4px;display:none}
/* ═══ END FREE-TRIAL WIZARD BASE ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 2026-04-20 — SIDEBAR ADDITIONS, SLIM NOTIFS, AI PM WIDGET
   Added per Sean's 2026-04-20 brief:
   - .sb-online-stack  — avatar stack under bug logo (community feel)
   - .sb-dl-stack      — stacked deadline timer cards above profile
   - .notif-item.slim  — one-row compact notification (collapse 2-row → 1)
   - (removed) .ai-pm — AI PM is backend-only
   No blur, no custom colors outside tokens. All depth = opacity + shadow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Community Online Stack (under bug logo) ─────────────────────── */
.sb-online-stack{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px 2px;min-height:24px}
.sb-online-stack[data-empty="true"]{opacity:0;height:0;padding:0;overflow:hidden;pointer-events:none;transition:opacity 220ms}
.sb-online-avatars{display:flex;align-items:center}
.sb-online-avatars .sb-oa{width:22px;height:22px;border-radius:50%;border:2px solid rgba(14,18,28,.98);background:linear-gradient(135deg,rgba(41,151,255,.35),rgba(41,151,255,.1));color:#fff;font:500 9.5px/18px var(--font-display);text-align:center;overflow:hidden;margin-left:-8px;position:relative;transition:transform 160ms cubic-bezier(.16,1,.3,1),margin 160ms cubic-bezier(.16,1,.3,1)}
.sb-online-avatars .sb-oa:first-child{margin-left:0}
.sb-online-avatars .sb-oa img{width:100%;height:100%;object-fit:cover;display:block}
.sb-online-avatars .sb-oa:hover{transform:translateY(-2px) scale(1.08);z-index:4}
.sb-online-avatars .sb-oa.more{background:rgba(255,255,255,.06);color:var(--txt2);font-weight:500;letter-spacing:.02em}
.sb-online-count{font:500 9.5px/1 var(--font);color:var(--txt3);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.sb-online-avatars .sb-oa[data-name]::after{
  content:attr(data-name);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:rgba(14,18,28,.98);color:var(--txt);font:500 10.5px/1 var(--font);padding:5px 8px;border-radius:6px;
  border:1px solid rgba(255,255,255,.08);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 120ms;z-index:50
}
.sb-online-avatars .sb-oa[data-name]:hover::after{opacity:1}
/* Clients never see names — hide tooltip entirely */
body[data-role="client"] .sb-online-avatars .sb-oa[data-name]::after,
body[data-role="trial"] .sb-online-avatars .sb-oa[data-name]::after{display:none}
.app-dock-inner.collapsed .sb-online-count{display:none}
.app-dock-inner.collapsed .sb-online-stack{padding:4px 0 0;gap:0}
.app-dock-inner.collapsed .sb-online-avatars{flex-direction:column;align-items:center}
.app-dock-inner.collapsed .sb-online-avatars .sb-oa{margin-left:0;margin-top:-6px;width:20px;height:20px;font-size:9px;line-height:16px}
.app-dock-inner.collapsed .sb-online-avatars .sb-oa:first-child{margin-top:0}

/* ── Deadline Timer Stack (above profile) ────────────────────────── */
.sb-dl-stack{display:flex;flex-direction:column;gap:6px;margin:0 8px 8px;max-height:200px;overflow-y:auto}
.sb-dl-stack::-webkit-scrollbar{width:0}
.sb-dl-card{position:relative;display:flex;align-items:center;gap:9px;padding:7px 10px;background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.07);border-radius:10px;cursor:pointer;transition:border-color 120ms,background 120ms,transform 120ms}
.sb-dl-card:hover{border-color:rgba(41,151,255,.28);background:rgba(41,151,255,.05);transform:translateX(2px)}
.sb-dl-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--green,#34d399);box-shadow:0 0 6px rgba(52,211,153,.4)}
.sb-dl-dot.warn{background:var(--orange,#ff9f0a);box-shadow:0 0 6px rgba(255,159,10,.4)}
.sb-dl-dot.late{background:#ff6b6b;box-shadow:0 0 6px rgba(255,107,107,.45);animation:sbDlPulse 1400ms ease-in-out infinite}
@keyframes sbDlPulse{0%,100%{box-shadow:0 0 6px rgba(255,107,107,.45)}50%{box-shadow:0 0 14px rgba(255,107,107,.85)}}
.sb-dl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sb-dl-name{font:500 11.5px/1.15 var(--font-display);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em}
.sb-dl-time{font:500 10px/1 var(--font);color:var(--txt3);letter-spacing:.02em}
.sb-dl-time.warn{color:var(--orange,#ff9f0a)}
.sb-dl-time.late{color:#ff6b6b}
.sb-dl-tier{flex-shrink:0;font:500 9px/1 var(--font);padding:3px 5px;border-radius:4px;background:rgba(255,255,255,.05);color:var(--txt2);letter-spacing:.04em}
.sb-dl-tier.t-1{background:rgba(90,160,255,.12);color:#7db4ff}
.sb-dl-tier.t-2{background:rgba(168,132,255,.14);color:#bda6ff}
.sb-dl-tier.t-3{background:rgba(255,196,120,.16);color:#ffce86}
.app-dock-inner.collapsed .sb-dl-stack{display:none}

/* ── Slim single-row notification (replaces old 2-row style) ─────── */
.notif-item.slim,.sb-notif-item.slim{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid rgba(255,255,255,.04);font:400 11.5px/1.25 var(--font);color:var(--txt2);white-space:nowrap;overflow:hidden}
.notif-item.slim .notif-text,.sb-notif-item.slim .notif-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 11.5px/1.25 var(--font);color:var(--txt);margin-top:0}
.notif-item.slim .notif-time,.sb-notif-item.slim .notif-time{font:400 9.5px/1 var(--font);color:var(--txt4);flex-shrink:0;margin-top:0}
.notif-item.slim .notif-dot-slim{flex-shrink:0;width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 5px rgba(41,151,255,.45)}
.notif-item.slim .notif-dot-slim.ok{background:var(--green,#34d399);box-shadow:0 0 5px rgba(52,211,153,.4)}
.notif-item.slim .notif-dot-slim.warn{background:var(--orange,#ff9f0a);box-shadow:0 0 5px rgba(255,159,10,.4)}
.notif-item.slim .notif-dot-slim.err{background:#ff6b6b;box-shadow:0 0 5px rgba(255,107,107,.5)}

@media (max-width:720px){
  .sb-dl-stack{max-height:160px}
}

/* ═══════════════════════════════════════════════════════════════
   SESSION 2026-04-21 — 5 NEW UI FIXES
   1. Project View timeline — full-width premium glass bar
   2. Project View countdown timer — small tag, bottom-right of dock row
   3. Project title bar — client avatar next to back button
   4. Thread reaction bar — stop message distortion, iMessage-style
   5. New-project wizard — less transparency, bigger card + icons
   ═══════════════════════════════════════════════════════════════ */

/* #1 — Timeline bar: full-width glass that spans the bottom of the video */
.pv-timeline-bar{
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important;
  padding:8px 14px 10px !important;
  gap:12px !important;
  background:linear-gradient(0deg,rgba(8,10,14,.92) 0%,rgba(8,10,14,.72) 40%,rgba(8,10,14,.32) 80%,transparent 100%) !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
  box-shadow:0 -10px 28px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
  z-index:5 !important;
  box-sizing:border-box !important;
}
.pv-timeline-bar .dk-timeline{flex:1 !important; min-width:0 !important; height:28px !important}
#panel-portal .pv-timeline-bar .dk-timeline{flex:1 !important; min-width:0 !important; height:28px !important; padding:0 !important}
#panel-portal .pv-timeline-bar .dk-timeline-track{width:100% !important; height:6px !important}
.pv-timeline-bar .dk-timeline-track{
  height:6px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.07) 100%) !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.06) !important;
}
.pv-timeline-bar .dk-timeline-bar{
  background:linear-gradient(180deg,rgba(41,151,255,.95) 0%,rgba(41,151,255,.72) 100%) !important;
  box-shadow:0 0 10px rgba(41,151,255,.38), 0 0 2px rgba(41,151,255,.6) !important;
}
.pv-timeline-bar .dk-ts{font:500 11px/1 var(--mono, var(--font)); color:rgba(255,255,255,.82); letter-spacing:.3px; min-width:38px; text-align:center}
.pv-timeline-bar .dk-play{width:30px !important;height:30px !important}
.pv-timeline-bar .dk-play svg{width:14px !important;height:14px !important}
.pv-timeline-bar .pv-q-btn{font-size:10px !important;padding:3px 7px !important;height:22px !important}

/* #2 — Compact countdown timer, lives in the dock row bottom-right */
.health-timer.pv-timer-compact{
  padding:3px 9px !important;
  font:500 10.5px/1 var(--font) !important;
  gap:5px !important;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  height:22px;
}
.health-timer.pv-timer-compact .ht-dot{width:6px;height:6px}
.health-timer.pv-timer-compact .ht-time{font:500 10.5px/1 var(--mono, var(--font))}
.pv-timer-hidden{opacity:0;transition:opacity 120ms ease}

/* Dock row gets a right-side cluster for timer + editor avatar */
.pv-dock-right{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding-left:6px}
.pv-dock-editor-av{
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 10px/1 var(--font); color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  background-size:cover;background-position:center;
  transition:transform 120ms cubic-bezier(.16,1,.3,1), border-color 120ms ease;
}
.pv-dock-editor-av[data-has="1"]{border-color:rgba(41,151,255,.35); color:#fff}
.pv-dock-editor-av:hover{transform:scale(1.07);border-color:rgba(41,151,255,.55)}

/* #3 — Client avatar to the right of the back button */
.pv-client-av{
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 10px/1 var(--font); color:rgba(255,255,255,.85);
  background:linear-gradient(135deg, rgba(41,151,255,.18), rgba(41,151,255,.06));
  border:1px solid rgba(41,151,255,.32);
  background-size:cover;background-position:center;
  margin-left:4px;flex-shrink:0;
  transition:transform 120ms cubic-bezier(.16,1,.3,1), border-color 120ms ease;
}
.pv-client-av[hidden]{display:none}
.pv-client-av:hover{transform:scale(1.08);border-color:rgba(41,151,255,.6)}
.pv-client-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.pv-client-av.has-img,.pv-dock-editor-av.has-img{color:transparent;text-shadow:none}

/* #4 — iMessage-style reaction bar: floats above message, doesn't squash bubble */
.th-reaction-bar{
  position:absolute;
  bottom:calc(100% + 8px);
  z-index:40;
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 6px;
  border-radius:var(--r-pill, 999px);
  background:rgba(22,26,34,.92);
  border:1px solid rgba(255,255,255,.1);
  border-top-color:rgba(255,255,255,.16);
  box-shadow:0 12px 32px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  white-space:nowrap;
  animation:rxBarIn 260ms cubic-bezier(.16,1.2,.3,1) both;
  transform-origin:bottom left;
}
.th-msg-me .th-reaction-bar{transform-origin:bottom right}
@keyframes rxBarIn{
  0%{opacity:0; transform:translateY(6px) scale(.86)}
  60%{opacity:1; transform:translateY(0) scale(1.04)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
.th-reaction-bar .th-rb-btn{
  width:30px;height:30px;border:none;background:transparent;border-radius:50%;cursor:pointer;
  font-size:17px;line-height:30px;text-align:center;
  transition:transform 140ms cubic-bezier(.16,1,.3,1), background 140ms ease;
}
.th-reaction-bar .th-rb-btn:hover{background:rgba(255,255,255,.10); transform:scale(1.22)}
.th-reaction-bar .th-rb-btn:active{transform:scale(.92)}
.th-reaction-bar .th-rb-reply{
  width:auto;padding:0 10px;border-radius:10px;font:500 11px/30px var(--font);
  color:rgba(255,255,255,.6);
}
.th-reaction-bar .th-rb-reply:hover{color:#fff; background:rgba(41,151,255,.18)}

/* Make sure message layout can't be squashed — max-width caps on bubbles */
.th-bubble{max-width:100%; word-break:break-word; overflow-wrap:anywhere}
.th-msg .th-body{min-width:0; max-width:100%}

/* Emoji reaction chips below message pop in with a satisfying bounce */
.th-reactions{display:inline-flex; flex-wrap:wrap; gap:4px; margin-top:3px}
.th-rx{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  font-size:13px; line-height:16px; cursor:pointer;
  transition:background 140ms ease, transform 140ms cubic-bezier(.16,1.2,.3,1);
  animation:rxChipIn 340ms cubic-bezier(.16,1.2,.3,1) both;
}
.th-rx:hover{background:rgba(255,255,255,.10); transform:translateY(-1px) scale(1.06)}
.th-rx.mine{background:rgba(41,151,255,.14); border-color:rgba(41,151,255,.28)}
@keyframes rxChipIn{
  0%{opacity:0; transform:translateY(8px) scale(.6)}
  60%{opacity:1; transform:translateY(0) scale(1.15)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
.th-rx-count{font:600 10px/1 var(--font);color:rgba(255,255,255,.62); min-width:8px; text-align:center}

/* #5 — Request wizard: SOLID opaque modal + bigger project card */
.np-drawer-bg{background:rgba(2,4,8,.88) !important}
.np-drawer{
  width:min(480px, 94vw) !important;
  background-color:#0b0e16 !important;
  background-image:none !important;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-top-color:rgba(255,255,255,.14) !important;
}
.np-drawer::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,22,32,.55) 0%, rgba(11,14,22,.25) 60%, rgba(7,10,16,0) 100%);
  border-radius:inherit;
}
.np-drawer > *{position:relative; z-index:1}
.np-drawer iframe{background:transparent !important}

/* Project card (hidden-state np-card) — bigger, more opaque, icons scaled */
.np-card{
  padding:14px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-top-color:rgba(255,255,255,.14) !important;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04) !important;
  gap:14px !important;
}
.np-card-title{font:500 var(--text-lg)/1.2 var(--font-display) !important; padding:6px 8px !important}
.np-card-slots{gap:10px !important}
.np-slot{
  height:58px !important;
  gap:8px !important;
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.08) !important;
}
.np-slot svg{width:24px !important;height:24px !important;stroke-width:1.7 !important}
.np-slot-txt{font:500 var(--text-sm)/1 var(--font) !important}
.np-slot.on{background:rgba(41,151,255,.12) !important; border-color:rgba(41,151,255,.3) !important}
.np-card-detail{padding-top:10px !important; font:400 var(--text-sm)/1.4 var(--font) !important}

/* Visible project preview (pipeline-card.pipe-lg inside np-preview) — scale up */
.np-preview{margin-bottom:6px !important}
.np-preview .pipeline-card.pipe-lg{
  min-height:0 !important;
  aspect-ratio:16/9 !important;
  padding:16px !important;
  border-radius:var(--r-xl, 16px) !important;
  background:rgba(14,18,28,.98) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-top-color:rgba(255,255,255,.14) !important;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.np-preview .pipeline-card.pipe-lg .pc-title{font:500 18px/1.25 var(--font-display) !important}
.np-preview .pipeline-card.pipe-lg .pc-status-pill{font-size:11px !important;padding:4px 10px !important}
.np-preview .pipeline-card.pipe-lg .pc-date-pill{font-size:11px !important;padding:4px 10px !important}
.np-preview .pipeline-card.pipe-lg .pc-chip,
.np-preview .pipeline-card.pipe-lg .pc-tag{font-size:12px !important;padding:5px 11px !important;height:auto !important;line-height:1.2 !important}
.np-preview .pipeline-card.pipe-lg .pc-avatar,
.np-preview .pipeline-card.pipe-lg .pc-av{width:36px !important;height:36px !important;font-size:13px !important}
.np-preview .pipeline-card.pipe-lg svg{width:18px !important;height:18px !important}
.np-preview .pipeline-card.pipe-lg .pc-meta{font-size:12px !important;gap:10px !important}

/* #1 timeline — strengthen width so it spans the full video */
.pv-left .pv-timeline-bar,
#panel-portal .pv-left .pv-timeline-bar,
#pvTimelineBar{
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; box-sizing:border-box !important; z-index:6 !important;
}
.np-card-detail-row{font-size:13px}
.np-card-close{width:32px;height:32px}
.np-card-close svg{width:16px;height:16px}

/* Also apply inside the iframe scope (for request.html custom .np-card preview) */
body .np-card-slot{padding:10px 8px}

/* ═══ Reaction chips row (appended to .th-body) ═══ */
.th-rx-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;min-height:0}
.th-rx-row:empty{display:none}
.th-rx-em{line-height:1;display:inline-block;transform-origin:center}
@keyframes rxBarOut{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(6px) scale(.88)}
}

/* ================================================================
   PERF #6/#7 — Compositor-only smoothness (2026-04-21)
   Additive hints for 120fps target. Zero visual change.
   ================================================================ */
.pipeline-card,
.launcher-card,
.opt-card,
.notif-item,
.bp-landing-card,
.wk-section,
.th-reaction-bar,
.bp-panel,
.ch-sb-ch,
.pvd {
  contain: layout paint;
}

.pipeline-card:hover,
.launcher-card:hover,
.opt-card:hover,
.bp-landing-card:hover,
.notif-item:hover,
.ch-sb-ch:hover,
.sb-nav-item:hover {
  will-change: transform;
}

/* ================================================================
   Trial Welcome Tour (2026-04-21)
   Spotlight overlay + tooltip card. No blur (blur banned).
   Depth from opacity + box-shadow only.
   ================================================================ */
.cb-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.55);
  pointer-events: auto;
  transition: opacity 180ms ease;
}
.cb-tour-overlay.cb-tour-hidden { opacity: 0; pointer-events: none; }

.cb-tour-spotlight {
  position: fixed;
  z-index: 9999;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55),
              0 0 0 3px rgba(255,255,255,0.95),
              0 10px 40px rgba(0,0,0,0.55);
  transition: top 220ms cubic-bezier(.2,.8,.2,1),
              left 220ms cubic-bezier(.2,.8,.2,1),
              width 220ms cubic-bezier(.2,.8,.2,1),
              height 220ms cubic-bezier(.2,.8,.2,1);
}

.cb-tour-card {
  position: fixed;
  z-index: 10000;
  width: min(420px, calc(100vw - 40px));
  /* 2026-04-22: solid background — Sean can't read through transparent
     glass with the portal bg showing through. Keeping the border + top
     shimmer so the container still reads as portal UI, but the body is
     a solid dark surface with 100% readable text contrast. */
  background: linear-gradient(180deg, #1a2031 0%, #141826 100%);
  color: var(--txt, #fff);
  border: var(--cb-glass-2-border);
  border-top-color: var(--cb-glass-2-border-top);
  border-radius: var(--r-xl, 16px);
  padding: 22px 24px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  font-family: inherit;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
  overflow: hidden;
}
/* Top shimmer line — matches sb-notif-popup / glass-card pattern */
.cb-tour-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35) 25%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.35) 75%, transparent);
}
.cb-tour-card.cb-tour-visible { opacity: 1; transform: translateY(0); }

.cb-tour-card[data-position="center"] {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(6px);
}
.cb-tour-card[data-position="center"].cb-tour-visible {
  transform: translate(-50%, -50%);
}

.cb-tour-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #1a2031;
  border: var(--cb-glass-2-border);
  transform: rotate(45deg);
  border-right: none;
  border-bottom: none;
}

.cb-tour-step-counter {
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-dim, rgba(255,255,255,0.6));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.cb-tour-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 8px 0;
  color: var(--txt, #fff);
}

.cb-tour-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--txt-dim, rgba(255,255,255,0.78));
  margin: 0 0 18px 0;
}

.cb-tour-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.cb-tour-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  font-family: inherit;
}
/* Match .btn-g5 on the request wizard — glass, not orange */
.cb-tour-btn-primary {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.cb-tour-btn-primary:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.cb-tour-btn-ghost {
  background: transparent;
  color: var(--txt-dim, rgba(255,255,255,0.72));
  border-color: rgba(255,255,255,0.18);
}
.cb-tour-btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  color: var(--txt, #fff);
}

.cb-tour-skip {
  margin-right: auto;
  background: transparent;
  border: none;
  color: var(--txt-dim, rgba(255,255,255,0.5));
  font-size: 12px;
  cursor: pointer;
  padding: 6px 4px;
}
.cb-tour-skip:hover { color: var(--txt, #fff); }

/* Mobile: bottom sheet */
@media (max-width: 640px) {
  .cb-tour-card {
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: 16px !important;
    width: auto;
    max-width: none;
    transform: translateY(8px);
    border-radius: 16px 16px 12px 12px;
  }
  .cb-tour-card.cb-tour-visible { transform: translateY(0); }
  .cb-tour-arrow { display: none; }
  .cb-tour-spotlight {
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.6),
                0 0 0 3px rgba(255,255,255,0.95);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cb-tour-spotlight,
  .cb-tour-card,
  .cb-tour-overlay {
    transition: none !important;
  }
}

/* ================================================================
   Page Help Pill (2026-04-21)
   Small "?" circle next to any .pg-title. Hover reveals a glass
   popover with role-appropriate "how to use this page" copy.
   Content is registered per page in help-tips.js, keyed by
   document.body.dataset.role (trial / client / editor / admin / owner).
   ================================================================ */
.cb-help-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.72);
  font: 600 7px/1 var(--font);
  cursor: help;
  margin-left: 8px;
  vertical-align: 3px;
  position: relative;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  user-select: none;
}
.cb-help-pill:hover,
.cb-help-pill:focus-within {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.24);
}
.cb-help-pill__pop {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  min-width: 300px;
  max-width: 400px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #1a2031 0%, #141826 100%);
  border: var(--cb-glass-2-border);
  border-top-color: var(--cb-glass-2-border-top);
  border-radius: var(--r-xl);
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  color: var(--txt);
  font: 400 13px/1.55 var(--font);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 9500;
  text-align: left;
  white-space: normal;
}
.cb-help-pill:hover .cb-help-pill__pop,
.cb-help-pill:focus-within .cb-help-pill__pop {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cb-help-pill__title {
  font: 600 13px/1.2 var(--font);
  margin: 0 0 8px 0;
  color: var(--txt);
  letter-spacing: 0.01em;
}
.cb-help-pill__pop ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cb-help-pill__pop li {
  position: relative;
  padding: 4px 0 4px 14px;
  color: var(--txt-dim, rgba(255,255,255,.76));
}
.cb-help-pill__pop li + li { margin-top: 2px; }
.cb-help-pill__pop li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
}
.cb-help-pill__foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  font: 500 11px/1.4 var(--font);
  color: var(--txt-dim, rgba(255,255,255,.5));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Blueprint wizard: dual B-Roll (primary + secondary on one step) ── */
.bp-dual-wrap{display:flex;flex-direction:column;gap:var(--s2);width:100%}
.bp-dual-row{display:flex;flex-direction:column;gap:6px;align-items:center}
.bp-dual-lbl{font:500 var(--text-xs)/1 var(--font);color:var(--txt2);letter-spacing:.08em;text-transform:uppercase;align-self:center}
/* Dual cards are smaller so both rows fit a single viewport */
.bp-dual-row .bp-v9-card{width:108px}
.bp-dual-row .bp-v9-title{font:500 var(--text-sm)/var(--lh-tight) var(--font)}
.bp-dual-row .bp-v9-desc{font:400 var(--text-4xs)/var(--lh-normal) var(--font)}
.bp-dual-row .bp-v9-info{padding:6px 8px}
.bp-dual-row .bp-v9-grid{gap:10px}

/* ══════════════════════════════════════════════════════════════════════════
   PORTAL UNIFICATION PASS — Sean 2026-04-22

   Additive-only block. Nothing above this comment should be edited by this
   pass. Defines: semantic glass aliases, .cb-page/.cb-container/.cb-stack
   scaffolding, global SF Pro enforcement, prefers-reduced-motion, focus
   defaults. Every rule here composes with existing tokens (--s*, --r-*,
   --cb-glass-*-bg, --font*). Zero new visual language.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL SF PRO ENFORCEMENT ──
   Any page that inherits body.font-family without overriding picks up SF Pro
   automatically. The fallback stack only fires if /studio-shell/fonts/*.woff2 fail
   to load — SF Pro still wins every render path. */
html, body {
  font-family: var(--font), -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── 2. SEMANTIC GLASS ALIASES ──
   Three semantic names mapped onto existing --cb-glass-N tokens, so page
   authors don't have to remember which tier is which. Existing classes
   (.glass-card, .glass-bubble, .glass-flat) are left alone and continue
   to work. Pick ONE of these for new surfaces going forward. */
.glass {
  background: var(--cb-glass-2-bg);
  border: var(--cb-glass-2-border);
  box-shadow: var(--cb-glass-2-shadow);
  border-radius: var(--r-xl);
  padding: var(--s2);
}
.glass.glass--elevated,
.glass--elevated {
  background: var(--cb-glass-1-bg);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--cb-glass-1-shadow);
  border-radius: var(--r-2xl);
  padding: var(--s3);
}
.glass.glass--subtle,
.glass--subtle {
  background: var(--cb-glass-3-bg);
  border: var(--cb-glass-3-border);
  box-shadow: var(--cb-glass-3-shadow);
  border-radius: var(--r-lg);
  padding: var(--s2);
}
/* Hover lift — transform+box-shadow only, no layout shift, no filter reflow */
.glass:hover,
.glass--subtle:hover {
  transform: translateY(-1px);
  box-shadow: var(--cb-glass-2-shadow), 0 8px 24px rgba(0,0,0,.35);
  transition: transform 150ms var(--ease, cubic-bezier(.22,1,.36,1)),
              box-shadow 150ms var(--ease, cubic-bezier(.22,1,.36,1));
}
.glass--elevated:hover {
  transform: translateY(-2px);
  box-shadow: var(--cb-glass-1-shadow), 0 12px 32px rgba(0,0,0,.45);
}

/* ── 3. PAGE SCAFFOLDING CLASSES ──
   Drop-in wrappers for any page that doesn't already use .page-shell. The
   existing .page-shell stays as-is; .cb-page is for standalone/auth/wizard
   contexts that want the same gutter/column rhythm without the 100vh flex
   column lock .page-shell enforces. */
.cb-page {
  min-height: 100vh;
  padding: var(--s2);
  box-sizing: border-box;
  color: var(--txt);
}
@media (max-width: 640px) { .cb-page { padding: var(--s1) } }
@media (min-width: 1024px) { .cb-page { padding: var(--s3) var(--s2) } }

.cb-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.cb-container--narrow {
  max-width: 720px;
}
.cb-container--wide {
  max-width: 1440px;
}

.cb-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.cb-stack--tight { gap: var(--s1) }
.cb-stack--loose { gap: var(--s4) }

/* ── 4. TITLE / SUBTITLE aliases that compose with existing --text-* scale ──
   These map cleanly on top of the existing .pg-title / .sec-title system.
   Use .cb-title on any page without .page-shell (e.g. login, standalone
   tools) and get the same rhythm as pages that do use .page-shell. */
.cb-title {
  font: 500 28px/1.1 var(--font-display);
  letter-spacing: -.02em;
  color: var(--txt);
  margin: 0 0 var(--s1);
}
.cb-subtitle {
  font: 400 14px/1.4 var(--font);
  color: var(--txt3);
  margin: 0 0 var(--s3);
}
.cb-section-title {
  font: 500 18px/1.2 var(--font-display);
  letter-spacing: -.01em;
  color: var(--txt);
  margin: 0 0 var(--s1);
}
.cb-section-subtitle {
  font: 400 13px/1.4 var(--font);
  color: var(--txt3);
  margin: 0 0 var(--s2);
}

/* ── 5. FOCUS-VISIBLE BASELINE ──
   Keyboard users get a clean ring. Mouse users never see it. */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--blue, #1a9eff);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ── 6. REDUCED MOTION ──
   Hard clamp for users who have "Reduce motion" toggled in macOS/iOS/Android
   accessibility. Keeps the glass aesthetic (opacity, shadow, gradient) but
   kills all transforms, transitions, animations. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   END PORTAL UNIFICATION PASS
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   PORTAL UNIFY OVERRIDE LAYER — Sean 2026-04-22
   Phase 1+2 of the "Portal MUST BE PERFECT" pass.

   This block runs AFTER every other rule in the stylesheet and uses targeted
   !important only where a page-local <style> or JS-injected inline style is
   known to drift. Nothing in the rest of design-system.css is modified.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1A. BACKGROUND UNIFICATION — match login.html exactly ──
   login.html paints: body.bg-dark { linear-gradient(glass-1) + linear-gradient(cb-bg) }.
   The design-system already has `.bg-dark,.shell` painting this. But some
   standalone pages ship without the .bg-dark class. Force every portal
   context to inherit the same backing color so pages look continuous. */
html { background: #000001 !important }
body.bg-dark,
body.page-account,
body[data-role],
body.ob-body,
body.wiz-page {
  /* Canonical studio bg — amber horizon + 2× glass-1 wash over cb-bg. */
  background:
    var(--cb-amber-horizon),
    var(--cb-glass-1-bg),
    var(--cb-glass-1-bg),
    var(--cb-bg) !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: 100% 100vh, 100% 100vh, 100% 100vh, 100% 100vh !important;
  color: var(--txt);
}
/* Iframe bodies MUST stay transparent so the shell's paint shows through.
   Enforce with !important only on iframe'd bodies (no .bg-dark class).
   The existing rule at line ~361 covers most of this; this is belt-and-suspenders. */
body:not(.bg-dark):not(.bg-light):not(.theme-light):not(.page-account) {
  background-color: transparent !important;
}

/* ── 1B. SF PRO ENFORCEMENT including JS-injected content ──
   Force every rendered element to inherit SF Pro unless the element is
   explicitly mono (`.mono`, `<code>`, `<pre>`, `.font-mono`, `[class*="terminal"]`).
   The `:where()` keeps specificity at 0 so page-level overrides still win if
   they explicitly specify a different --font value. */
:where(html, body, button, input, textarea, select, .btn, .cb-nav-link, .cb-nav-cta) {
  font-family: var(--font), -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
}
/* Headings land on SF Pro Display */
:where(h1, h2, h3, h4, h5, h6, .pg-title, .cb-title, .sec-title, .cb-section-title,
       .wiz-title, .modal-title, .banner-title) {
  font-family: var(--font-display), -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
}
/* Final hammer — any element that inline-styled `system-ui` or `-apple-system`
   as primary font gets overridden. The SF Pro fonts are already loaded, so
   this is safe and has no network cost. */
[style*="system-ui"],
[style*="-apple-system"][style*="font-family"]:not([style*="SF Pro"]) {
  font-family: var(--font), -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ── 1C. GLASS TIER SELECTOR-GROUP NORMALIZATION ──
   Map existing class patterns onto the canonical 3-tier glass system so
   every surface in the portal reads as the same visual language regardless
   of which class a page happened to use. Colors + borders + shadows unify;
   per-page layout (grid, flex, padding overrides) is preserved. */

/* Layer 1 (outer plate — shell, nav, login brand lockup).
   Sean 2026-05-25: dropped .shell-body-glass from this list. .shell-body-glass
   uses a transparent host + ::before plate for the Tier 1 glass paint (see
   §UNIVERSAL PAGE FRAME). Listing it here too caused a double-paint —
   element-bg + ::before — which read as TWO stacked glass layers on operator,
   workflows, pools, os screenshots. Other selectors stay (they paint via
   element-bg, no ::before plate). */
:where(.app-dock-inner, .sb-logo-banner, .glass-bubble::before) {
  background: var(--cb-glass-1-bg);
}
/* Layer 2 (cards, panels, stat cards, kanban columns, wizard shells) */
:where(.glass-card, .section-card, .pipeline-card, .ps-kanban-col,
       .stat-card, .bp-panel, .wiz-shell,
       .h-sum-card, .h-card, .h-ecard) {
  background: var(--cb-glass-2-bg);
  border: var(--cb-glass-2-border);
  box-shadow: var(--cb-glass-2-shadow);
}
/* Layer 3 (nested subpanels inside a layer-2 card) */
:where(.glass-card .glass-card, .glass-card .section-card,
       .section-card .section-card, .bp-panel .glass-card,
       .wiz-content .section-card) {
  background: var(--cb-glass-3-bg);
  border: var(--cb-glass-3-border);
  box-shadow: var(--cb-glass-3-shadow);
}

/* ── 1D. LEFT NAV ICON + TOUCH-TARGET CONSISTENCY ──
   Minimum 44×44px hit target per Apple HIG. Icons stay visually 20px but the
   clickable/tappable area expands. Applies to .sb-nav-item (left nav) and
   every nav/tab control. No layout shift — padding absorbs the extra area. */
:where(.sb-nav-item, .cb-nav-link, .cb-nav-cta,
       .psn-btn, .pmt-btn, .h-tab, .bp-tab, .op-tab) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
:where(.sb-nav-item .sb-nav-tile) {
  width: 44px;
  height: 44px;
}

/* ── 1E. CONTAINER WIDTH + WIZARD FOOTER CONSISTENCY ──
   Every .wiz-content inherits a max-width + centered layout so wizard steps
   don't sprawl edge-to-edge on desktop. Wizard footer buttons right-aligned
   with consistent gap. */
:where(.wiz-footer) {
  display: flex;
  gap: var(--s2);
  justify-content: flex-end;
  align-items: center;
  padding: var(--s2) var(--s3);
}

/* ── 2. RESPONSIVE + INPUT FEEL ──
   Kill horizontal overflow anywhere. Enforce box-sizing. Ensure wizards fit
   viewport on short screens. */
*, *::before, *::after { box-sizing: border-box }

body, .page-shell, .shell, .cb-page {
  overflow-x: hidden;
}

/* Iframe pages should occupy full viewport height cleanly */
body.bg-dark .page-shell,
body.page-account .page-shell {
  min-height: 100vh;
}

/* Mobile tap delay kill */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Touch-friendly input sizing on small screens */
@media (max-width: 640px) {
  :where(input[type="text"], input[type="email"], input[type="password"],
         input[type="tel"], input[type="number"], textarea, select, .btn) {
    font-size: 16px; /* prevent iOS auto-zoom on focus */
    min-height: 44px;
  }
}

/* FrameLab review + kanban scroll regions — GPU-compositor hints */
:where(.ps-pipeline-kanban, .h-body, .wiz-content, .fp-scroll) {
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════════════════════
   END PORTAL UNIFY OVERRIDE LAYER
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   WIZARD LAYER COLLAPSE
   The portal shellFrameContainer (shell-body-glass) IS the glass plate in
   iframe mode. In standalone mode, page-shell gets shell-body-glass + 
   cb-wizard-surface. In BOTH cases, the wiz-shell and its inner wrappers
   are structure-only — strip all glass from them entirely.
   ══════════════════════════════════════════════════════════════════════════ */

/* wiz-shell: fully invisible — background, border, shadow, and shimmers */
.page-shell .wiz-shell,
body .wiz-shell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.page-shell .wiz-shell::before,
.page-shell .wiz-shell::after,
body .wiz-shell::before,
body .wiz-shell::after {
  display: none !important;
}

/* bp-panel, wiz-overlay: always transparent structure */
.page-shell .bp-panel,
body .bp-panel {
  background: transparent !important;
}

/* ──────────────────────────────────────────────────────────────────
   APPENDED 2026-05-04 — UNIVERSAL LOGIN CONTAINER
   Sean's lock: every page's outermost content wrapper uses the same
   glass-bubble look as /studio/login. One source of truth.
   Applies to v3 page wrappers + anywhere a primary card lives.
   ────────────────────────────────────────────────────────────────── */
.cb-page-wrap > .glass-card,
.cb-page-wrap > section,
main.page-shell > .glass-card,
.acct-shell, .acct-shell > .glass-card,
.lib-shell,  .lib-shell  > .glass-card,
.req-shell,  .req-shell  > .glass-card, .cb-wizard-surface,
.profile-shell, .profile-shell > .glass-card,
.wiki-shell, .wiki-shell > .glass-card,
.faq-list,
.fl-pv-shell > section,
.dc-page > .dc-card,
.ob-card {
  position: relative;
  background: linear-gradient(180deg,
    rgba(255,255,255,.090) 0%,
    rgba(255,255,255,.060) 15%,
    rgba(255,255,255,.040) 30%,
    rgba(255,255,255,.025) 50%,
    rgba(255,255,255,.015) 72%,
    rgba(255,255,255,.006) 85%,
    transparent           100%);
  border-radius: var(--r-2xl, 24px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 1px 0   rgba(255,255,255,.18),
    0 8px 32px      rgba(0,0,0,.5),
    0 2px 8px       rgba(0,0,0,.35),
    0 0 40px        rgba(15,30,60,.08);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 96%);
          mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 96%);
}
/* Top-edge specular highlight — same as .glass-bubble::after */
.cb-page-wrap > .glass-card::before,
main.page-shell > .glass-card::before,
.acct-shell::before, .lib-shell::before, .req-shell::before, .cb-wizard-surface::before,
.profile-shell::before, .wiki-shell::before, .faq-list::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent,
    rgba(255,255,255,.30) 20%, rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.30) 80%, transparent);
  pointer-events: none;
}
/* ── END UNIVERSAL LOGIN CONTAINER ───────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════
   UNIVERSAL STUDIO PAGE PRIMITIVES — single source of truth for every
   /studio/* page (dashboard, framelab, blueprints, pools, storage,
   operator, etc.). Every page links design-system.css, so every page
   inherits the same hero/toolbar/shell. No per-page hero CSS allowed.
   Sean 2026-05-11 — kill the drift.
   ════════════════════════════════════════════════════════════════════ */

/* Viewport-locked column. Page is the iframe height; hero + toolbar
   stay fixed at top, body fills remaining space, no page scroll.

   UNIVERSAL — every page-shell variant (cb-shell, bp-shell, wk-shell,
   op-shell, ac-shell, pl-shell, ds-shell, pk-shell, sx-shell, st-shell,
   pf-shell, th-shell, fl-shell) inherits the SAME recipe so the hero
   lands at exactly the same x/y on every page. Source of truth = the
   Blueprints page (.bp-shell). All pages = byte-identical layout. */
/* Outer shells that directly contain a .cb-hero — recipe is byte-identical
   to .bp-shell (the locked Blueprints reference). Every page hero now lands
   at the same x/y because the wrapper around it is the same recipe. */
.cb-shell, .bp-shell, .wk-shell, .op-shell,
.pl-shell, .pl-wrap,
.ds-shell, .pk-shell,
.sx-shell, .st-shell, .stg-wrap,
.pf-shell, .th-shell, .fl-shell {
  height: 100vh;
  box-sizing: border-box;
  padding: var(--s3) 20px;
  display: flex; flex-direction: column; gap: var(--s3);
  overflow: hidden;
}
/* Pages that put .cb-hero directly under <body> with no outer shell wrapper
   (profile/client, profile/editor, thread, account) — body itself gets the
   recipe. Opt-in via body.cb-page so we don't accidentally style every body. */
body.cb-page,
body[data-cb-page] {
  height: 100vh; box-sizing: border-box;
  padding: var(--s3) 20px;
  display: flex; flex-direction: column; gap: var(--s3);
  overflow: hidden;
  margin: 0;
}

/* ── Studio hero — BYTE-IDENTICAL TO .bp-hero (Blueprints reference, locked) ──
   No glass container. Padding 0 var(--s2). Vertical spacing comes from the
   shell's padding + gap, NOT the hero. Every page using .cb-hero now lands
   at the same x/y as the Blueprints hero. */
/* Owner-locked recipe 2026-05-15 v2: glass container around the hero,
   visually identical to the sidebar .sb-logo-banner — same height (100px),
   same padding (14px 16px), same material (cb-glass-2), same border,
   same radius, same shadow. The hero's TOP and BOTTOM edges align
   byte-for-byte with the banner. Owner rant: "exactly horizontally even
   level in the same fucking height, same padding laws, rules, regulations
   as the fucking left side top navigation banner." */
/* Sean 2026-05-25: .cb-hero rules retired from this OLD design-system.css.
   The canonical /design-system/design-system.css now owns the hero
   recipe — body .cb-hero { padding: 24px 32px, h1 clamp(26-32px), ... }
   with !important + higher specificity. Leaving these rules here as
   the OLD 52px tight strip created a Dashboard-vs-Operator visual drift
   (Dashboard hero rendered big, Operator hero rendered tight strip).
   Keeping only the bare class hooks below for backward-compat ::before
   removal. */
.cb-hero::before { display: none; }
/* Any right-side tool group pinned to the right edge via auto margin.
   The first such element gets the auto margin; siblings flow after it
   with the hero gap. Covers every hero-r variant used across the studio. */
.cb-hero > .cb-hero-r,
.cb-hero > .cb-hero-toggle,
.cb-hero > .cb-hero-tabs,
.cb-hero > .cb-hero-actions,
.cb-hero > .cb-hero-notif,
.cb-hero > .cb-hero-stat,
.cb-hero > [data-hero-tools] {
  margin-left: auto;
}
/* Title block — works whether the page wrapped it in .cb-hero-l or a bare <div>.
   Sean 2026-05-22 v3: small 2px gap between eyebrow/h1/sub — readable
   stack, not flush butting. Three lines breathe slightly. */
.cb-hero > .cb-hero-l,
.cb-hero > div:not(.cb-hero-toggle):not(.cb-hero-tabs):not(.cb-hero-actions):not(.cb-hero-stat):not(.cb-hero-r):not(.cb-hero-notif):first-child {
  min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
.cb-hero > .cb-hero-r { display: inline-flex; align-items: center; gap: var(--s2); flex-shrink: 0; }

/* Sean 2026-05-25: .cb-hero-eyebrow / .cb-hero-h1 / .cb-hero-sub
   recipes retired from this OLD file. The canonical
   /design-system/design-system.css now owns these via:
     body .cb-hero-h1     { font: 500 var(--t-3xl)/1.1 ... !important }
     body .cb-hero-eyebrow{ font: 500 var(--t-eyebrow)/1 ... !important }
     body .cb-hero-sub    { font: 400 var(--t-md)/1.55 ... !important }
   Kept only the h1-soft hide flag for backward compat. */
.cb-hero-h1-soft { display: none !important; }

/* ── Hero stat-row scaffolding (Sean 2026-05-22, #55) ──
   Drop a `<div class="cb-hero-stats">` directly under any `.cb-hero` to
   show a row of 4-6 compact KPI pills (sales goal, leads near trial end,
   etc). Each child is a `.cb-stat-pill` carrying a value + label + sub.
   Count-up animations done per-page via JS that targets `[data-count]`. */
.cb-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s2);
  margin-top: var(--s2);
}
.cb-stat-pill {
  position: relative;
  background: var(--cb-glass-2-bg, linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 50%, rgba(255,255,255,.045) 100%));
  border: 1px solid rgba(255,255,255,.08);
  border-top-color: rgba(255,255,255,.16);
  border-radius: var(--r-md, 10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  padding: 10px 14px 8px;
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.16,1,.3,1), background 140ms;
}
.cb-stat-pill:hover { transform: translateY(-1px); background: rgba(255,255,255,.04); }
.cb-stat-pill::before {
  content:''; position:absolute; top:0; left:18%; right:18%; height:1px;
  background: linear-gradient(90deg, transparent, var(--stat-tint, rgba(94,184,255,.5)), transparent);
  opacity: .7;
}
.cb-stat-pill-lbl {
  font: 500 9px/1 'SF Pro Text', system-ui;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.cb-stat-pill-val {
  font: 600 18px/1.05 'SF Pro Display', system-ui;
  letter-spacing: -.02em; color: #fff;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 3px;
}
.cb-stat-pill-val .pre  { font-size: 12px; color: rgba(255,255,255,.55); font-weight: 500; }
.cb-stat-pill-val .post { font-size: 11px; color: rgba(255,255,255,.45); font-weight: 500; margin-left: 2px; }
.cb-stat-pill-sub {
  font: 400 10px/1.2 'SF Pro Text', system-ui;
  color: rgba(255,255,255,.42);
}
.cb-stat-pill[data-tint="green"]  { --stat-tint: rgba(74,222,128,.5); }
.cb-stat-pill[data-tint="red"]    { --stat-tint: rgba(248,113,113,.5); }
.cb-stat-pill[data-tint="cyan"]   { --stat-tint: rgba(34,211,238,.5); }
.cb-stat-pill[data-tint="purple"] { --stat-tint: rgba(167,139,250,.5); }
.cb-stat-pill[data-tint="gold"]   { --stat-tint: rgba(245,158,11,.5); }

/* Right-side tabs pill (the Home · My Library · Content Bug Styles · Builder pattern). */
.cb-hero-tabs {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: var(--r-pill);
  background: var(--cb-glass-2-bg, rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.cb-hero-tabs button, .cb-hero-tabs a {
  appearance: none; background: transparent; color: rgba(255,255,255,.65);
  border: 0; padding: 9px 16px; border-radius: var(--r-pill); cursor: pointer;
  font: 500 12.5px/1 'SF Pro Display', system-ui; letter-spacing: .01em;
  text-decoration: none;
  transition: color 120ms, background 120ms;
}
.cb-hero-tabs button:hover, .cb-hero-tabs a:hover { color: #fff; background: rgba(255,255,255,.06); }
.cb-hero-tabs button.active, .cb-hero-tabs a.active {
  color: #fff; background: rgba(41,151,255,.18);
  border: 1px solid rgba(41,151,255,.35); padding: 8px 15px;
}

/* Notification pill — KILLED 2026-05-15 per owner.
   Both the in-hero pill and any under-hero ticker bars across the studio
   are hidden globally. Do NOT re-introduce them without explicit ask. */
.cb-hero-notif,
.cb-hero-notif-dot,
.cb-hero-notif-title,
.cb-hero-notif-msg,
.pl-ticker,
.op-ticker,
.stg-ticker,
[id="ticker"] {
  display: none !important;
}

/* Sean 2026-05-22: pipeline toggle is the CENTER ISLAND. Float it dead-
   center over the hero so title-block stays on the left edge and toggle
   floats independently. Drop the right-justified pattern entirely. */
.cb-hero-toggle {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; padding: 4px; gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  z-index: 4;
}
.cb-hero-toggle button {
  appearance: none; background: transparent; color: rgba(255,255,255,.65);
  border: 0; padding: 9px 16px; border-radius: var(--r-pill); cursor: pointer;
  font: 500 12.5px/1 'SF Pro Text', system-ui; letter-spacing: .01em;
  transition: color 120ms, background 120ms;
}
.cb-hero-toggle button:hover { color: #fff; background: rgba(255,255,255,.06); }
.cb-hero-toggle button.active {
  color: #fff; background: rgba(41,151,255,.18);
  border: 1px solid rgba(41,151,255,.35); padding: 8px 15px;
}
.cb-hero-actions { display: inline-flex; gap: var(--s1); align-items: center; }
/* .cb-hero-stat / cb-hero-h1-soft kept callable for legacy code, but the
   stat block is being phased out per owner direction 2026-05-15. */

/* Toolbar row — sits UNDER the hero. Category pills, filters, search. */
.cb-toolbar {
  display: flex; align-items: center; gap: var(--s2);
  height: 52px; padding: 0 var(--s2);
  flex-shrink: 0;
}

/* Pill-style tab/category toggle (matches the operator pattern). */
.cb-tabs {
  display: inline-flex; padding: var(--s-micro-2); gap: var(--s-micro-1);
  background: var(--cb-glass-3-bg);
  border: 1px solid rgba(255,255,255,.06); border-top-color: rgba(255,255,255,.14);
  border-radius: var(--r-pill); box-shadow: var(--cb-glass-3-shadow);
}
.cb-tabs button {
  appearance: none; background: transparent; color: rgba(255,255,255,.62);
  border: 0; padding: 7px 16px; border-radius: var(--r-pill); cursor: pointer;
  font: 500 var(--text-sm)/1 'SF Pro Text', system-ui; letter-spacing: .01em;
  transition: transform 80ms var(--ease-sharp), color 100ms;
}
.cb-tabs button:hover { color: #fff; transform: scale(1.02); }
.cb-tabs button.active {
  background: rgba(41,151,255,.18); color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(41,151,255,.35);
}

/* Body region — flex-1, min-height:0 so children that set overflow:auto
   can actually scroll inside it. */
.cb-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Sub-760 collapse helper for ratio-based 3-pane layouts. */
@media (max-width: 760px) {
  .cb-shell { padding: var(--s2) var(--s3); }
}
/* ── END UNIVERSAL STUDIO PAGE PRIMITIVES ───────────────────────── */


/* ════════════════════════════════════════════════════════════════════
   CANONICAL PROJECT CARD — single source of truth for every project
   card across the studio (FrameLab kanban, request-modal preview, etc.).
   Visual reference: the "test" project card the owner blessed 2026-05-11.
   ════════════════════════════════════════════════════════════════════ */

.card-project {
  position: relative;
  background: var(--cb-glass-2-bg);
  border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.18);
  border-radius: var(--r-lg);
  box-shadow: var(--cb-glass-2-shadow);
  padding: var(--card-md);
  display: flex; flex-direction: column;
  gap: var(--s2);
  min-height: 180px;
  overflow: hidden;
  transition: transform 150ms var(--ease-smooth), box-shadow 150ms var(--ease-smooth);
}
.card-project::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30) 50%, transparent);
  pointer-events: none;
}
.card-project:hover { transform: translateY(-2px); box-shadow: var(--sh-3), 0 0 18px rgba(41,151,255,.08); }

.card-project__top { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.card-project__title {
  font: 500 18px/1.15 'SF Pro Display', system-ui;
  color: #fff; letter-spacing: -.01em;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.card-project__status-row { display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap; }
.card-project__spacer { flex: 1; min-height: var(--s2); }

.card-project__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-top: auto;
}
.card-project__pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.card-project__time {
  padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  font: 500 11px/1 'SF Pro Text', system-ui; color: rgba(255,255,255,.6);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.card-project__time svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* Dashed-? placeholder avatar (anonymous / unassigned editor). */
.avatar-dashed {
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent;
  border: 1.5px dashed rgba(255,255,255,.20);
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 14px/1 'SF Pro Display', system-ui;
  color: rgba(255,255,255,.45);
  flex-shrink: 0;
}
.avatar-dashed--xs { width: 24px; height: 24px; font-size: 11px; }
.avatar-dashed--s  { width: 32px; height: 32px; font-size: 12px; }
.avatar-dashed--m  { width: 38px; height: 38px; font-size: 14px; }
.avatar-dashed--l  { width: 48px; height: 48px; font-size: 18px; }

/* Solid initials avatar (counterpart to dashed). */
.avatar-solid {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #6cb2ff, #b88fff);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 14px/1 'SF Pro Display', system-ui;
  color: #fff; flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(41,151,255,.18);
  overflow: hidden;
}
.avatar-solid img { width: 100%; height: 100%; object-fit: cover; }
.avatar-solid--xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-solid--s  { width: 32px; height: 32px; font-size: 12px; }
.avatar-solid--m  { width: 38px; height: 38px; font-size: 14px; }
.avatar-solid--l  { width: 48px; height: 48px; font-size: 16px; }

/* Universal pill — used inside any card. */
.cb-pill {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  font: 500 11px/1 'SF Pro Text', system-ui;
  letter-spacing: .04em;
}
.cb-pill--muted    { color: rgba(255,255,255,.4); background: rgba(255,255,255,.02); }
.cb-pill--queue    { background: rgba(41,151,255,.14);  color: #80b8ff; border-color: rgba(41,151,255,.34); }
.cb-pill--active   { background: rgba(126,203,161,.14); color: #7ecba1; border-color: rgba(126,203,161,.34); }
.cb-pill--review   { background: rgba(245,166,35,.14);  color: #f5a623; border-color: rgba(245,166,35,.34); }
.cb-pill--revisions{ background: rgba(255,159,10,.16);  color: #ff9f0a; border-color: rgba(255,159,10,.42); letter-spacing: .10em; font-weight: 600; }
.cb-pill--approved { background: rgba(126,203,161,.18); color: #7ecba1; border-color: rgba(126,203,161,.42); letter-spacing: .10em; font-weight: 600; }
.cb-pill--cancelled{ background: rgba(192,57,43,.18);   color: #e2685e; border-color: rgba(192,57,43,.42); }
/* ── END CANONICAL PROJECT CARD ─────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════
   PAGE PRIMITIVES — Claude Design final-handoff. Body content patterns
   used by Dashboard / Operator / Pools / Storage / Socials / Post Kits.
   Heros use .cb-hero (canon). These are the BODY building blocks.
   ════════════════════════════════════════════════════════════════════ */

/* Scrollable body region inside the locked shell */
.page-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s3);
  padding-right: var(--s1);
  margin-right: calc(-1 * var(--s1));
}
.page-scroll::-webkit-scrollbar { width: 6px; }
.page-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }

/* KPI strip — 4-column grid of glass-2 tiles */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.kpi {
  padding: var(--card-md);
  background: var(--cb-glass-2-bg);
  border: var(--cb-glass-2-border); border-top-color: var(--cb-glass-2-border-top);
  border-radius: var(--r-lg);
  box-shadow: var(--cb-glass-2-shadow);
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
}
.kpi::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30) 50%, transparent); }
.kpi .eb    { font: 500 9px/1 'SF Pro Text'; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.kpi .val   { font: 500 28px/1 'SF Pro Display'; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.kpi .delta { font: 500 11px/1 'SF Pro Text'; color: var(--green); }
.kpi .delta.down { color: var(--red); }

/* Section title (used above lists) */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
.sec-h h2  { font: 500 14px/1 'SF Pro Display'; letter-spacing: -.01em; margin: 0; color: rgba(255,255,255,.92); }
.sec-h .sub{ font: 500 10px/1 'SF Pro Text'; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); }

/* Pipeline list rows (dashboard Today's pipeline, operator live pipeline) */
.pipe-list {
  background: var(--cb-glass-2-bg);
  border: var(--cb-glass-2-border); border-top-color: var(--cb-glass-2-border-top);
  border-radius: var(--r-lg);
  box-shadow: var(--cb-glass-2-shadow);
  overflow: hidden; position: relative;
}
.pipe-list::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30) 50%, transparent); }
.pipe-row {
  display: grid; grid-template-columns: 28px 1fr auto auto auto 90px 80px;
  align-items: center; gap: var(--s2);
  padding: 12px var(--s3);
  border-top: 1px solid rgba(255,255,255,.04);
  font: 400 13px/1 'SF Pro Text';
}
.pipe-row:first-child { border-top: 0; }
.pipe-row:hover       { background: rgba(255,255,255,.02); }
.pipe-row .avatar     { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font: 500 11px/1 'SF Pro Display'; color: #fff; }
.pipe-row .name       { color: #fff; font-weight: 500; }
.pipe-row .name .dim  { color: rgba(255,255,255,.5); font-weight: 400; }
.pipe-row .pill       { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-sm); font: 500 10.5px/1 'SF Pro Text'; letter-spacing: .04em; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
.pipe-row .pill.blue  { background: rgba(41,151,255,.12);  color: var(--blue);   border-color: rgba(41,151,255,.3); }
.pipe-row .pill.green { background: rgba(126,203,161,.12); color: var(--green);  border-color: rgba(126,203,161,.3); }
.pipe-row .pill.gold  { background: rgba(245,166,35,.13);  color: var(--gold);   border-color: rgba(245,166,35,.3); }
.pipe-row .pill.purple{ background: rgba(191,90,242,.12);  color: var(--purple); border-color: rgba(191,90,242,.3); }
.pipe-row .timer      { font: 500 11px/1 'SF Pro Text'; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }

/* Pool grid (operator/dashboard mini cards) */
.pool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.pool-card {
  background: var(--cb-glass-2-bg);
  border: var(--cb-glass-2-border); border-top-color: var(--cb-glass-2-border-top);
  border-radius: var(--r-lg);
  box-shadow: var(--cb-glass-2-shadow);
  padding: var(--card-md);
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s2);
  align-items: center; position: relative;
}
.pool-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30) 50%, transparent); }
.pool-card .av   { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 500 14px/1 'SF Pro Display'; color: #fff; }
.pool-card .nm   { font: 500 14px/1.1 'SF Pro Display'; color: #fff; }
.pool-card .role { font: 500 9px/1 'SF Pro Text'; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 4px; }
.pool-card .meta { display: flex; gap: var(--s2); margin-top: 8px; }
.pool-card .meta span { font: 500 11px/1 'SF Pro Text'; color: rgba(255,255,255,.55); }
.pool-card .meta b    { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Kit grid (post kits) */
.kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.kit-card {
  background: var(--cb-glass-2-bg);
  border: var(--cb-glass-2-border); border-top-color: var(--cb-glass-2-border-top);
  border-radius: var(--r-lg);
  box-shadow: var(--cb-glass-2-shadow);
  overflow: hidden; position: relative;
}
.kit-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30) 50%, transparent); z-index: 1; }
.kit-thumb {
  height: 132px; position: relative;
  background: linear-gradient(135deg, #1a2540 0%, #0a1428 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.kit-thumb::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(41,151,255,.25), transparent 60%); }
.kit-thumb .glyph {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(41,151,255,.5), rgba(31,140,240,.2));
  border: 1px solid rgba(41,151,255,.4);
  display: flex; align-items: center; justify-content: center;
  font: 500 22px/1 'SF Pro Display'; color: #fff; z-index: 1;
}
.kit-body { padding: var(--s2); }
.kit-name { font: 500 14px/1.2 'SF Pro Display'; color: #fff; margin: 0; }
.kit-sub  { font: 500 10px/1 'SF Pro Text'; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 6px; }

/* Storage usage bar */
.stg-usage {
  background: var(--cb-glass-2-bg);
  border: var(--cb-glass-2-border); border-top-color: var(--cb-glass-2-border-top);
  border-radius: var(--r-lg);
  box-shadow: var(--cb-glass-2-shadow);
  padding: var(--card-lg); position: relative;
}
.stg-usage::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30) 50%, transparent); }
.stg-usage h3 { font: 500 12px/1 'SF Pro Text'; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin: 0 0 var(--s2); }
.stg-bar { height: 8px; background: rgba(255,255,255,.06); border-radius: var(--r-pill); overflow: hidden; position: relative; }
.stg-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--blue), #4dabff);
  border-radius: var(--r-pill); box-shadow: 0 0 12px rgba(41,151,255,.5);
}
.stg-bar-stats { display: flex; justify-content: space-between; margin-top: var(--s1); font: 500 11px/1 'SF Pro Text'; color: rgba(255,255,255,.55); }
.stg-bar-stats b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Folder grid (storage page) */
.folder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.folder {
  background: var(--cb-glass-2-bg);
  border: var(--cb-glass-2-border); border-top-color: var(--cb-glass-2-border-top);
  border-radius: var(--r-lg);
  box-shadow: var(--cb-glass-2-shadow);
  padding: var(--card-md);
  position: relative; cursor: pointer;
  transition: transform 120ms var(--ease-smooth);
}
.folder:hover { transform: translateY(-2px); }
.folder::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30) 50%, transparent); }
.folder svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.5; opacity: .8; }
.folder .nm { font: 500 13px/1.1 'SF Pro Display'; color: #fff; margin: var(--s2) 0 4px; }
.folder .sz { font: 500 11px/1 'SF Pro Text'; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }

/* Socials grid (9:16 thumbnails) */
.soc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.soc-card {
  background: var(--cb-glass-2-bg);
  border: var(--cb-glass-2-border); border-top-color: var(--cb-glass-2-border-top);
  border-radius: var(--r-lg);
  box-shadow: var(--cb-glass-2-shadow);
  overflow: hidden; position: relative;
}
.soc-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30) 50%, transparent); z-index: 1; }
.soc-thumb {
  aspect-ratio: 9/16;
  background: linear-gradient(160deg, #0d1a30, #050a18);
  position: relative; display: flex; align-items: flex-end; padding: var(--s2);
}
.soc-thumb::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(191,90,242,.20), transparent 50%),
              radial-gradient(circle at 20% 70%, rgba(41,151,255,.18), transparent 50%); }
.soc-thumb .platform {
  z-index: 1; padding: 3px 8px; border-radius: var(--r-sm);
  font: 500 9px/1 'SF Pro Text'; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.15);
}
.soc-meta { padding: var(--s2); display: flex; flex-direction: column; gap: 4px; }
.soc-meta .ttl  { font: 500 12px/1.2 'SF Pro Display'; color: #fff; }
.soc-meta .when { font: 500 10px/1 'SF Pro Text'; color: rgba(255,255,255,.5); letter-spacing: .04em; }

/* pl-status-pill — centralized here (was inline in pools.html) */
.pl-status-pill { display: inline-flex; align-items: center; gap: 5px; font: 500 9px/1 'SF Pro Text'; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r-pill); }
.pl-status-pill[data-color="orange"] { background: rgba(255,159,10,.15);  color: var(--gold);  border: 1px solid rgba(255,159,10,.35); }
.pl-status-pill[data-color="green"]  { background: rgba(126,203,161,.15); color: var(--green); border: 1px solid rgba(126,203,161,.35); }
.pl-status-pill[data-color="blue"]   { background: rgba(41,151,255,.15);  color: var(--blue);  border: 1px solid rgba(41,151,255,.35); }
.pl-status-pill[data-color="red"]    { background: rgba(192,57,43,.15);   color: var(--red);   border: 1px solid rgba(192,57,43,.35); }
.pl-status-pill[data-color="gold"]   { background: rgba(245,166,35,.15);  color: var(--gold);  border: 1px solid rgba(245,166,35,.35); }
.pl-status-pill[data-color="gray"]   { background: rgba(255,255,255,.06); color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.12); }

/* Live dot indicator (used inside .sec-h .sub) */
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); margin-right: 6px; animation: live-pulse 1.6s ease-in-out infinite; vertical-align: middle; }
@keyframes live-pulse { 0%,100% { opacity:.7 } 50% { opacity:1 } }
/* ── END PAGE PRIMITIVES ────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   GLASS COMPOSITOR PIN — fixes the "text on glass looks blurry" stack.

   Every container with backdrop-filter creates a stacking context that
   composites its children through the blur pass. On retina, that
   produces sub-pixel-shifted glyphs that read soft. translateZ(0) pins
   the layer to the GPU compositor without changing visuals, so text
   on top renders to its own surface and stays crisp.

   Applied studio-wide on canonical glass primitives + every page header
   so the body of the studio reads sharp regardless of which screen
   you're on. Cheap — the GPU was going to composite these layers
   anyway; we just guarantee text isn't shoved through the blur path.
   ═══════════════════════════════════════════════════════════════════ */
.glass-card, .stat-card, .section-card, .cb-hero,
.gl-1, .gl-2, .gl-3, .gl-spec,
.sb-logo-banner, .app-dock-inner,
.flv-head, .flv-bar, .flv-rail, .flv-ctxmenu, .flv-modal {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
/* Body-level smoothing baseline — every page inherits crisp text. */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
}