/* ═══════════════════════════════════════════════════════════════
   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 */
*{backdrop-filter:none!important;-webkit-backdrop-filter:none!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:linear-gradient(180deg,#032a4b 0%,#032848 10%,#022240 20%,#021c36 30%,#02172e 40%,#011226 50%,#010d1e 60%,#010916 70%,#00050e 80%,#000308 90%,#000001 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. */
  --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,.07) 60%,rgba(255,255,255,.09) 75%,rgba(255,255,255,.11) 88%,rgba(255,255,255,.14) 100%);
  --cb-glass-1-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.2),0 8px 32px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --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,.08),0 2px 12px rgba(0,0,0,.25);
  --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),0 1px 6px rgba(0,0,0,.18);

  /* ── 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 ── */
  --sh:0 4px 16px rgba(0,0,0,.45),0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(0,0,0,.2);
  --sh-btn:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(0,0,0,.25);

  /* ── 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 ── */
  --sh-1:0 2px 6px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.2);
  --sh-2:0 4px 16px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);
  --sh-3:0 8px 32px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.10);
  --sh-4:0 16px 48px rgba(0,0,0,.55),0 6px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);
  --sh-5:0 24px 80px rgba(0,0,0,.65),0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14);

  /* ── 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';
  --font-display: 'SF Pro Display';
  --mono:         'SF Mono';
}

/* ── 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 — V1 Abyss + Edge Grid ═══
   Used across ALL Content Bug surfaces: portal, website, wizards, emails.
   Fixed attachment = single paint, zero repaints on scroll.
   Grid uses CSS mask (GPU-composited, zero blur, zero CPU). */
/* --cb-bg lives ONLY on the portal's outermost shell + on any page opened
   standalone (which marks itself .bg-dark). Iframe-loaded pages never get
   the bg — their html/body/.page-shell stay transparent so the portal's
   Layer-1 glass shows through. Sean 2026-04-16. */
.bg-dark,.shell{
  background:var(--cb-bg) !important;
  background-attachment:fixed;
}
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}

/* 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-glass-2-shadow);position:relative;overflow:hidden;
  transition:transform 10ms var(--ease),box-shadow 10ms var(--ease);}
.glass-card:hover{transform:translateY(-2px);box-shadow:var(--sh-3),0 8px 32px rgba(41,151,255,.08),0 0 20px rgba(15,30,60,.12)}
.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);
  backdrop-filter:none;-webkit-backdrop-filter:none}

/* ═══════════════════════════════
   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);backdrop-filter:none;-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 ── */
.wiz-success{text-align:center;padding:var(--s5) 0}
.wiz-success-check{width:56px;height:56px;border-radius:50%;margin:0 auto var(--s3);
  background:linear-gradient(135deg,var(--green),#4ade80);
  display:flex;align-items:center;justify-content:center;
  animation:selectPop 25ms var(--ease-spring)}
.wiz-success-check svg{width:28px;height:28px;stroke:#fff;stroke-width:3}
.wiz-success h2{font:500 var(--text-2xl)/var(--lh-tight) var(--font-display);color:var(--txt);margin:0 0 var(--s1)}
.wiz-success p{font:400 var(--text-md)/var(--lh-normal) var(--font);color:var(--txt3);margin: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: elegant, premium — thinner/lighter icons, labels faded default, full white on hover/active (Sean 2026-04-15) ── */
.app-dock-inner:not(.collapsed) .sb-nav-item{
  color:rgba(255,255,255,.62)!important;
  font:500 14px/1.2 var(--cb-font-text)!important;
  letter-spacing:-.01em!important;
  -webkit-font-smoothing:subpixel-antialiased!important;-moz-osx-font-smoothing:auto!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:-14px;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:36px!important;height:36px!important;
  opacity:.82!important;flex-shrink:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:none!important;border:none!important;box-shadow:none!important
}
.app-dock-inner.collapsed .sb-nav-tile svg{
  width:26px!important;height:26px!important;stroke-width:1.6!important;opacity:1!important
}
.app-dock-inner.collapsed .sb-nav-tile img{
  width:26px!important;height:26px!important;object-fit:contain!important;opacity:1!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 loading shimmer */
@keyframes skeletonShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:skeletonShimmer 1.6s ease infinite;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(-20px) rotate(0deg);opacity:1}100%{transform:translateY(120px) 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);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.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;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  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);backdrop-filter:none;-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:220px 1fr;grid-template-rows:1fr;
  height:100vh;overflow:hidden;
  background:var(--cb-bg);
  background-attachment:fixed;
  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. */
.shell-body-glass{flex:1;min-height:0;border-radius:20px;overflow:hidden;position:relative;z-index:1;
  background:transparent}
.shell-body-glass::before{content:'';position:absolute;inset:0;border-radius:20px;
  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}
.shell-body-glass > iframe,.shell-body-glass > .shell-frame{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);border:none;border-radius:14px;background:transparent;z-index:1}

/* 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);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  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('/portal/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('/portal/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('/portal/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('/portal/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('/portal/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('/portal/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);backdrop-filter:none}
  .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);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

.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 */

/* ═══ 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:linear-gradient(135deg,#162033 0%,#0c1320 100%)}

/* 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(--card-sm);
  flex:1;min-height:0;
  overflow-x:auto;
  padding-bottom:var(--s1);
  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(--card-sm))) / 5);min-width:calc((100% - (4 * var(--card-sm))) / 5);max-width:calc((100% - (4 * var(--card-sm))) / 5);
  display:flex;flex-direction:column;gap:var(--s1);
  contain:layout style;
  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);
  padding:10px;
  box-shadow:var(--cb-glass-2-shadow);
}

.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. */
.pool-col{flex:0 0 248px;min-width:248px}
.pool-col-queue{flex:0 0 260px}
.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);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  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;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  /* 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);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  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:all 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);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.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:relative;width:100%;height:60px;overflow:hidden}

/* ═══════════════════════════════════════════════════════════════
   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 with entrance animation */
.login-step{display:none}
.login-step.active{display:block;animation:stepIn .3s var(--ease) both}

/* 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)
   ═══════════════════════════════════════════════════════════════ */
.oa-island{position:fixed;right:var(--s1);top:50%;transform:translateY(-50%);z-index:98;
  display:none;flex-direction:column;align-items:center;gap:var(--s0);
  padding:var(--s1) var(--s-micro-4);border-radius:var(--r-island);
  background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);
  box-shadow:0 4px 16px rgba(0,0,0,.3);transition:opacity 10ms,transform 10ms;}
.oa-island.visible{display:flex}
.oa-step.locked{opacity:.3;cursor:default;pointer-events:none}
.oa-step.current .oa-dot{background:var(--blue);border-color:var(--blue);color:#fff}
.oa-step.done .oa-dot{background:var(--green);border-color:var(--green);color:#fff}

/* ═══════════════════════════════════════════════════════════════
   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 */

/* ═══ Sidebar Notification Popup — fills the left nav column, opens upward
   from the profile/bell footer. Sean spec 2026-04-16. ═══ */
.sb-notif-popup{
  position:fixed;bottom:72px;left:18px;
  width:224px;max-height:calc(100vh - 140px);z-index:9000;
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:16px;
  background:var(--cb-glass-2-bg);
  border:var(--cb-glass-2-border);border-top-color:var(--cb-glass-2-border-top);
  box-shadow:var(--cb-glass-2-shadow),0 16px 48px rgba(0,0,0,.55);
  transform:translateY(8px) scale(.96);opacity:0;pointer-events:none;
  transition:transform 180ms cubic-bezier(.16,1,.3,1),opacity 180ms;
  transform-origin:bottom left}
.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);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.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);backdrop-filter:none;-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:linear-gradient(135deg,#162033 0%,#0c1320 100%);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);
  backdrop-filter:none;-webkit-backdrop-filter:none;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;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  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);backdrop-filter:none}
.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);
}

/* ── 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);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  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);backdrop-filter:none;-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);backdrop-filter:none;-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);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  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);backdrop-filter:none;-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}}

/* Toast stack — fixed bottom-left, premium glass */
.toast-stack{position:fixed;bottom:20px;left:20px;z-index:9001;display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none;width:340px;max-width:calc(100vw - 40px)}
.toast-stack .shell-toast{pointer-events:auto;padding:12px 16px;border-radius:14px;
  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);
  box-shadow:0 12px 32px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.22);backdrop-filter:none;
  font:500 13px/1.35 var(--font-display);color:#fff;
  animation:toastIn 240ms cubic-bezier(.16,1,.3,1);max-width:100%;}
.toast-stack .shell-toast.toast-out{animation:toastOut 200ms cubic-bezier(.4,0,1,1) forwards}
@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 — now column 2 (after DM strip) */
.app-dock{grid-column:1;grid-row:1;display:flex;align-items:stretch;
  padding:10px 0 10px 10px;z-index:120}

/* Inner glass pill — dissolving glass-bubble style (matches login container) */
.app-dock-inner{display:flex;flex-direction:column;align-items:stretch;
  width:240px;padding:8px;gap:0;
  transition:transform 220ms cubic-bezier(.16,1,.3,1);
  background:transparent;
  border-radius:20px;
  overflow:hidden;position:relative;}

/* Layer-1 glass on the left nav — matches .shell-body-glass exactly. */
.app-dock-inner::before{content:'';position:absolute;inset:0;border-radius:20px;
  background:var(--cb-glass-1-bg);
  box-shadow:var(--cb-glass-1-shadow);
  pointer-events:none;z-index:0}

/* Bottom edge light sweep — anchors the denser base */
.app-dock-inner::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:1}

/* 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;backdrop-filter:none;-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:all 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:500 var(--text-sm)/1 var(--mono);background:rgba(41,151,255,.10);
  color:var(--blue);padding:2px 6px;border-radius:var(--r-xs)}
.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:all 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:all 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:all 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:all 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:all .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:all .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:all 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:all 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 */
  .app-dock-inner { width: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 }
  .app-dock-inner { width: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; 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:all 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)}

/* ── Notification bar ── */
.notification{position:fixed;top:16px;left:50%;
  transform:translateX(-50%) translateY(-60px);background:rgba(15,19,32,.45);
  border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);padding:12px 20px;
  font-size:14px;color:var(--txt);z-index:200;transition:10ms;
  display:flex;align-items:center;gap:8px}
.notification.show{transform:translateX(-50%) translateY(0)}
.notification.error{border-color:rgba(255,59,48,.4)}
.notification svg{width:18px;height:18px;flex-shrink:0}

@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:all 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:all 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:all .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:all 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:subpixel-antialiased!important;-moz-osx-font-smoothing:auto!important;
}
.ws-page .cb-header-bar .cb-logo{
  display:none!important;
}
.ws-page .cb-portal-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:all .08s var(--ease)!important;
}
.ws-page .cb-portal-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;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!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:subpixel-antialiased!important;-moz-osx-font-smoothing:auto!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:all .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:subpixel-antialiased;
  -moz-osx-font-smoothing:auto;
}


/* ── 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:subpixel-antialiased;
  -moz-osx-font-smoothing:auto;
  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);backdrop-filter:none;-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);
  backdrop-filter:none;-webkit-backdrop-filter:none}
#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);backdrop-filter:none}
#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-portal-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:all 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 */
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* 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);backdrop-filter:none;
  -webkit-backdrop-filter:none;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,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);
  backdrop-filter:none;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);
  backdrop-filter:none;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:140px;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%;
  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}
.bp-music-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s2)}
.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}
.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}
.bp-place-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s1);justify-items:center}
.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}
.bp-place-card:hover{transform:translateY(-2px)}
.bp-place-icon{width:100%;aspect-ratio:3/4;border-radius:var(--r-sm);background:rgba(255,255,255,.04);margin-bottom:var(--s0);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);backdrop-filter:none;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);backdrop-filter:none}
.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);backdrop-filter:none;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:all .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}
.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:all .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:all .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 /portal/request.html.
   ══════════════════════════════════════════════════════════════════ */

/* --- 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;
  /* EXACT contentbug.io website body bg — viewport-sized fixed gradient matches the marketing site 1:1. Sean 2026-04-20. */
  background-color:#000001;
  background-image:var(--cb-glass-1-bg),var(--cb-bg);
  background-attachment:fixed,fixed;
  background-repeat:no-repeat,no-repeat;
  background-size: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);backdrop-filter:none;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 */
*{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
*:not(svg):not(svg *){filter:none}
[style*="blur("]{filter:none!important;backdrop-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(126,203,161,.12);border-color:var(--green,#7ecba1);color:var(--green,#7ecba1)}
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:var(--green,#7ecba1);color:#0b0b10}
body .ob-btn-primary:hover{background:#6bd195}
body .ob-progress-fill{background:var(--green,#7ecba1)}
body .ob-toggle.on .ob-toggle-dot{background:var(--green,#7ecba1)}
body .ob-input:focus,body .ob-select:focus,body .ob-textarea:focus{outline:none;border-color:var(--green,#7ecba1)}
body .ob-spinner{border-top-color:var(--green,#7ecba1)}
body .ob-caption-hint{color:var(--green,#7ecba1)}

/* ── 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:188px !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)}
}