/* ═══════════════════════════════════════════════════════════════
   CONTENTBUG DESIGN SYSTEM — SINGLE FILE, ZERO DEPENDENCIES
   Version: standalone · All tokens · All components · All assets via CDN
   Sync verified: 2026-03-14
   Drop this file anywhere. It works.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   CONTENT BUG DESIGN SYSTEM — design-system.css
   Single source of truth for tokens, components, and animations.
   Import this file in every ContentBug HTML page.
   ═══════════════════════════════════════════════════════════════ */

/* ── FONTS (local — /fonts/) ── */
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:400;font-display:swap;src:url("https://ds.contentbug.io/fonts/sf-pro-display_regular.woff2") format("woff2")}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:500;font-display:swap;src:url("https://ds.contentbug.io/fonts/sf-pro-display_medium.woff2") format("woff2")}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:600;font-display:swap;src:url("https://ds.contentbug.io/fonts/sf-pro-display_semibold.woff2") format("woff2")}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:700;font-display:swap;src:url("https://ds.contentbug.io/fonts/sf-pro-display_bold.woff2") format("woff2")}
@font-face{font-family:"SF Pro Text";font-style:normal;font-weight:400;font-display:swap;src:url("https://ds.contentbug.io/fonts/sf-pro-text_regular.woff2") format("woff2")}
@font-face{font-family:"SF Pro Text";font-style:normal;font-weight:600;font-display:swap;src:url("https://ds.contentbug.io/fonts/sf-pro-text_semibold.woff2") format("woff2")}

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

/* ── TOKENS ── */
:root{
  /* Backgrounds */
  --bg:#050508;--bg-el:#111214;--bg-sf:#161618;
  /* Blues */
  --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;
  /* Accents */
  --green:#7ecba1;--green-dk:#5faa82;--red:#c0392b;--red-lt:#d44637;
  --orange:#ff9f0a;--purple:#bf5af2;--gold:#f5a623;--gold-lt:#ffdf33;--cyan:#5ac8fa;
  /* Text */
  --txt:#f5f5f7;--txt1:#ffffff;--txt2:#a1a1a6;--txt3:#6e6e73;--txt4:#48484a;
  /* Glass */
  --glass:linear-gradient(135deg,rgba(20,20,24,.92) 0%,rgba(12,12,16,.95) 100%);
  --glass-flat:rgba(14,14,18,.92);--glass-b:1px solid rgba(255,255,255,.1);
  --glass-bt:rgba(255,255,255,.18);
  --glass-btn:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 100%);
  /* Shadows */
  --sh:0 2px 4px rgba(0,0,0,.3),0 8px 32px rgba(0,0,0,.4),inset 0 .5px 0 rgba(255,255,255,.1);
  --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,.15),inset 0 -1px 0 rgba(0,0,0,.25);
  /* Spacing */
  --s0:4px;--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;--s12:96px;--s16:128px;
  /* Radius */
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:18px;--r-2xl:24px;--radius-pill:100px;
  /* Easing */
  --ease:cubic-bezier(.22,1,.36,1);--ease-q:cubic-bezier(.25,1,.5,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  /* Fonts */
  --font-display:'SF Pro Display',-apple-system,BlinkMacSystemFont,system-ui,'Helvetica Neue',Arial,sans-serif;
  --font:'SF Pro Text',-apple-system,BlinkMacSystemFont,system-ui,'Helvetica Neue',Arial,sans-serif;
  --mono:'SF Mono',ui-monospace,'Fira Code',monospace;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ═══════════════════════════════════════════════
   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: Black void — neutral white glow, pure black gradient */
.bg-dark{
  background:
    radial-gradient(ellipse 130% 45% at 50% -8%,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 35%,transparent 60%),
    linear-gradient(180deg,#111 0%,#0a0a0a 25%,#050505 55%,#000 100%)}

/* BG-LIGHT: Pure white, zero tint, subtle neutral gray gradient */
.bg-light{
  background:linear-gradient(180deg,#ffffff 0%,#f7f7f7 40%,#f0f0f0 70%,#e8e8e8 100%);
  color:#1d1d1f}

/* BG-NAVY: Dark blue/black — blue glow only, zero purple */
.bg-navy{
  background:
    radial-gradient(ellipse 130% 45% at 50% -8%,rgba(41,151,255,.08) 0%,rgba(41,151,255,.025) 35%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 25% 3%,rgba(41,151,255,.06) 0%,transparent 50%),
    linear-gradient(180deg,#0c1a2e 0%,#091322 25%,#060d18 55%,#030810 100%)}

/* ── LAYOUT ── */
body{margin:0;padding:0}
.sg-page{min-height:100vh;padding:60px 40px 80px}
.sg-sec{max-width:1100px;margin:0 auto 80px}
.sg-sec h2{font:700 28px/1.2 var(--font-display);letter-spacing:-.4px;margin-bottom:8px}
.sg-sec .sg-sub{font-size:13px;color:var(--txt2);margin-bottom:32px}
.sg-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-bottom:24px}
.sg-col{flex:1;min-width:200px}
.sg-label{font:700 10px/1 var(--font);text-transform:uppercase;letter-spacing:2px;color:var(--txt3);margin-bottom:12px;margin-top:24px;display:block}
.sg-divider{height:1px;background:rgba(255,255,255,.06);margin:40px 0}
.sg-code{font:500 11px/1.5 var(--mono);color:var(--txt3);background:rgba(255,255,255,.04);padding:3px 8px;border-radius:6px;display:inline-block}
.sg-note{font-size:11px;color:var(--txt3);margin-top:6px}
.sg-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;font:600 9px/1 var(--font);text-transform:uppercase;letter-spacing:.5px}
.sg-grid{display:grid;gap:16px}
.sg-grid.c2{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.sg-grid.c3{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.sg-grid.c4{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}

/* ── BG SECTION HEADER ── */
.sg-bg-label{position:absolute;top:16px;left:20px;font:700 10px/1 var(--font);text-transform:uppercase;letter-spacing:2px;opacity:.4}
.sg-bg-sec{position:relative;border-radius:var(--r-2xl);padding:56px 32px 32px;margin-bottom:24px;min-height:200px;overflow:hidden}

/* ═══════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════ */
.type-hero{font:600 clamp(30px,4.5vw,56px)/1.08 var(--font-display);letter-spacing:-.04em}
.type-section{font:600 clamp(24px,3.5vw,40px)/1.12 var(--font-display);letter-spacing:-.035em}
.type-sub{font:500 clamp(16px,2vw,22px)/1.35 var(--font-display)}
.type-label{font:700 14px/1 var(--font);text-transform:uppercase;letter-spacing:2px;color:var(--txt3)}
.type-body{font:400 16px/1.5 var(--font)}
.type-card{font:500 13px/1.4 var(--font)}
.type-stat{font:700 17px/1 var(--font)}
.type-caption{font:600 10px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--txt3)}
.type-mono{font:600 14px/1 var(--mono)}

/* ═══════════════════════════════
   COLOR SWATCHES
   ═══════════════════════════════ */
.swatch{width:48px;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center;font:600 8px/1 var(--mono);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.swatch-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}

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

/* Standard glass card */
.glass-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);
  border-radius:var(--r-2xl);padding:24px;box-shadow:var(--sh);position:relative;overflow:hidden;
  transition:transform 80ms var(--ease),box-shadow 80ms var(--ease);will-change:transform}
.glass-card:hover{transform:translateY(-2px);box-shadow:var(--sh),0 8px 32px rgba(41,151,255,.08),inset 0 1px 0 rgba(255,255,255,.06)}

/* Login-style dissolving glass bubble */
.glass-bubble{position:relative;padding:32px 28px 24px}
.glass-bubble::before{content:'';position:absolute;inset:0;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.04) 25%,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,.1),inset 0 1px 0 rgba(255,255,255,.12),0 8px 32px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  -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,.25) 20%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.25) 80%,transparent);
  border-radius:1px;pointer-events:none}

/* Flat glass panel (no gradient, for sidebars/nav) */
.glass-flat{background:var(--glass-flat);border:var(--glass-b);border-top-color:var(--glass-bt);
  border-radius:var(--r-xl);padding:16px;box-shadow:var(--sh),0 0 24px rgba(15,30,60,.06),0 0 48px rgba(15,30,60,.03)}

/* ═══════════════════════════════
   BUTTONS — 3D GLASS SYSTEM
   ═══════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 24px;font:600 14px/1 var(--font);letter-spacing:-.01em;
  border-radius:var(--r-lg);border:none;cursor:pointer;min-height:40px;position:relative;
  transition:transform 80ms,box-shadow 80ms;will-change:transform}
.btn:active{transform:translateY(0) scale(.98);transition-duration:20ms}

/* ─── GLASS INTENSITY SPECTRUM ─── */
/* Glass 1 — Ultra Light (barely there) */
.btn-g1{background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.02) 100%);color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.06);border-top-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 4px rgba(0,0,0,.15);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.btn-g1:hover{transform:translateY(-1px);background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.03) 100%);color:#fff}

/* Glass 2 — Light */
.btn-g2{background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.05) 100%);color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.08);border-top-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 4px rgba(0,0,0,.2);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.btn-g2:hover{transform:translateY(-1px);background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.05) 100%);color:#fff}

/* Glass 3 — Standard (default) */
.btn-g3{background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.07) 100%);color:#fff;
  border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.25);
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.btn-g3:hover{transform:translateY(-1px);background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.07) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.3)}

/* Glass 4 — Medium */
.btn-g4{background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.1) 100%);color:#fff;
  border:1px solid rgba(255,255,255,.16);border-top-color:rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.3);
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.btn-g4:hover{transform:translateY(-1px);background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.1) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px rgba(0,0,0,.35)}

/* Glass 5 — Heavy */
.btn-g5{background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.15) 100%);color:#fff;
  border:1px solid rgba(255,255,255,.2);border-top-color:rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.1),0 2px 10px rgba(0,0,0,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.btn-g5:hover{transform:translateY(-1px);background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.16) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 4px 16px rgba(0,0,0,.4)}

/* Glass 6 — Frosted (most visible) */
.btn-g6{background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.22) 100%);color:#fff;
  border:1px solid rgba(255,255,255,.25);border-top-color:rgba(255,255,255,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.1),0 2px 12px rgba(0,0,0,.4);
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.btn-g6:hover{transform:translateY(-1px);background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.22) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 20px rgba(0,0,0,.45)}

/* ─── SUBTLE ACCENT GLOWS (behind buttons/cards) ─── */
/* Navy glow — dark subtle blue behind element */
.glow-navy{box-shadow:0 0 20px rgba(15,30,60,.2),0 0 40px rgba(15,30,60,.08)}
.glow-navy:hover{box-shadow:0 0 24px rgba(15,30,60,.25),0 0 48px rgba(15,30,60,.1)}
/* Silver glow — cool metallic behind element */
.glow-silver{box-shadow:0 0 18px rgba(180,180,200,.08),0 0 36px rgba(180,180,200,.04)}
.glow-silver:hover{box-shadow:0 0 22px rgba(180,180,200,.12),0 0 44px rgba(180,180,200,.06)}
/* Gold glow — warm subtle behind element */
.glow-gold{box-shadow:0 0 18px rgba(200,160,60,.08),0 0 36px rgba(200,160,60,.04)}
.glow-gold:hover{box-shadow:0 0 22px rgba(200,160,60,.12),0 0 44px rgba(200,160,60,.06)}

.glow-blue{box-shadow:0 0 18px rgba(41,151,255,.15),0 0 36px rgba(41,151,255,.07)}
.glow-blue:hover{box-shadow:0 0 22px rgba(41,151,255,.22),0 0 44px rgba(41,151,255,.1)}
.glow-green{box-shadow:0 0 18px rgba(126,203,161,.1),0 0 36px rgba(126,203,161,.05)}
.glow-green:hover{box-shadow:0 0 22px rgba(126,203,161,.15),0 0 44px rgba(126,203,161,.07)}
.glow-orange{box-shadow:0 0 18px rgba(255,159,10,.1),0 0 36px rgba(255,159,10,.05)}
.glow-orange:hover{box-shadow:0 0 22px rgba(255,159,10,.15),0 0 44px rgba(255,159,10,.07)}
.glow-red{box-shadow:0 0 18px rgba(192,57,43,.1),0 0 36px rgba(192,57,43,.05)}
.glow-red:hover{box-shadow:0 0 22px rgba(192,57,43,.15),0 0 44px rgba(192,57,43,.07)}

/* Ghost/text — no fill */
.btn-ghost{background:none;color:rgba(255,255,255,.7);padding:8px 16px;border-radius:var(--r-md);
  border:1px solid transparent;text-shadow:0 1px 2px rgba(0,0,0,.3);transition:all .08s var(--ease)}
.btn-ghost:hover{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.06)}

/* Pill button */
.btn-pill{border-radius:var(--radius-pill);padding:11px 28px}

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

/* Button sizes */
.btn-xs{padding:5px 12px;font-size:11px;min-height:28px;border-radius:var(--r-sm)}
.btn-sm{padding:7px 16px;font-size:12px;min-height:32px;border-radius:var(--r-md)}
.btn-lg{padding:14px 32px;font-size:16px;min-height:48px;border-radius:var(--r-xl)}
.btn-xl{padding:18px 36px;font-size:18px;min-height:60px;border-radius:var(--r-xl)}

/* ═══════════════════════════════
   INPUTS — RECESSED GLASS
   ═══════════════════════════════ */
.input{width:100%;padding:12px 16px;font:400 14px/1.4 var(--font);color:var(--txt);
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.035) 100%);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25),inset 0 -1px 0 rgba(255,255,255,.04),0 1px 3px rgba(0,0,0,.15);
  outline:none;transition:border-color 80ms,box-shadow 80ms}
.input::placeholder{color:var(--txt4)}
.input:focus{border-color:rgba(41,151,255,.5);box-shadow:inset 0 1px 2px rgba(0,0,0,.2),0 0 0 3px rgba(41,151,255,.12),0 0 16px rgba(41,151,255,.06)}

.input-label{display:block;font:700 10px/1 var(--font);text-transform:uppercase;letter-spacing:2px;color:var(--txt3);margin-bottom:8px}

/* Textarea */
.textarea{min-height:100px;resize:vertical}

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

/* ═══════════════════════════════
   CARDS — PORTAL COMPONENTS
   ═══════════════════════════════ */

/* 9:16 Project Card */
.card-916{position:relative;aspect-ratio:9/16;max-height:220px;border-radius:var(--r-2xl);overflow:hidden;
  background:var(--bg-el);border:var(--glass-b);box-shadow:var(--sh);cursor:pointer;
  transition:transform 70ms var(--ease),box-shadow 70ms var(--ease);will-change:transform}
.card-916:hover{transform:translateY(-3px)}
.card-916 .card-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,transparent 50%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:14px}
.card-916 .card-title{font:600 13px/1.3 var(--font);color:var(--txt)}
.card-916 .card-meta{font:500 10px/1 var(--font);color:var(--txt3);margin-top:4px}

/* Pipeline Column */
.pipeline-col{flex:1;min-width:200px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);
  border-radius:var(--r-2xl);box-shadow:var(--sh),0 0 20px rgba(15,30,60,.05);display:flex;flex-direction:column;animation:colIn .3s var(--ease) both}
.pipeline-col .col-hdr{padding:14px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:8px}
.pipeline-col .col-hdr .col-dot{width:8px;height:8px;border-radius:50%}
.pipeline-col .col-hdr .col-title{font:600 13px/1 var(--font)}
.pipeline-col .col-hdr .col-count{font:700 10px/1 var(--font);color:var(--txt3);background:rgba(255,255,255,.06);padding:2px 7px;border-radius:100px}
.pipeline-col .col-body{flex:1;padding:10px;min-height:100px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}

/* Stat Card */
.stat-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);
  border-radius:var(--r-xl);padding:20px;box-shadow:var(--sh),0 0 20px rgba(180,180,200,.04);position:relative;overflow:hidden}
.stat-card .stat-value{font:700 28px/1 var(--font-display);letter-spacing:-.02em}
.stat-card .stat-label{font:500 12px/1 var(--font);color:var(--txt3);margin-top:6px}

/* Folder Card — glass icon tile with label */
.folder-card{width:100%;aspect-ratio:1;border-radius:var(--r-2xl);overflow:hidden;
  background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);box-shadow:var(--sh);
  position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transition:transform 70ms var(--ease),box-shadow 70ms var(--ease);will-change:transform}
.folder-card:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--sh),0 8px 24px rgba(0,0,0,.3)}
.folder-card .folder-icon{
  width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.12);position:relative;
  transition:transform 60ms var(--ease),box-shadow 60ms var(--ease);will-change:transform}
.folder-card .folder-icon svg{width:36px;height:36px;stroke-width:1.4;position:relative;z-index:1;filter:drop-shadow(0 0 6px currentColor)}
.folder-card:hover .folder-icon{transform:scale(1.08)}
/* Colored glass icon variants */
.fi-gold{background:linear-gradient(135deg,rgba(255,214,10,.28) 0%,rgba(255,214,10,.12) 100%);
  border-color:rgba(255,214,10,.3)!important;border-top-color:rgba(255,235,120,.35)!important;
  box-shadow:0 0 24px rgba(255,214,10,.25),0 0 48px rgba(255,214,10,.1),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.12)}
.fi-blue{background:linear-gradient(135deg,rgba(41,151,255,.3) 0%,rgba(41,151,255,.14) 100%);
  border-color:rgba(41,151,255,.32)!important;border-top-color:rgba(100,180,255,.38)!important;
  box-shadow:0 0 24px rgba(41,151,255,.28),0 0 48px rgba(41,151,255,.12),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.12)}
.fi-purple{background:linear-gradient(135deg,rgba(191,90,242,.3) 0%,rgba(191,90,242,.14) 100%);
  border-color:rgba(191,90,242,.32)!important;border-top-color:rgba(220,150,255,.35)!important;
  box-shadow:0 0 24px rgba(191,90,242,.28),0 0 48px rgba(191,90,242,.12),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.12)}
.fi-green{background:linear-gradient(135deg,rgba(126,203,161,.28) 0%,rgba(126,203,161,.12) 100%);
  border-color:rgba(126,203,161,.3)!important;border-top-color:rgba(120,240,140,.32)!important;
  box-shadow:0 0 24px rgba(126,203,161,.25),0 0 48px rgba(126,203,161,.1),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.12)}
.fi-orange{background:linear-gradient(135deg,rgba(255,159,10,.3) 0%,rgba(255,159,10,.14) 100%);
  border-color:rgba(255,159,10,.32)!important;border-top-color:rgba(255,200,80,.35)!important;
  box-shadow:0 0 24px rgba(255,159,10,.28),0 0 48px rgba(255,159,10,.12),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.12)}
.fi-cyan{background:linear-gradient(135deg,rgba(90,200,250,.3) 0%,rgba(90,200,250,.14) 100%);
  border-color:rgba(90,200,250,.32)!important;border-top-color:rgba(150,225,255,.38)!important;
  box-shadow:0 0 24px rgba(90,200,250,.28),0 0 48px rgba(90,200,250,.12),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.12)}
.folder-card:hover .fi-gold{box-shadow:0 0 32px rgba(255,214,10,.4),0 0 64px rgba(255,214,10,.15),0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.folder-card:hover .fi-blue{box-shadow:0 0 32px rgba(41,151,255,.4),0 0 64px rgba(41,151,255,.15),0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.folder-card:hover .fi-purple{box-shadow:0 0 32px rgba(191,90,242,.4),0 0 64px rgba(191,90,242,.15),0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.folder-card:hover .fi-green{box-shadow:0 0 32px rgba(126,203,161,.4),0 0 64px rgba(126,203,161,.15),0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.folder-card:hover .fi-orange{box-shadow:0 0 32px rgba(255,159,10,.4),0 0 64px rgba(255,159,10,.15),0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.folder-card:hover .fi-cyan{box-shadow:0 0 32px rgba(90,200,250,.4),0 0 64px rgba(90,200,250,.15),0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.folder-card .folder-label{font:500 11px/1 var(--font);color:var(--txt2);text-align:center;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Desktop Icon — macOS Finder style draggable */
.desktop-icon{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;
  border-radius:var(--r-lg);cursor:grab;transition:transform 60ms var(--ease),background 40ms;will-change:transform;
  user-select:none;-webkit-user-select:none;min-width:80px;max-width:96px}
.desktop-icon:hover{background:rgba(255,255,255,.06)}
.desktop-icon:active{transform:scale(.95);cursor:grabbing}
.desktop-icon.selected{background:rgba(41,151,255,.12);border-radius:var(--r-lg)}
.desktop-icon .di-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 2px 8px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(0,0,0,.15);
  transition:transform 60ms var(--ease),box-shadow 60ms var(--ease);will-change:transform}
.desktop-icon .di-icon svg{width:26px;height:26px;stroke-width:1.5}
.desktop-icon:hover .di-icon{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18)}
.desktop-icon .di-label{font:500 11px/1.2 var(--font);color:var(--txt);text-align:center;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desktop-icon.selected .di-label{color:var(--blue)}

/* Glass Island — universal right-click popup */
.glass-island{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100%);
  display:flex;align-items:center;gap:4px;padding:8px 12px;
  background:linear-gradient(135deg,rgba(28,28,32,.96) 0%,rgba(18,18,22,.98) 100%);
  border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.2);
  border-radius:22px;
  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,.1);
  z-index:9999;opacity:0;pointer-events:none;
  transition:transform 80ms var(--ease-spring),opacity 50ms var(--ease);will-change:transform}
.glass-island.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.glass-island .island-btn{width:44px;height:44px;border-radius:14px;border:none;cursor:pointer;
  background:transparent;color:var(--txt2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:background .06s,color .06s,transform .06s;will-change:transform}
.glass-island .island-btn:hover{background:rgba(255,255,255,.08);color:var(--txt);transform:scale(1.08)}
.glass-island .island-btn:active{transform:scale(.94);transition-duration:20ms}
.glass-island .island-btn svg{width:20px;height:20px;stroke-width:1.6}
.glass-island .island-btn span{font:600 8px/1 var(--font);letter-spacing:.3px;text-transform:uppercase}
.glass-island .island-sep{width:1px;height:28px;background:rgba(255,255,255,.08);margin:0 2px;flex-shrink:0}

/* Meeting Card */
.meeting-card{aspect-ratio:16/9;border-radius:var(--r-2xl);overflow:hidden;position:relative;
  background:linear-gradient(135deg,rgba(41,151,255,.08) 0%,rgba(100,50,200,.06) 100%);
  border:var(--glass-b);box-shadow:var(--sh)}
.meeting-card .mtg-status{position:absolute;top:12px;right:12px;padding:5px 12px;border-radius:100px;
  font:700 10px/1 var(--font);text-transform:uppercase;letter-spacing:.5px}
.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{max-width:640px;margin:0 auto}
/* Wizard size variants */
.wizard.wiz-sm{max-width:320px}
.wizard.wiz-sm .wizard-dot{width:24px;height:24px;font-size:10px}
.wizard.wiz-sm .wizard-wire{width:24px}
.wizard.wiz-sm .wizard-steps{margin-bottom:20px}
.wizard.wiz-sm .wiz-q{font-size:16px}
.wizard.wiz-sm .wiz-hint{font-size:11px}
.wizard.wiz-sm .wizard-body{padding:16px 12px}
.wizard.wiz-sm .wizard-foot{padding:12px 12px}
.wizard.wiz-sm .wiz-radio{padding:10px 12px}
.wizard.wiz-sm .wiz-radio-label{font-size:12px}
.wizard.wiz-sm .wiz-radio-desc{font-size:10px}
.wizard.wiz-md{max-width:640px}
.wizard.wiz-lg{max-width:100%;width:100%;min-height:80vh;display:flex;flex-direction:column}
.wizard.wiz-lg .wizard-steps{margin-bottom:40px}
.wizard.wiz-lg .wiz-q{font-size:28px;text-align:center}
.wizard.wiz-lg .wiz-hint{font-size:15px;text-align:center}
.wizard.wiz-lg .wizard-body{padding:40px 48px;flex:1}
.wizard.wiz-lg .wizard-foot{padding:20px 48px}
.wizard.wiz-lg .wiz-radio{padding:20px 24px}
.wizard.wiz-lg .wiz-radio-label{font-size:17px}
.wizard.wiz-lg .wiz-radio-desc{font-size:13px}
.wizard.wiz-lg .wizard-dot{width:40px;height:40px;font-size:14px}
.wizard.wiz-lg .wizard-wire{width:48px}

/* Glass container */
.wizard-glass{background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:32px 28px;
  backdrop-filter:blur(16px);box-shadow:0 4px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04)}
.wizard.wiz-sm .wizard-glass,.wiz-sm.wizard-glass{padding:20px 16px;border-radius:14px}
.wizard.wiz-lg .wizard-glass,.wiz-lg.wizard-glass{padding:44px 40px;border-radius:24px}

/* Wizard title — centered, question follows */
.wizard-title{font:700 20px/1.2 var(--font);color:var(--txt);text-align:center;margin-bottom:8px}
.wizard-title-sub{font:400 12px/1.4 var(--font);color:var(--txt3);text-align:center;margin-bottom:24px}
.wiz-q{text-align:center}
.wiz-hint{text-align:center}
.wizard.wiz-sm .wizard-title{font-size:15px;margin-bottom:6px}
.wizard.wiz-sm .wizard-title-sub{font-size:10px;margin-bottom:16px}
.wizard.wiz-lg .wizard-title{font-size:42px;margin-bottom:12px;letter-spacing:-.03em}
.wizard.wiz-lg .wizard-title-sub{font-size:16px;margin-bottom:36px}
.wizard.wiz-lg .wiz-q{font-size:28px;text-align:center}
.wizard.wiz-lg .wiz-hint{font-size:15px;text-align:center}

/* Bubble pill indicators (numberless) */
.wizard-pills{display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:24px}
.wizard-pill{width:28px;height:8px;border-radius:100px;background:rgba(255,255,255,.08);
  transition:all .25s var(--ease);flex-shrink:0}
.wizard-pill.done{background:var(--green)}
.wizard-pill.active{background:var(--blue);box-shadow:0 0 8px rgba(41,151,255,.3);width:36px}
/* Shrink pills for large question counts */
.wizard-pills.pills-15 .wizard-pill{width:20px;height:6px}
.wizard-pills.pills-15 .wizard-pill.active{width:28px}
.wizard-pills.pills-20 .wizard-pill{width:14px;height:5px;border-radius:100px}
.wizard-pills.pills-20 .wizard-pill.active{width:22px}
/* Pill sizing in wizard sizes */
.wizard.wiz-sm .wizard-pills{gap:3px;margin-bottom:16px}
.wizard.wiz-sm .wizard-pill{width:20px;height:6px}
.wizard.wiz-sm .wizard-pill.active{width:28px}
.wizard.wiz-lg .wizard-pills{gap:6px;margin-bottom:36px}
.wizard.wiz-lg .wizard-pill{width:36px;height:10px}
.wizard.wiz-lg .wizard-pill.active{width:48px}

/* Compact numbered dots for 10+ questions */
.wizard-steps.steps-compact .wizard-dot{width:26px;height:26px;font-size:10px}
.wizard-steps.steps-compact .wizard-wire{width:12px}
.wizard-steps.steps-compact .wizard-dot.done svg{width:12px;height:12px}
/* Even more compact for 15+ */
.wizard-steps.steps-mini .wizard-dot{width:22px;height:22px;font-size:9px}
.wizard-steps.steps-mini .wizard-wire{width:6px;margin:0 2px}
.wizard-steps.steps-mini .wizard-dot.done svg{width:11px;height:11px}

.wizard-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:32px}
.wizard-step{display:flex;align-items:center;gap:0}
.wizard-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:600 12px/1 var(--font);color:var(--txt3);background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);
  transition:all .2s var(--ease)}
.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 .2s var(--ease-spring);filter:drop-shadow(0 0 4px rgba(126,203,161,.4))}
.wizard-wire{width:40px;height:1.5px;background:rgba(255,255,255,.08);margin:0 4px;transition:background .12s}
.wizard-wire.done{background:var(--green)}

/* Progress bar under steps */
.wizard-progress{height:3px;border-radius:2px;background:rgba(255,255,255,.06);margin-bottom:28px;overflow:hidden}
.wizard-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--green));
  animation:progressGrow .2s var(--ease-spring);transition:width .15s var(--ease-spring)}

/* Body + footer */
.wizard-body{animation:slideLeft .25s var(--ease-q);padding:4px 0}
.wizard-body.reverse{animation:slideRight .25s var(--ease-q)}
.wizard-foot{display:flex;justify-content:space-between;gap:12px;margin-top:32px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.06)}

/* Question label — centered to match titles */
.wiz-q{font:600 18px/1.3 var(--font);color:var(--txt);margin-bottom:8px;text-align:center}
.wiz-hint{font:400 13px/1.5 var(--font);color:var(--txt3);margin-bottom:24px;text-align:center}

/* ── Format 1: Grid option cards ── */
.opt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.opt-card{padding:20px;border-radius:var(--r-xl);background:var(--glass);border:1.5px solid rgba(255,255,255,.08);
  cursor:pointer;text-align:center;transition:border-color 60ms,box-shadow 60ms,transform 60ms;will-change:transform;position:relative;overflow:hidden}
.opt-card:hover{border-color:rgba(255,255,255,.15);transform:translateY(-2px)}
.opt-card:active{transform:scale(.97);transition-duration:20ms}
.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 .3s var(--ease-spring)}
.opt-card .opt-icon{font-size:28px;margin-bottom:10px;display:block}
.opt-card .opt-title{font:600 14px/1.3 var(--font);color:var(--txt)}
.opt-card .opt-desc{font:400 11px/1.4 var(--font);color:var(--txt3);margin-top:4px}
.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:all .2s var(--ease-spring)}
.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 1b: 9:16 video/image preview cards ── */
.opt-grid-portrait{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.opt-portrait{aspect-ratio:9/16;border-radius:var(--r-xl);overflow:hidden;position:relative;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.08);transition:border-color 60ms,box-shadow 60ms,transform 60ms;will-change:transform;
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%)}
.opt-portrait::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.7) 100%);z-index:1;transition:background .25s}
.opt-portrait:hover{border-color:rgba(255,255,255,.18);transform:translateY(-2px)}
.opt-portrait:hover::before{background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 100%)}
.opt-portrait:active{transform:scale(.97);transition-duration:20ms}
.opt-portrait.selected{border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(41,151,255,.12),0 4px 16px rgba(41,151,255,.08);animation:selectPop .3s var(--ease-spring)}
.opt-portrait .opt-check{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;
  background:var(--blue);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);
  transition:all .2s var(--ease-spring);z-index:3}
.opt-portrait.selected .opt-check{opacity:1;transform:scale(1)}
.opt-portrait .opt-check svg{width:12px;height:12px;stroke:#fff;stroke-width:2.5}
.opt-portrait .opt-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .3s var(--ease);z-index:0}
.opt-portrait:hover .opt-preview{transform:scale(1.04)}
.opt-portrait .opt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;z-index:2;
  transition:all .2s var(--ease-spring);opacity:0}
.opt-portrait:hover .opt-play{transform:translate(-50%,-50%) scale(1);opacity:1}
.opt-portrait .opt-play svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.opt-portrait .opt-portrait-info{position:absolute;bottom:0;left:0;right:0;padding:12px;z-index:2}
.opt-portrait .opt-portrait-info .opt-title{font:600 12px/1.3 var(--font);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.opt-portrait .opt-portrait-info .opt-desc{font:400 10px/1.3 var(--font);color:rgba(255,255,255,.7);margin-top:3px}
/* Large wizard portrait cards */
.wizard.wiz-lg .opt-grid-portrait{grid-template-columns:repeat(4,1fr);gap:20px}
.wizard.wiz-lg .opt-portrait .opt-portrait-info{padding:16px}
.wizard.wiz-lg .opt-portrait .opt-portrait-info .opt-title{font-size:14px}
.wizard.wiz-lg .opt-portrait .opt-portrait-info .opt-desc{font-size:11px}
/* Small wizard portrait cards */
.wizard.wiz-sm .opt-grid-portrait{grid-template-columns:repeat(2,1fr);gap:8px}
.wizard.wiz-sm .opt-portrait .opt-portrait-info{padding:8px}
.wizard.wiz-sm .opt-portrait .opt-portrait-info .opt-title{font-size:10px}
.wizard.wiz-sm .opt-portrait .opt-portrait-info .opt-desc{display:none}

/* ── Format 1c: Answer pill containers (small wizard) ── */
.opt-pill-list{display:flex;flex-direction:column;gap:8px}
.opt-pill{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:100px;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);cursor:pointer;
  font:500 13px/1 var(--font);color:var(--txt2);transition:all .12s var(--ease);will-change:transform;user-select:none}
.opt-pill:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.06);transform:translateY(-1px)}
.opt-pill:active{transform:scale(.97);transition-duration:40ms}
.opt-pill.selected{background:linear-gradient(180deg,rgba(41,151,255,.12) 0%,rgba(41,151,255,.04) 100%);
  border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 3px rgba(41,151,255,.08);animation:chipBounce .2s var(--ease-spring)}
.opt-pill .opt-pill-dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.12);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .15s var(--ease)}
.opt-pill.selected .opt-pill-dot{border-color:var(--blue);background:var(--blue)}
.opt-pill.selected .opt-pill-dot::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff}
/* Small wizard pill sizing */
.wizard.wiz-sm .opt-pill{padding:8px 14px;font-size:11px;gap:8px}
.wizard.wiz-sm .opt-pill .opt-pill-dot{width:14px;height:14px}
.wizard.wiz-sm .opt-pill.selected .opt-pill-dot::after{width:5px;height:5px}

/* ── Format 2: Chips / pill toggle ── */
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:10px 20px;border-radius:100px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);
  font:500 13px/1 var(--font);color:var(--txt2);cursor:pointer;
  transition:all .12s var(--ease);will-change:transform;user-select:none}
.chip:hover{border-color:rgba(255,255,255,.18);color:var(--txt);transform:translateY(-1px)}
.chip:active{transform:scale(.95);transition-duration:40ms}
.chip.selected{background:linear-gradient(180deg,rgba(41,151,255,.15) 0%,rgba(41,151,255,.05) 100%);
  border-color:var(--blue);color:var(--blue);animation:chipBounce .2s var(--ease-spring);
  box-shadow:0 0 0 3px rgba(41,151,255,.08)}

/* ── Format 3: Radio list (single select) ── */
.radio-list{display:flex;flex-direction:column;gap:10px}
.radio-item{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.08);cursor:pointer;
  transition:all .12s var(--ease);will-change:transform}
.radio-item:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.05)}
.radio-item:active{transform:scale(.99);transition-duration:40ms}
.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 .25s var(--ease-spring)}
.radio-dot{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.15);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .15s var(--ease)}
.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 .25s var(--ease-spring)}
.radio-label{font:500 14px/1.3 var(--font);color:var(--txt)}
.radio-sub{font:400 11px/1.3 var(--font);color:var(--txt3);margin-top:2px}

/* ── Format 4: Slider / range ── */
.wiz-range-wrap{padding:8px 0}
.wiz-range{width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.08);outline:none;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.wiz-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(180deg,#fff 0%,#e0e0e4 100%);border:none;cursor:grab;
  box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 3px rgba(41,151,255,.15);transition:transform .1s}
.wiz-range::-webkit-slider-thumb:active{transform:scale(1.15);cursor:grabbing}
.wiz-range-labels{display:flex;justify-content:space-between;margin-top:10px}
.wiz-range-labels span{font:500 11px/1 var(--font);color:var(--txt3)}
.wiz-range-val{text-align:center;font:700 28px/1 var(--font-display);color:var(--blue);margin-bottom:16px;
  transition:transform .1s;animation:digitPop .2s var(--ease-spring)}

/* ── Format 5: Textarea / open-ended ── */
.wiz-textarea{width:100%;min-height:120px;padding:16px;border-radius:var(--r-lg);resize:vertical;
  background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.08);color:var(--txt);
  font:400 14px/1.6 var(--font);outline:none;transition:border-color .15s,box-shadow .15s}
.wiz-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(41,151,255,.1)}
.wiz-textarea::placeholder{color:var(--txt3)}
.wiz-char-count{font:400 11px/1 var(--font);color:var(--txt3);text-align:right;margin-top:6px}

/* ═══════════════════════════════
   BADGES & STATUS
   ═══════════════════════════════ */
.badge-status{display:inline-flex;padding:3px 10px;border-radius:100px;font:700 9px/1 var(--font);text-transform:uppercase;letter-spacing:.5px}
.badge-queue{background:rgba(255,159,10,.12);color:var(--orange)}
.badge-active{background:rgba(41,151,255,.12);color:var(--blue)}
.badge-review{background:rgba(191,90,242,.12);color:var(--purple)}
.badge-approved{background:rgba(126,203,161,.12);color:var(--green)}
.badge-revisions{background:rgba(192,57,43,.12);color:var(--red)}

/* Role badges */
.badge-role{display:inline-flex;padding:2px 7px;border-radius:100px;font:700 8px/1 var(--font);text-transform:uppercase;letter-spacing:.5px}
.badge-owner{background:linear-gradient(135deg,rgba(180,180,190,.12),rgba(120,120,130,.08));
  color:transparent;background-clip:text;-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-image:linear-gradient(135deg,#e8e8ec 0%,#a0a0a8 35%,#d4d4da 50%,#8a8a92 75%,#c8c8d0 100%);
  text-shadow:none;filter:drop-shadow(0 1px 2px rgba(255,255,255,.15));
  border:1px solid rgba(180,180,190,.15);position:relative}
.badge-owner::before{content:'';position:absolute;inset:0;border-radius:100px;
  background:linear-gradient(135deg,rgba(180,180,190,.1),rgba(80,80,88,.06));z-index:-1}
.badge-admin{background:linear-gradient(135deg,rgba(180,180,190,.12),rgba(120,120,130,.08));
  color:transparent;background-clip:text;-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-image:linear-gradient(135deg,#e8e8ec 0%,#a0a0a8 35%,#d4d4da 50%,#8a8a92 75%,#c8c8d0 100%);
  text-shadow:none;filter:drop-shadow(0 1px 2px rgba(255,255,255,.15));
  border:1px solid rgba(180,180,190,.15);position:relative}
.badge-admin::before{content:'';position:absolute;inset:0;border-radius:100px;
  background:linear-gradient(135deg,rgba(180,180,190,.1),rgba(80,80,88,.06));z-index:-1}
.badge-editor{background:rgba(126,203,161,.15);color:var(--green)}
.badge-client{background:rgba(41,151,255,.15);color:var(--blue)}
.badge-trial{background:rgba(255,159,10,.15);color:var(--orange)}

/* Nav badge (notification count) */
.nav-badge-demo{height:18px;min-width:18px;padding:0 5px;border-radius:9px;
  background:linear-gradient(180deg,var(--blue-hi),var(--blue-deep));color:#fff;
  font:700 10px/18px var(--font);text-align:center;box-shadow:var(--sh-glow)}

/* Bottom-island avatar */
.bi-avatar{width:32px;height:32px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;
  font:700 10px/1 var(--font);color:var(--txt2);flex-shrink:0}

/* ═══════════════════════════════
   CHAT COMPONENTS
   ═══════════════════════════════ */
.chat-msg{display:flex;gap:10px;margin-bottom:12px}
.chat-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue-hi),var(--blue-dk));
  display:flex;align-items:center;justify-content:center;font:700 11px/1 var(--font);color:#fff;flex-shrink:0}
.chat-bubble{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:8px 12px;font:400 13px/1.5 var(--font);max-width:80%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.chat-input-row{display:flex;gap:8px;align-items:center;padding:0}
.chat-plus{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:var(--txt3);cursor:pointer;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;font-size:18px;line-height:1;transition:background .1s}
.chat-plus:hover{background:rgba(255,255,255,.1);color:var(--txt2)}
.chat-pill{flex:1;display:flex;align-items:center;gap:4px;min-width:0;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:22px;padding:4px 6px 4px 12px;transition:border-color .15s}
.chat-pill:focus-within{border-color:rgba(255,255,255,.15)}
.chat-input-field{flex:1;background:none;border:none;color:var(--txt);font:400 13px/1.4 var(--font);padding:6px 0;outline:none;min-width:0}
.chat-voice{width:28px;height:28px;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;transition:background .1s,color .1s}
.chat-voice:hover{background:rgba(255,255,255,.1);color:var(--txt2)}
.chat-emoji{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);color:var(--txt4);cursor:pointer;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;transition:background .1s,color .1s}
.chat-emoji:hover{background:rgba(255,255,255,.1);color:var(--txt2)}

/* Chat glass container */
.chat-glass-container{max-width:500px;padding:var(--s2);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);backdrop-filter:blur(12px)}

/* Glass card on light backgrounds — pure black shadows, zero color bleed */
.bg-light .glass-card,
.bg-light .glass-flat,
.bg-light .stat-card,
.bg-light .pipeline-col{
  background:rgba(255,255,255,.92);
  border-color:rgba(0,0,0,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.07)}
.bg-light .glass-card:hover{
  box-shadow:0 4px 16px rgba(0,0,0,.08),0 8px 32px rgba(0,0,0,.1)}

/* Glass card hover on dark — pure black shadow, no blue glow */
.glass-card:hover{
  box-shadow:0 2px 8px rgba(0,0,0,.4),0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)}

/* ═══════════════════════════════
   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{width:0}to{width:var(--prog)}}
@keyframes pulseLoad{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@keyframes spinLoad{to{transform:rotate(360deg)}}
@keyframes barLoad{0%{width:0}50%{width:70%}100%{width:100%}}
@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) translateZ(0)}100%{transform:perspective(800px) rotateX(0) rotateY(0) translateZ(20px)}}

/* ═══════════════════════════════
   3D PROJECT CARD (iPhone Pro style)
   ═══════════════════════════════ */
.card-3d{position:relative;aspect-ratio:9/16;max-height:300px;border-radius:var(--r-2xl);overflow:hidden;
  background:#060608;border:1px solid rgba(255,255,255,.05);border-top-color:rgba(255,255,255,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04),0 0 24px rgba(200,160,60,.03);
  cursor:pointer;transition:transform 60ms var(--ease),box-shadow 60ms var(--ease),filter 80ms var(--ease);will-change:transform;
  filter:brightness(.55)}
.card-3d:hover{transform:scale(1.01) perspective(800px) rotateY(-1.5deg);filter:brightness(1);
  box-shadow:0 4px 16px rgba(0,0,0,.5),0 12px 36px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
/* Cover image — heavier darken overlay */
.card-3d .card-3d-cover{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.card-3d .card-3d-cover::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.75) 70%,rgba(0,0,0,.95) 100%)}
/* Letter grade badge */
.card-3d .card-grade{position:absolute;top:32px;right:8px;z-index:4;
  width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font:700 9px/1 var(--font);letter-spacing:-.02em;
  background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.card-grade.grade-a{color:var(--green);border-color:rgba(126,203,161,.15)}
.card-grade.grade-b{color:var(--blue);border-color:rgba(41,151,255,.15)}
.card-grade.grade-c{color:var(--gold);border-color:rgba(245,166,35,.15)}
.card-grade.grade-d{color:var(--red);border-color:rgba(192,57,43,.15)}
/* Top dynamic island — faded, icon bubbles, 5 columns */
.card-3d .dynamic-island{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;
  height:20px;padding:0 4px;border-radius:11px;display:flex;align-items:center;gap:2px;
  background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.05);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:.6;transition:all .1s var(--ease)}
.card-3d:hover .dynamic-island{opacity:1}
/* Icon bubble containers inside island */
.dynamic-island .di-col{display:flex;align-items:center;justify-content:center;
  width:18px;height:14px;border-radius:5px;position:relative;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.04);
  transition:background .06s}
.dynamic-island .di-col:hover{background:rgba(255,255,255,.1)}
.dynamic-island .di-col+.di-col{margin-left:0}
.dynamic-island .di-label{font:600 6px/1 var(--mono);color:rgba(255,255,255,.45);letter-spacing:.1px;
  transition:color .06s}
.dynamic-island .di-col:hover .di-label{color:rgba(255,255,255,.9)}
.dynamic-island .di-col svg{width:7px;height:7px;opacity:.4;transition:opacity .06s}
.dynamic-island .di-col:hover svg{opacity:.9}
/* Health score colors */
.di-health-good{color:var(--green)!important;opacity:.7!important}
.di-health-mid{color:var(--gold)!important;opacity:.7!important}
.di-health-low{color:var(--red)!important;opacity:.7!important}
/* Blueprint hover popup — 16:9 layout: fields left, card center, selections right */
.di-col{position:relative}
.di-col .bp-popup{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(.95);
  opacity:0;pointer-events:none;transition:opacity .1s,transform .1s var(--ease);
  width:340px;padding:14px;border-radius:var(--r-xl);z-index:20;
  background:linear-gradient(135deg,rgba(20,20,24,.97),rgba(12,12,16,.98));
  border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.14);
  box-shadow:0 12px 48px rgba(0,0,0,.7),0 4px 12px rgba(0,0,0,.4);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.di-col:hover .bp-popup{opacity:1;transform:translateX(-50%) scale(1);pointer-events:auto}
.bp-popup .bp-title{font:600 9px/1 var(--font);text-transform:uppercase;letter-spacing:1px;color:var(--txt3);
  margin-bottom:10px;padding-bottom:6px;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-fields{display:flex;flex-direction:column;gap:4px}
.bp-popup .bp-field{display:flex;justify-content:space-between;gap:8px;padding:3px 0;
  font:400 9px/1.3 var(--font);color:var(--txt3)}
.bp-popup .bp-field span:last-child{color:var(--txt);font-weight:500;text-align:right}
.bp-popup .bp-mini-card{width:48px;aspect-ratio:9/16;border-radius:6px;overflow:hidden;
  background:#0a0a0c;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.4);align-self:center}
.bp-popup .bp-mini-card img{width:100%;height:100%;object-fit:cover;opacity:.7}
/* Legacy compat */
.bp-popup .bp-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;
  font:400 10px/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.approved-flash{animation:approvedRumble .4s var(--ease),approvedGlow .8s ease-out}
.card-3d .rating-popup{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);z-index:10;
  display:flex;gap:4px;padding:6px 10px;border-radius:var(--r-lg);
  background:rgba(12,12,16,.95);border:1px solid rgba(126,203,161,.2);
  box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 24px rgba(126,203,161,.08);
  backdrop-filter:blur(16px);animation:ratingPop .2s var(--ease-spring)}
.card-3d .rating-star{width:12px;height:12px;cursor:pointer;color:rgba(255,255,255,.2);transition:color .06s,transform .06s}
.card-3d .rating-star:hover{color:var(--gold);transform:scale(1.2)}
.card-3d .rating-star.active{color:var(--gold)}
/* Bottom content area */
.card-3d .card-3d-bottom{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:8px 10px 7px}
.card-3d .card-3d-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.card-3d .card-3d-title{font:600 9px/1.2 var(--font);color:#fff;flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.card-3d .card-3d-timer{display:flex;align-items:center;gap:3px;font:500 8px/1 var(--mono);color:var(--txt2);
  padding:3px 6px;border-radius:6px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.06);
  white-space:nowrap;flex-shrink:0}
.card-3d .card-3d-timer svg{width:8px;height:8px;opacity:.5}
.card-3d .card-3d-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.08)}
.card-3d .card-3d-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--green))}

/* ═══════════════════════════════
   BOTTOM GLASS ISLAND (Dock-style)
   Compact, retracted into bottom edge. Reveals on hover.
   ═══════════════════════════════ */
.bottom-island{position:fixed;bottom:8px;left:0;right:0;z-index:100;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
  /* Idle: retracted ~40% into bottom edge */
  transform:translateY(16px);opacity:.3;
  transition:transform .3s var(--ease),opacity .3s var(--ease);will-change:transform,opacity}
.bottom-island:hover{transform:translateY(0);opacity:1}
.shell:hover .bottom-island{transform:translateY(8px);opacity:.5}
.bottom-island-inner{pointer-events:auto;display:flex;align-items:center;gap:4px;padding:6px 10px;
  border-radius:16px;background:rgba(18,18,22,.6);border:1px solid rgba(255,255,255,.05);
  border-top-color:rgba(255,255,255,.08);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 -2px 16px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04)}
.bottom-island-inner .bi-btn{width:30px;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.04);cursor:pointer;
  background:transparent;color:var(--txt3);display:flex;align-items:center;justify-content:center;
  transition:background .06s,color .06s,transform .06s;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 GLASS SIDEBAR NAV
   ═══════════════════════════════ */
.left-nav{position:fixed;top:50%;left:8px;z-index:99;
  display:flex;flex-direction:column;gap:4px;padding:8px 6px;
  border-radius:16px;background:rgba(18,18,22,.6);border:1px solid rgba(255,255,255,.05);
  border-right-color:rgba(255,255,255,.08);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:2px 0 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
  width:42px;overflow:visible;
  /* Idle: retracted deep into left edge */
  transform:translateY(-50%) translateX(-34px);opacity:.25;
  transition:transform .3s var(--ease),opacity .3s var(--ease);will-change:transform,opacity}
.left-nav:hover{transform:translateY(-50%) translateX(0);opacity:1}
.shell:hover .left-nav{transform:translateY(-50%) translateX(-20px);opacity:.45}
/* Logo */
.ln-logo{display:block;width:22px;height:22px;margin:0 auto 2px;opacity:.7;transition:opacity .15s;pointer-events:none}
.left-nav:hover .ln-logo{opacity:1}
/* Nav buttons — fixed size, icon only */
.left-nav .ln-btn{width:30px;height:30px;border-radius:9px;border:none;cursor:pointer;
  background:transparent;color:var(--txt3);display:flex;align-items:center;justify-content:center;
  transition:background .04s,color .04s;position:relative;contain:layout style}
.left-nav .ln-btn:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.left-nav .ln-btn.active{background:rgba(255,255,255,.06);color:var(--txt)}
.left-nav .ln-btn.active::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:2px;height:12px;border-radius:1px;background:var(--blue);opacity:.6}
.left-nav .ln-btn svg{width:15px;height:15px;stroke-width:1.6;flex-shrink:0}
.left-nav .ln-sep{width:18px;height:1px;background:rgba(255,255,255,.06);margin:2px auto}
/* Floating labels — appear to the right outside the nav on button hover */
.ln-label{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--txt2);
  white-space:nowrap;user-select:none;pointer-events:none;
  opacity:0;transition:opacity .12s;
  text-shadow:0 1px 4px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.5)}
.left-nav .ln-btn:hover .ln-label{opacity:1}
/* Nav badge (notification count) */
.ln-badge{position:absolute;top:-2px;right:-2px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;
  background:var(--blue);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(41,151,255,.35)}
.ln-badge.zero{display:none}

/* ═══════════════════════════════
   ANIMATION SHOWCASE DEMOS
   ═══════════════════════════════ */
.anim-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.anim-demo{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);
  padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:140px;position:relative;overflow:hidden;box-shadow:var(--sh)}
.anim-demo-label{font:600 9px/1 var(--font);text-transform:uppercase;letter-spacing:1.5px;color:var(--txt3)}

/* Loading dots */
.anim-loading{display:flex;gap:6px}
.anim-loading span{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:pulseLoad 1s ease infinite}
.anim-loading span:nth-child(2){animation-delay:.15s}
.anim-loading span:nth-child(3){animation-delay:.3s}

/* Spinner */
.anim-spinner{width:28px;height:28px;border:2.5px solid rgba(255,255,255,.1);border-top-color:var(--blue);
  border-radius:50%;animation:spinLoad .6s linear infinite}

/* Progress bar */
.anim-bar-wrap{width:80%;height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.anim-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--blue),rgba(41,151,255,.5));
  animation:barLoad 2s var(--ease) infinite}

/* Send animation */
.anim-send{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.anim-send svg{width:20px;height:20px;stroke:var(--blue);animation:sendPulse 1.5s var(--ease) infinite}

/* Review scan */
.anim-review{width:80%;height:24px;border-radius:6px;background:linear-gradient(90deg,transparent,rgba(41,151,255,.15),transparent);
  background-size:200% 100%;animation:reviewScan 2s linear infinite}

/* Clap / celebrate */
.anim-clap{font-size:28px;animation:clapPop 1s var(--ease-spring) infinite;cursor:pointer}

/* Confetti */
.anim-confetti{position:relative;width:60px;height:60px}
.confetti-dot{position:absolute;width:6px;height:6px;border-radius:50%;animation:confettiFall 1.5s ease infinite}
.confetti-dot:nth-child(1){background:var(--blue);left:10%;animation-delay:0s}
.confetti-dot:nth-child(2){background:rgba(41,151,255,.7);left:30%;animation-delay:.2s}
.confetti-dot:nth-child(3){background:rgba(41,151,255,.5);left:50%;animation-delay:.4s}
.confetti-dot:nth-child(4){background:rgba(100,180,255,.8);left:70%;animation-delay:.15s}
.confetti-dot:nth-child(5){background:rgba(41,151,255,.6);left:85%;animation-delay:.35s}

/* Firework */
.anim-firework{position:relative;width:50px;height:50px}
.fw-ring{position:absolute;inset:0;border-radius:50%;border:2px solid;animation:fireworkBurst 1.5s ease infinite}
.fw-ring:nth-child(1){border-color:var(--blue);animation-delay:0s}
.fw-ring:nth-child(2){border-color:rgba(41,151,255,.6);animation-delay:.3s}
.fw-ring:nth-child(3){border-color:rgba(100,180,255,.4);animation-delay:.6s}

/* ═══════════════════════════════
   RIGHT-CLICK CONTEXT MENU + SIZE KNOB
   ═══════════════════════════════ */
.ctx-menu{position:relative;display:inline-flex;flex-direction:column;min-width:200px;padding:6px;
  background:linear-gradient(135deg,rgba(30,30,34,.96),rgba(20,20,24,.98));
  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:blur(40px);-webkit-backdrop-filter:blur(40px)}
.ctx-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-md);
  font:400 13px/1 var(--font);color:var(--txt2);cursor:pointer;
  transition:background .06s,color .06s}
.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 11px/1 var(--font);color:var(--txt3);opacity:.5}
.ctx-sep{height:1px;background:rgba(255,255,255,.06);margin:4px 8px}

/* Size knob / selector row */
.size-row{display:flex;align-items:center;gap:6px;padding:6px 12px}
.size-row-label{font:500 11px/1 var(--font);color:var(--txt3);margin-right:auto}
.size-knob{width:28px;height:28px;border-radius:8px;border:1.5px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font:600 9px/1 var(--font);color:var(--txt3);cursor:pointer;
  background:rgba(255,255,255,.04);transition:all .06s var(--ease);will-change:transform}
.size-knob:hover{background:rgba(255,255,255,.08);color:var(--txt);border-color:rgba(255,255,255,.2);transform:scale(1.06)}
.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 */
.pipe-card{border-radius:var(--r-lg);background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);
  box-shadow:var(--sh);padding:12px;cursor:pointer;transition:transform .1s var(--ease),box-shadow .1s var(--ease);will-change:transform}
.pipe-card:hover{transform:translateY(-2px);box-shadow:var(--sh),0 6px 20px rgba(0,0,0,.25)}
.pipe-card .pipe-title{font:600 12px/1.2 var(--font);color:var(--txt);margin-bottom:4px}
.pipe-card .pipe-sub{font:400 10px/1.3 var(--font);color:var(--txt3)}
.pipe-card .pipe-pill{display:inline-flex;padding:2px 6px;border-radius:6px;font:500 9px/1 var(--font);
  background:rgba(126,203,161,.12);color:var(--green);margin-top:8px}
/* Size variants */
.pipe-sm{min-height:60px;padding:8px 10px}
.pipe-sm .pipe-title{font-size:11px}
.pipe-sm .pipe-sub,.pipe-sm .pipe-pill{display:none}
.pipe-md{min-height:80px}
.pipe-lg{min-height:110px;padding:16px}
.pipe-lg .pipe-title{font-size:13px;margin-bottom:6px}
.pipe-xl{min-height:150px;padding:20px}
.pipe-xl .pipe-title{font-size:14px;margin-bottom:8px}
.pipe-xl .pipe-sub{font-size:11px;-webkit-line-clamp:3}

/* ═══════════════════════════════
   SPECULAR HIGHLIGHTS (auto on cards)
   ═══════════════════════════════ */
.stat-card::before,.folder-card::before,.meeting-card::before,.desktop-icon .di-icon::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15) 30%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.15) 70%,transparent);
  border-radius:1px;pointer-events:none}

/* ═══════════════════════════════
   PILLS & CHIPS
   ═══════════════════════════════ */
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:100px;
  font:600 12px/1 var(--font);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  color:var(--txt2);cursor:pointer;transition:background .1s,border-color .1s}
.pill:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}
.pill.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.3);color:var(--blue)}

/* ═══════════════════════════════
   UPLOAD DROP ZONE
   ═══════════════════════════════ */
.drop-zone{border:2px dashed rgba(255,255,255,.12);border-radius:var(--r-2xl);padding:40px;
  text-align:center;transition:border-color .15s,background .15s;cursor:pointer}
.drop-zone:hover{border-color:rgba(41,151,255,.3);background:rgba(41,151,255,.03)}
.drop-zone .dz-icon{font-size:32px;margin-bottom:12px;opacity:.5}
.drop-zone .dz-title{font:600 14px/1 var(--font);margin-bottom:4px}
.drop-zone .dz-sub{font:400 12px/1 var(--font);color:var(--txt3)}

/* ═══════════════════════════════
   PROGRESS / TRACKER
   ═══════════════════════════════ */
.tracker{display:flex;align-items:center;justify-content:center;gap:0}
.tracker-node{display:flex;flex-direction:column;align-items:center;gap:6px}
.tracker-ring{width:48px;height:48px;border-radius:50%;border:2.5px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font:600 14px/1 var(--font);color:var(--txt3);
  transition:all .12s var(--ease)}
.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:700;transform:scale(1.05);
  box-shadow:0 0 0 2px rgba(126,203,161,.25),0 0 12px rgba(90,168,200,.15)}
.tracker-label{font:500 10px/1 var(--font);color:var(--txt3)}
.tracker-wire{width:48px;height:2px;background:rgba(255,255,255,.08);margin:0 4px 20px}
.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,.bg-light .pipeline-col{
  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;text-shadow:none}
.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:32px 20px 60px}
  .sg-sec h2{font-size:22px}
  .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:4px}
  .wizard-wire{width:20px}
  .tracker-wire{width:24px}
  .btn-lg{padding:12px 24px;font-size:15px}
  .glass-bubble{padding:24px 20px 20px}
}
@media(max-width:480px){
  .sg-page{padding:24px 16px 48px}
  .sg-sec{margin-bottom:48px}
  .sg-grid.c2,.sg-grid.c3,.sg-grid.c4{grid-template-columns:1fr 1fr}
  .type-hero{font-size:28px}
  .pipeline-col{min-width:160px!important}
  .stat-card{padding:14px}
  .stat-card .stat-value{font-size:22px}
  .glass-card{padding:18px}
  .glass-flat{padding:12px}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){*{animation-duration:0s!important;transition-duration:0s!important}}

/* ═══════════════════════════════════════════════════════════════
   PORTAL / DELIVERY PREVIEW COMPONENTS
   Kanban pipelines, person cards, website preview, toast, tabs
   ═══════════════════════════════════════════════════════════════ */
/* ── Top switcher ── */
.top-bar{display:flex;align-items:center;gap:0;padding:12px 20px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.top-logo{height:28px;margin-right:20px}
.switcher{display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.05);border:var(--glass-b);border-radius:12px}
.sw-btn{padding:6px 18px;border:none;border-radius:8px;font-size:12px;font-weight:600;color:var(--txt3);background:transparent;cursor:pointer;font-family:var(--font);transition:color 80ms,background 80ms}
.sw-btn:hover{color:var(--txt2)}
.sw-btn.active{background:rgba(255,255,255,.1);color:var(--txt);box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 .5px 0 rgba(255,255,255,.1)}
.commit-pill{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt3)}
.commit-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(48,209,88,.5)}

/* ── Views ── */
.view{display:none;flex:1;overflow:hidden;flex-direction:column}
.view.active{display:flex}

/* ══════════════════════
   PORTAL PREVIEW
══════════════════════ */
.portal-head{flex-shrink:0;padding:20px 28px 0}
.p-title{font-size:clamp(20px,3vw,32px);font-weight:700;letter-spacing:-.03em;margin-bottom:4px}
.p-sub{font-size:13px;color:var(--txt2);margin-bottom:12px}

.sub-tabs{display:flex;gap:4px;padding:4px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:14px;box-shadow:var(--sh);width:fit-content;margin-bottom:0;overflow-x:auto}
.sub-tab{padding:6px 14px;border:none;border-radius:10px;font-size:11px;font-weight:600;color:var(--txt3);background:transparent;cursor:pointer;font-family:var(--font);white-space:nowrap;transition:color 80ms}
.sub-tab:hover{color:var(--txt2)}
.sub-tab.active{background:rgba(255,255,255,.1);color:var(--txt);box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 .5px 0 rgba(255,255,255,.1)}

.pl-scroll-wrap{flex:1;overflow-y:auto;min-height:0;padding-bottom:40px}
.pl-scroll-wrap::-webkit-scrollbar{width:4px}
.pl-scroll-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:3px}
.pl-section{padding:0 28px 28px}
.pl-section-head{display:flex;align-items:center;gap:10px;padding:14px 0 10px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:14px;flex-wrap:wrap;gap:8px}
.pl-section-title{font-size:14px;font-weight:700;letter-spacing:-.01em}
.pl-section-sub{font-size:10px;color:var(--txt3);margin-left:2px}
.pl-badge{padding:3px 10px;border-radius:100px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.pl-badge-action{background:rgba(41,151,255,.12);color:var(--blue);border:1px solid rgba(41,151,255,.25)}
.pl-badge-auto{background:rgba(255,255,255,.05);color:var(--txt3);border:1px solid rgba(255,255,255,.08)}
.pl-sub-label{font-size:11px;font-weight:700;color:var(--txt2);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.pl-sub-label span{font-size:9px;color:var(--txt4);font-weight:500}
.pl-sub-label.dim{color:var(--txt3)}
.pl-kanban{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 0 10px;-webkit-overflow-scrolling:touch;min-height:160px}
.pl-kanban::-webkit-scrollbar{height:4px}
.pl-kanban::-webkit-scrollbar-thumb{background:rgba(255,255,255,.07);border-radius:3px}

/* Kanban columns */
.col{min-width:180px;max-width:240px;flex:1;display:flex;flex-direction:column;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-2xl);box-shadow:var(--sh)}
.col.drag-over{border-color:var(--blue);box-shadow:0 0 0 2px rgba(41,151,255,.25)}
.col-head{padding:12px 14px 8px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.05)}
.col-color{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.col-name{font-size:12px;font-weight:700;flex:1}
.col-cnt{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:1px 6px;border-radius:100px;font-size:10px;font-weight:700;color:var(--txt2)}
.col-body{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:80px}
.col-body::-webkit-scrollbar{width:2px}
.col-empty{font-size:10px;color:var(--txt4);text-align:center;padding:20px 8px;border:1px dashed rgba(255,255,255,.07);border-radius:8px}

/* Person cards */
.person{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;cursor:grab;transition:transform 80ms,border-color 80ms}
.person:hover{border-color:rgba(41,151,255,.3);transform:translateY(-1px)}
.person:active{transform:scale(.97);cursor:grabbing}
.person.dragging{opacity:.4;transform:scale(.95)}
.view-only .person{cursor:default;opacity:.75}
.view-only .person:hover{border-color:rgba(255,255,255,.07);transform:none}
.p-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.editor-av{background:linear-gradient(135deg,#30d158,#248a3d);color:#fff}
.client-av{background:linear-gradient(135deg,#2997ff,#1a6dd4);color:#fff}
.trial-av{background:linear-gradient(135deg,#ff9f0a,#c93400);color:#fff}
.admin-av{background:linear-gradient(135deg,#bf5af2,#9b35c2);color:#fff}
.owner-av{background:linear-gradient(135deg,#f5a623,#d48c1e);color:#000}
.p-info{flex:1;min-width:0}
.p-name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-meta{font-size:9px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-tag{padding:2px 6px;border-radius:100px;font-size:9px;font-weight:700;flex-shrink:0}
.tag-editor{background:rgba(48,209,88,.15);color:#30d158}
.tag-client{background:rgba(41,151,255,.15);color:var(--blue)}
.tag-trial{background:rgba(255,159,10,.15);color:var(--orange)}
.tag-admin{background:rgba(191,90,242,.15);color:var(--purple)}
.tag-owner{background:rgba(245,166,35,.15);color:var(--gold)}

/* Col accent colors */
.col-onboarding .col-color{background:#2997ff}
.col-new .col-color{background:#30d158}
.col-active .col-color{background:#30d158}
.col-inactive .col-color{background:#6e6e73}
.col-core .col-color{background:#2997ff}
.col-master .col-color{background:var(--gold)}
.col-unassigned .col-color{background:#6e6e73}
.col-teamA .col-color{background:#2997ff}
.col-teamB .col-color{background:#30d158}
.col-teamC .col-color{background:var(--purple)}
.col-trial-av .col-color{background:var(--orange)}

/* Toast */
.toast-shelf{position:fixed;top:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:999;pointer-events:none}
.toast{padding:10px 16px;background:linear-gradient(135deg,rgba(20,20,24,.98),rgba(12,12,16,.99));border:var(--glass-b);border-radius:12px;font-size:12px;font-weight:600;box-shadow:var(--sh);display:flex;align-items:center;gap:8px;animation:toastIn .25s var(--ease);color:var(--txt);pointer-events:auto}
.toast.out{animation:toastOut .2s var(--ease) forwards}
.toast-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.toast-dot.orange{background:var(--orange)}
.toast-dot.blue{background:var(--blue)}
.toast-close{width:16px;height:16px;border:none;background:none;color:var(--txt3);cursor:pointer;padding:0;margin-left:4px;display:flex;align-items:center;justify-content:center;opacity:.5;transition:opacity .15s}
.toast-close:hover{opacity:1}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-4px)}}

/* ══════════════════════
   WEBSITE PREVIEW
══════════════════════ */
.site-frame{flex:1;overflow:hidden;display:flex;flex-direction:column}
.site-nav-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.site-tab{padding:5px 14px;border:none;border-radius:8px;font-size:11px;font-weight:600;color:var(--txt3);background:transparent;cursor:pointer;font-family:var(--font)}
.site-tab:hover{color:var(--txt2)}
.site-tab.active{background:rgba(255,255,255,.08);color:var(--txt)}
.site-preview{flex:1;overflow-y:auto;background:#fff}
.site-preview::-webkit-scrollbar{width:4px}
.site-preview::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:3px}

/* Website-in-preview styles (light theme) */
.ws{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;color:#1d1d1f;background:#fff}
.ws-nav{display:flex;align-items:center;padding:16px 32px;border-bottom:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.95);backdrop-filter:blur(20px);position:sticky;top:0;z-index:10}
.ws-logo{height:28px}
.ws-nav-links{display:flex;gap:24px;margin-left:auto;font-size:14px;color:#6e6e73;list-style:none}
.ws-nav-links a{text-decoration:none;color:inherit;font-weight:500}
.ws-nav-links a:hover{color:#1d1d1f}
.ws-cta-btn{margin-left:24px;padding:9px 20px;background:#0071e3;color:#fff;border:none;border-radius:100px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.ws-hero{text-align:center;padding:60px 20px 40px;background:#fff}
.ws-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 12px;border-radius:100px;background:#f5f5f7;border:1px solid rgba(0,0,0,.06);font-size:12px;color:#6e6e73;font-weight:500;margin-bottom:24px}
.ws-badge-dot{width:6px;height:6px;border-radius:50%;background:#30d158;box-shadow:0 0 8px rgba(48,209,88,.4)}
.ws-h1{font-size:clamp(36px,5vw,64px);font-weight:700;letter-spacing:-.04em;line-height:1.05;max-width:900px;margin:0 auto 20px;color:#1d1d1f}
.ws-h1 em{font-style:normal;background:linear-gradient(135deg,#2997ff,#47a9ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ws-sub{font-size:20px;color:#6e6e73;max-width:640px;margin:0 auto 36px;line-height:1.5}
.ws-btns{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.ws-btn-p{padding:14px 28px;background:#0071e3;color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 8px 32px rgba(0,113,227,.25)}
.ws-btn-g{padding:14px 28px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(245,245,247,.9));color:#1d1d1f;border:1px solid rgba(0,0,0,.1);border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 4px 16px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.8)}
.ws-section{padding:40px 40px 60px}
.ws-container{max-width:1080px;margin:0 auto}
@media(max-width:768px){.ws-section{padding:32px 24px 48px}}
@media(max-width:430px){.ws-section{padding:24px 16px 40px}}
.ws-sec-hd{text-align:center;margin-bottom:48px;padding:0 16px}
.ws-sec-hd .label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:#2997ff;margin-bottom:12px;display:block}
.ws-sec-hd h2{font-size:52px;font-weight:700;letter-spacing:-.04em;line-height:1.08;margin-bottom:14px;color:#1d1d1f}
.ws-sec-hd h2.light{color:#f5f5f7}
.ws-sec-hd p{font-size:20px;color:#6e6e73;line-height:1.5}
.ws-sec-hd p.light{color:#a1a1a6}
.ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1200px;margin:0 auto}
.ws-card{padding:28px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:24px;box-shadow:0 4px 16px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.8);transition:transform 80ms var(--ease),box-shadow 80ms var(--ease)}
.ws-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.8)}
.ws-card-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#e8f4ff,#cce5ff);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px}
.ws-card h3{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px;color:#1d1d1f}
.ws-card p{font-size:14px;color:#6e6e73;line-height:1.55}
.ws-stats{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:48px}
.ws-stat{padding:20px 28px;background:#f5f5f7;border-radius:18px;text-align:center;min-width:120px}
.ws-stat .num{font-size:32px;font-weight:700;letter-spacing:-.03em;color:#1d1d1f}
.ws-stat .lbl{font-size:12px;color:#6e6e73;font-weight:500;margin-top:2px}
/* Token indicator */
.token-bar{background:rgba(255,255,255,.03);border-top:1px solid rgba(255,255,255,.07);padding:10px 20px;display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
.tok{font-size:9px;font-family:monospace;color:var(--txt4);padding:2px 8px;background:rgba(255,255,255,.04);border-radius:4px;border:1px solid rgba(255,255,255,.06)}
.tok.new{color:var(--green);border-color:rgba(48,209,88,.2);background:rgba(48,209,88,.05)}
.tok-label{font-size:9px;color:var(--txt4);align-self:center;margin-right:4px;font-weight:600}

@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}

/* ── Light-Theme Tokens ── */
.ws-page{
  --t1:#f5f5f7;--t2:#a1a1a6;--t3:#6e6e73;
  --glass-bg:rgba(255,255,255,.06);--glass-bg-alt:rgba(255,255,255,.04);--glass-border:rgba(255,255,255,.1);
  --shadow-card:0 2px 8px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.4);
  --shadow-hover:0 4px 12px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.5);
  --shadow-btn:0 2px 8px rgba(41,151,255,.2),0 6px 20px rgba(41,151,255,.15);
}
.ws-page{
  font-family:var(--font);font-size:16px;line-height:1.6;color:var(--t1) !important;
  background:linear-gradient(180deg,#111 0%,#0a0a0a 25%,#050505 55%,#000 100%);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ── Layout ── */
.ws-page main{position:relative;z-index:1;max-width:100vw}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 40px}

/* ═══ SECTION — 3-Color Rotating Backgrounds with Glass ═══ */
/* Pattern: WHITE → BLUE → BLACK → WHITE → BLUE → BLACK → WHITE ... */
.section{position:relative;padding:60px 0 40px;overflow:hidden}
.section + .section{border-top:none}

/* BLACK gradient sections (3, 6, 9…) — glass overlays baked in */
.section:nth-child(3n){
  background:
    radial-gradient(ellipse 140% 50% at 50% -5%,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 30%,transparent 55%),
    radial-gradient(ellipse 60% 45% at 25% 0%,rgba(41,151,255,.05) 0%,transparent 45%),
    radial-gradient(ellipse 60% 45% at 75% 5%,rgba(160,80,240,.03) 0%,transparent 45%),
    linear-gradient(180deg,#111113 0%,#0a0a0c 20%,#060608 50%,#030305 100%)}

/* BLUE gradient sections (2, 5, 8…) — glass overlays baked in */
.section:nth-child(3n+2){
  background:
    radial-gradient(ellipse 130% 45% at 50% -8%,rgba(255,255,255,.08) 0%,rgba(255,255,255,.025) 35%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 25% 3%,rgba(41,151,255,.06) 0%,transparent 50%),
    radial-gradient(ellipse 50% 40% at 75% 8%,rgba(100,50,200,.035) 0%,transparent 50%),
    linear-gradient(180deg,#0c1627 0%,#080f1c 25%,#050a14 55%,#020610 100%)}

/* WHITE gradient sections (1, 4, 7, 10…) — glass overlays baked in */
.section:nth-child(3n+1){
  background:
    radial-gradient(ellipse 130% 45% at 50% -8%,rgba(41,151,255,.04) 0%,rgba(41,151,255,.01) 35%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 25% 3%,rgba(41,151,255,.03) 0%,transparent 50%),
    radial-gradient(ellipse 50% 40% at 75% 8%,rgba(160,80,240,.02) 0%,transparent 50%),
    linear-gradient(180deg,#f5f5f7 0%,#e8e8ed 60%,#d2d2d7 100%);
  /* Override tokens for light background */
  --t1:#1d1d1f;--t2:#6e6e73;--t3:#86868b;
  --glass-border:rgba(41,151,255,.10);--glass-bg:rgba(41,151,255,.04);--glass-bg-alt:rgba(41,151,255,.03);--glass-tint:rgba(41,151,255,.03);
  --shadow-card:0 2px 8px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05);
  --shadow-hover:0 4px 12px rgba(0,0,0,.08),0 12px 32px rgba(0,0,0,.06);
  color:#1d1d1f !important}

/* WHITE section text/component overrides (sections 4, 7 — hero section 1 has its own rules) */
.section:nth-child(3n+1) .hero-title,
.section:nth-child(3n+1) .hero-title .line1,
.section:nth-child(3n+1) .hero-title em,
.section:nth-child(3n+1) .hero-title .line2,
.section:nth-child(3n+1) .hero-title .accent,
.section:nth-child(3n+1) .section-title,
.section:nth-child(3n+1) .section-sub,
.section:nth-child(3n+1) .step-title,
.section:nth-child(3n+1) .step-desc,
.section:nth-child(3n+1) .step-item,
.section:nth-child(3n+1) .feature-title,
.section:nth-child(3n+1) .feature-desc,
.section:nth-child(3n+1) .table-header h3,
.section:nth-child(3n+1) .table-row span:first-child,
.section:nth-child(3n+1) .review-name,
.section:nth-child(3n+1) .review-quote,
.section:nth-child(3n+1) .review-quote strong,
.section:nth-child(3n+1) .featured-body p,
.section:nth-child(3n+1) .featured-body strong,
.section:nth-child(3n+1) .featured-info h4,
.section:nth-child(3n+1) .mini-name,
.section:nth-child(3n+1) .mini-quote,
.section:nth-child(3n+1) .mini-quote strong,
.section:nth-child(3n+1) .sub-title,
.section:nth-child(3n+1) .founder-name,
.section:nth-child(3n+1) .showcase-meta-name{color:#1d1d1f !important}

.section:nth-child(3n+1) .hero-title .line2,
.section:nth-child(3n+1) .hero-title .accent{color:#6e6e73 !important}
.section:nth-child(3n+1) .section-label{color:var(--blue-brand) !important}
.section:nth-child(3n+1) .hero-sub,
.section:nth-child(3n+1) .hero-pill,
.section:nth-child(3n+1) .section-sub,
.section:nth-child(3n+1) .table-header p,
.section:nth-child(3n+1) .val-no,
.section:nth-child(3n+1) .review-badge,
.section:nth-child(3n+1) .featured-info p,
.section:nth-child(3n+1) .mini-role,
.section:nth-child(3n+1) .founder-handle,
.section:nth-child(3n+1) .showcase-meta-focus,
.section:nth-child(3n+1) .step-item{color:#6e6e73 !important}

.section:nth-child(3n+1) .val-yes{color:var(--blue-brand)}
.section:nth-child(3n+1) .table-cols span:last-child{color:var(--blue-brand)}
.section:nth-child(3n+1) .review-stars,
.section:nth-child(3n+1) .mini-stars{color:var(--gold)}

.section:nth-child(3n+1) .card,
.section:nth-child(3n+1) .table-card{background:linear-gradient(180deg,rgba(41,151,255,.05) 0%,rgba(41,151,255,.02) 70%,transparent 100%);border:1px solid rgba(41,151,255,.10);border-bottom-color:transparent;box-shadow:0 2px 12px rgba(0,0,0,.05),0 8px 32px rgba(0,0,0,.03);-webkit-backdrop-filter:saturate(140%) blur(20px);backdrop-filter:saturate(140%) blur(20px)}
.section:nth-child(3n+1) .card:hover{border-color:rgba(41,151,255,.20);border-bottom-color:transparent;box-shadow:0 4px 16px rgba(41,151,255,.08),0 12px 40px rgba(0,0,0,.05)}
.section:nth-child(3n+1) .card::before{background:linear-gradient(90deg,transparent,rgba(41,151,255,.04),transparent)}
.section:nth-child(3n+1) .table-cols{background:rgba(41,151,255,.04)}
.section:nth-child(3n+1) .table-row{border-bottom-color:rgba(41,151,255,.06)}
.section:nth-child(3n+1) .table-header{border-bottom-color:rgba(41,151,255,.08)}
.section:nth-child(3n+1) .review-card,
.section:nth-child(3n+1) .mini-card,
.section:nth-child(3n+1) .featured-review{background:rgba(41,151,255,.04);border-color:rgba(41,151,255,.10)}
.section:nth-child(3n+1) .stat+.stat::before{background:rgba(0,0,0,.12)}
.section:nth-child(3n+1) .stat-value{color:#1d1d1f}
.section:nth-child(3n+1) .stat-label{color:#6e6e73}
.section:nth-child(3n+1) .feature-icon{background:rgba(0,113,227,.08);border-color:rgba(0,113,227,.15)}
.section:nth-child(3n+1) .step-number{background:linear-gradient(135deg,#2997ff,var(--blue-brand));box-shadow:0 4px 16px rgba(41,151,255,.25)}
.section:nth-child(3n+1) .portfolio-card{background:rgba(41,151,255,.04);border-color:rgba(41,151,255,.10)}
.section:nth-child(3n+1) .portfolio-badge{background:rgba(41,151,255,.06);color:#1d1d1f;border-color:rgba(41,151,255,.10)}
.section:nth-child(3n+1) .creator-rail-wrap{background:rgba(41,151,255,.04);border-color:rgba(41,151,255,.10);box-shadow:0 2px 12px rgba(0,0,0,.05),0 8px 32px rgba(0,0,0,.03)}
.section:nth-child(3n+1) .creator-rail-wrap::before{background:linear-gradient(90deg,transparent,rgba(41,151,255,.06),transparent)}

/* Dark section text overrides */
.section .section-title,
.section .section-sub,
.section .section-label,
.section .step-title,
.section .step-desc,
.section .step-item,
.section .feature-title,
.section .feature-desc,
.section .table-header h3,
.section .table-header p,
.section .table-row span:first-child,
.section .review-name,
.section .review-quote,
.section .review-quote strong,
.section .featured-body p,
.section .featured-body strong,
.section .featured-info h4,
.section .mini-name,
.section .mini-quote,
.section .mini-quote strong,
.section .sub-title,
.section .founder-name,
.section .showcase-meta-name{color:var(--t1) !important}

.section .hero-sub,
.section .section-sub,
.section .table-header p,
.section .val-no,
.section .review-badge,
.section .featured-info p,
.section .mini-role,
.section .founder-handle,
.section .showcase-meta-focus,
.section .step-item{color:var(--t2) !important}

.section .section-label{color:#2997ff !important}
.section .val-yes{color:#2997ff}
.section .table-cols span:last-child{color:#2997ff}
.section .card,
.section .table-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.section .card:hover{border-color:rgba(41,151,255,.25)}
.section .card::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
.section .table-cols{background:rgba(255,255,255,.04)}
.section .table-row{border-bottom-color:rgba(255,255,255,.06)}
.section .table-header{border-bottom-color:rgba(255,255,255,.08)}
.section .step-number{background:linear-gradient(135deg,#2997ff,var(--blue-brand,#0071e3));box-shadow:0 4px 16px rgba(41,151,255,.3)}
.section .feature-icon{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.2)}
.section .stat+.stat::before{background:rgba(255,255,255,.12)}
.section .review-card,
.section .mini-card,
.section .featured-review{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.section .review-stars,
.section .mini-stars{color:var(--gold)}
.section .btn-ghost{color:#2997ff;border-color:rgba(41,151,255,.3)}
.section .btn-ghost:hover{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.5)}
.section>*{position:relative;z-index:1}

/* ── Liquid Glass Bubbles (border-free, color-matched to section bg) ── */
.section::before{content:'';position:absolute;pointer-events:none;z-index:0;border-radius:50%;will-change:transform;border:none}
/* WHITE sections — subtle blue-tinted bubbles */
.section:nth-child(1)::before{width:300px;height:300px;top:-80px;right:-60px;background:radial-gradient(circle,rgba(0,113,227,.04) 0%,rgba(0,113,227,.015) 40%,transparent 70%)}
.section:nth-child(4)::before{width:380px;height:380px;bottom:-100px;right:-60px;top:auto;background:radial-gradient(circle,rgba(0,113,227,.04) 0%,rgba(0,113,227,.015) 40%,transparent 70%)}
.section:nth-child(7)::before{width:280px;height:280px;top:20%;right:-50px;background:radial-gradient(circle,rgba(0,113,227,.035) 0%,transparent 60%)}
/* BLUE sections — bright blue + purple bubbles */
.section:nth-child(2)::before{width:450px;height:450px;top:-100px;left:-80px;background:radial-gradient(circle,rgba(41,151,255,.06) 0%,rgba(41,151,255,.02) 40%,transparent 70%)}
.section:nth-child(5)::before{width:350px;height:350px;top:-60px;left:60%;background:radial-gradient(circle,rgba(41,151,255,.06) 0%,rgba(41,151,255,.02) 40%,transparent 70%)}
/* BLACK sections — cool blue bubbles */
.section:nth-child(3)::before{width:400px;height:400px;bottom:-120px;left:-100px;top:auto;background:radial-gradient(circle,rgba(41,151,255,.04) 0%,rgba(41,151,255,.015) 40%,transparent 70%)}
.section:nth-child(6)::before{width:320px;height:320px;top:30%;left:-80px;background:radial-gradient(circle,rgba(41,151,255,.03) 0%,transparent 60%)}

/* ═══ CARD — Universal card component ═══ */
.ws-page .card{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:var(--s4);box-shadow:var(--shadow-card);transition:transform .3s var(--ease);will-change:transform}
.ws-page .card::before{content:'';position:absolute;top:0;left:8px;right:8px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
.ws-page .card:hover{transform:translateY(-4px)}

/* ═══ TYPOGRAPHY SCALE ═══ */
.hero-title{font-family:var(--font-display);font-size:clamp(30px,4.5vw,56px);font-weight:600;line-height:1.15;letter-spacing:-.04em;margin-bottom:var(--s3);max-width:900px;margin-left:auto;margin-right:auto;color:var(--t1) !important}
.hero-title .line1{display:block;color:var(--t1) !important;font-weight:600}
.hero-title .line2{display:block;color:var(--t2) !important;font-weight:600;font-size:.85em;letter-spacing:-.02em;margin-top:var(--s1)}
.hero-title em{font-style:normal;color:var(--t1) !important;font-weight:600}
.section-title{font-family:var(--font-display);font-size:clamp(28px,4vw,48px);font-weight:600;line-height:1.15;letter-spacing:-.035em;color:var(--t1)}
.section-sub{font-family:var(--font-display);font-size:clamp(16px,1.8vw,20px);font-weight:400;color:var(--t2);max-width:100%;margin:0 auto;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.section-label{display:inline-block;font-size:14px;font-weight:700;line-height:1.5;text-transform:uppercase;letter-spacing:2px;color:var(--blue-brand)}
.section-header{text-align:center;margin-bottom:var(--s3)}
.section-header .section-label{margin-bottom:var(--s2)}
.section-header .section-title{margin-bottom:var(--s2)}

/* ═══ 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:600;text-decoration:none;cursor:pointer;border:none;font-family:var(--font);letter-spacing:-.01em;transition:transform 80ms var(--ease);will-change:transform}
.btn-primary{background:var(--blue-brand,#0071e3);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--blue-hover,#0077ed);transform:translateY(-2px)}
.btn-primary:active{transform:scale(.97);transition-duration:40ms}
.btn-lg{padding:0 32px;font-size:16px}
.btn-hero{padding:0 32px;font-size:16px;font-weight:600}
.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:hover{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.5);transform:translateY(-1px)}
.ws-page .btn-ghost:active{transform:scale(.97);transition-duration:40ms}
.section-cta{text-align:center;margin-top:var(--s4);display:flex;flex-direction:column;align-items:center;gap:var(--s1)}

/* ═══ HERO SECTION ═══ */
.section.hero{background:#fff !important}
.section.hero .hero-title,.section.hero .hero-title .line1,.section.hero .hero-title em{color:#1d1d1f !important}
.section.hero .hero-title .line2{color:#6e6e73 !important}
.section.hero .hero-sub{color:#6e6e73}
.section.hero .stat-value{color:#1d1d1f}
.section.hero .stat-label{color:#6e6e73}
.section.hero .stat{border-color:rgba(0,0,0,.1)}
.section.hero .showcase-card{background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.02) 70%,transparent 100%);border:1px solid rgba(0,0,0,.1);border-bottom-color:transparent;box-shadow:0 2px 12px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.04);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.section.hero .showcase-card.active{border-color:rgba(0,113,227,.15);box-shadow:0 4px 16px rgba(0,0,0,.08),0 12px 32px rgba(0,0,0,.06)}
.section.hero .showcase-card.inactive::after{background:rgba(255,255,255,.3)}
.section.hero .showcase-arrow{color:#6e6e73}
.section.hero .showcase-top-label{color:#6e6e73}
.section.hero .showcase-top-label-edit{color:var(--blue-brand)}
.hero{padding:60px 0 40px;text-align:center}
.hero-logo{height:72px;margin-bottom:var(--s3);object-fit:contain}
.hero-tagline{font-family:var(--font-display);font-size:clamp(15px,2.2vw,20px);font-weight:600;margin-bottom:var(--s2)}
.hero-sub{font-size:clamp(16px,1.8vw,20px);color:var(--t2);max-width:100%;margin:0 auto var(--s4);line-height:1.5;font-weight:400;letter-spacing:.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}
.hero-note{font-size:13px;color:var(--t2);font-weight:500}
.hero-note a{color:var(--blue-brand);text-decoration:none;font-weight:600}
.hero-note a:hover{text-decoration:underline}

/* ═══ STATS ROW ═══ */
.stats-row{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-top:var(--s4);margin-bottom:var(--s8)}
.stat{text-align:center;padding:0 var(--s3);position:relative}
.stat+.stat::before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.12)}
.stat-value{font-size:20px;font-weight:700;color:var(--t1);margin-bottom:0}
.stat-value.accent{color:var(--blue-brand)}
.stat-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--t2)}
.stat-label.accent{color:var(--blue-brand)}

/* ═══ SHOWCASE CARDS ═══ */
.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);max-width:1200px;margin:0 auto}
.showcase-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:var(--s2);box-shadow:0 1px 3px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.1);transition:transform .12s var(--ease),opacity .12s var(--ease);position:relative;overflow:hidden;will-change:transform;cursor:pointer}
.showcase-card::before{content:'';position:absolute;inset:0;border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(0,0,0,.01) 0%,transparent 35%);pointer-events:none}
.showcase-card.active{transform:scale(1.04);border-color:rgba(0,113,227,.15);box-shadow:0 4px 16px rgba(0,0,0,.22),0 12px 32px rgba(0,0,0,.15);z-index:2}
.showcase-card.inactive::after{content:'';position:absolute;inset:0;border-radius:var(--r-xl);background:rgba(0,0,0,.05);z-index:3;pointer-events:none;transition:opacity .12s var(--ease)}
.showcase-card.inactive:hover::after{opacity:.25}
.showcase-card:hover{border-color:rgba(0,113,227,.15)}
.showcase-labels-row{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s1);justify-content:center}
.showcase-top-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px var(--s1);background:rgba(255,255,255,.06);border-radius:var(--s1);white-space:nowrap;flex:1;text-align:center}
.showcase-top-label-spacer{width:var(--s2);flex-shrink:0}
.showcase-top-label-raw{color:var(--t2)}
.showcase-top-label-edit{color:var(--blue-brand)}
.showcase-compare{display:flex;align-items:stretch;gap:var(--s1);position:relative}
.showcase-video{flex:1;position:relative;aspect-ratio:9/16;border-radius:var(--s1);overflow:hidden;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06)}
.showcase-video video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
.showcase-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;color:var(--t3)}
.showcase-arrow svg{opacity:.4}

/* ═══ TRUST — Creator Rail ═══ */
.stars-row{display:flex;justify-content:center;gap:var(--s1);margin-bottom:var(--s2)}
.stars-row svg{width:18px;height:18px;fill:var(--blue-brand,#0071e3)}
.creator-rail-wrap{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:var(--s3);box-shadow:0 2px 12px rgba(0,0,0,.25),0 8px 32px rgba(0,0,0,.15);overflow:visible;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.creator-rail-wrap::before{content:'';position:absolute;top:0;left:12px;right:12px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);pointer-events:none}
.section .creator-rail-wrap{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.section .creator-rail-wrap::before{content:'';position:absolute;top:0;left:12px;right:12px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
.section .creator-chip:hover{background:rgba(255,255,255,.06)}
.section .creator-chip.active{background:rgba(41,151,255,.08)}
.section .creator-chip-avatar{border-color:rgba(255,255,255,.12)}
.section .creator-chip:hover .creator-chip-avatar{border-color:rgba(41,151,255,.3)}
.section .creator-chip-handle{color:#a1a1a6}
.section .creator-chip.active .creator-chip-handle{color:#f5f5f7}
.section .creator-chip-subs{color:#86868b}
.section .creator-chip.active .creator-chip-subs{color:#2997ff}
.section .showcase-divider{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
.section .showcase-vcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);box-shadow:0 2px 8px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.2)}
.section .showcase-vcard:hover{border-color:rgba(41,151,255,.25)}
.section .stars-row svg{fill:#2997ff}
.creator-rail{display:flex;gap:var(--s3);padding:var(--s2);overflow-x:auto;scroll-behavior:smooth;cursor:grab;justify-content:center;-ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.creator-rail::-webkit-scrollbar{display:none}
.creator-rail.grabbing{cursor:grabbing;scroll-behavior:auto}
.creator-chip{display:flex;flex-direction:column;align-items:center;gap:var(--s1);flex-shrink:0;cursor:pointer;padding:var(--s2);border-radius:var(--r-xl);position:relative;min-width:120px}
.creator-chip:hover{background:rgba(255,255,255,.06)}
.creator-chip::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--blue-brand,#0071e3);border-radius:1px;transform:translateX(-50%);transition:width .3s var(--ease)}
.creator-chip.active::after{width:48px}
.creator-chip.active{background:rgba(0,113,227,.04)}
.creator-chip-avatar{width:110px;height:110px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.12);transition:transform .3s var(--ease);will-change:transform;position:relative}
.creator-chip:hover .creator-chip-avatar{border-color:rgba(0,113,227,.25)}
.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-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.creator-chip-handle{font-size:12px;font-weight:500;color:var(--t2);letter-spacing:-.01em;white-space:nowrap}
.creator-chip.active .creator-chip-handle{color:var(--t1)}
.creator-chip-subs{font-size:13px;font-weight:700;color:var(--t3)}
.creator-chip.active .creator-chip-subs{color:var(--blue-brand)}

/* Showcase Stage */
.showcase-divider{height:1px;margin:var(--s2) 0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.03),transparent)}
.showcase-stage{opacity:0;transform:translateY(8px);transition:opacity .15s var(--ease),transform .15s var(--ease);max-height:0;overflow:hidden;will-change:transform}
.showcase-stage.open{opacity:1;transform:translateY(0);max-height:600px;overflow:visible}
.showcase-meta{text-align:center;margin-bottom:var(--s2)}
.showcase-meta-name{font-size:18px;font-weight:700;color:var(--t1);letter-spacing:-.02em;margin-bottom:var(--s1)}
.showcase-meta-subs{font-size:13px;font-weight:600;color:var(--blue-brand);margin-bottom:var(--s1)}
.showcase-meta-focus{font-size:13px;color:var(--t2);line-height:1.5;max-width:480px;margin:0 auto}
.showcase-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.showcase-vcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:var(--s1);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.12);transition:transform .3s var(--ease);will-change:transform}
.showcase-vcard:hover{border-color:rgba(0,113,227,.2);transform:translateY(-3px)}
.showcase-vcard iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-md);display:block}

/* Marquee */
.marquee{overflow:hidden;padding:var(--s1) 0;margin-top:var(--s2);position:relative}
.marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#0c1627,transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,#0c1627,transparent)}
/* Match marquee edges to the section bg they sit in */
.section:nth-child(3n+2) .marquee::before{background:linear-gradient(90deg,#0c1627,transparent)}
.section:nth-child(3n+2) .marquee::after{background:linear-gradient(270deg,#0c1627,transparent)}
.section:nth-child(3n) .marquee::before{background:linear-gradient(90deg,#0a0a0a,transparent)}
.section:nth-child(3n) .marquee::after{background:linear-gradient(270deg,#0a0a0a,transparent)}
.section:nth-child(3n+1) .marquee::before{background:linear-gradient(90deg,#fff,transparent)}
.section:nth-child(3n+1) .marquee::after{background:linear-gradient(270deg,#fff,transparent)}
.section .marquee-track img{mix-blend-mode:screen;opacity:.35}
.section .marquee-track img:hover{opacity:.6}
.section .showcase-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);box-shadow:0 1px 3px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.2)}
.section .showcase-card.active{border-color:rgba(41,151,255,.2);box-shadow:0 4px 16px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.25)}
.section .showcase-card.inactive::after{background:rgba(0,0,0,.2)}
.section .showcase-top-label{background:rgba(255,255,255,.06)}
.section .showcase-top-label-raw{color:#a1a1a6}
.section .showcase-top-label-edit{color:#2997ff}
.section .showcase-video{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.06)}
.section .showcase-arrow{color:#a1a1a6}
.marquee-track{display:flex;gap:64px;animation:marquee-scroll 45s linear infinite;width:max-content;will-change:transform}
.marquee-track img{height:38px;width:auto;mix-blend-mode:multiply;object-fit:contain;opacity:.5;transition:opacity .15s var(--ease);flex-shrink:0}
.marquee-track img:hover{opacity:.85}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══ STEPS ═══ */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.step-number{width:42px;height:42px;border-radius:var(--r-lg);background:var(--blue-brand,#0071e3);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:#fff;box-shadow:0 4px 12px rgba(0,113,227,.3)}
.step-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.step-title{font-size:15px;font-weight:700;color:var(--t1)}
.step-desc{font-size:13px;color:var(--t1);line-height:1.55;margin-bottom:var(--s1)}
.step-list{display:flex;flex-direction:column;gap:var(--s1)}
.step-item{display:flex;align-items:center;gap:var(--s1);font-size:12px;color:var(--t1)}
.step-item svg{width:14px;height:14px;stroke:var(--blue-brand,#0071e3);fill:none;stroke-width:2.5;flex-shrink:0}

/* ═══ PORTFOLIO ═══ */
.portfolio-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3)}
.portfolio-card{position:relative;aspect-ratio:9/16;border-radius:var(--r-xl);overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:transform .12s var(--ease);will-change:transform}
.portfolio-card:hover{transform:translateY(-5px);border-color:rgba(0,113,227,.2)}
.portfolio-card video{width:100%;height:100%;object-fit:cover}
.portfolio-badge{position:absolute;top:var(--s1);left:var(--s1);padding:3px 8px;font-size:8px;font-weight:700;text-transform:uppercase;background:rgba(255,255,255,.08);color:#f5f5f7;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.12)}
.section .portfolio-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.section .portfolio-card:hover{border-color:rgba(41,151,255,.25)}
.section .portfolio-badge{background:rgba(255,255,255,.08);color:#f5f5f7;border-color:rgba(255,255,255,.12)}

/* ═══ FEATURES ═══ */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.feature-icon{width:40px;height:40px;border-radius:var(--r-lg);background:rgba(41,151,255,.12);border:1px solid rgba(41,151,255,.2);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s1)}
.feature-icon svg{width:18px;height:18px;stroke:var(--blue-brand,#0071e3);fill:none;stroke-width:1.5}
.feature-title{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:var(--s1)}
.feature-desc{font-size:12px;color:var(--t1);line-height:1.55}

/* ═══ COMPARISON TABLES ═══ */
.tables-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.table-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-card)}
.table-header{padding:var(--s2) var(--s3);border-bottom:1px solid rgba(255,255,255,.08)}
.table-header h3{font-size:18px;font-weight:600;color:var(--t1);margin-bottom:0}
.table-header p{font-size:13px;color:var(--t2)}
.table-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;padding:var(--s1) var(--s3);background:rgba(255,255,255,.04);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--t2)}
.table-cols span:last-child{color:var(--blue-brand)}
.table-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;padding:var(--s2) var(--s3);border-bottom:1px solid var(--glass-bg-alt,#f5f5f7);font-size:14px}
.table-row:last-child{border-bottom:none}
.table-row span:first-child{font-weight:500;color:var(--t1)}
.val-no{color:var(--t2);font-size:12px}
.val-yes{color:var(--blue-brand);font-weight:600;font-size:12px}

/* Founders */
.founders-row{display:flex;justify-content:center;gap:var(--s4);margin:var(--s4) 0}
.founder{display:flex;flex-direction:column;align-items:center}
.founder-avatar{width:92px;height:92px;border-radius:50%;overflow:hidden;margin-bottom:var(--s1);border:2px solid rgba(255,255,255,.12)}
.founder-avatar img{width:100%;height:100%;object-fit:cover}
.founder-name{font-size:14px;font-weight:600;color:var(--t1)}
.founder-handle{font-size:12px;color:var(--t2)}

/* ═══ REVIEWS ═══ */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s4)}
.review-card{padding:var(--s2)}
.review-top{display:flex;align-items:flex-start;gap:var(--s1);margin-bottom:var(--s1)}
.review-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.12);flex-shrink:0}
.review-info{flex:1;min-width:0}
.review-name{font-size:12px;font-weight:600;color:var(--t1);margin-bottom:0}
.review-name a{color:inherit;text-decoration:none}
.review-name a:hover{color:var(--blue-brand)}
.review-badge{display:inline-block;font-size:10px;font-weight:600;color:#2997ff;background:rgba(41,151,255,.1);padding:4px 10px;border-radius:var(--r-lg);border:1px solid rgba(41,151,255,.15)}
.review-stars{color:var(--gold);font-size:10px;flex-shrink:0}
.review-quote{font-size:12px;color:var(--t1);line-height:1.5;font-style:italic}
.review-quote strong{color:var(--t1);font-style:normal}

/* Featured Testimonial */
.featured-review{padding:var(--s4);margin-bottom:var(--s4)}
.featured-top{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.featured-avatar{width:48px;height:48px;border-radius:50%;background:var(--blue-brand,#0071e3);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:#fff;flex-shrink:0}
.featured-info h4{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:0}
.featured-info p{font-size:11px;color:var(--t2)}
.featured-badge{margin-left:auto;background:rgba(0,113,227,.08);border:1px solid rgba(0,113,227,.12);padding:var(--s1);border-radius:var(--r-lg);font-size:9px;font-weight:700;color:var(--blue-brand);text-transform:uppercase;letter-spacing:.5px}
.featured-body p{font-size:14px;color:var(--t1);line-height:1.65;font-style:italic;margin:0 0 var(--s2)}
.featured-body p:last-child{margin-bottom:0}
.featured-body strong{color:var(--t1);font-style:normal}

/* Mini Reviews */
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.mini-card{padding:var(--s2)}
.mini-stack{display:flex;flex-direction:column;gap:var(--s2)}
.mini-top{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s1)}
.mini-avatar{width:30px;height:30px;border-radius:50%;background:var(--blue-brand,#0071e3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.mini-name{font-size:11px;font-weight:600;color:var(--t1)}
.mini-role{font-size:9px;color:var(--t2)}
.mini-stars{margin-left:auto;color:var(--gold);font-size:9px}
.mini-quote{font-size:12px;color:var(--t1);line-height:1.5}
.mini-quote strong{color:var(--t1)}
.sub-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--t2);margin-bottom:var(--s3);text-align:center}

/* ═══ STICKY CTA (Mobile) ═══ */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:rgba(14,14,18,.95);border-top:1px solid rgba(255,255,255,.1);padding:var(--s2);display:none;align-items:center;justify-content:center;transform:translateY(100%);transition:transform .15s var(--ease);will-change:transform}
.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:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;
  padding:16px 40px;
  background:#fff;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.ws-page .cb-header-bar .cb-logo{
  position:absolute;left:40px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0;
  transition:opacity .2s var(--ease);
}
.ws-page .cb-header-bar .cb-logo:hover{opacity:.7}
.ws-page .cb-header-bar .cb-logo img{height:32px;width:auto;object-fit:contain}
/* ── Dark glass nav island (centered in header, fixed on scroll) ── */
.ws-page .cb-header{
  position:relative;
  left:auto;right:auto;
  width:auto;
  display:inline-flex;align-items:center;gap:2px;
  padding:4px;
  background:rgba(10,10,14,.55);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  backdrop-filter:saturate(180%) blur(28px);
  border:1px solid rgba(255,255,255,.08);border-radius:980px;
  box-shadow:0 4px 20px rgba(0,0,0,.25),0 0 0 .5px rgba(255,255,255,.05) inset,0 1px 0 rgba(255,255,255,.06) inset;
  z-index:100;
  transition:box-shadow .3s var(--ease);
}
/* When scrolled past header — pill floats fixed at top center */
.ws-page .cb-header.nav-fixed{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);
  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;
}
.ws-page .cb-nav-link{
  display:inline-flex;align-items:center;
  padding:6px 16px;font-size:14px;font-weight:500;
  color:rgba(255,255,255,.65);text-decoration:none;border-radius:980px;
  transition:color .2s,background .2s;
}
.ws-page .cb-nav-link:hover{color:#fff;background:rgba(255,255,255,.1)}
.ws-page .cb-nav-link.active{color:#fff;font-weight:600;background:rgba(255,255,255,.12)}
/* ── Book Free Demo link inside island ── */
.ws-page .cb-nav-cta{
  color:#fff !important;font-weight:600 !important;
  background:rgba(255,255,255,.1) !important;
  border:1px solid rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════════════════════════════
   WEBSITE: SHARED FOOTER COMPONENT
   ═══════════════════════════════════════════════════════════════ */
.ws-page .cb-footer{
  position:relative;width:100%;max-width:1200px;margin:0 auto;
  background:rgba(14,14,18,.92);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-xl);box-shadow:var(--shadow-card);
  padding:var(--s6) var(--s4) var(--s4);font-family:var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;
}
.ws-page .cb-ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:var(--s4);width:100%;margin-bottom:var(--s4)}
.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:600;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:1px solid var(--glass-border)}
.ws-page .cb-ft-hours strong{color:var(--t2);font-weight:600}
.ws-page .cb-ft-social{display:flex;gap:var(--s1);margin-top:var(--s1)}
.ws-page .cb-ft-social a{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-lg);border:1px solid rgba(41,151,255,.15);
  background:rgba(41,151,255,.08);color:#2997ff;
  transition:transform 80ms var(--ease);will-change:transform;
}
.ws-page .cb-ft-social a:hover{background:var(--blue-brand);border-color:transparent;color:#fff;transform:translateY(-2px)}
.ws-page .cb-ft-social a:active{transform:scale(.95);transition-duration:40ms}
.ws-page .cb-ft-social svg{width:16px;height:16px}
.ws-page .cb-ft-divider{width:100%;height:1px;background:var(--glass-border);margin-bottom:var(--s2)}
.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)}
.ws-page .cb-ft-legal-links{display:flex;align-items:center;gap:var(--s1) var(--s2);flex-wrap:wrap}
.ws-page .cb-ft-legal-sep{font-size:14px;color:var(--t3);opacity:.7}

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

/* Hero Pill */
.ws-page .hero-pill{
  display:inline-flex;align-items:center;gap:var(--s1);
  padding:var(--s1) var(--s3) var(--s1) var(--s2);
  border-radius:var(--radius-pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  font-size:14px;font-weight:600;color:var(--t1);margin-bottom:var(--s3);letter-spacing:.02em;
}
.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;max-width:130px;text-align:center;padding:var(--s1);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.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:700;letter-spacing:-.03em;line-height:1}
.ws-page .stat-lbl{font-family:var(--font);font-size:11px;font-weight:700;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:4px;position:relative}
.ws-page .toggle-btn{
  position:relative;z-index:2;padding:var(--s1) var(--s4);border:none;
  background:transparent;color:var(--t3);font-family:var(--font);font-size:14px;
  font-weight:600;cursor:pointer;border-radius:var(--radius-pill);white-space:nowrap;
  display:inline-flex;align-items:center;gap:var(--s1);
}
.ws-page .toggle-btn.active{color:var(--t1)}
.ws-page .toggle-slider{
  position:absolute;top:4px;left:4px;height:calc(100% - 8px);width:calc(50% - 4px);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-pill);
  transition:transform .35s var(--ease);will-change:transform;box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.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;top:var(--s2);right:var(--s2);
  background:var(--gold);color:#000;font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:2px;padding:var(--s1) var(--s2);border-radius:var(--radius-pill);
}
.ws-page .card-tier{font-family:var(--font);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:var(--s1)}
.ws-page .card-name{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.03em;margin-bottom:var(--s2)}
.ws-page .card-price-row{display:flex;align-items:baseline;gap:4px;margin-bottom:var(--s1)}
.ws-page .card-price{font-family:var(--font-display);font-size:clamp(32px,4vw,40px);font-weight:700;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:600}
.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:700;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 */
.ws-page .fl-wrap{position:relative;display:inline}
.ws-page .fl-tip{
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);width:280px;padding:var(--s2);
  background:rgba(20,30,55,.95);border:1px solid rgba(0,113,227,.1);
  border-radius:var(--r-lg);font-size:14px;font-weight:400;color:#f5f5f7;
  line-height:1.5;opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:50;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.ws-page .fl-wrap:hover .fl-tip{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.ws-page .fl-tag{color:#f5f5f7;font-weight:600;border-bottom:1px dashed rgba(255,255,255,.2);cursor:help}

/* Card CTA */
.ws-page .card-cta{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:56px;border-radius:var(--r-lg);
  background:var(--blue-brand);border:1px solid rgba(0,113,227,.1);
  color:#fff;font-family:var(--font);font-size:16px;font-weight:600;
  text-align:center;cursor:pointer;
  transition:transform 80ms var(--ease);will-change:transform;box-shadow:var(--shadow-btn);
}
.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));border-color:transparent;color:#000;
  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);
}

/* Installment Note */
.ws-page .installment-note{
  display:flex;align-items:center;justify-content:center;gap:var(--s1);
  margin-top:var(--s2);font-size:14px;color:var(--t3);
  opacity:0;transform:translateY(4px);
  transition:transform .3s var(--ease),opacity .3s var(--ease);will-change:transform;
}
.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;background:#ffffff;border:1px solid var(--glass-border);border-radius:var(--r-xl);
  padding:var(--s3);cursor:default;transition:transform .3s var(--ease);
  overflow:hidden;will-change:transform;box-shadow:var(--shadow-card);
}
.ws-page .vcard::before{content:'';position:absolute;top:0;left:8px;right:8px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.03),transparent)}
.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:700;letter-spacing:-.02em;margin-bottom:var(--s1)}
.ws-page .vcard h3 .accent{color:var(--blue-brand);font-weight:700}
.ws-page .vcard-peek{font-size:14px;color:#6e6e73;transition:opacity .15s var(--ease)}
.ws-page .vcard-full{max-height:0;overflow:hidden;opacity:0;transition:opacity .2s 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:600}
.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:1px solid rgba(255,255,255,.1)}
.ws-page .cta-block h3{font-family:var(--font-display);font-size:clamp(24px,3.5vw,40px);font-weight:600;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;align-items:center;gap:var(--s1);height:56px;padding:0 var(--s4);
  border-radius:var(--r-lg);font-family:var(--font);font-size:16px;font-weight:600;
  color:var(--t1);background:#e8e8ed;border:1px solid var(--glass-border);
  transition:transform 80ms var(--ease);will-change:transform;cursor:pointer;
}
.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 .2s var(--ease);will-change:transform}
.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{background:transparent;border-color:transparent;color:var(--t1)}
.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-bg);border-color:var(--glass-border);border-radius:var(--r-xl)}
.ws-page .section .card::before{background:linear-gradient(90deg,transparent,var(--glass-tint,rgba(255,255,255,.03)),transparent)}
.ws-page .section .card:hover{border-color:rgba(41,151,255,.25)}
.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:#2997ff}
.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)}
.ws-page .section .fl-tag{color:var(--t1);border-bottom-color:var(--glass-border)}

/* Pricing Tokens (append to root) */
:root{--gold2:#f5d060;--silver:#d4d4d8}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.ws-page .anim{animation:fadeUp .35s 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:.15s}

/* ═══ 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 20px}
  .ws-page .cb-header{padding:4px;border-radius:980px}
  .ws-page .cb-logo img{height:18px}
  .ws-page .cb-nav-link,.ws-page .cb-nav-cta{padding:6px 12px;font-size:12px}
  .ws-page .cb-nav-cta{margin-left:0}
  /* 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 */
.ws-page .faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s2)}

/* FAQ Item (details element) */
.ws-page .faq-item{
  position:relative;background:#ffffff;border:1px solid var(--glass-border);
  border-radius:var(--r-lg);padding:0;box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  will-change:transform;list-style:none;
}
.ws-page .faq-item::before{
  content:'';position:absolute;top:0;left:8px;right:8px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.03),transparent);
}
.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;align-items:center;gap:var(--s2);padding:var(--s3);
  cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none;
}
.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;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:linear-gradient(135deg,#0071e3,#0077ed);
  color:#fff !important;font-family:var(--font-display);font-size:14px;font-weight:700;
  box-shadow:0 4px 12px rgba(0,113,227,.25);
}

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

/* 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:'';position:absolute;background:var(--text-3);border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.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 .3s 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-bg);border-color:var(--glass-border)}
.ws-page .section .faq-item: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 .faq-item[open]{border-color:rgba(41,151,255,.3)}
.ws-page .section .faq-item::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
.ws-page .section .faq-number{background:linear-gradient(135deg,#2997ff,#0071e3);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:#2997ff}

/* CTA Section */
.ws-page .cta-section{text-align:center}
.ws-page .cta-section .section-title{margin-bottom:var(--s2)}
.ws-page .cta-section .section-sub{margin-bottom:var(--s4)}

/* btn-ghost (FAQ / general use) */
.ws-page .btn-ghost{
  background:transparent;border:1px solid var(--glass-border);color:var(--blue-brand);
  font-family:var(--font);font-size:16px;font-weight:600;height:56px;padding:0 28px;
  border-radius:var(--r-lg);display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  transition:all .3s var(--ease);cursor:pointer;
}
.ws-page .btn-ghost:hover{background:rgba(0,113,227,.06);border-color:rgba(0,113,227,.35)}
.ws-page .section .btn-ghost{color:#2997ff;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:600;font-size:.85em;
  letter-spacing:-.02em;margin-top:var(--s1);
}

/* 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:start}
.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-item{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--glass-tint);border:1px solid var(--glass-border);
  border-radius:var(--r-md);padding:var(--s2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ws-page .checklist-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.ws-page .checklist-icon{
  flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:#0071e3;border-radius:50%;margin-top:1px;
}
.ws-page .checklist-icon svg{width:14px;height:14px;fill:none;stroke:#fff;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 */
.ws-page .cal-wrap{
  background:var(--glass-tint);border:1px solid var(--glass-border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);
}
.ws-page .cal-wrap iframe{width:100%;border:none;display:block;min-height:700px}

/* ═══ 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);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue-brand);margin-bottom:var(--s2);
}

/* Trust Inline (stars + text) */
.ws-page .trust-inline{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-bottom:var(--s3)}
.ws-page .trust-inline .stars{display:flex;gap:4px}
.ws-page .trust-inline .stars svg{width:18px;height:18px;fill:var(--blue-brand)}
.ws-page .trust-text{font-family:var(--font);font-size:14px;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 .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:multiply;opacity:0;transition:opacity .5s var(--ease)}
.ws-page .brand-slot img.active{opacity:.85}
.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 .2s 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 .2s 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:600;color:var(--text-1);display:flex;align-items:center;gap:4px}
.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:600;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;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;
  background:#e8e8ed;border:1px solid var(--glass-border);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  box-shadow:var(--shadow-card);will-change:transform;contain:layout paint;
}
.ws-page .video-card:hover{transform:translateY(-4px);border-color:rgba(0,113,227,.25);box-shadow:0 14px 36px rgba(0,0,0,.35)}
.ws-page .video-card video{width:100%;height:100%;object-fit:cover}
.ws-page .video-overlay{
  position:absolute;bottom:0;left:0;right:0;padding:var(--s4) var(--s2) var(--s2);
  background:linear-gradient(to top,rgba(0,0,0,.9),transparent);
  opacity:0;transition:opacity .2s var(--ease);
}
.ws-page .video-card:hover .video-overlay{opacity:1}
.ws-page .video-overlay-label{font-family:var(--font);font-size:14px;font-weight:600;color:#f5f5f7}
.ws-page .video-overlay-meta{font-family:var(--font);font-size:14px;color:var(--text-3)}
.ws-page .video-badge{
  position:absolute;top:var(--s1);left:var(--s1);padding:4px var(--s2);
  font-family:var(--font);font-size:14px;font-weight:600;text-transform:uppercase;
  background:rgba(0,113,227,.06);color:var(--text-1);border-radius:var(--r-pill);
  border:1px solid rgba(0,113,227,.3);z-index:2;
}

/* 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;background:var(--glass-tint);border:1px solid var(--glass-border);
  border-radius:var(--r-lg);padding:var(--s3);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  box-shadow:var(--shadow-card);will-change:transform;contain:layout paint;
}
.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;height:40px;border-radius:50%;
  background:linear-gradient(180deg,#0077ed,#0071e3 40%,#0077ed);
  display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-size:14px;font-family:var(--font);
}
.ws-page .testimonial-name{font-family:var(--font);font-size:16px;font-weight:700;color:var(--text-1)}
.ws-page .testimonial-stars{color:#f5a623;font-size:14px;letter-spacing:1px}
.ws-page .testimonial-headline{font-family:var(--font);font-size:16px;font-weight:700;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:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.ws-page .section .testimonial-card:hover{border-color:rgba(41,151,255,.25)}
.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:#f5a623}

/* 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);background:rgba(0,113,227,.06);
  border:1px solid rgba(0,113,227,.3);border-radius:var(--r-pill);
  font-family:var(--font);font-size:14px;color:var(--text-2);transition:background .2s var(--ease),color .2s var(--ease);
}
.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;background:var(--glass-tint);border:1px solid var(--glass-border);
  border-radius:var(--r-lg);margin-bottom:var(--s3);overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  box-shadow:var(--shadow-card);will-change:transform;contain:layout paint;
}
.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:700;color:var(--text-1);margin-bottom:4px}
.ws-page .longform-subs{font-family:var(--font);font-size:16px;color:var(--blue-brand);margin-bottom:4px}
.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 .2s 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 .2s 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 .2s var(--ease)}
.ws-page .longform-video:hover .longform-play{opacity:1}

/* Dark section longform overrides */
.ws-page .section .longform-creator{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.ws-page .section .longform-creator: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 .longform-header{border-bottom-color:rgba(255,255,255,.08)}
.ws-page .section .longform-name{color:var(--t1)}
.ws-page .section .longform-subs{color:#2997ff}
.ws-page .section .longform-link{color:var(--t2)}

/* Final CTA */
.ws-page .final-cta-title{
  font-family:var(--font-display);font-size:clamp(28px,3.5vw,40px);font-weight:700;color:var(--text-1);
  margin-bottom:var(--s2);letter-spacing:-.035em;
}
.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;grid-template-columns:1fr 1fr;gap:var(--s6);
  align-items:start;position:relative;z-index:1;
}

/* Left Column — Info */
.ws-page .contact-info{display:flex;flex-direction:column;gap:var(--s4);padding-top:var(--s2)}

/* Step Badge */
.ws-page .step-badge{
  font-family:var(--font);font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:2px;color:var(--blue-brand);
}

/* Contact Title */
.ws-page .contact-title{
  font-family:var(--font-display);font-size:clamp(30px,4.5vw,56px);font-weight:600;
  letter-spacing:-.04em;line-height:1.08;color:var(--text-1);
}
.ws-page .contact-title .title-line-2{
  display:block;color:var(--text-2);font-weight:600;font-size:.85em;
}

/* Subtitle */
.ws-page .contact-subtitle{
  font-family:var(--font);font-size:17px;line-height:1.65;color:var(--text-2);max-width:480px;
}

/* Check Items (contact-details style) */
.ws-page .check-item{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--glass-tint);border:1px solid var(--glass-border);
  border-radius:var(--r-md);padding:14px var(--s2);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.ws-page .check-item:hover{box-shadow:var(--shadow-card);transform:translateY(-1px)}
.ws-page .check-icon{flex-shrink:0;width:22px;height:22px;margin-top:1px}
.ws-page .check-icon svg{width:22px;height:22px}
.ws-page .check-text{font-family:var(--font);font-size:15px;line-height:1.5;color:var(--text-1);font-weight:400}

/* Form Wrap */
.ws-page .form-wrap{
  background:var(--glass-tint);border:1px solid var(--glass-border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-card);
  padding:var(--s4);position:relative;z-index:1;
}
.ws-page .form-wrap iframe{width:100%;border:none;display:block}

/* ═══ 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;overflow:hidden;padding:var(--s10) var(--s3);
  background:var(--glass-bg,#ffffff);border-top:none;
}
.ws-page .confirmation-section::before{
  content:'';position:absolute;top:-120px;right:-80px;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(0,113,227,.06) 0%,rgba(0,113,227,.02) 40%,transparent 70%);
  border-radius:50%;pointer-events:none;z-index:0;
}

/* Content Wrap */
.ws-page .confirmation-wrap{position:relative;z-index:1;max-width:680px;margin:0 auto;text-align:center}

/* Fireworks Canvas */
.ws-page #fireworks{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* Checkmark Circle */
.ws-page .checkmark-circle{
  display:inline-flex;align-items:center;justify-content:center;
  width:80px;height:80px;background:#7ecba1;border-radius:50%;
  margin-bottom:var(--s4);animation:checkPop .6s var(--ease) both;
}
.ws-page .checkmark-circle svg{width:40px;height:40px}
@keyframes checkPop{
  0%{transform:scale(0);opacity:0}
  50%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}

/* Title */
.ws-page .confirmation-title{
  font-family:var(--font-display);font-size:clamp(30px,4.5vw,56px);font-weight:600;
  letter-spacing:-.04em;color:var(--text-1);line-height:1.1;margin-bottom:var(--s2);
}

/* Subtitle */
.ws-page .confirmation-subtitle{
  font-family:var(--font);font-size:clamp(16px,1.8vw,20px);font-weight:400;
  color:var(--text-2);line-height:1.5;margin-bottom:var(--s6);
}

/* Next Steps Card */
.ws-page .steps-card{
  background:var(--glass-tint);border:1px solid var(--glass-border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-card);
  padding:var(--s6) var(--s4);text-align:left;margin-bottom:var(--s6);
}
.ws-page .step{display:flex;align-items:flex-start;gap:var(--s3)}
.ws-page .step + .step{margin-top:var(--s4)}
.ws-page .step-number{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;background:linear-gradient(135deg,var(--blue-brand),var(--blue-brand));
  color:#fff;font-family:var(--font-display);font-size:15px;font-weight:600;
  border-radius:50%;line-height:1;
}
.ws-page .step-content{flex:1;min-width:0}
.ws-page .step-title{font-family:var(--font);font-size:17px;font-weight:600;color:var(--text-1);line-height:1.35;margin-bottom:4px}
.ws-page .step-desc{font-family:var(--font);font-size:15px;font-weight:400;color:var(--text-2);line-height:1.55}

/* 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 .7s var(--ease) forwards}
.ws-page .fade-up-d1{animation-delay:.15s}
.ws-page .fade-up-d2{animation-delay:.3s}
.ws-page .fade-up-d3{animation-delay:.5s}
.ws-page .fade-up-d4{animation-delay:.7s}
@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;overflow:hidden;border-radius:var(--r-lg);
  padding:var(--s3);box-shadow:var(--shadow-card);margin-bottom:var(--s3);
}
.ws-page .legal-section:nth-of-type(odd){background:var(--glass-tint);border:1px solid var(--glass-border)}
.ws-page .legal-section:nth-of-type(even){background:rgba(0,113,227,.04);border:1px solid rgba(0,113,227,.08)}
.ws-page .legal-section h2{
  font-family:var(--font-display);font-size:clamp(22px,2.5vw,32px);font-weight:700;
  color:var(--text-1);margin-bottom:var(--s2);padding-bottom:var(--s1);
  border-bottom:1px solid var(--glass-border);
}
.ws-page .legal-section h3{font-size:16px;font-weight:600;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:4px}
.ws-page .legal-section strong{color:var(--text-1)}

/* Highlight Box */
.ws-page .highlight-box{
  position:relative;overflow:hidden;background:var(--glass-tint);
  border:1px solid var(--glass-border);border-radius:var(--r-md);
  padding:var(--s2) var(--s3);margin:var(--s2) 0;box-shadow:var(--shadow-card);
}
.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;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow-card);
}
.ws-page .contact-box h3{font-family:var(--font-display);font-size:22px;font-weight:700;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:#2997ff;flex-shrink:0}
.ws-page .contact-item a{color:#2997ff;text-decoration:none;transition:color .2s 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:#2997ff}
.ws-page .section .response-time strong{color:var(--t1)}

/* Liquid Glass Bubbles for legal pages */
.ws-page .section:nth-child(1)::before{
  width:300px;height:300px;top:-80px;right:-60px;
  background:radial-gradient(circle,rgba(0,113,227,.05) 0%,rgba(0,113,227,.02) 40%,transparent 70%);
  border:none;
}
.ws-page .section:nth-child(2)::before{
  width:250px;height:250px;bottom:-60px;left:-40px;
  background:radial-gradient(circle,rgba(41,151,255,.08) 0%,rgba(41,151,255,.03) 40%,transparent 70%);
  border:none;
}

/* 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);border:1px solid var(--glass-border);
  border-radius:var(--r-md);padding:var(--s2) var(--s3);margin:var(--s2) 0;
}
.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%;border-collapse:collapse;margin:var(--s3) 0;
  background:var(--glass-bg,#ffffff);border:1px solid var(--glass-border);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card);
}
.ws-page .plan-table th,.ws-page .plan-table td{
  padding:var(--s2) var(--s3);text-align:left;border-bottom:1px solid var(--glass-border);
}
.ws-page .plan-table th{
  background:var(--glass-tint);color:var(--text-1);font-weight:600;
  font-size:14px;text-transform:uppercase;letter-spacing:.5px;
}
.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:600;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 .5s var(--ease) .03s both}
.ws-page .legal-section:nth-of-type(2){animation:fadeUp .5s var(--ease) .06s both}
.ws-page .legal-section:nth-of-type(3){animation:fadeUp .5s var(--ease) .09s both}
.ws-page .legal-section:nth-of-type(4){animation:fadeUp .5s var(--ease) .12s both}
.ws-page .legal-section:nth-of-type(5){animation:fadeUp .5s var(--ease) .15s both}
.ws-page .legal-section:nth-of-type(6){animation:fadeUp .5s var(--ease) .18s both}
.ws-page .legal-section:nth-of-type(7){animation:fadeUp .5s var(--ease) .21s both}
.ws-page .legal-section:nth-of-type(8){animation:fadeUp .5s var(--ease) .24s both}
.ws-page .legal-section:nth-of-type(9){animation:fadeUp .5s var(--ease) .27s both}
.ws-page .legal-section:nth-of-type(10){animation:fadeUp .5s var(--ease) .30s both}
.ws-page .legal-section:nth-of-type(11){animation:fadeUp .5s var(--ease) .33s both}
.ws-page .legal-section:nth-of-type(12){animation:fadeUp .5s var(--ease) .36s both}
.ws-page .legal-section:nth-of-type(13){animation:fadeUp .5s var(--ease) .39s both}
.ws-page .legal-section:nth-of-type(14){animation:fadeUp .5s var(--ease) .42s both}
.ws-page .legal-section:nth-of-type(15){animation:fadeUp .5s var(--ease) .45s both}
.ws-page .legal-section:nth-of-type(16){animation:fadeUp .5s var(--ease) .48s both}
.ws-page .legal-section:nth-of-type(17){animation:fadeUp .5s 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;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--s6);height:52px;
  background:rgba(12,22,39,0.92);
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.ws-page .nav-logo{
  font-family:var(--font-display);font-size:17px;font-weight:700;
  color:#fff;text-decoration:none;letter-spacing:-0.02em;
}
.ws-page .nav-back{
  font-family:var(--font);font-size:14px;font-weight:600;
  color:var(--blue);text-decoration:none;
  transition:opacity 80ms var(--ease);
}
.ws-page .nav-back:hover{opacity:0.75}

/* ── Careers Hero ── */
.ws-page .hero{
  padding:60px 0 40px;
  text-align:center;position:relative;overflow:hidden;
}
.ws-page .hero::before{
  content:'';position:absolute;top:-300px;left:50%;
  transform:translateX(-50%);width:900px;height:900px;
  background:radial-gradient(ellipse,rgba(41,151,255,.06) 0%,transparent 65%);
  pointer-events:none;
}
.ws-page .hero::after{
  content:'';position:absolute;bottom:-200px;right:-100px;
  width:500px;height:500px;
  background:radial-gradient(ellipse,rgba(41,151,255,.03) 0%,transparent 70%);
  pointer-events:none;
}
.ws-page .hero .hero-label{
  font-family:var(--font);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:2px;color:var(--blue);
  margin-bottom:var(--s3);
}
.ws-page .hero .hero-title{
  font-family:var(--font-display);
  font-size:clamp(38px,5.5vw,68px);
  font-weight:700;letter-spacing:-0.04em;line-height:1.04;
  margin-bottom:var(--s3);max-width:none;
}
.ws-page .roles-section .hero-sub{
  font-size:clamp(16px,1.8vw,20px);font-weight:400;
  color:rgba(255,255,255,0.58);max-width:100%;margin:0 auto;
  line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ws-page .hero-pills{
  display:flex;gap:10px;justify-content:center;
  margin-top:var(--s6);flex-wrap:wrap;
}
.ws-page .hero .hero-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--r-pill,100px);
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.06);
  font-family:var(--font);font-size:13px;font-weight:600;
  color:rgba(255,255,255,0.7);white-space:nowrap;
}
.ws-page .hero .hero-pill::before{display:none}

/* ── Careers Roles Section ── */
.ws-page .roles-section{
  background:#ffffff;
  padding:60px 20px 40px;
}
.ws-page .roles-section .section-label{
  font-size:13px;text-align:center;margin-bottom:var(--s3);
}
.ws-page .roles-section .section-title{
  font-size:clamp(28px,4vw,48px);
  text-align:center;margin-bottom:var(--s2);
}
.ws-page .roles-section .section-sub{
  font-family:var(--font-display);
  font-size:clamp(16px,1.8vw,20px);font-weight:400;
  color:var(--t2);text-align:center;
  max-width:100%;margin:0 auto var(--s8);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ws-page .roles-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s4);max-width:1080px;margin:0 auto;
}
.ws-page .role-card{
  background:var(--glass-bg,#fff);border:1px solid var(--glass-border,#d2d2d7);
  border-radius:var(--r-xl,18px);padding:var(--s6) var(--s4);
  display:flex;flex-direction:column;align-items:flex-start;
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease);
  will-change:transform;
  position:relative;overflow:hidden;
}
.ws-page .role-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue-brand),var(--blue));
  opacity:0;transition:opacity .3s var(--ease);
}
.ws-page .role-card:hover{transform:translateY(-5px)}
.ws-page .role-card:hover::before{opacity:1}
.ws-page .role-icon{
  width:52px;height:52px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#e8f0fc,#d0e4ff);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s3);font-size:24px;
}
.ws-page .role-card h3{
  font-family:var(--font-display);font-size:22px;font-weight:600;
  letter-spacing:-0.025em;color:var(--t1);margin-bottom:var(--s2);
}
.ws-page .role-card p{
  font-family:var(--font);font-size:15px;color:var(--t2);
  line-height:1.58;flex:1;margin-bottom:var(--s4);
}
.ws-page .role-card .btn-primary{width:100%}

/* ── Careers Wizard Overlay ── */
.ws-page .wizard-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,0.72);
  display:none;align-items:center;justify-content:center;
  padding:var(--s3);overflow-y:auto;
}
.ws-page .wizard-overlay.active{display:flex}

.ws-page .wizard-modal{
  background:#ffffff;border-radius:22px;
  width:100%;max-width:700px;
  max-height:92vh;overflow-y:auto;
  box-shadow:0 32px 100px rgba(0,0,0,0.4);
  position:relative;animation:wIn .38s var(--ease) forwards;
  scrollbar-width:thin;scrollbar-color:var(--glass-border,#d2d2d7) transparent;
}
@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);
  position:sticky;top:0;z-index:10;
  background:#ffffff;
  border-bottom:1px solid var(--glass-border);
}
.ws-page .wizard-header-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s3);
}
.ws-page .role-badge{
  font-family:var(--font);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--blue-brand);
  background:rgba(0,113,227,0.09);padding:5px 12px;
  border-radius:var(--r-pill,100px);
}
.ws-page .wizard-close{
  width:32px;height:32px;border-radius:50%;
  background:var(--glass-bg-alt,#f5f5f7);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--t2);
  transition:opacity 80ms var(--ease);
}
.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;height:4px;background:var(--glass-bg-alt);
  border-radius:2px;overflow:hidden;
}
.ws-page .progress-fill{
  height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-brand),var(--blue));
  transition:width .4s var(--ease);
}
.ws-page .progress-label{
  font-family:var(--font);font-size:12px;font-weight:600;
  color:var(--t3);white-space:nowrap;
}

/* Wizard Body */
.ws-page .wizard-body{padding:var(--s6)}
.ws-page .step-title{
  font-family:var(--font-display);font-size:26px;font-weight:600;
  letter-spacing:-0.03em;color:var(--t1);margin-bottom:6px;
}
.ws-page .step-sub{
  font-family:var(--font);font-size:15px;color:var(--t2);
  line-height:1.55;margin-bottom:var(--s4);
}

/* ── Careers Form Controls ── */
.ws-page .form-group{margin-bottom:var(--s3)}
.ws-page .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.ws-page .form-label{
  display:block;font-family:var(--font);font-size:13px;
  font-weight:600;color:var(--t1);margin-bottom:6px;letter-spacing:-0.01em;
}
.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%;padding:11px 14px;
  font-family:var(--font);font-size:15px;color:var(--t1);
  background:var(--glass-bg-alt);border:1px solid var(--glass-border);
  border-radius:var(--r-lg);outline:none;
  transition:border-color 80ms var(--ease),box-shadow 80ms var(--ease);
  -webkit-appearance:none;
}
.ws-page .form-input:focus,.ws-page .form-select:focus,.ws-page .form-textarea:focus{
  border-color:var(--blue-brand);
  box-shadow:0 0 0 3px rgba(0,113,227,0.12);
  background:#ffffff;
}
.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);border:1px solid rgba(0,113,227,0.14);
  border-radius:var(--r-lg);padding:var(--s3);margin-bottom:var(--s4);
}
.ws-page .info-box-label{
  font-family:var(--font);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.8px;color:var(--blue-brand);
  margin-bottom:8px;
}
.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:600}
.ws-page .info-box a:hover{text-decoration:underline}

.ws-page .warn-box{
  background:rgba(245,166,35,0.07);border:1px solid rgba(245,166,35,0.22);
  border-radius:var(--r-lg);padding:var(--s3);margin-bottom:var(--s4);
}
.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;align-items:center;gap:12px;
  padding:13px 16px;border:1px solid var(--glass-border);
  border-radius:var(--r-lg);cursor:pointer;user-select:none;
}
.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-dot{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--glass-border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.ws-page .radio-opt.sel .radio-dot{border-color:var(--blue-brand)}
.ws-page .radio-dot-inner{
  width:8px;height:8px;border-radius:50%;
  background:var(--blue-brand);opacity:0;transform:scale(0.6);
  transition:opacity .2s var(--ease),transform .2s var(--ease);
  will-change:transform;
}
.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:8px;margin-bottom:var(--s3)}
.ws-page .chip{
  padding:8px 15px;border:1px solid var(--glass-border);
  border-radius:var(--r-pill,100px);
  font-family:var(--font);font-size:13px;font-weight:600;
  color:var(--t2);cursor:pointer;user-select:none;
}
.ws-page .chip:hover{border-color:rgba(0,113,227,0.35);color:var(--t1)}
.ws-page .chip.sel{background:var(--blue-brand);border-color:var(--blue-brand);color:#fff}
.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;background:var(--glass-bg-alt);
  border:1px solid var(--glass-border);border-radius:var(--r-lg);
  font-family:var(--font);font-size:13px;font-weight:600;
  color:var(--t1);cursor:pointer;white-space:nowrap;
}
.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);border-radius:var(--r-xl);
  padding:var(--s6) var(--s4);text-align:center;cursor:pointer;
}
.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:600;color:var(--t1);margin-bottom:4px}
.ws-page .upload-hint{font-family:var(--font);font-size:13px;color:var(--t3)}
.ws-page .upload-fname{
  margin-top:var(--s2);font-family:var(--font);
  font-size:13px;color:var(--blue-brand);font-weight:600;min-height:18px;
}

/* ── Checkbox (Careers) ── */
.ws-page .check-opt{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border:1px solid var(--glass-border);
  border-radius:var(--r-lg);cursor:pointer;user-select:none;
}
.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;height:18px;border-radius:5px;
  border:2px solid var(--glass-border);flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;
}
.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;border-radius:var(--r-xl);
  overflow:hidden;aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s3);position:relative;
}
.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);font-size:14px;
  color:rgba(255,255,255,0.5);line-height:1.55;
}
.ws-page .video-placeholder .vt-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;margin-top:var(--s3);padding:12px 24px;
  background:var(--blue-brand);color:#fff;
  font-family:var(--font);font-size:15px;font-weight:600;
  border:none;border-radius:var(--r-lg);cursor:pointer;
  box-shadow:var(--shadow-btn);
  transition:transform 80ms var(--ease);will-change:transform;
}
.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-wrap{text-align:center;padding:var(--s10) var(--s6)}
.ws-page .success-check{
  width:76px;height:76px;border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--green));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--s4);font-size:34px;color:#fff;
  box-shadow:0 8px 24px rgba(126,203,161,0.35);
}
.ws-page .success-title{
  font-family:var(--font-display);font-size:30px;font-weight:700;
  letter-spacing:-0.035em;color:var(--t1);margin-bottom:var(--s2);
}
.ws-page .success-sub{
  font-family:var(--font);font-size:16px;color:var(--t2);
  line-height:1.65;max-width:420px;margin:0 auto var(--s6);
}
.ws-page .success-close{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 28px;background:var(--t1);color:#fff;
  font-family:var(--font);font-size:15px;font-weight:600;
  border:none;border-radius:var(--r-lg);cursor:pointer;
  transition:opacity 80ms var(--ease);
}
.ws-page .success-close:hover{opacity:0.8}

/* ── Wizard Footer ── */
.ws-page .wizard-footer{
  padding:var(--s4) var(--s6);
  border-top:1px solid var(--glass-border);
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;bottom:0;background:#ffffff;z-index:5;
}
.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;border-bottom:1px solid var(--glass-bg-alt);
  font-family:var(--font);font-size:14px;vertical-align:top;
}
.ws-page .review-table tr td:first-child{color:var(--t3);font-weight:600;width:45%;padding-right:12px}
.ws-page .review-table tr td:last-child{color:var(--t1)}

/* ── Careers Page Footer ── */
.ws-page .page-footer{
  background:#0c1627;padding:var(--s8) var(--s6);text-align:center;
}
.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 .4s 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 ── */
.cb-header{
  position:fixed;top:0;left:0;right:0;
  width:100%;
  background:#0a0a0a;
  border-bottom:1px solid rgba(255,255,255,.08);
  z-index:1000;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.cb-header-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1200px;margin:0 auto;padding:0 var(--s4);height:64px;
}

/* ── Logo ── */
.cb-logo{
  display:inline-flex;align-items:center;text-decoration:none;
  flex-shrink:0;transition:opacity .25s var(--ease);will-change:transform;
}
.cb-logo:hover{opacity:.7}
.cb-logo img{height:26px;width:auto;display:block}

/* ── Desktop Nav ── */
.cb-nav{display:flex;align-items:center;gap:var(--s1)}
.cb-nav-link{
  display:inline-flex;align-items:center;
  font-size:14px;font-weight:500;color:#a1a1a6;
  text-decoration:none;padding:var(--s1) var(--s2);border-radius:var(--r-lg);
}
.cb-nav-link:hover{color:#f5f5f7}

/* ── CTA Button (nav) ── */
.cb-nav-cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 20px;margin-left:var(--s1);
  font-size:14px;font-weight:600;color:#fff;
  background:var(--blue-brand);text-decoration:none;
  border:none;border-radius:var(--r-lg);cursor:pointer;
  box-shadow:0 1px 3px rgba(0,113,227,.12);
  transition:transform 80ms var(--ease);will-change:transform;
}
.cb-nav-cta:hover{background:var(--blue-hover);transform:translateY(-1px)}
.cb-nav-cta:active{transform:scale(.97);transition-duration:40ms}

/* ── Mobile Hamburger ── */
.cb-hamburger{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  width:44px;height:44px;padding:0;
  background:transparent;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cb-hamburger span{
  display:block;width:20px;height:2px;background:#f5f5f7;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease);will-change:transform;
}
.cb-hamburger span:nth-child(1){margin-bottom:5px}
.cb-hamburger span:nth-child(3){margin-top:5px}
.cb-hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.cb-hamburger.is-active span:nth-child(2){opacity:0}
.cb-hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Mobile Dropdown ── */
.cb-mobile-nav{
  display:none;flex-direction:column;width:100%;
  background:#0a0a0a;border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;
  transition:transform .2s var(--ease),opacity .2s var(--ease);will-change:transform;
}
.cb-mobile-nav.is-open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}
.cb-mobile-nav-inner{
  display:flex;flex-direction:column;max-width:1200px;
  margin:0 auto;padding:var(--s1) var(--s4) var(--s3);gap:var(--s1);
}
.cb-mobile-nav-link{
  display:flex;align-items:center;font-size:16px;font-weight:500;
  color:#a1a1a6;text-decoration:none;padding:12px var(--s2);border-radius:var(--r-lg);
}
.cb-mobile-nav-link:hover{color:#f5f5f7;background:rgba(255,255,255,.06)}
.cb-mobile-cta{
  display:flex;align-items:center;justify-content:center;
  height:48px;margin-top:var(--s1);font-size:16px;font-weight:600;
  color:#fff;background:var(--blue-brand);text-decoration:none;
  border:none;border-radius:var(--r-lg);cursor:pointer;
  transition:transform 80ms var(--ease);will-change:transform;
}
.cb-mobile-cta:hover{background:var(--blue-hover);transform:translateY(-1px)}
.cb-mobile-cta:active{transform:scale(.97);transition-duration:40ms}

/* ── 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 Container ── */
.cb-footer{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  background:var(--ft-bg);
  padding:var(--s8) var(--s6) var(--s4);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  color:var(--ft-text);
}

/* Liquid glass bubble — subtle radial glow */
.cb-footer::before{
  content:'';
  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{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--s4);
  width:100%;
  margin-bottom:var(--s6);
}

/* ── Column Headings ── */
.cb-ft-heading{
  display:block;
  font-family:var(--font);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--ft-text);
  margin-bottom:var(--s2);
}

/* ── Link Columns ── */
.cb-ft-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cb-ft-nav a{
  font-size:14px;
  font-weight:400;
  text-decoration:none;
  color:var(--ft-text2);
  line-height:1.9;
}
.cb-ft-nav a:hover{
  color:var(--ft-link-hover);
}

/* ── Social Row ── */
.cb-ft-social{
  display:flex;
  gap:var(--s1);
}
.cb-ft-social a{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--ft-icon);
  text-decoration:none;
  transition:transform 80ms var(--ease),opacity .15s var(--ease);
  will-change:transform;
}
.cb-ft-social a:hover{
  color:var(--ft-icon-hover);
  background:rgba(41,151,255,.12);
  border-color:rgba(41,151,255,.25);
  transform:translateY(-2px);
}
.cb-ft-social a:active{
  transform:scale(.95);
  transition-duration:40ms;
}
.cb-ft-social svg{
  width:15px;
  height:15px;
}

/* ── Divider ── */
.cb-ft-divider{
  position:relative;
  z-index:1;
  width:100%;
  height:1px;
  background:var(--ft-divider);
  margin-bottom:var(--s3);
}

/* ── Bottom Bar (Legal + Copyright) ── */
.cb-ft-bottom{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--s2);
  width:100%;
}
.cb-ft-copyright{
  font-size:13px;
  color:var(--ft-text3);
}
.cb-ft-legal-links{
  display:flex;
  align-items:center;
  gap:var(--s1) var(--s2);
  flex-wrap:wrap;
}
.cb-ft-legal-links a{
  font-size:13px;
  color:var(--ft-text3);
  text-decoration:none;
}
.cb-ft-legal-links a:hover{
  color:var(--ft-link);
}
.cb-ft-legal-sep{
  font-size:13px;
  color:var(--ft-text3);
  opacity:.5;
}

/* ── 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;
  width:100%;
  background:var(--glass-bg);
  border-top:none;
  padding:var(--s10) var(--s3);
  overflow:hidden;
}
.ws-page .qualification-section::before{
  content:'';
  position:absolute;
  top:-200px;
  left:50%;
  transform:translateX(-50%);
  width:800px;
  height:800px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,113,227,.05) 0%,rgba(0,113,227,.02) 40%,transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* ── Two-Column Layout ── */
.ws-page .qualification-container{
  position:relative;
  z-index:1;
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s8);
  align-items:start;
}

/* ── Left Column — Info ── */
.ws-page .qualification-info{
  display:flex;
  flex-direction:column;
  gap:var(--s4);
  padding-top:var(--s2);
}

/* Step Badge */
.ws-page .step-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--s1);
  align-self:flex-start;
}
.ws-page .step-badge span{
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--blue-brand);
  font-family:var(--font);
}

/* Hero Title (qualification-specific override) */
.ws-page .qualification-section .hero-title{
  font-family:var(--font-display);
  font-size:clamp(30px,4.5vw,56px);
  font-weight:600;
  letter-spacing:-.04em;
  color:var(--t1) !important;
  line-height:1.08;
}
.ws-page .hero-title .line-two{
  display:block;
  color:var(--t2);
  font-weight:600;
  font-size:.85em;
}

/* Subtitle */
.ws-page .qualification-subtitle{
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--t2);
  max-width:480px;
}

/* ── Checklist ── */
.ws-page .checklist{
  display:flex;
  flex-direction:column;
  gap:12px;
  list-style:none;
  padding:0;
  margin:0;
}
.ws-page .checklist-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:var(--s2) var(--s3);
  background:var(--glass-bg-alt);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.ws-page .checklist-item:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-1px);
}
.ws-page .check-icon{
  flex-shrink:0;
  width:24px;
  height:24px;
  margin-top:1px;
}
.ws-page .check-icon svg{
  width:24px;
  height:24px;
  display:block;
}
.ws-page .checklist-item p{
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  color:var(--t1);
  margin:0;
}

/* ── Right Column — Form Wrap ── */
.ws-page .form-wrap{
  background:var(--glass-bg-alt);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-card);
  padding:var(--s4);
  overflow:hidden;
}
.ws-page .form-wrap iframe{
  width:100%;
  border:none;
  display:block;
}

/* ── Qualification Responsive ── */
@media(max-width:900px){
  .ws-page .qualification-container{
    grid-template-columns:1fr;
    gap:var(--s6);
  }
  .ws-page .qualification-info{
    padding-top:0;
    text-align:center;
    align-items:center;
  }
  .ws-page .step-badge{
    align-self:center;
  }
  .ws-page .qualification-subtitle{
    max-width:560px;
  }
  .ws-page .form-wrap{
    padding:var(--s3);
  }
}
@media(max-width:600px){
  .ws-page .qualification-section{
    padding:var(--s6) var(--s2);
  }
  .ws-page .checklist-item{
    padding:14px var(--s2);
  }
  .ws-page .form-wrap{
    padding:var(--s2);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   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:22px;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:8px 14px 10px;display:flex;flex-direction:column;gap:0;position:relative}

/* Island wrapper — vertical 2-row stack */
#panel-portal .dk-island-wrap{display:flex;flex-direction:column;gap:6px;width:100%}

/* Row 1: Play | Timeline | Knobs */
#panel-portal .dk-row1{display:flex;align-items:flex-start;gap:8px;width:100%}

/* 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:#fff;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 */
#panel-portal .dk-row2{display:flex;align-items:center;gap:6px;width:100%}

/* Timestamp badge */
#panel-portal .dk-ts{font-size:11px;font-weight:700;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:12px;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:8px;border:none;background:var(--blue);color:#fff;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;will-change:transform;backface-visibility:hidden;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;will-change:transform;backface-visibility:hidden;margin-bottom:8px}
#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;will-change:transform}
#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;will-change:transform;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:700;color:var(--txt4);font-family:var(--mono,'SF Mono',monospace);white-space:nowrap;pointer-events:none;letter-spacing:.3px;line-height:1}
/* Resize handle — right edge of dock */
#panel-portal .dk-resize{position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:10px;height:40px;cursor:ew-resize;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;opacity:.3;transition:opacity .2s}
#panel-portal .dk-resize:hover{opacity:.7}
#panel-portal .dk-resize-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.5)}

/* Drawing toolbar */
#panel-portal .draw-bar{display:flex;align-items:center;gap:3px;padding:4px 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:8px;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:#fff;transform:scale(1.15)}
#panel-portal .draw-sizes{display:flex;gap:4px;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:8px;padding:6px 14px;background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.3);border-radius:100px}
#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:700;color:var(--red);text-transform:uppercase;letter-spacing:.5px}
#panel-portal .rec-timer{font-size:11px;font-weight:600;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:6px;border:none;background:var(--red);color:#fff;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:.3s}
#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:18px;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:8px}
/* 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:700;color:var(--blue);font-family:var(--mono,'SF Mono',monospace);padding:3px 10px;background:rgba(41,151,255,.12);border-radius:8px;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-modes{display:flex;gap:4px}
#panel-portal .rv-ctx-btn{width:34px;height:34px;border-radius:10px;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-lbl{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--txt2);white-space:nowrap;opacity:0;transition:opacity .12s;pointer-events:none;
  text-shadow:0 1px 4px rgba(0,0,0,.7)}
#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:10px;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:8px 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:8px;border:none;background:var(--blue);color:#fff;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 */
#panel-portal .portal-shell{position:relative;height:680px;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#111 0%,#0a0a0a 40%,#050505 70%,#000 100%);margin-bottom:48px;border:1px solid rgba(255,255,255,.06)}
/* Left-edge white glow hint (always visible, signals nav is there) */
#panel-portal .portal-shell::before{content:'';position:absolute;left:0;top:15%;width:4px;height:70%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.35),rgba(255,255,255,.5),rgba(255,255,255,.35),transparent);border-radius:0 4px 4px 0;z-index:4;pointer-events:none;filter:blur(5px)}
/* Bottom-edge white glow hint (always visible, signals island is there) */
#panel-portal .portal-shell::after{content:'';position:absolute;bottom:0;left:20%;width:60%;height:4px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),rgba(255,255,255,.55),rgba(255,255,255,.35),transparent);border-radius:4px 4px 0 0;z-index:4;pointer-events:none;filter:blur(6px)}

/* Left nav inside shell — reuses real .left-nav, overrides position for retract/hover */
#panel-portal .portal-shell .ps-nav-shell{position:absolute;left:0;top:50%;
  transform:translateY(-50%) translateX(-42px);opacity:.3;
  transition:transform .4s var(--ease),opacity .4s var(--ease);z-index:3;
  background:rgba(8,8,12,.88)}
#panel-portal .portal-shell .ps-nav-shell:hover{transform:translateY(-50%) translateX(0);opacity:1;
  box-shadow:4px 0 24px rgba(255,255,255,.1),2px 0 12px rgba(255,255,255,.06)}

/* Bottom island inside shell — reuses real .bottom-island, scaled 75% to match left-nav size */
#panel-portal .portal-shell .ps-island-shell{position:absolute;bottom:4px;left:0;right:0;
  transform:translateY(32px) scale(.75);opacity:.3;z-index:3;
  transition:transform .4s var(--ease),opacity .4s var(--ease)}
#panel-portal .portal-shell .ps-island-shell .bottom-island-inner{background:rgba(8,8,12,.88)}
#panel-portal .portal-shell .ps-island-shell:hover{transform:translateY(0) scale(.75);opacity:1}
#panel-portal .portal-shell .ps-island-shell:hover .bottom-island-inner{box-shadow:0 -4px 24px rgba(255,255,255,.1),0 -2px 12px rgba(255,255,255,.06)}

/* Main content area — absolute positioned */
#panel-portal .ps-main{display:flex;flex-direction:column;position:absolute;top:12px;left:20px;right:20px;bottom:20px}
#panel-portal .ps-page-title{font:600 10px/1 var(--font);text-transform:uppercase;letter-spacing:.8px;color:var(--txt4);padding-bottom:8px;flex-shrink:0}
#panel-portal .ps-page-title-lg{font:700 22px/1 var(--font);color:var(--txt);letter-spacing:-.4px;padding-bottom:4px;
  display:flex;align-items:center;gap:10px;flex-shrink:0}
#panel-portal .ps-page-title-lg + .ps-page-sub{font:400 11px/1.3 var(--font);color:var(--txt4);letter-spacing:.1px;
  padding-bottom:12px;flex-shrink:0}
/* Stage badge row — sits under the page title */
#panel-portal .ps-page-stage-row{padding-bottom:10px;flex-shrink:0}
#panel-portal .ps-title-stage{font-size:10px;font-weight:700;letter-spacing:.4px;padding:3px 10px;border-radius:6px;
  color:var(--green);background:rgba(126,203,161,.1);border:1px solid rgba(126,203,161,.18);text-transform:uppercase}
#panel-portal .ps-content{display:flex;gap:16px;flex:1;min-height:0}

/* Video player container */
#panel-portal .ps-video{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;display:flex;align-items:center;justify-content:center;position:relative;flex:1;min-height:0;overflow:hidden}

/* ── Video-overlay timeline row — sits inside the 16:9 video area at the bottom ── */
#panel-portal .ps-vid-controls{position:absolute;bottom:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 60%,transparent 100%)}
#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}
#panel-portal .ps-play-btn{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
#panel-portal .ps-play-btn:hover{background:rgba(255,255,255,.14)}
#panel-portal .ps-play-btn svg{width:24px;height:24px;color:var(--txt);margin-left:3px}

/* 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:600;color:var(--txt);border-bottom:1px solid rgba(255,255,255,.06);letter-spacing:-.2px}

/* Thread sections */
#panel-portal .ps-th-section{border-bottom:1px solid rgba(255,255,255,.04)}
#panel-portal .ps-th-toggle{width:100%;border:none;background:transparent;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;color:var(--txt2);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:color .2s}
#panel-portal .ps-th-toggle:hover{color:var(--txt)}
#panel-portal .ps-th-toggle svg{width:12px;height:12px;transition:transform .3s var(--ease)}
#panel-portal .ps-th-section.open .ps-th-toggle svg{transform:rotate(90deg)}
#panel-portal .ps-th-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
#panel-portal .ps-th-section.open .ps-th-body{max-height:200px}
#panel-portal .ps-th-item{padding:6px 16px;font-size:11px;color:var(--txt3);display:flex;align-items:center;gap:8px}
#panel-portal .ps-th-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ── 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:8px;padding:5px 12px;
  background:rgba(8,8,12,.82);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:2}
/* Request type — SF or LF */
#panel-portal .ps-ci-type{font-size:9px;font-weight:800;letter-spacing:.6px;padding:2px 6px;border-radius:4px;
  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);
  text-shadow:0 0 8px rgba(41,151,255,.3)}
#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);
  text-shadow:0 0 8px rgba(180,142,255,.3)}
/* Tier badge — T1, T2, T3 */
#panel-portal .ps-ci-tier{font-size:8px;font-weight:800;letter-spacing:.4px;padding:2px 5px;border-radius:4px}
#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-nav{display:flex;align-items:center;gap:2px}
#panel-portal .ps-ci-arr{width:16px;height:16px;border:none;background:rgba(255,255,255,.05);border-radius:4px;
  color:var(--txt3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s}
#panel-portal .ps-ci-arr:hover{background:rgba(255,255,255,.12);color:var(--txt)}
#panel-portal .ps-ci-ver{font-size:10px;font-weight:700;color:var(--txt);min-width:18px;text-align:center}
/* Blueprint icon — pill matching type/tier */
#panel-portal .ps-ci-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 50ms;
  padding:3px 5px;border-radius:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--txt3)}
#panel-portal .ps-ci-icon svg{width:10px;height:10px}
#panel-portal .ps-ci-icon:hover{background:rgba(255,255,255,.12);color:var(--txt)}
/* Health grade — pill matching type/tier */
#panel-portal .ps-ci-grade{font-size:9px;font-weight:800;padding:2px 6px;border-radius:4px;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;will-change:transform;
  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-island{position:absolute!important;top:8px!important;left:50%!important;transform:translateX(-50%)!important;
  padding:3px 8px;gap:5px;background:rgba(8,8,12,.78);font-size:8px;z-index:2;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#panel-portal .pipe-bottom{position:relative;z-index:2;padding:0 8px 6px;display:flex;flex-direction:column;gap:4px}
#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:700 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:100px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#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)}

/* ── Video + Dock column wrapper ── */
#panel-portal .ps-video-col{display:flex;flex-direction:column;flex:1;gap:0;min-height:0;min-width:0}

/* ── Project name pill — top left of video ── */
#panel-portal .ps-vid-name-pill{position:absolute;top:8px;left:10px;z-index:2;
  padding:6px 14px;font-size:12px;font-weight:600;color:var(--txt);letter-spacing:-.1px;
  background:rgba(8,8,12,.82);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* ── Card island — centered top of video ── */
#panel-portal .ps-vid-island{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:2}

/* ── Review toolbox UNDER video — single row, full width to match video ── */
#panel-portal .ps-dock-under{max-width:none;width:100%;pointer-events:none;
  padding:10px 14px;border-radius:14px;flex-shrink:0;margin-top:6px}
#panel-portal .ps-dock-under .dk-island-wrap{flex-direction:row;align-items:center;gap:8px}
#panel-portal .ps-dock-under .dk-row1{display:none}
#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 ── */
#panel-portal .ps-chat{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
#panel-portal .ps-chat-msg{display:flex;gap:6px;align-items:flex-start}
#panel-portal .ps-chat-them{flex-direction:row}
#panel-portal .ps-chat-me{flex-direction:row-reverse}
#panel-portal .ps-chat-avatar{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.08);
  font-size:7px;font-weight:700;color:var(--txt3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#panel-portal .ps-chat-bubble{max-width:85%;padding:6px 10px;border-radius:10px;font-size:10px;line-height:1.4;color:var(--txt2)}
#panel-portal .ps-chat-them .ps-chat-bubble{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-bottom-left-radius:3px}
#panel-portal .ps-chat-me .ps-chat-bubble{background:rgba(41,151,255,.12);border:1px solid rgba(41,151,255,.15);border-bottom-right-radius:3px;color:var(--txt)}
/* Chat input (shell) */
#panel-portal .ps-chat-input{display:flex;gap:5px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.06);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:6px;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:6px;border:none;background:rgba(255,255,255,.04);
  color:var(--txt4);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Chat message meta — name + role + timestamp */
#panel-portal .ps-chat-msg-body{display:flex;flex-direction:column;gap:2px;max-width:85%;min-width:0}
#panel-portal .ps-chat-meta{display:flex;align-items:center;gap:5px;padding:0 2px}
#panel-portal .ps-chat-name{font-size:9px;font-weight:700;color:var(--txt2);letter-spacing:-.1px}
#panel-portal .ps-chat-role{font-size:7px;font-weight:800;letter-spacing:.4px;padding:1px 4px;border-radius:3px;text-transform:uppercase}
#panel-portal .ps-role-client{color:var(--blue);background:rgba(41,151,255,.12)}
#panel-portal .ps-role-editor{color:var(--green);background:rgba(126,203,161,.12)}
#panel-portal .ps-chat-time{font-size:8px;color:var(--txt4);font-family:var(--mono,'SF Mono',monospace);margin-left:auto}
#panel-portal .ps-chat-msg-body .ps-chat-bubble{max-width:100%}
#panel-portal .ps-chat-me .ps-chat-meta{flex-direction:row-reverse}
#panel-portal .ps-chat-me .ps-chat-time{margin-left:0;margin-right:auto}

/* ── Pipeline layout shell — page header (sized to match review title area) ── */
#panel-portal .ps-page-hdr{flex-shrink:0;padding-bottom:16px}
#panel-portal .ps-pipeline-shell .ps-page-title{font:700 22px/1 var(--font);color:var(--txt);letter-spacing:-.4px;
  text-transform:none;padding-bottom:6px;display:flex;align-items:center;gap:10px}
#panel-portal .ps-page-sub{font:400 11px/1.3 var(--font);color:var(--txt3);letter-spacing:.1px;padding-top:2px}

/* ── Pipeline kanban inside shell ── */
#panel-portal .ps-pipeline-kanban{display:flex;gap:8px;flex:1;min-height:0;overflow-x:auto}
#panel-portal .ps-kanban-col{flex:1;min-width:100px;display:flex;flex-direction:column;gap:8px;
  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:600 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:4px}
#panel-portal .ps-pipeline-shell .pipeline-card{min-height:140px}

/* Shell variant note */
#panel-portal .ps-note{font-size:11px;color:var(--txt4);text-align:center;margin-top:12px;letter-spacing:.2px}

/* ── Empty template shell — shows page chrome with empty content area ── */
#panel-portal .ps-template-shell .ps-content{flex:1;min-height:0}
#panel-portal .ps-template-shell .ps-empty-area{flex:1;min-height:0;
  border:1.5px dashed rgba(255,255,255,.08);border-radius:14px;
  background:rgba(255,255,255,.015);display:flex;align-items:center;justify-content:center}
#panel-portal .ps-template-shell .ps-empty-label{font:500 12px/1 var(--font);color:var(--txt4);letter-spacing:.3px;
  opacity:.5;text-transform:uppercase}

/* ── Info Dot (tutorial hover icon) ── */
#panel-portal .ps-info-dot{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-left:6px;opacity:.25;cursor:help;color:var(--txt3);
  vertical-align:middle;transition:opacity .2s}
#panel-portal .ps-info-dot:hover{opacity:.6}
#panel-portal .ps-info-dot svg{display:block}

/* ── Health Timer Icons (color-coded by project grade) ── */
#panel-portal .health-timer{display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:100px;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px)}
#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:700 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}}

/* ═══════════════════════════════
   PORTAL SHELL OVERRIDES
   ═══════════════════════════════ */
#panel-portal .portal-shell .ps-main{
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.025) 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  box-shadow:0 4px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  padding:var(--s2) 20px}
#panel-portal .portal-shell .ps-page-title{
  color:rgba(255,255,255,.7);font-size:12px;letter-spacing:1px;position:relative;z-index:2}
#panel-portal .portal-shell .ps-nav-shell{
  transition:transform .18s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1);
  will-change:transform,opacity}
#panel-portal .portal-shell .ps-nav-shell:hover{box-shadow:none}
#panel-portal .portal-shell .ps-island-shell{
  transition:transform .18s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1);
  will-change:transform,opacity}
#panel-portal .portal-shell .ps-island-shell:hover .bottom-island-inner{box-shadow:none}

/* ═══════════════════════════════
   STYLE GUIDE SCAFFOLDING
   ═══════════════════════════════ */
.sg-swatch{display:flex;flex-direction:column;align-items:center;gap:var(--s0)}
.sg-swatch-box{width:100%;aspect-ratio:1;border-radius:12px}
.sg-swatch-meta{font:400 9px/1.3 var(--font);color:var(--txt3);text-align:center}
.sg-cmp-label{margin-bottom:var(--s2)}
.sg-cmp-label .sg-cmp-name{font:600 13px/1 var(--font);color:var(--txt1);margin-bottom:var(--s0)}
.sg-cmp-label code{font:500 11px/1 var(--mono);color:var(--blue)}
.sg-cmp-label .sg-cmp-note{font:400 12px/1.4 var(--font);color:var(--txt3);margin-top:var(--s0)}
.sg-sec-hdr{padding-top:var(--s12);padding-bottom:var(--s8)}
.sg-sec-hdr .sg-sec-inner{margin-bottom:var(--s4)}
.sg-sec-hdr h2{font:700 28px/1 var(--font-display);letter-spacing:-.3px;text-wrap:balance;margin:0 0 var(--s1)}
.sg-sec-hdr p{font:400 13px/1.5 var(--font);color:var(--txt2);margin:0 0 var(--s3);max-width:65ch;text-wrap:pretty}
.sg-sec-hdr .sg-rule{height:1px;background:rgba(255,255,255,.08)}
.s15-bar{height:var(--s3);border-radius:4px;display:flex;align-items:center;padding-left:var(--s1);font:500 9px/1 var(--mono);color:rgba(0,0,0,.7)}
.s15-tbl{width:100%;border-collapse:collapse;font:400 12px/1.6 var(--font)}
.s15-tbl th{text-align:left;padding:var(--s1) var(--s2);font-weight:600;color:var(--txt2);border-bottom:1px solid rgba(255,255,255,.08)}
.s15-tbl td{padding:var(--s1) var(--s2);color:var(--txt2);border-bottom:1px solid rgba(255,255,255,.04)}
.s15-tbl code{font:500 10px/1 var(--mono);color:var(--green)}
.s15-wrong{color:var(--red,#c0392b);text-decoration:line-through;opacity:.7}
.s15-right{color:var(--green)}
@keyframes loginSpin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════════
   SECTION PADDING LAWS
   ═══════════════════════════════════════════════════════════════ */

/* Website section padding — 40px all sides, 60px bottom */
.ws-section {
  padding: 40px 40px 60px;
  width: 100%;
}
@media (max-width: 768px) {
  .ws-section {
    padding: var(--s4) var(--s2) var(--s6);
  }
}
@media (max-width: 430px) {
  .ws-section {
    padding: var(--s3) var(--s2) var(--s5);
  }
}

/* Website inner content container — max-width centered */
.ws-container {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Login page body layout ── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--s5) var(--s2);
  background:
    radial-gradient(ellipse 130% 45% at 50% -8%,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 35%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 25% 3%,rgba(41,151,255,.045) 0%,transparent 50%),
    linear-gradient(180deg,#111 0%,#0a0a0a 25%,#050505 55%,#000 100%);
  color: var(--txt);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ── Login container ── */
.login-container {
  width: 100%;
  max-width: 362px;
  margin: auto;
  text-align: center;
}
@media (max-width: 480px) {
  .login-container { max-width: 255px; }
}

/* ── Glass form card (dissolving bottom) ── */
.glass-form {
  position: relative;
  padding: var(--s4) 28px var(--s3);
}
.glass-form::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-2xl);
  background: linear-gradient(180deg,
    rgba(255,255,255,.07)  0%,
    rgba(255,255,255,.04)  25%,
    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,.1),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 32px rgba(0,0,0,.4),
    0 2px 8px rgba(0,0,0,.3);
  -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-form::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.25) 20%,
    rgba(255,255,255,.4) 50%,
    rgba(255,255,255,.25) 80%,
    transparent);
  border-radius: 1px;
  pointer-events: none;
}
@media (max-width: 480px) {
  .glass-form { padding: 28px 20px var(--s2); }
}

/* ── Logo orb with spinning ring ── */
.logo-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 28px;
}
.logo-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.04);
  border-top-color: rgba(41,151,255,.4);
  border-right-color: rgba(41,151,255,.12);
  animation: loginSpin 8s linear infinite;
  will-change: transform;
}
.logo-orb {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 20px rgba(0,0,0,.35), 0 0 30px rgba(41,151,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-orb img { width: 66px; height: 66px; object-fit: contain; opacity: .95; }
@media (max-width: 480px) {
  .logo-wrap  { width: 88px; height: 88px; margin-bottom: 22px; }
  .logo-orb   { width: 88px; height: 88px; }
  .logo-orb img { width: 56px; height: 56px; }
}

/* ── Auto-verify state ── */
.auto-verifying .logo-ring { border-top-color: rgba(41,151,255,.6); animation: loginSpin 3s linear infinite; }
.auto-verifying .logo-orb  { border-color: rgba(41,151,255,.3); }

/* ── 6-digit code inputs ── */
.code-inputs { display: flex; gap: 5px; justify-content: center; margin-bottom: var(--s2); }
.code-input {
  width: 30px;
  height: 36px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--txt);
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.04), 0 1px 3px rgba(0,0,0,.15);
  outline: none;
  transition: border-color 80ms, box-shadow 80ms;
  caret-color: var(--blue);
}
.code-input:focus {
  border-color: rgba(41,151,255,.5);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2), 0 0 0 3px rgba(41,151,255,.12), 0 0 16px rgba(41,151,255,.06);
}
.code-input.filled    { border-color: rgba(41,151,255,.4); background: linear-gradient(180deg, rgba(41,151,255,.08) 0%, rgba(41,151,255,.03) 100%); }
.code-input.auto-fill { border-color: rgba(41,151,255,.7); background: rgba(41,151,255,.1); box-shadow: 0 0 0 3px rgba(41,151,255,.15); }
.code-input.error     { border-color: var(--red); }

/* ── Form steps ── */
.form-step         { display: none; }
.form-step.active  { display: block; animation: stepIn .2s var(--ease-q); }

/* ── Login error message ── */
.login-error {
  display: none;
  background: rgba(192,57,43,.08);
  border: 1px solid rgba(192,57,43,.2);
  border-radius: var(--r-md);
  padding: 11px var(--s2);
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--red);
}
.login-error.visible { display: block; }

/* ── Login keyframes ── */
@keyframes loginSpin { to { transform: rotate(360deg); } }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-8px); }
  40%,80% { transform: translateX(8px); }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
/* ── Dashboard-only components ── */
.dashboard-page{overflow-x:hidden;overflow:hidden}

/* Section anchors */
.section-anchor{padding-top:8px;margin-bottom:24px}
.sec-h{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--txt3);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sec-h::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06)}

/* Stat cards row */
.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.stat-sub{font-size:11px;color:var(--txt4);margin-top:4px}

/* 3-column grid */
.dash-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.dash-col{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.dash-col-head{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-shrink:0;color:var(--txt)}
.dash-col-head .cnt{font-size:10px;color:var(--txt3);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:100px}
.dash-col-body{flex:1;overflow-y:auto;padding-right:2px}
.dash-col-body::-webkit-scrollbar{width:3px}
.dash-col-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* Co-editors row */
.co-editors{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.co-ed{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:100px;box-shadow:var(--sh)}
.co-av{width:28px;height:28px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.co-av img{width:100%;height:100%;object-fit:cover}
.co-name{font-size:12px;font-weight:600;color:var(--txt2)}
.co-score{font-size:11px;font-weight:700;margin-left:4px}

/* Admin overview grid */
.ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px}
.ov-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);box-shadow:var(--sh);padding:18px 20px;position:relative;overflow:hidden}
.ov-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.ov-big{font-size:34px;font-weight:800;letter-spacing:-.025em;line-height:1}
.ov-lbl{font-size:11px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}

/* Finance placeholder */
.finance-iframe-wrap{width:100%;min-height:500px;border-radius:var(--r-xl);overflow:hidden;background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--txt4);font-size:14px;padding:60px 20px;text-align:center}
.finance-iframe-wrap svg{width:48px;height:48px;opacity:.3}

/* Late project card accent */
.pj-card.late{border-left:3px solid var(--red)}
.pj-card.due-soon{border-left:3px solid var(--orange)}
.pj-due.today{color:var(--orange)}

/* Cancer badge for leaderboard */
.lb-card.lb-cancer{border-color:rgba(192,57,43,.4);background:linear-gradient(135deg,rgba(192,57,43,.08),rgba(10,14,28,.55));position:relative}
.lb-cancer-badge{position:absolute;top:10px;right:10px;background:var(--red);color:#fff;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:100px;display:flex;align-items:center;gap:4px}
.lb-late-warn{font-size:11px;font-weight:700;color:var(--red);display:flex;align-items:center;gap:4px;margin-top:6px}

/* Admin tab visibility */
.cat-tab.admin-tab{display:none}
body[data-role="admin"] .cat-tab.admin-tab,
body[data-role="owner"] .cat-tab.admin-tab{display:inline-block}

/* Payout total label */
.po-total-lbl{font-size:13px;color:var(--txt3);font-weight:500;margin-left:8px}

/* Responsive */
@media(max-width:1100px){.dash-3col{grid-template-columns:1fr 1fr}}
@media(max-width:750px){.dash-3col{grid-template-columns:1fr}}
@media(max-width:600px){
  .shell-head{padding:14px 16px 0}
  .tab-panel{padding:14px 16px 60px}
  .stat-row{gap:8px}
}
@media(max-width:480px){
  .shell-head h1{font-size:20px}
  .cat-tabs{width:100%;overflow-x:auto}
  .cat-tab{font-size:11px;padding:6px 14px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ═══════════════════════════════════════════════════════════════
   PIPELINE COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC CSS — Only for components NOT in design-system.css
   or common.css. Zero duplication with design system utilities.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────── */
.page{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.page-head{flex-shrink:0;padding:20px 28px 0}
.page-body{flex:1;overflow:auto;padding:0 20px 20px;-webkit-overflow-scrolling:touch}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hdr-left h1{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--txt);margin:0;display:flex;align-items:center;gap:8px}
.hdr-left p{font-size:12px;color:var(--txt3);margin:2px 0 0}
.hdr-right{display:flex;align-items:center;gap:10px}

/* ── Search ─────────────────────────────────────────────────────────── */
.search{display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:6px 14px;transition:border-color .2s}
.search:focus-within{border-color:rgba(41,151,255,.35)}
.search svg{width:16px;height:16px;color:var(--txt3);flex-shrink:0}
.search input{background:none;border:none;color:var(--txt);font-size:13px;width:160px;outline:none;font-family:var(--font)}
.search input::placeholder{color:var(--txt4)}

/* ── Density toggle ─────────────────────────────────────────────────── */
.density{display:flex;gap:2px;background:var(--glass);border-radius:var(--r-md);padding:2px}
.density button{border:none;background:none;color:var(--txt3);font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--r-sm);cursor:pointer;font-family:var(--font);transition:background .15s,color .15s}
.density button.active{background:rgba(41,151,255,.2);color:var(--blue)}

/* ── Team filter bar ────────────────────────────────────────────────── */
.team-filter-bar{display:flex;gap:6px;padding:0 28px 8px;flex-wrap:wrap}
.tf-pill{padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.08);background:var(--glass);color:var(--txt3);transition:all .15s;font-family:var(--font)}
.tf-pill.active{background:rgba(41,151,255,.15);border-color:rgba(41,151,255,.3);color:var(--blue)}

/* ── Sub-nav pills ──────────────────────────────────────────────────── */
.sub-pills{display:none;gap:6px;padding:0 28px 8px}
.sub-pills.active{display:flex}
.sub-pill{padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.06);background:transparent;color:var(--txt3);transition:all .15s;font-family:var(--font)}
.sub-pill.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.25);color:var(--blue)}

/* ── Pipe view containers ───────────────────────────────────────────── */
.pipe-view{display:none;flex-direction:column;flex:1;overflow:hidden}
.pipe-view.active{display:flex}

/* ── Team/Person pipeline kanban ────────────────────────────────────── */
.tp-kanban{display:flex;gap:12px;overflow-x:auto;padding:12px 20px 16px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.tp-col{flex:0 0 260px;background:var(--glass);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);display:flex;flex-direction:column;scroll-snap-align:start}
.tp-col-hdr{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.05)}
.tp-col-title{font-size:13px;font-weight:700;color:var(--txt)}
.tp-col-sub{font-size:10px;color:var(--txt3);display:block;margin-top:2px}
.tp-col-count{font-size:11px;font-weight:700;color:var(--txt3);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:100px}
.tp-col-body{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;max-height:60vh}
.tp-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);padding:10px 12px;cursor:pointer;transition:background .15s,transform .1s}
.tp-card:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}
.tp-card.dragging{opacity:.5;transform:scale(.96)}
.tp-card-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tp-card-avatar{width:28px;height:28px;border-radius:50%;background:rgba(41,151,255,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--blue);overflow:hidden;flex-shrink:0}
.tp-card-avatar img{width:100%;height:100%;object-fit:cover}
.tp-card-name{font-size:12px;font-weight:600;color:var(--txt);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-card-grade{font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px}
.tp-card-tags{display:flex;gap:4px;flex-wrap:wrap}
.tp-card-tag{font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px}
.tp-card-stats{display:flex;gap:8px;margin-bottom:6px}
.tp-card-stat{font-size:10px;color:var(--txt3)}
.tp-card-scores{display:flex;gap:4px;margin-bottom:6px}
.tp-card-sc{flex:1;text-align:center;padding:4px;background:rgba(255,255,255,.03);border-radius:6px}
.tp-card-sc-label{font-size:8px;font-weight:600;color:var(--txt4);text-transform:uppercase;letter-spacing:.04em}
.tp-card-sc-val{font-size:13px;font-weight:700;color:var(--txt)}
.tp-empty{padding:16px;text-align:center;font-size:11px;color:var(--txt4)}

/* ── Mobile stage dots ──────────────────────────────────────────────── */
.tp-stage-dots{display:none;justify-content:center;gap:6px;padding:6px 0 2px}
.tp-stage-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.15);cursor:pointer;transition:background .2s,transform .2s}
.tp-stage-dot.active{background:var(--blue);transform:scale(1.3)}

/* ── Trash zone ─────────────────────────────────────────────────────── */
.trash-zone{position:fixed;bottom:0;left:0;right:0;height:70px;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(0deg,rgba(192,57,43,.25),transparent);border-top:2px dashed rgba(192,57,43,.4);color:var(--red);font-size:13px;font-weight:700;z-index:100;transform:translateY(100%);transition:transform .2s var(--ease);pointer-events:none;font-family:var(--font)}
.trash-zone svg{width:20px;height:20px}
.trash-zone.visible{transform:translateY(0);pointer-events:all}
.trash-zone.hover{background:linear-gradient(0deg,rgba(192,57,43,.45),transparent);border-color:var(--red)}

/* ── Blueprint modal/tooltip ────────────────────────────────────────── */
.bp-modal-overlay{display:none;position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.6);align-items:center;justify-content:center}
.bp-modal-overlay.show{display:flex}
.bp-modal{background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:24px;max-width:480px;width:90%;max-height:70vh;overflow-y:auto;box-shadow:var(--sh)}
.bp-modal h3{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--txt);margin:0 0 16px}
.bp-modal h3 svg{width:18px;height:18px;color:var(--blue)}
.bp-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--txt3);font-size:20px;cursor:pointer}
.bp-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.bp-list li{display:flex;justify-content:space-between;padding:8px 12px;background:rgba(255,255,255,.03);border-radius:var(--r-md);font-size:12px}
.bp-key{color:var(--txt3);font-weight:600}
.bp-val{color:var(--txt);font-weight:500}
.bp-tip{display:none;position:fixed;z-index:1200;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:12px;max-width:300px;box-shadow:var(--sh)}
.bp-tip.show{display:block}
.bp-tip-name{font-size:12px;font-weight:700;color:var(--txt);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.bp-tip-name svg{width:14px;height:14px;color:var(--blue)}
.bp-tip-row{display:flex;justify-content:space-between;font-size:10px;padding:2px 0}
.bp-tip-k{color:var(--txt3);font-weight:600}
.bp-tip-v{color:var(--txt)}
.bp-tip-empty{font-size:11px;color:var(--txt4);padding:4px}

/* ── Kanban overrides — common.css provides base .kanban/.col/.col-hdr etc ── */
.col-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.col-dot[data-status="queue"]{background:var(--st-queue,#8e8e93)}
.col-dot[data-status="active"]{background:var(--st-active,#ff9500)}
.col-dot[data-status="review"]{background:var(--st-review,#5ac8fa)}
.col-dot[data-status="revisions"]{background:var(--st-revisions,#bf5af2)}
.col-dot[data-status="approved"]{background:var(--st-approved,#30d158)}

/* ── Project Card — iPhone-style glass card ─────────────────────────── */
.card{position:relative;border-radius:var(--r-xl);overflow:hidden;cursor:pointer;aspect-ratio:9/16;background:#0a0e1c;box-shadow:0 4px 24px rgba(0,0,0,.35);transition:transform .2s var(--ease),box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.5)}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.12);pointer-events:none;z-index:5}
.card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 20%);pointer-events:none;z-index:5}
.card.dragging{opacity:.6;transform:scale(.95) rotate(2deg);z-index:50}
.card-thumb{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0}
.card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.8) 100%);z-index:1}
.card-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:3px 10px;background:rgba(0,0,0,.5);border-radius:20px;z-index:10}
.notch-dot{width:5px;height:5px;border-radius:50%;background:var(--blue)}
.notch-ver{font-size:9px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.04em}
.card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:6;opacity:0;transition:opacity .15s}
.card-play svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.card:hover .card-play{opacity:1}
.card-badges{position:absolute;top:32px;left:8px;display:flex;gap:4px;z-index:10;flex-wrap:wrap}
.badge-fmt{padding:2px 6px;border-radius:6px;font-size:9px;font-weight:800;letter-spacing:.04em}
.badge-fmt.sf{background:rgba(41,151,255,.2);color:var(--blue)}
.badge-fmt.lf{background:rgba(191,90,242,.2);color:var(--purple)}
.badge-tier{padding:2px 6px;border-radius:6px;font-size:9px;font-weight:800;background:rgba(255,255,255,.1);color:var(--txt2)}
.badge-health{padding:2px 6px;border-radius:6px;font-size:9px;font-weight:800}
.health-a{background:rgba(126,203,161,.15);color:#7ecba1}
.health-b{background:rgba(90,200,250,.15);color:#5ac8fa}
.health-c{background:rgba(255,159,10,.15);color:#ff9f0a}
.health-d{background:rgba(245,166,35,.15);color:#f5a623}
.health-f{background:rgba(192,57,43,.15);color:#c0392b}
.card-bp-icon{cursor:pointer;display:flex;align-items:center}
.card-bp-icon svg{width:12px;height:12px;color:var(--txt3);transition:color .15s}
.card-bp-icon:hover svg{color:var(--blue)}

/* Asset items */
.asset{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);cursor:pointer;transition:background .15s}
.asset:hover{background:rgba(255,255,255,.04)}
.asset-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.asset-icon svg{width:16px;height:16px}
.asset-name{font-size:12px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.asset-size{font-size:10px;color:var(--txt4)}

/* ── Timeline bar on cards ──────────────────────────────────────────── */
.card-tl{position:absolute;bottom:0;left:0;right:0;padding:8px 10px 10px;z-index:6}
.tl-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.tl-name{font-size:11px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.tl-timer{display:flex;align-items:center;gap:3px;font-size:9px;font-weight:700;letter-spacing:.02em;padding:2px 6px;border-radius:6px}
.tl-timer svg{width:10px;height:10px}
.tl-timer.ok{color:#7ecba1;background:rgba(126,203,161,.12)}
.tl-timer.warn{color:#ff9f0a;background:rgba(255,159,10,.12)}
.tl-timer.overdue{color:#c0392b;background:rgba(192,57,43,.12)}
.tl-timer.done{color:#30d158;background:rgba(48,209,88,.12)}
.tl-scrub{height:3px;background:rgba(255,255,255,.1);border-radius:2px;position:relative;overflow:visible}
.tl-fill{position:absolute;left:0;top:0;bottom:0;background:var(--blue);border-radius:2px;transform-origin:left;transition:transform .3s}
.tl-knob{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid var(--blue);transform:translate(-50%,-50%);transition:left .3s}

/* ── Density variants ───────────────────────────────────────────────── */
.density-sm .card{aspect-ratio:auto;min-height:48px;border-radius:var(--r-md)}
.density-sm .card-thumb,.density-sm .card-overlay,.density-sm .card-notch,.density-sm .card-play,.density-sm .card-badges{display:none}
.density-sm .card-tl{position:relative;padding:8px 12px}
.density-sm .tl-scrub{display:none}
.density-lg .card{aspect-ratio:9/18}

/* ── Expanded project view ──────────────────────────────────────────── */
.project-view{position:fixed;inset:0;z-index:500;background:var(--bg);transform:translateX(100%);transition:transform .25s var(--ease);display:flex;flex-direction:column}
.project-view.open{transform:none}
.pv-shell{display:flex;flex:1;overflow:hidden}
.pv-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.pv-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.pv-bar-left,.pv-bar-right{display:flex;align-items:center;gap:8px}
.pv-bar-center{flex:1;display:flex;justify-content:center}
.pv-back{background:none;border:none;color:var(--txt2);cursor:pointer;padding:4px;display:flex;align-items:center}
.pv-back svg{width:20px;height:20px}
.pv-title{font-size:15px;font-weight:700;color:var(--txt);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-status-badge{padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;color:#fff}

/* ── Detail bubble (center) ─────────────────────────────────────────── */
.pv-detail-bubble{display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:100px}
.pv-d-item{font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px}
.pv-d-fmt.sf{background:rgba(41,151,255,.15);color:var(--blue)}
.pv-d-fmt.lf{background:rgba(191,90,242,.15);color:var(--purple)}
.pv-d-tier{background:rgba(255,255,255,.08);color:var(--txt2)}
.pv-d-sep{width:1px;height:14px;background:rgba(255,255,255,.1)}
.pv-d-ver{display:flex;align-items:center;gap:2px}
.pv-d-ver-btn{background:none;border:none;color:var(--txt3);cursor:pointer;padding:2px;display:flex;align-items:center}
.pv-d-ver-btn:disabled{opacity:.3;cursor:default}
.pv-d-ver-btn svg{width:12px;height:12px}
.pv-d-ver-label{font-size:10px;font-weight:700;color:var(--txt)}
.pv-d-bp{cursor:pointer}
.pv-d-bp svg{width:14px;height:14px;color:var(--txt3)}
.pv-d-bp:hover svg{color:var(--blue)}
.pv-d-health{font-size:10px;font-weight:800}

/* ── Right bubble (staff) ───────────────────────────────────────────── */
.pv-right-bubble{display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:100px}
.pv-rb-editor{display:flex;align-items:center;gap:5px}
.pv-rb-avatar{width:22px;height:22px;border-radius:50%;background:rgba(41,151,255,.12);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--blue);overflow:hidden}
.pv-rb-avatar img{width:100%;height:100%;object-fit:cover}
.pv-rb-name{font-size:10px;font-weight:600;color:var(--txt2);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-rb-sep{width:1px;height:14px;background:rgba(255,255,255,.1)}
.pv-rb-timer{display:flex;align-items:center;gap:3px;font-size:10px;font-weight:700}
.pv-rb-timer.ok{color:#7ecba1}
.pv-rb-timer.warn{color:#ff9f0a}
.pv-rb-timer.overdue{color:#c0392b}
.pv-rb-timer.done{color:#30d158}
.pv-rb-icon{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .15s}
.pv-rb-icon svg{width:14px;height:14px}
.pv-rb-icon:hover{color:var(--blue)}
.pv-rb-icon.approve:hover{color:#30d158}
.pv-rb-icon.deliver:hover{color:var(--orange)}
.pv-pill{font-size:10px}

/* ── Video area ─────────────────────────────────────────────────────── */
.pv-video{position:relative;flex:1;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:300px}
.pv-video.loading::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.3)}
.pv-video video{width:100%;height:100%;object-fit:contain}
.pv-loader{display:none;position:absolute;z-index:10}
.pv-video.loading .pv-loader{display:block}
.pv-loader-ring{width:36px;height:36px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--blue);border-radius:50%;animation:spin .6s linear infinite}
.snap-flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:30;pointer-events:none;transition:opacity .05s}
.snap-flash.fire{opacity:.6;transition:none}

/* ── Review dock ────────────────────────────────────────────────────── */
.pv-dock{position:relative;flex-shrink:0}
.dock-bubble{padding:0 16px 12px;transition:transform .2s var(--ease),opacity .2s;transform:translateY(100%);opacity:0}
.dock-bubble.dk-visible{transform:none;opacity:1}
.dock-bubble.vid-playing{transform:translateY(8px);opacity:.6}
.dock-bubble.review-glow{animation:reviewPulse 2s ease infinite}
.review-hint{text-align:center;font-size:11px;color:rgba(41,151,255,.6);padding:6px 0 4px;display:none}
.dock-bubble.review-glow .review-hint{display:block}

.dk-island-wrap{background:var(--glass-flat);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.dk-island-wrap.dk-tools-locked .dk-tools{opacity:.4;pointer-events:none}

.dk-input{display:flex;align-items:center;gap:8px}
.dk-ts{font-size:10px;font-weight:700;color:var(--blue);min-width:36px;text-align:center}
.dk-inp-wrap{flex:1;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);padding:4px 8px}
.dk-textarea{flex:1;background:none;border:none;color:var(--txt);font-size:12px;resize:none;outline:none;font-family:var(--font);line-height:1.4;max-height:60px}
.dk-textarea::placeholder{color:var(--txt4)}
.dk-send{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .15s}
.dk-send svg{width:16px;height:16px}
.dk-send.ready{color:var(--blue)}
.dk-row-divider{height:1px;background:rgba(255,255,255,.06);margin:2px 0}

/* ── Dock tools row ─────────────────────────────────────────────────── */
.dk-tools{display:flex;align-items:center;gap:6px}
.dk-btn{background:none;border:none;color:var(--txt3);cursor:pointer;padding:5px;border-radius:var(--r-sm);transition:background .15s,color .15s;display:flex;align-items:center}
.dk-btn svg{width:16px;height:16px}
.dk-btn.active{background:rgba(41,151,255,.15);color:var(--blue)}
.dk-btn:hover{background:rgba(255,255,255,.06)}
.dk-sep{width:1px;height:20px;background:rgba(255,255,255,.08)}

/* ── 3D Rotary Knobs ────────────────────────────────────────────────── */
.dk-knob{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;-webkit-user-select:none;user-select:none}
.dk-knob-body{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.12),rgba(255,255,255,.02) 60%);border:1px solid rgba(255,255,255,.1);position:relative;transition:box-shadow .15s}
.dk-knob.active .dk-knob-body{box-shadow:0 0 12px rgba(41,151,255,.3)}
.dk-knob-tick{position:absolute;top:4px;left:50%;width:2px;height:10px;background:var(--blue);border-radius:1px;transform-origin:bottom center;transform:translateX(-50%)}
.dk-knob-lbl{font-size:8px;font-weight:700;color:var(--txt4);text-transform:uppercase;letter-spacing:.04em}
.dk-knob-tip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:4px 8px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);font-size:9px;font-weight:600;color:var(--txt2);white-space:nowrap}
.dk-knob-tip.show{display:block}
.dk-size-wrap{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:1px}
.dk-size-lbl{font-size:7px;font-weight:700;color:var(--txt4)}

/* ── Dock timeline ──────────────────────────────────────────────────── */
.dk-timeline-bar{padding:4px 0 0}
.dk-timeline{display:flex;align-items:center;gap:8px}
.dk-play{background:none;border:none;color:var(--txt);cursor:pointer;padding:2px;display:flex;align-items:center}
.dk-play svg{width:18px;height:18px}
.dk-time{font-size:10px;font-weight:700;color:var(--txt3);min-width:32px;text-align:center;font-family:var(--mono)}
.dk-track-wrap{flex:1;position:relative;cursor:pointer;padding:8px 0}
.dk-track-wrap.scrubbing{cursor:grabbing}
.dk-track{height:3px;background:rgba(255,255,255,.1);border-radius:2px;position:relative}
.dk-fill{position:absolute;left:0;top:0;bottom:0;background:var(--blue);border-radius:2px;transform-origin:left;will-change:transform}
.dk-thumb{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--blue);transform:translate(-50%,-50%);will-change:left;transition:box-shadow .15s}
.dk-track-wrap.scrubbing .dk-thumb{box-shadow:0 0 8px rgba(41,151,255,.5);transform:translate(-50%,-50%) scale(1.2)}
.dk-rev-tick{position:absolute;top:-3px;width:3px;height:9px;background:var(--orange);border-radius:2px;z-index:2;cursor:pointer;transition:transform .1s}
.dk-rev-tick:hover{transform:scaleY(1.5)}
.dk-rev-tip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:6px 8px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);font-size:9px;white-space:nowrap;z-index:10;max-width:280px;white-space:normal}
.dk-rev-tick:hover .dk-rev-tip{display:block}
.tip-ts{font-weight:700;color:var(--orange);margin-right:4px}
.tip-icon{margin-right:2px}
.tip-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--txt2);font-size:9px}
.tip-note.expanded{display:block;-webkit-line-clamp:unset}
.tip-more{font-size:8px;color:var(--blue);cursor:pointer;margin-left:2px}

/* ── Thread panel ───────────────────────────────────────────────────── */
.pv-thread{width:340px;border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;background:rgba(10,14,28,.4);transition:width .2s var(--ease),opacity .2s}
.pv-thread.collapsed{width:0;opacity:0;overflow:hidden;border:none}
.pv-thread-tab{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%);background:var(--glass);border:1px solid rgba(255,255,255,.08);border-right:none;border-radius:var(--r-md) 0 0 var(--r-md);padding:8px 4px;cursor:pointer;z-index:10;color:var(--txt3)}
.pv-thread-tab.visible{display:block}
.pv-thread-tab svg{width:18px;height:18px}
.th-hdr{padding:12px 14px 6px;flex-shrink:0}
.th-hdr-top{display:flex;align-items:center;justify-content:space-between}
.th-title{font-size:13px;font-weight:700;color:var(--txt)}
.th-close{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;display:flex;align-items:center}
.th-close svg{width:16px;height:16px}

/* ── Staff panel in thread ──────────────────────────────────────────── */
.th-staff-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:6px 14px;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;font-size:11px;font-weight:600;color:var(--txt3);font-family:var(--font)}
.th-staff-toggle svg{width:12px;height:12px;transition:transform .2s}
.th-staff-toggle.open svg{transform:rotate(180deg)}
.th-staff-panel{max-height:0;overflow:hidden;transition:max-height .2s var(--ease);padding:0 14px}
.th-staff-panel.open{max-height:200px;padding:8px 14px}
.th-staff-row{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:11px}
.th-staff-row svg{width:12px;height:12px;color:var(--txt4);flex-shrink:0}
.staff-label{color:var(--txt3);font-weight:600;flex:1}
.staff-val{color:var(--txt);font-weight:700;font-size:12px}
.staff-val a{color:var(--blue);text-decoration:none}

/* ── Assets dropdown ────────────────────────────────────────────────── */
.th-assets-toggle{display:flex;align-items:center;gap:6px;width:100%;padding:6px 14px;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;font-size:11px;font-weight:600;color:var(--txt3);font-family:var(--font)}
.th-assets-toggle svg{width:12px;height:12px}
.th-assets-chev{margin-left:auto;transition:transform .2s}
.th-assets-toggle.open .th-assets-chev{transform:rotate(180deg)}
.th-assets-cnt{font-size:9px;font-weight:700;background:rgba(41,151,255,.15);color:var(--blue);padding:1px 5px;border-radius:100px}
.th-assets-dropdown{max-height:0;overflow:hidden;transition:max-height .2s var(--ease)}
.th-assets-dropdown.open{max-height:220px;overflow-y:auto}
.th-assets-body{padding:6px 10px}

/* ── Thread messages ────────────────────────────────────────────────── */
.th-body{flex:1;overflow-y:auto;padding:8px 14px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}
.th-msg{display:flex;gap:8px;align-items:flex-start}
.th-msg.optimistic{opacity:.7}
.th-avatar{width:28px;height:28px;border-radius:50%;background:rgba(41,151,255,.12);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--blue);flex-shrink:0;overflow:hidden}
.th-avatar img{width:100%;height:100%;object-fit:cover}
.th-avatar.system{background:rgba(255,159,10,.12)}
.th-avatar.system img{width:18px;height:18px;object-fit:contain}
.th-msg-body{flex:1;min-width:0}
.th-msg-top{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.th-msg-name{font-size:11px;font-weight:700;color:var(--txt)}
.th-msg-badge{font-size:8px;font-weight:700;padding:1px 5px;border-radius:4px}
.th-msg-badge.status{background:rgba(255,159,10,.12);color:var(--orange)}
.th-msg-time{font-size:9px;color:var(--txt4);margin-left:auto}
.th-msg-text{font-size:12px;color:var(--txt2);line-height:1.5;word-break:break-word}
.th-msg-text.status-update{color:var(--txt3);font-style:italic;font-size:11px}

/* ── Thread input ───────────────────────────────────────────────────── */
.th-input{padding:8px 14px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.th-inp-wrap{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);padding:4px 8px}
.th-attach{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;display:flex;align-items:center}
.th-attach svg{width:16px;height:16px}
.th-textarea{flex:1;background:none;border:none;color:var(--txt);font-size:12px;resize:none;outline:none;font-family:var(--font);line-height:1.4;max-height:80px}
.th-textarea::placeholder{color:var(--txt4)}
.th-send{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .15s}
.th-send svg{width:16px;height:16px}
.th-send.ready{color:var(--blue)}
.th-attach-popup{display:none;position:absolute;bottom:calc(100% + 4px);left:10px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:6px;z-index:20;box-shadow:var(--sh)}
.th-attach-popup.open{display:flex;flex-direction:column;gap:2px}
.th-attach-opt{display:flex;align-items:center;gap:8px;padding:8px 12px;background:none;border:none;color:var(--txt2);font-size:12px;font-weight:600;cursor:pointer;border-radius:var(--r-sm);transition:background .15s;font-family:var(--font)}
.th-attach-opt:hover{background:rgba(255,255,255,.06)}
.th-attach-opt svg{width:16px;height:16px}
.th-emoji-grid{display:none;position:absolute;bottom:calc(100% + 4px);left:10px;right:10px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:10px;z-index:20;box-shadow:var(--sh);max-height:200px;overflow-y:auto}
.th-emoji-grid.open{display:block}
.eg-cat{font-size:9px;font-weight:700;color:var(--txt4);text-transform:uppercase;letter-spacing:.04em;margin:6px 0 4px}
.eg-row{display:flex;flex-wrap:wrap;gap:2px}
.eg-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:2px;border-radius:4px;transition:background .1s}
.eg-btn:hover{background:rgba(255,255,255,.1)}

/* ── Custom modal system ────────────────────────────────────────────── */
.cb-modal-overlay{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.6);align-items:center;justify-content:center}
.cb-modal-overlay.open{display:flex}
.cb-modal{background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:24px;min-width:300px;max-width:400px;box-shadow:var(--sh)}
.cb-modal h3{font-size:16px;font-weight:700;color:var(--txt);margin:0 0 8px}
.cb-modal p{font-size:13px;color:var(--txt2);margin:0 0 16px;line-height:1.5}
.cb-modal-input{width:100%;padding:10px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);color:var(--txt);font-size:13px;outline:none;margin-bottom:16px;font-family:var(--font)}
.cb-modal-input:focus{border-color:rgba(41,151,255,.4)}
.cb-modal-actions{display:flex;gap:8px;justify-content:flex-end}

/* ── Star rating ────────────────────────────────────────────────────── */
.stars{display:flex;gap:4px;justify-content:center;margin:12px 0}
.star{background:none;border:none;cursor:pointer;padding:4px}
.star svg{width:28px;height:28px;fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.2);stroke-width:1.5;transition:fill .15s,transform .15s}
.star.active svg{fill:#ffd60a;stroke:#ffd60a}
.star:hover svg{transform:scale(1.15)}

/* ── Drawing canvas ─────────────────────────────────────────────────── */
.draw-canvas{position:absolute;inset:0;z-index:15;display:none;cursor:crosshair;touch-action:none}
.draw-canvas.active{display:block}
.draw-bar{display:none;position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:20;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:6px 10px;gap:4px;align-items:center;box-shadow:var(--sh)}
.draw-bar.active{display:flex}
.draw-tool{background:none;border:none;color:var(--txt3);cursor:pointer;padding:5px;border-radius:var(--r-sm);display:flex;align-items:center;transition:background .15s,color .15s}
.draw-tool svg{width:16px;height:16px}
.draw-tool.active{background:rgba(41,151,255,.15);color:var(--blue)}
.draw-tool:hover{background:rgba(255,255,255,.06)}
.draw-sep{width:1px;height:20px;background:rgba(255,255,255,.08);margin:0 2px}
.draw-colors{display:flex;gap:4px;align-items:center}
.draw-color{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .1s}
.draw-color.active{border-color:#fff;transform:scale(1.15)}
.draw-sizes{display:flex;gap:6px;align-items:center}
.draw-size{border-radius:50%;background:var(--txt3);cursor:pointer;border:2px solid transparent;transition:border-color .15s}
.draw-size.active{border-color:var(--blue)}

/* ── Recording indicator ────────────────────────────────────────────── */
.rec-indicator{display:none;position:absolute;top:12px;right:12px;z-index:25;padding:6px 12px;background:var(--glass-flat);border:1px solid rgba(255,59,48,.3);border-radius:var(--r-xl);align-items:center;gap:8px}
.rec-indicator.active{display:flex}
.rec-dot{width:8px;height:8px;border-radius:50%;background:#ff3b30;animation:recFlash 1s ease infinite}
.rec-label{font-size:10px;font-weight:700;color:#ff3b30;letter-spacing:.06em}
.rec-timer{font-size:10px;font-weight:700;color:var(--txt2);font-family:var(--mono)}
.rec-stop{background:none;border:none;color:#ff3b30;cursor:pointer;padding:2px;display:flex;align-items:center}
.rec-stop svg{width:16px;height:16px}
.rec-indicator.rec-warn{border-color:rgba(255,159,10,.4)}
.rec-indicator.rec-warn .rec-dot{background:var(--orange)}
.rec-indicator.rec-urgent{border-color:rgba(255,59,48,.6)}
.rec-indicator.rec-urgent .rec-dot{animation:recFlash .3s ease infinite}
.rec-transcript-live{font-size:9px;color:var(--txt3);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audio-wave{display:none;gap:2px;align-items:center}
.audio-wave span{width:2px;background:var(--blue);border-radius:1px;animation:wave .8s ease-in-out infinite}
.audio-wave span:nth-child(1){height:6px;animation-delay:0s}
.audio-wave span:nth-child(2){height:12px;animation-delay:.1s}
.audio-wave span:nth-child(3){height:8px;animation-delay:.2s}
.audio-wave span:nth-child(4){height:14px;animation-delay:.3s}
.audio-wave span:nth-child(5){height:6px;animation-delay:.4s}

/* ── Revision bubbles ───────────────────────────────────────────────── */
.rev-bubble{background:rgba(41,151,255,.04);border:1px solid rgba(41,151,255,.12);border-radius:var(--r-lg);padding:10px 12px;margin:6px 0}
.rev-bubble-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rev-bubble-tag{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px}
.rev-bubble-tag.draft-tag{background:rgba(255,159,10,.12);color:var(--orange)}
.rev-bubble-tag.confirmed{background:rgba(48,209,88,.12);color:#30d158}
.rev-bubble-count{font-size:9px;color:var(--txt4);margin-left:auto}
.rev-round-hdr{display:flex;align-items:center;gap:8px;padding:6px 0}
.rev-round-line{flex:1;height:1px;background:rgba(255,255,255,.06)}
.rev-round-num{font-size:9px;font-weight:700;color:var(--txt4)}
.rev-item{display:flex;align-items:flex-start;gap:6px;padding:4px 0;font-size:12px}
.rev-ts{font-size:10px;font-weight:700;color:var(--blue);cursor:pointer;min-width:36px}
.rev-ts.no-ts{color:var(--txt4);cursor:default}
.rev-sep{color:var(--txt4);font-size:10px}
.rev-note{color:var(--txt2);font-size:11px;line-height:1.4;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rev-note.expanded{-webkit-line-clamp:unset;display:block}
.rev-note-more{font-size:9px;color:var(--blue);cursor:pointer;margin-left:4px}
.rev-attach{font-size:11px}
.rev-delete{background:none;border:none;color:var(--txt4);cursor:pointer;font-size:14px;padding:0 2px;transition:color .15s}
.rev-delete:hover{color:var(--red)}
.rev-media{padding:4px 0 4px 42px}
.rev-media audio,
.rev-media video{max-width:100%;border-radius:var(--r-md)}
.rev-media img{max-width:100%;border-radius:var(--r-md)}
.rev-media-err{font-size:10px;color:var(--txt4)}
.rev-transcript-toggle{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--txt3);font-size:10px;font-weight:600;cursor:pointer;padding:2px 0;font-family:var(--font)}
.rev-transcript-toggle svg{width:10px;height:10px;transition:transform .2s}
.rev-transcript-toggle.expanded svg{transform:rotate(180deg)}
.rev-transcript-box{max-height:0;overflow:hidden;transition:max-height .2s var(--ease);font-size:10px;color:var(--txt3);line-height:1.5;padding:0 4px;white-space:pre-wrap}
.rev-transcript-box.open{max-height:300px;padding:4px}

/* ── Glass audio player ─────────────────────────────────────────────── */
.glass-audio{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);margin-top:4px}
.glass-audio+audio{display:none}
.glass-audio-play{background:none;border:none;color:var(--blue);cursor:pointer;padding:2px;display:flex;align-items:center}
.glass-audio-play svg{width:14px;height:14px}
.glass-audio-mid{flex:1}
.glass-audio-bar{height:3px;background:rgba(255,255,255,.1);border-radius:2px;cursor:pointer;position:relative}
.glass-audio-fill{height:100%;background:var(--blue);border-radius:2px;width:0;transition:width .1s}
.glass-audio-time{font-size:9px;font-weight:700;color:var(--txt3);min-width:28px;text-align:center;font-family:var(--mono)}

/* ── Right-click context menu ───────────────────────────────────────── */
.rv-ctx{display:none;position:absolute;z-index:100;background:var(--glass-flat);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:10px;min-width:240px;box-shadow:var(--sh);animation:rvCtxIn .15s var(--ease)}
.rv-ctx.open{display:block}
.rv-ctx-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rv-ctx-ts{font-size:12px;font-weight:700;color:var(--blue)}
.rv-ctx-close{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:16px}
.rv-ctx-modes{display:flex;gap:4px;margin-bottom:8px}
.rv-ctx-btn{display:flex;align-items:center;gap:3px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);padding:4px 8px;color:var(--txt3);font-size:9px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font)}
.rv-ctx-btn svg{width:12px;height:12px}
.rv-ctx-btn.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.25);color:var(--blue)}
.rv-ctx-input{display:none}
.rv-ctx-input.visible{display:block}
.rv-ctx-inp-wrap{display:flex;gap:6px;align-items:center}
.rv-ctx-textarea{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);color:var(--txt);font-size:11px;padding:6px 8px;resize:none;outline:none;font-family:var(--font)}
.rv-ctx-send{background:none;border:none;color:var(--blue);cursor:pointer;padding:4px;display:flex;align-items:center}
.rv-ctx-send svg{width:14px;height:14px}
.rv-pin{display:none;position:absolute;width:10px;height:10px;background:var(--blue);border-radius:50%;border:2px solid #fff;z-index:99;transform:translate(-50%,-50%);pointer-events:none}
.rv-pin.visible{display:block}

/* ── Revision review overlay ────────────────────────────────────────── */
.rev-review-overlay{display:none;position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.65);align-items:center;justify-content:center}
.rev-review-overlay.open{display:flex}
.rev-review-modal{background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);width:90%;max-width:540px;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--sh)}
.rev-review-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.rev-review-hdr h3{font-size:15px;font-weight:700;color:var(--txt);margin:0}
.rev-review-close{background:none;border:none;color:var(--txt3);font-size:20px;cursor:pointer}
.rev-review-body{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.rev-review-item{display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:var(--r-md);background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04)}
.rev-item-icon{font-size:14px;flex-shrink:0}
.rev-review-item-body{flex:1;min-width:0}
.rev-review-item-top{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.rev-review-item-note{font-size:11px;color:var(--txt2);line-height:1.4;white-space:pre-line}
.rev-review-item-del{background:none;border:none;color:var(--txt4);cursor:pointer;font-size:16px;transition:color .15s}
.rev-review-item-del:hover{color:var(--red)}
.rev-review-footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid rgba(255,255,255,.06)}
.rev-review-back{padding:8px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);color:var(--txt2);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
.rev-review-submit{padding:8px 20px;background:var(--blue);border:none;border-radius:var(--r-md);color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);transition:opacity .15s}
.rev-review-submit:disabled{opacity:.5;cursor:default}
.rev-review-empty{text-align:center;color:var(--txt4);padding:20px;font-size:12px}

/* ── Editor Revision Workbench ──────────────────────────────────────── */
.erw-overlay{display:none;position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.7);align-items:center;justify-content:center}
.erw-overlay.open{display:flex}
.erw-modal{background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);width:95%;max-width:1100px;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--sh)}
.erw-hdr{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.erw-hdr h3{font-size:15px;font-weight:700;color:var(--txt);margin:0}
.erw-round{font-size:11px;font-weight:700;color:var(--blue);background:rgba(41,151,255,.12);padding:3px 8px;border-radius:100px}
.erw-close{background:none;border:none;color:var(--txt3);font-size:20px;cursor:pointer;margin-left:auto}
.erw-body{display:flex;flex:1;overflow:hidden}
.erw-left{flex:1;display:flex;flex-direction:column;overflow:hidden}
.erw-right{width:300px;border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column}
.erw-player-wrap{position:relative;background:#000;aspect-ratio:16/9;flex-shrink:0}
.erw-video{width:100%;height:100%;object-fit:contain}
.erw-ver-toggle{position:absolute;top:8px;right:8px;display:flex;gap:4px;z-index:5}
.erw-ver-btn{padding:4px 10px;border-radius:100px;font-size:10px;font-weight:700;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.5);color:var(--txt3);cursor:pointer;font-family:var(--font)}
.erw-ver-btn.active{background:rgba(41,151,255,.2);border-color:rgba(41,151,255,.3);color:var(--blue)}
.erw-timeline{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
.erw-play{background:none;border:none;color:var(--txt);cursor:pointer;padding:2px;display:flex;align-items:center}
.erw-play svg{width:16px;height:16px}
.erw-time{font-size:10px;font-weight:700;color:var(--txt3);font-family:var(--mono)}
.erw-track-wrap{flex:1;position:relative;cursor:pointer;padding:6px 0}
.erw-track{height:3px;background:rgba(255,255,255,.1);border-radius:2px;position:relative}
.erw-fill{height:100%;background:var(--blue);border-radius:2px;width:0}
.erw-thumb{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid var(--blue);transform:translate(-50%,-50%);left:0}
.erw-ticks{position:absolute;inset:0}
.erw-tick{position:absolute;top:-2px;width:3px;height:7px;background:var(--orange);border-radius:1px;z-index:2;cursor:pointer}
.erw-tick-tip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:4px 8px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);font-size:9px;white-space:nowrap;z-index:10}
.erw-tick:hover .erw-tick-tip{display:block}
.erw-revisions{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px}
.erw-rev-item{display:flex;gap:8px;padding:6px 8px;border-radius:var(--r-md);cursor:pointer;transition:background .15s}
.erw-rev-item:hover,.erw-rev-item.active{background:rgba(41,151,255,.08)}
.erw-rev-ts{font-size:10px;font-weight:700;color:var(--blue);min-width:36px}
.erw-rev-body{flex:1}
.erw-rev-note{font-size:11px;color:var(--txt2);line-height:1.3}
.erw-rev-media{margin-top:4px}
.erw-rev-media video,.erw-rev-media img{max-width:100%;max-height:120px;border-radius:var(--r-md)}
.erw-check-hdr{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px;font-weight:700;color:var(--txt)}
.erw-check-hdr svg{width:16px;height:16px;color:var(--blue)}
.erw-check-progress{margin-left:auto;font-size:11px;color:var(--txt3)}
.erw-checklist{flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.erw-check-item{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:var(--r-md);cursor:pointer;transition:background .15s}
.erw-check-item:hover{background:rgba(255,255,255,.03)}
.erw-check-box{width:20px;height:20px;border:2px solid rgba(255,255,255,.15);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.erw-check-box svg{width:14px;height:14px;opacity:0;transition:opacity .15s}
.erw-check-item.checked .erw-check-box{background:rgba(48,209,88,.2);border-color:#30d158}
.erw-check-item.checked .erw-check-box svg{opacity:1;color:#30d158}
.erw-check-ts{font-size:10px;font-weight:700;color:var(--blue)}
.erw-check-note{font-size:11px;color:var(--txt2)}
.erw-check-footer{padding:12px;border-top:1px solid rgba(255,255,255,.04)}
.erw-submit-btn{width:100%;padding:10px;background:var(--blue);border:none;border-radius:var(--r-md);color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font)}
.erw-submit-btn:disabled{opacity:.4;cursor:default}

/* ── Webcam + Screen PIP ────────────────────────────────────────────── */
.cam-pip{display:none;position:absolute;bottom:16px;right:16px;width:140px;height:105px;border-radius:var(--r-lg);overflow:hidden;z-index:20;border:2px solid rgba(41,151,255,.3);box-shadow:0 4px 16px rgba(0,0,0,.5)}
.cam-pip.active{display:block}
.cam-pip video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.screen-pip{display:none;position:absolute;bottom:16px;left:16px;width:200px;height:120px;border-radius:var(--r-lg);overflow:hidden;z-index:20;border:2px solid rgba(191,90,242,.3);box-shadow:0 4px 16px rgba(0,0,0,.5)}
.screen-pip.active{display:block}
.screen-pip video{width:100%;height:100%;object-fit:contain;background:#000}

/* ── Approve overlay ────────────────────────────────────────────────── */
.approve-overlay{display:none;position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.8);align-items:center;justify-content:center}
.approve-overlay.active{display:flex}
.approve-card{text-align:center;padding:40px}
.approve-ring{position:relative;width:120px;height:120px;margin:0 auto 20px}
.approve-ring svg{width:120px;height:120px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:4}
.ring-fill{fill:none;stroke:var(--blue);stroke-width:4;stroke-dasharray:339.292;stroke-dashoffset:339.292;stroke-linecap:round;transition:stroke-dashoffset 2s}
.ring-fill.animate{stroke-dashoffset:0}
.approve-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
.approve-icon svg{width:36px;height:36px;color:var(--txt3);transition:color .3s}
.approve-icon.done svg{color:#30d158;animation:approveCheckPop .4s var(--ease)}
.approve-status{font-size:16px;font-weight:700;color:var(--txt);margin-bottom:6px}
.approve-step{font-size:12px;color:var(--txt3);margin-bottom:16px}
.approve-bar{width:200px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;margin:0 auto;overflow:hidden}
.approve-bar-fill{height:100%;background:var(--blue);border-radius:2px;width:0;transition:width .5s var(--ease)}
.approve-card.done .approve-status{color:#30d158}

/* ── Status transition banner ───────────────────────────────────────── */
.pv-status-transition{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;background:rgba(0,0,0,.6);opacity:0;transition:opacity .3s var(--ease)}
.pv-status-transition.active{opacity:1}
.pv-st-card{text-align:center;padding:24px 32px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);box-shadow:var(--sh)}
.pv-st-row{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:8px}
.pv-st-from{font-size:13px;font-weight:700;color:var(--txt3)}
.pv-st-to{font-size:13px;font-weight:700;color:var(--blue)}
.pv-st-sub{font-size:11px;color:var(--txt3);margin-bottom:10px}
.pv-st-check svg{animation:approveCheckPop .4s var(--ease)}

/* ── Mobile landscape prompt ────────────────────────────────────────── */
.mob-landscape-prompt{display:none;position:fixed;bottom:0;left:0;right:0;z-index:600;padding:20px;text-align:center;background:var(--glass-flat);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -8px 32px rgba(0,0,0,.4)}
.mob-landscape-prompt svg{width:40px;height:40px;color:var(--blue);margin-bottom:8px}
.mob-landscape-prompt h3{font-size:15px;font-weight:700;color:var(--txt);margin:0 0 4px}
.mob-landscape-prompt p{font-size:12px;color:var(--txt3);margin:0 0 12px}
.mlp-skip{padding:8px 20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);color:var(--txt2);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
body.dock-open .mob-landscape-prompt{display:block}

/* ── Page-specific keyframes ────────────────────────────────────────── */
@keyframes cardDismiss{to{transform:scale(.8) translateY(20px);opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes checkPop{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes recFlash{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes wave{0%,100%{height:4px}50%{height:var(--h,12px)}}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
@keyframes approveIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ringDraw{from{stroke-dashoffset:339.292}to{stroke-dashoffset:0}}
@keyframes approveCheckPop{0%{transform:translate(-50%,-50%) scale(0)}50%{transform:translate(-50%,-50%) scale(1.3)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes approvePulse{0%,100%{box-shadow:0 0 0 0 rgba(48,209,88,.3)}50%{box-shadow:0 0 20px 4px rgba(48,209,88,.15)}}
@keyframes approveShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes reviewPulse{0%,100%{border-color:rgba(41,151,255,.12)}50%{border-color:rgba(41,151,255,.35)}}
@keyframes rvCtxIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rotateHint{0%{transform:rotate(0)}10%{transform:rotate(-10deg)}20%{transform:rotate(10deg)}30%{transform:rotate(0)}100%{transform:rotate(0)}}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media(max-width:900px){
  .pv-thread{width:280px}
  .pv-bar-center{display:none}
  .erw-right{width:240px}
}
@media(max-width:600px){
  .page-head{padding:12px 16px 0}
  .hdr{flex-direction:column;align-items:flex-start;gap:10px}
  .hdr-right{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .search input{width:120px}
  .tp-stage-dots{display:flex}
  .kanban,.tp-kanban{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .kanban .col,.tp-col{flex:0 0 82vw;scroll-snap-align:start}
  .pv-shell{flex-direction:column}
  .pv-thread{width:100%;height:40vh;border-left:none;border-top:1px solid rgba(255,255,255,.06)}
  .pv-thread.collapsed{height:0}
  .erw-body{flex-direction:column}
  .erw-right{width:100%;border-left:none;border-top:1px solid rgba(255,255,255,.06)}
}
@media(max-width:480px){
  .density,.search{display:none}
  .card{aspect-ratio:4/5}
  .pv-title{max-width:120px;font-size:13px}
  .dock-bubble{padding:0 8px 8px}
}


/* ═══════════════════════════════════════════════════════════════
   PORTAL COMMON — BASE CLASSES
   Originally from common.css. Shared component foundations used
   across all portal pages. Page-specific overrides follow below.
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Shell Layout ── */
.shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.shell-head{flex-shrink:0;padding:24px 28px 0;max-width:900px;width:100%;animation:fadeUp .3s var(--ease-q) backwards}
.shell-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.shell-body::-webkit-scrollbar{width:0}
.shell-inner{max-width:900px;padding:16px 28px 80px}
.shell-foot{flex-shrink:0;padding:14px 40px 24px;display:flex;justify-content:center;gap:14px}
.shell-sub{font-size:14px;color:var(--txt2);margin-top:4px}

/* ── Page Headers ── */
.pg-title{font-size:clamp(24px,3.5vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:6px;font-family:var(--font-display);background:linear-gradient(135deg,var(--txt),var(--txt3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pg-sub{color:var(--txt2);font-size:14px;margin-bottom:20px}
.grad{background:linear-gradient(135deg,var(--blue),var(--blue-hv));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── Section Cards ── */
.section{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.14);border-radius:var(--r-2xl);margin-bottom:24px;overflow:hidden;box-shadow:var(--sh);transition:border-color .15s var(--ease),transform .15s var(--ease)}
.section:hover{border-color:rgba(41,151,255,.3);transform:translateY(-2px)}
.sec-head{display:flex;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.06)}
.sec-body{padding:24px}

/* ── Buttons (portal variants) ── */
.btn-primary{background:var(--blue);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.15),0 4px 16px rgba(41,151,255,.3)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:active{transform:scale(.97)}
.btn-back{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.14);color:var(--txt2);box-shadow:var(--sh)}
.btn-back:hover{border-color:rgba(255,255,255,.15);color:#fff;transform:translateY(-1px)}
.btn-next{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;box-shadow:0 8px 32px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,.3);min-width:160px}
.btn-next:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 48px var(--blue-glow)}
.btn-next:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.btn-next:active:not(:disabled){transform:scale(.97)}
.btn-danger{background:rgba(192,57,43,.15);color:var(--red);border:1px solid rgba(192,57,43,.25)}
.btn-danger:hover{background:rgba(192,57,43,.25);transform:translateY(-1px)}

/* ── Category Tabs ── */
.cat-tabs{display:flex;gap:4px;padding:4px;flex-wrap:wrap}
.cat-tab{padding:8px 20px;border-radius:100px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.08);background:transparent;color:var(--txt3);transition:opacity .12s var(--ease),border-color .12s,color .12s;white-space:nowrap;font-family:var(--font)}
.cat-tab:hover{color:var(--txt2);border-color:rgba(255,255,255,.14)}
.cat-tab.active{background:linear-gradient(180deg,rgba(41,151,255,.2),rgba(41,151,255,.08));border-color:var(--blue);color:var(--blue);box-shadow:0 0 12px rgba(41,151,255,.12)}

/* ── Tab Panels ── */
.tab-panels{flex:1;overflow:hidden;position:relative}
.tab-panel{position:absolute;inset:0;overflow-y:auto;padding:16px 32px 80px;display:none}
.tab-panel.active{display:block;animation:fadeUp .3s var(--ease)}

/* ── Toast Notifications ── */
.toast{position:fixed;bottom:24px;right:24px;padding:14px 20px;background:rgba(10,14,28,.82);border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.18);border-radius:var(--r-lg);font-size:14px;font-family:var(--font);display:flex;align-items:center;gap:10px;transform:translateY(100px);opacity:0;box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 .5px 0 rgba(255,255,255,.12);transition:transform .2s var(--ease),opacity .15s var(--ease);z-index:1000;pointer-events:none}
.toast.visible{transform:translateY(0);opacity:1;pointer-events:auto}
.toast.success{border-color:var(--green);color:var(--green)}
.toast.error{border-color:var(--red);color:var(--red)}

/* ── Role Badges ── */
.role-badge{display:inline-flex;padding:3px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.role-owner{background:rgba(255,214,10,.15);border:1px solid rgba(255,214,10,.3);color:var(--gold)}
.role-editor{background:rgba(191,90,242,.15);border:1px solid rgba(191,90,242,.3);color:var(--purple)}
.role-admin{background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.3);color:var(--red)}
.role-client{background:rgba(41,151,255,.15);border:1px solid rgba(41,151,255,.3);color:var(--blue)}
.role-trial{background:rgba(255,159,10,.15);border:1px solid rgba(255,159,10,.3);color:var(--orange)}

/* ── Scores / Grades ── */
.sc-hi{color:var(--green)}.sc-md{color:var(--orange)}.sc-lo{color:var(--red)}.sc-ok{color:var(--blue)}
.grade-pill{display:inline-block;padding:2px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;color:#fff}
.grade-a,.grade-A{background:var(--green)}.grade-b,.grade-B{background:var(--blue)}
.grade-c,.grade-C{background:var(--orange)}.grade-d,.grade-D,.grade-f,.grade-F{background:var(--red)}
.sbar{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-lg);padding:14px 18px}
.sbar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sbar-label{font-size:12px;font-weight:600;color:var(--txt2)}
.sbar-val{font-size:16px;font-weight:700}
.sbar-track{height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.sbar-fill{height:100%;border-radius:3px;transform-origin:left;transition:transform .5s var(--ease);will-change:transform}

/* ── Payout Cards ── */
.payout-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);box-shadow:var(--sh);padding:20px}
.po-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.po-label{font-size:13px;color:var(--txt2)}
.po-val{font-size:15px;font-weight:700}
.po-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.po-tier{padding:10px;border-radius:var(--r-lg);text-align:center;font-size:12px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.po-tier.active-tier{border-color:var(--green);background:rgba(126,203,161,.06)}
.po-tier-pct{font-size:16px;font-weight:700;margin-bottom:2px}
.po-tier-label{color:var(--txt3);font-size:10px;text-transform:uppercase}
.po-total{font-size:28px;font-weight:800;color:var(--green);margin-top:12px}

/* ── Leaderboard ── */
.lb-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);box-shadow:var(--sh);padding:14px 16px;margin-bottom:10px;transition:border-color .15s var(--ease)}
.lb-card:hover{border-color:rgba(255,255,255,.18)}
.lb-card-me,.lb-card.lb-me{border-left:3px solid var(--blue);background:linear-gradient(135deg,rgba(41,151,255,.06) 0%,rgba(10,14,28,.55) 100%)}
.lb-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.lb-rank{font-size:18px;font-weight:800;width:28px;text-align:center;flex-shrink:0}
.lb-rank.r1,.r1{color:var(--gold)}.lb-rank.r2,.r2{color:#c0c0c0}.lb-rank.r3,.r3{color:#cd7f32}
.lb-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0}
.lb-info{flex:1;min-width:0}
.lb-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-meta{display:flex;gap:4px;align-items:center;margin-top:2px;flex-wrap:wrap}
.lb-tag{padding:2px 7px;border-radius:100px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.lb-tag-core{background:rgba(41,151,255,.1);color:var(--blue)}
.lb-tag-master{background:rgba(191,90,242,.1);color:var(--purple)}
.lb-tag-applicant,.lb-tag-new{background:rgba(126,203,161,.1);color:var(--green)}
.lb-tag-training{background:rgba(255,159,10,.1);color:var(--orange)}
.lb-grade{margin-left:auto;flex-shrink:0}
.lb-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.lb-sc{text-align:center;padding:6px 4px;border-radius:var(--r-sm);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04)}
.lb-sc-label{font-size:9px;color:var(--txt4);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.lb-sc-val{font-size:14px;font-weight:700}
.lb-stats{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--txt3)}
.lb-stat{display:flex;align-items:center;gap:4px}
.lb-stat-val{font-weight:700;color:var(--txt2)}
.lb-overall{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);margin-top:6px}
.lb-overall-label{font-size:11px;font-weight:600;color:var(--txt3)}
.lb-overall-val{font-size:18px;font-weight:800}

/* ── State Modifiers ── */
.spinner{display:inline-block;width:24px;height:24px;border:2px solid rgba(41,151,255,.2);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
.loading{text-align:center;padding:48px;color:var(--txt3);font-size:14px}
.empty{text-align:center;padding:48px 16px;color:var(--txt4);font-size:13px}
.empty svg{width:64px;height:64px;margin-bottom:16px;opacity:.2}
.empty h3{font-size:16px;font-weight:600;color:var(--txt2);margin-bottom:4px}
.empty p{font-size:13px}

/* ── Visibility / Role 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}
.client-only{display:none}
body[data-role="client"] .client-only,body[data-role="trial"] .client-only{display:flex}

/* ── Project Cards ── */
.pj-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:8px}
.pj-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pj-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.pj-due{font-size:11px;color:var(--txt3);flex-shrink:0}
.pj-due.overdue{color:var(--red)}
.pj-tag{padding:2px 8px;border-radius:100px;font-size:9px;font-weight:700;text-transform:uppercase}

/* ── Kanban (BASE — shared admin + pipeline) ── */
.kanban{display:flex;gap:16px;flex:1;overflow-x:auto;padding:0 28px 20px;-webkit-overflow-scrolling:touch}
.col{min-width:280px;max-width:340px;flex:1;display:flex;flex-direction:column;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);box-shadow:var(--sh);overflow:hidden}
.col-hdr{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.col-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.col-name,.col-title{font-size:13px;font-weight:600;flex:1}
.col-cnt,.col-count{font-size:10px;color:var(--txt3);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:100px}
.col-body{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px}
.col-body::-webkit-scrollbar{width:0}
.drag-over{background:rgba(41,151,255,.04);border-color:rgba(41,151,255,.2)}

/* ── Person Cards (kanban) ── */
.person{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-lg);cursor:grab;transition:border-color .12s,transform .12s}
.person:hover{border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
.person.dragging{opacity:.4;transform:scale(.95)}
.p-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;color:#fff}
.editor-av{background:var(--blue)}.client-av{background:var(--green)}.trial-av{background:var(--orange)}
.admin-av{background:var(--purple)}.owner-av{background:var(--gold);color:#000}
.p-info{flex:1;min-width:0}
.p-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-meta{font-size:11px;color:var(--txt3);margin-top:1px}
.p-tag{padding:2px 8px;border-radius:100px;font-size:9px;font-weight:700;text-transform:uppercase;flex-shrink:0}
.tag-editor{background:rgba(41,151,255,.12);color:var(--blue)}
.tag-client{background:rgba(126,203,161,.12);color:var(--green)}
.tag-trial{background:rgba(255,159,10,.12);color:var(--orange)}
.tag-admin{background:rgba(191,90,242,.12);color:var(--purple)}
.tag-owner{background:rgba(255,214,10,.12);color:var(--gold)}

/* ── Modal (shared admin + pipeline) ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:100}
.modal-bg.visible,.modal-bg.open{display:flex}
.modal{background:rgba(10,14,28,.92);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.18);border-radius:var(--r-2xl);padding:28px;max-width:420px;width:90%;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.modal-actions{display:flex;gap:10px;margin-top:20px;justify-content:flex-end}
.modal-btn{padding:10px 24px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;cursor:pointer;border:none;font-family:var(--font)}
.modal-cancel{background:rgba(255,255,255,.06);color:var(--txt2)}
.modal-cancel:hover{background:rgba(255,255,255,.1)}
.modal-delete{background:rgba(192,57,43,.2);color:var(--red);border:1px solid rgba(192,57,43,.3)}
.modal-delete:hover{background:rgba(192,57,43,.35)}

/* ── Toolbar / Search ── */
.toolbar{display:flex;align-items:center;gap:10px;padding:0 28px 12px;flex-shrink:0;flex-wrap:wrap}
.search-box{flex:1;min-width:180px;padding:9px 14px 9px 36px;border-radius:var(--radius-pill);background:var(--glass);border:var(--glass-b);font-size:13px;color:var(--txt);font-family:var(--font);outline:none;transition:border-color .15s}
.search-box:focus{border-color:rgba(41,151,255,.4)}
.search-box::placeholder{color:var(--txt4)}



/* ═══════════════════════════════════════════════════════════════
   ADMIN COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
/* ── Page-specific: keyframes not in design system ── */
@keyframes dropGlow{0%{opacity:1}100%{opacity:0}}
@keyframes trashPulse{0%{opacity:1}100%{opacity:0}}

/* ── Shell overrides (admin needs full-height, no max-width) ── */
.shell-head{max-width:none;width:auto;animation:none}

/* ── Toolbar overrides (admin search is flex container) ── */
.toolbar{gap:12px;margin-bottom:16px;padding:0}
.search-box{display:flex;align-items:center;gap:8px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:100px;padding:7px 14px;min-width:200px;box-shadow:var(--sh);transition:border-color .15s var(--ease)}
.search-box:focus-within{border-color:rgba(41,151,255,.35)}
.search-box svg{width:14px;height:14px;color:var(--txt4);flex-shrink:0}
.search-box input{background:transparent;border:none;outline:none;color:var(--txt);font-size:12px;font-family:var(--font);width:100%}
.search-box input::placeholder{color:var(--txt4)}
.btn-new{padding:8px 18px;border:none;border-radius:100px;font-size:12px;font-weight:600;color:#fff;background:var(--blue);cursor:pointer;display:flex;align-items:center;gap:6px;transition:transform .12s var(--ease-q);font-family:var(--font);box-shadow:0 4px 16px rgba(41,151,255,.2),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-new:hover{transform:translateY(-1px)}.btn-new:active{transform:scale(.96)}
.btn-new svg{width:14px;height:14px}

/* ── Kanban overrides (admin-specific drag/drop) ── */
.kanban{gap:14px;overflow-y:hidden}
.kanban::-webkit-scrollbar{height:6px}
.kanban::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.col{max-width:320px;border-radius:var(--r-2xl);contain:layout paint;animation:colIn .25s var(--ease) backwards}
.col.drag-over{border-color:var(--blue);position:relative}
.col.drag-over::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 12px rgba(41,151,255,.4);animation:dropGlow .6s ease infinite;pointer-events:none}
.col-head{padding:14px 16px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.06)}
.col-color{width:10px;height:10px;border-radius:50%}
.col-cnt{border:1px solid rgba(255,255,255,.1);font-size:11px;font-weight:700;color:var(--txt2);min-width:24px;height:22px;display:flex;align-items:center;justify-content:center}
.col-del,.p-del{background:none;border:none;color:var(--txt4);font-size:11px;cursor:pointer;padding:2px 6px;border-radius:6px;opacity:0;transition:opacity 80ms;font-family:var(--font)}
.col-head:hover .col-del,.person:hover .p-del{opacity:1}
.col-del:hover,.p-del:hover{color:var(--red);background:rgba(192,57,43,.12)}
.p-del{position:absolute;top:4px;right:4px;font-size:10px;padding:1px 5px}
.col-body{padding:8px;min-height:60px;gap:0}
.col-body::-webkit-scrollbar{width:4px}
.col-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* ── Team scores strip ── */
.team-scores{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.ts-pill{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:100px;font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.ts-val{font-variant-numeric:tabular-nums}
.ts-a{color:var(--green);border-color:rgba(126,203,161,.2)}.ts-b{color:var(--blue);border-color:rgba(41,151,255,.2)}.ts-c{color:var(--orange);border-color:rgba(255,159,10,.2)}.ts-d{color:var(--red);border-color:rgba(192,57,43,.2)}.ts-f{color:var(--txt4);border-color:rgba(255,255,255,.06)}

/* ── Person card overrides (admin drag-drop) ── */
.person{position:relative;background:rgba(10,14,28,.4);border:1px solid rgba(255,255,255,.08);border-top-color:rgba(255,255,255,.12);border-radius:14px;margin-bottom:6px;transition:transform .12s var(--ease-q),border-color 80ms;user-select:none;animation:fadeUp .2s var(--ease) backwards;will-change:transform}
.person:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.person:active{cursor:grabbing;transform:scale(.97);transition:.08s}
.p-avatar{width:36px;height:36px;font-size:13px;font-weight:700;overflow:hidden}
.p-avatar.editor-av{background:var(--green)}.p-avatar.client-av{background:var(--blue)}.p-avatar.trial-av{background:var(--orange)}.p-avatar.admin-av{background:var(--purple)}.p-avatar.owner-av{background:var(--gold)}
.p-meta{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-tag{padding:2px 7px;letter-spacing:.3px}
.tag-client{background:rgba(41,151,255,.15)}
.tag-editor{background:rgba(126,203,161,.15);color:var(--green)}
.tag-trial{background:rgba(255,159,10,.15)}
.tag-admin{background:rgba(191,90,242,.15)}
.tag-owner{background:rgba(255,214,10,.15)}

/* ── Editor score mini-row ── */
.p-scores{display:flex;gap:4px;margin-top:4px}
.p-sc{font-size:9px;font-weight:600;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.04);color:var(--txt3);font-variant-numeric:tabular-nums}
.p-sc.good{color:var(--green)}.p-sc.ok{color:var(--blue)}.p-sc.mid{color:var(--orange)}.p-sc.bad{color:var(--red)}

/* ── Empty col ── */
.col-empty{text-align:center;padding:24px 12px;color:var(--txt4);font-size:12px;font-weight:500}

/* ── New team input ── */
.new-team-input{display:none;padding:8px 14px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:14px;box-shadow:var(--sh);margin-left:auto}
.new-team-input.visible{display:flex;align-items:center;gap:8px}
.nti-field{background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:7px 12px;color:var(--txt);font-size:13px;font-family:var(--font);outline:none;width:180px}
.nti-field:focus{border-color:rgba(41,151,255,.4)}
.nti-save{padding:7px 14px;border:none;border-radius:8px;background:var(--blue);color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
.nti-cancel{padding:7px 14px;border:none;border-radius:8px;background:rgba(255,255,255,.06);color:var(--txt3);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}

/* ── Trash zone (unique component) ── */
.trash-zone{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);display:flex;align-items:center;gap:10px;padding:16px 32px;background:rgba(192,57,43,.12);border:2px dashed rgba(192,57,43,.4);border-radius:20px;font-size:14px;font-weight:600;color:var(--red);transition:transform .25s var(--ease);z-index:100;will-change:transform}
.trash-zone svg{width:22px;height:22px}
.trash-zone.visible{transform:translateX(-50%) translateY(0)}
.trash-zone.hover{background:rgba(192,57,43,.25);border-color:var(--red);position:relative}
.trash-zone.hover::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 16px rgba(192,57,43,.5);animation:trashPulse .8s ease infinite;pointer-events:none}

/* ── Modal overrides ── */
.modal-bg{background:rgba(0,0,0,.8);z-index:200}
.modal{background:rgba(10,14,28,.88);max-width:380px;box-shadow:0 24px 80px rgba(0,0,0,.5);animation:fadeUp .2s var(--ease)}
.modal h3{font-size:18px;font-weight:700;margin-bottom:8px}
.modal p{font-size:14px;color:var(--txt2);margin-bottom:24px;line-height:1.5}
.modal-btn{border-radius:12px;font-size:13px;transition:transform .1s}
.modal-btn:active{transform:scale(.96)}
.modal-cancel{background:rgba(255,255,255,.08)}
.modal-delete{background:var(--red);color:#fff}

/* ── Toast overrides ── */
.toast{padding:12px 20px;background:rgba(10,14,28,.85);font-size:13px;transform:translateY(80px);z-index:100}
.toast.success{border-color:rgba(126,203,161,.3)}
.toast.error{border-color:rgba(192,57,43,.3)}

/* ── Pipeline status dot colors ── */
.ep-onboarding .col-color{background:var(--blue)!important}
.ep-new .col-color{background:#aaa!important}
.ep-core .col-color{background:var(--green)!important}
.ep-master .col-color{background:var(--green)!important}
.ep-inactive .col-color{background:var(--red)!important}

/* ── Editor pipeline card tags ── */
.ep-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ep-tag{padding:2px 7px;border-radius:100px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.ep-tag.tag-onboarding{background:rgba(41,151,255,.15);color:var(--blue)}
.ep-tag.tag-new{background:rgba(128,128,128,.15);color:#999}
.ep-tag.tag-core{background:rgba(126,203,161,.15);color:var(--green)}
.ep-tag.tag-master{background:rgba(126,203,161,.15);color:var(--green)}
.ep-tag.tag-inactive{background:rgba(192,57,43,.15);color:var(--red)}
.ep-tag.tag-team{background:rgba(191,90,242,.1);color:var(--purple)}
.ep-tag.tag-health{font-weight:800}
.ep-tag.health-a{background:rgba(126,203,161,.15);color:var(--green)}
.ep-tag.health-b{background:rgba(41,151,255,.12);color:var(--blue)}
.ep-tag.health-c{background:rgba(255,159,10,.12);color:var(--orange)}
.ep-tag.health-d{background:rgba(192,57,43,.1);color:var(--red)}
.ep-tag.health-f{background:rgba(255,255,255,.04);color:var(--txt4)}

/* ── Trial/Client/Role pipeline dot colors ── */
.tp-loggedin .col-color{background:var(--blue)!important}
.tp-blueprint .col-color{background:var(--orange)!important}
.tp-requested .col-color{background:var(--orange)!important}
.tp-approved .col-color{background:var(--green)!important}
.tp-expired .col-color{background:var(--red)!important}
.cp-onboarding .col-color{background:var(--blue)!important}
.cp-new .col-color{background:#aaa!important}
.cp-active .col-color{background:var(--green)!important}
.cp-failed-payment .col-color{background:var(--orange)!important}
.cp-canceled .col-color{background:var(--red)!important}
.rp-trial .col-color{background:var(--orange)!important}
.rp-client .col-color{background:var(--blue)!important}
.rp-editor .col-color{background:var(--green)!important}
.rp-admin .col-color{background:var(--purple)!important}
.rp-owner .col-color{background:var(--gold)!important}
.rp-expired .col-color{background:var(--txt4)!important}
.tag-expired{background:rgba(255,255,255,.06);color:var(--txt4)}

/* ── Tab panel overrides ── */
.tab-panel{display:none;flex:1;min-height:0;overflow:hidden;flex-direction:column;position:static;inset:auto;padding:0}
.tab-panel.active{display:flex;animation:none}

/* ── Reports tab ── */
.rpt-wrap{flex:1;overflow-y:auto;padding:0 28px 20px;display:flex;flex-direction:column;gap:24px}
.rpt-wrap::-webkit-scrollbar{width:4px}
.rpt-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:4px}
.rpt-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.rpt-grid{grid-template-columns:1fr}}
.rpt-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);padding:20px;box-shadow:var(--sh)}
.rpt-card h3{font-size:14px;font-weight:700;margin-bottom:12px;color:var(--txt2)}
.rpt-hero{text-align:center;padding:20px 0}
.rpt-hero-score{font-size:56px;font-weight:800;line-height:1}
.rpt-hero-grade{display:inline-block;padding:4px 14px;border-radius:100px;font-size:14px;font-weight:700;margin-top:8px}
.rpt-hero-label{font-size:12px;color:var(--txt3);margin-top:6px}
.rpt-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rpt-bar-label{font-size:11px;font-weight:600;color:var(--txt3);width:80px;flex-shrink:0}
.rpt-bar-track{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.rpt-bar-fill{height:100%;border-radius:3px;transform-origin:left;transition:transform .5s var(--ease);will-change:transform}
.rpt-bar-val{font-size:12px;font-weight:700;width:36px;text-align:right;flex-shrink:0}
.rpt-tbl{width:100%;border-collapse:separate;border-spacing:0}
.rpt-tbl th{font-size:10px;font-weight:700;color:var(--txt4);text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)}
.rpt-tbl td{font-size:12px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04)}
.rpt-tbl tr:hover td{background:rgba(255,255,255,.02)}
.rpt-grade{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;font-size:11px;font-weight:800}
.rpt-grade-a{background:rgba(126,203,161,.15);color:var(--green)}
.rpt-grade-b{background:rgba(41,151,255,.15);color:var(--blue)}
.rpt-grade-c{background:rgba(255,159,10,.15);color:var(--orange)}
.rpt-grade-d{background:rgba(192,57,43,.15);color:var(--red)}
.rpt-grade-f{background:rgba(255,255,255,.06);color:var(--txt4)}
.rpt-stars{color:var(--gold);font-size:11px;letter-spacing:1px}
.rpt-stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.rpt-stat{flex:1;min-width:100px;text-align:center;padding:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md)}
.rpt-stat-val{font-size:24px;font-weight:800;line-height:1.2}
.rpt-stat-lbl{font-size:10px;color:var(--txt3);font-weight:600;text-transform:uppercase;margin-top:4px}
.rpt-team-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.rpt-tp{padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--txt3);transition:opacity 80ms var(--ease);font-family:var(--font)}
.rpt-tp:hover{border-color:rgba(255,255,255,.2);color:var(--txt2)}
.rpt-tp.active{background:linear-gradient(180deg,rgba(41,151,255,.22),rgba(41,151,255,.1));border-color:var(--blue);color:var(--blue)}

/* ── Health/Performance tab ── */
.perf-wrap{flex:1;overflow-y:auto;padding:0 28px 20px;display:flex;flex-direction:column;gap:24px}
.perf-wrap::-webkit-scrollbar{width:4px}
.perf-wrap::-webkit-scrollbar-track{background:transparent}
.perf-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:4px}
.perf-section-title{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
.perf-lb{width:100%;border-collapse:separate;border-spacing:0 4px}
.perf-lb th{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--txt4);text-align:left;padding:4px 10px}
.perf-lb th:nth-child(n+4){text-align:center}
.perf-row{background:var(--glass);border-radius:var(--r-md)}
.perf-row:hover{background:rgba(255,255,255,.05)}
.perf-row td{padding:8px 10px;font-size:12px;font-weight:500}
.perf-row td:first-child{border-radius:var(--r-md) 0 0 var(--r-md);width:36px;text-align:center;font-weight:700}
.perf-row td:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
.perf-row td:nth-child(n+4){text-align:center;font-weight:700}

/* ── Pipelines hub tab ── */
.pl-section{padding:0 28px 32px;flex-shrink:0}
.pl-section-head{display:flex;align-items:center;gap:12px;padding:16px 0 12px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:16px}
.pl-section-title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.pl-section-sub{font-size:11px;color:var(--txt3);margin-left:2px}
.pl-badge{padding:3px 10px;border-radius:100px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.pl-badge-action{background:rgba(41,151,255,.12);color:var(--blue);border:1px solid rgba(41,151,255,.25)}
.pl-badge-auto{background:rgba(255,255,255,.05);color:var(--txt3);border:1px solid rgba(255,255,255,.08)}
.pl-kanban{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:4px 0 12px;-webkit-overflow-scrolling:touch;min-height:200px}
.pl-kanban::-webkit-scrollbar{height:5px}
.pl-kanban::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.pl-kanban.view-only .col{opacity:.82}
.pl-kanban.view-only .person{cursor:default!important}
.pl-kanban.view-only .person[draggable]{cursor:default}
.pl-scroll-wrap{flex:1;overflow-y:auto;min-height:0}
.pl-scroll-wrap::-webkit-scrollbar{width:4px}
.pl-scroll-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:3px}

/* ── Responsive ── */
@media(max-width:768px){.col{min-width:240px}.shell-head{padding:16px 16px 0}.kanban{padding:0 16px 20px}}
@media(max-width:480px){
  .shell-head h1{font-size:22px}
  .kanban{flex-direction:column;overflow-x:hidden;gap:8px;padding:0 10px 20px}
  .col{min-width:0!important;flex:none!important;width:100%;border-radius:var(--r-lg)}
  .col-body{max-height:350px}
  .sub-tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .sub-tab{white-space:nowrap;flex-shrink:0}
  .card{border-radius:16px;margin-bottom:8px}
  .page-body{padding:0 10px 16px}
  input,textarea,select{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ═══════════════════════════════════════════════════════════════
   INDEX (PORTAL SHELL) COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

@keyframes slideIn{from{opacity:0;transform:translate3d(-8px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* Shell — full viewport, islands float over content */

/* ═══ Left Glass Nav ═══ */
.left-nav{position:fixed;top:50%;left:8px;z-index:99;
  display:flex;flex-direction:column;gap:4px;padding:8px 6px;
  border-radius:var(--r-xl);background:rgba(18,18,22,.6);border:1px solid rgba(255,255,255,.05);
  border-right-color:rgba(255,255,255,.08);
  box-shadow:2px 0 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
  width:42px;overflow:visible;
  transform:translateY(-50%) translateX(-34px);opacity:.25;
  transition:transform .3s var(--ease),opacity .3s var(--ease);will-change:transform,opacity}
.left-nav:hover{transform:translateY(-50%) translateX(0);opacity:1}
.shell:hover .left-nav{transform:translateY(-50%) translateX(-20px);opacity:.45}
.ln-logo{display:block;width:22px;height:22px;margin:0 auto 2px;opacity:.7;transition:opacity .15s;pointer-events:none}
.left-nav:hover .ln-logo{opacity:1}
.left-nav .ln-btn{width:30px;height:30px;border-radius:var(--r-md);border:none;cursor:pointer;
  background:transparent;color:var(--txt3);display:flex;align-items:center;justify-content:center;
  transition:opacity .06s;position:relative;contain:layout style}
.left-nav .ln-btn:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.left-nav .ln-btn.active{background:rgba(255,255,255,.06);color:var(--txt)}
.left-nav .ln-btn.active::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:2px;height:12px;border-radius:1px;background:var(--blue);opacity:.6}
.left-nav .ln-btn svg{width:15px;height:15px;stroke-width:1.6;flex-shrink:0}
.left-nav .ln-sep{width:18px;height:1px;background:rgba(255,255,255,.06);margin:2px auto}
.ln-label{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--txt2);
  white-space:nowrap;user-select:none;pointer-events:none;
  opacity:0;transition:opacity .12s;
  text-shadow:0 1px 4px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.5)}
.left-nav .ln-btn:hover .ln-label{opacity:1}
.ln-badge{position:absolute;top:-2px;right:-2px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;
  background:var(--blue);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(41,151,255,.35)}
.ln-badge.zero{display:none}

/* ═══ Bottom Glass Island ═══ */
.bottom-island{position:fixed;bottom:8px;left:0;right:0;z-index:100;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
  transform:translateY(16px);opacity:.3;
  transition:transform .3s var(--ease),opacity .3s var(--ease);will-change:transform,opacity}
.bottom-island:hover{transform:translateY(0);opacity:1}
.shell:hover .bottom-island{transform:translateY(8px);opacity:.5}
.bottom-island-inner{pointer-events:auto;display:flex;align-items:center;gap:4px;padding:6px 10px;
  border-radius:var(--r-xl);background:rgba(18,18,22,.6);border:1px solid rgba(255,255,255,.05);
  border-top-color:rgba(255,255,255,.08);
  box-shadow:0 -2px 16px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04)}
.bottom-island-inner .bi-btn{width:30px;height:30px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.04);cursor:pointer;
  background:transparent;color:var(--txt3);display:flex;align-items:center;justify-content:center;
  transition:transform .06s,opacity .06s;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}
.bi-avatar{width:26px;height:26px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);transition:transform .1s}
.bi-avatar:hover{transform:scale(1.08);border-color:rgba(255,255,255,.2)}
.bi-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bi-badge{position:absolute;top:-2px;right:-2px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;
  background:#c0392b;color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(22,22,26,.75)}
.bi-badge:empty,.bi-badge.zero{display:none}

/* ═══ Chat Popup ═══ */
.chat-popup{
  position:fixed;bottom:58px;left:50%;
  transform:translateX(-50%) translateY(10px) scale(.96);
  width:320px;max-height:460px;z-index:101;
  display:flex;flex-direction:column;border-radius:var(--r-xl);
  background:rgba(16,16,20,.92);border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,255,255,.13);
  box-shadow:0 8px 48px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;pointer-events:none;overflow:hidden;
  transition:transform .22s var(--ease),opacity .18s ease;
  will-change:transform,opacity}
.chat-popup.open{transform:translateX(-50%) translateY(0) scale(1);opacity:1;pointer-events:auto}
.chat-popup-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 9px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.chat-popup-hdr h4{font-size:13px;font-weight:600;color:var(--txt);margin:0}
.chat-popup-expand{font-size:10px;font-weight:600;color:var(--blue);cursor:pointer;padding:3px 8px;border-radius:var(--r-sm);border:none;background:rgba(41,151,255,.12)}
.chat-popup-list{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:1px;min-height:0}
.chat-popup-dm{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-md);cursor:pointer}
.chat-popup-dm:hover{background:rgba(255,255,255,.05)}
.chat-popup-dm.active{background:rgba(41,151,255,.1)}
.chat-popup-dm-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,rgba(41,151,255,.3),rgba(41,151,255,.15));
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.chat-popup-dm-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.chat-popup-dm-info{flex:1;min-width:0}
.chat-popup-dm-name{font-size:11px;font-weight:600;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-popup-dm-preview{font-size:10px;color:var(--txt4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-popup-dm-badge{min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--red,#c0392b);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center}
.chat-popup-dm-badge:empty{display:none}
.chat-popup-thread{display:none;flex-direction:column;flex:1;min-height:0}
.chat-popup-thread.active{display:flex}
.chat-popup-thread-hdr{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.chat-popup-back{width:22px;height:22px;border-radius:var(--r-sm);border:none;background:rgba(255,255,255,.06);color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .1s}
.chat-popup-back:hover{opacity:.7}
.chat-popup-back svg{width:13px;height:13px}
.chat-popup-msgs{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:5px}
.chat-popup-msg{max-width:82%;padding:7px 11px;border-radius:13px;font-size:11px;line-height:1.4;color:var(--txt);word-break:break-word}
.chat-popup-msg.sent{align-self:flex-end;background:rgba(41,151,255,.22);border-bottom-right-radius:4px}
.chat-popup-msg.recv{align-self:flex-start;background:rgba(255,255,255,.07);border-bottom-left-radius:4px}
.chat-popup-input-row{display:flex;align-items:center;gap:7px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.chat-popup-input-row input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);
  padding:7px 10px;font-size:11px;color:var(--txt);font-family:var(--font);outline:none}
.chat-popup-input-row input:focus{border-color:rgba(41,151,255,.4)}
.chat-popup-input-row input::placeholder{color:var(--txt4)}
.chat-popup-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 .1s,opacity .15s;flex-shrink:0}
.chat-popup-send:hover{transform:scale(1.1)}
.chat-popup-send:disabled{opacity:.3;cursor:default;transform:none}
.chat-popup-send svg{width:13px;height:13px}

/* ═══ Notifications Popup ═══ */
.notif-popup{
  position:fixed;bottom:58px;left:50%;
  transform:translateX(-50%) translateY(10px) scale(.96);
  width:320px;max-height:400px;z-index:101;
  display:flex;flex-direction:column;border-radius:var(--r-xl);
  background:rgba(16,16,20,.92);border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,255,255,.13);
  box-shadow:0 8px 48px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;pointer-events:none;overflow:hidden;
  transition:transform .22s var(--ease),opacity .18s ease;
  will-change:transform,opacity}
.notif-popup.open{transform:translateX(-50%) translateY(0) scale(1);opacity:1;pointer-events:auto}
.notif-popup-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 9px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.notif-popup-hdr h4{font-size:13px;font-weight:600;color:var(--txt);margin:0}
.notif-popup-list{flex:1;overflow-y:auto;padding:6px}
.notif-popup-item{display:flex;align-items:flex-start;gap:9px;padding:9px;border-radius:var(--r-md);cursor:pointer}
.notif-popup-item:hover{background:rgba(255,255,255,.04)}
.notif-popup-item.unread{background:rgba(41,151,255,.06)}
.notif-popup-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px}
.notif-popup-icon.approval{background:rgba(126,203,161,.15);color:var(--green)}
.notif-popup-icon.alert{background:rgba(192,57,43,.15);color:var(--red)}
.notif-popup-icon.update{background:rgba(41,151,255,.15);color:var(--blue)}
.notif-popup-text{flex:1;min-width:0}
.notif-popup-title{font-size:11px;font-weight:600;color:var(--txt);line-height:1.3}
.notif-popup-meta{font-size:10px;color:var(--txt4);margin-top:2px}
.notif-popup-empty{padding:28px;text-align:center;color:var(--txt4);font-size:11px}

/* Main content — iframe transitions */
.main iframe{width:100%;flex:1;min-height:0;height:0;border:none;background:transparent;opacity:1;transition:opacity .06s ease-out;-webkit-overflow-scrolling:touch}
.main iframe.transitioning{opacity:0}

/* Mobile bar role visibility (shell-specific, extends common.css role gates) */
.staff-mob{display:none}
.client-mob{display:flex}
body[data-role="admin"] .staff-mob,body[data-role="owner"] .staff-mob,body[data-role="editor"] .staff-mob{display:flex}
body[data-role="admin"] .client-mob,body[data-role="owner"] .client-mob,body[data-role="editor"] .client-mob{display:none}

/* ════════════════════════════════════════════
   CINEMATIC WELCOME + UI TOUR
   ════════════════════════════════════════════ */

@keyframes wFadeIn  {from{opacity:0}to{opacity:1}}
@keyframes wSlideUp {from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes wGlowPulse{0%,100%{opacity:.4}50%{opacity:.8}}
@keyframes wLetterIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes wScanLine{from{transform:translateY(-100%)}to{transform:translateY(100vh)}}
@keyframes wCardIn  {from{opacity:0;transform:translate3d(0,32px,0) scale(.96)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes wDotIn   {from{transform:scale(0)}to{transform:scale(1)}}

.wstage{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:#000;pointer-events:none;opacity:0;will-change:opacity}
.wstage.active{pointer-events:auto;animation:wFadeIn .5s ease forwards}
.wstage.out{animation:wFadeIn .4s ease reverse forwards}

.ws-orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform,opacity}
.ws-orb.a{width:600px;height:600px;top:-100px;left:-100px;
  background:radial-gradient(circle,rgba(41,151,255,.12) 0%,transparent 60%);
  animation:wGlowPulse 3s ease-in-out infinite}
.ws-orb.b{width:500px;height:500px;bottom:-80px;right:-80px;
  background:radial-gradient(circle,rgba(160,80,240,.08) 0%,transparent 60%);
  animation:wGlowPulse 4s ease-in-out infinite .8s}
.ws-scan{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.06}
.ws-scan::after{content:'';position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  animation:wScanLine 2.5s cubic-bezier(.4,0,.6,1) .3s both}

.ws-content{position:relative;z-index:1;text-align:center;padding:0 40px}
.ws-greeting{font-size:clamp(14px,1.5vw,16px);font-weight:600;letter-spacing:4px;
  text-transform:uppercase;color:var(--blue);margin-bottom:16px;opacity:0;
  animation:wSlideUp .6s var(--ease) .4s forwards}
.ws-name{font-size:clamp(52px,8vw,96px);font-weight:700;letter-spacing:-.04em;
  line-height:1;color:#fff;display:flex;justify-content:center;flex-wrap:wrap;gap:0 .12em;
  margin-bottom:24px}
.ws-char{display:inline-block;opacity:0;will-change:transform,opacity}
.ws-sub{font-size:clamp(15px,1.8vw,19px);color:var(--txt2);max-width:520px;margin:0 auto;
  line-height:1.5;opacity:0;animation:wSlideUp .7s var(--ease) 1.6s forwards}
.ws-logo{width:140px;height:auto;margin:0 auto 40px;opacity:0;
  animation:wSlideUp .6s var(--ease) .2s forwards}
.ws-founders{display:flex;gap:28px;justify-content:center;margin-top:36px;opacity:0;
  animation:wSlideUp .6s var(--ease) 2.1s forwards}
.ws-founder{display:flex;flex-direction:column;align-items:center;gap:7px}
.ws-founder-photo{width:46px;height:46px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(41,151,255,.45);
  box-shadow:0 0 16px rgba(41,151,255,.25),0 0 32px rgba(41,151,255,.1),0 2px 12px rgba(0,0,0,.4)}
.ws-founder-photo img{width:100%;height:100%;object-fit:cover}
.ws-founder-name{font-size:10px;color:var(--txt3);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.ws-founder-title{font-size:9px;color:var(--txt4);letter-spacing:.3px}
.ws-cta-wrap{margin-top:40px;opacity:0;animation:wSlideUp .6s var(--ease) 2.5s forwards}
.ws-cta{padding:15px 52px;font-size:16px;font-weight:600;font-family:var(--font);
  color:#fff;background:var(--blue);border:none;border-radius:var(--radius-pill);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.15),0 6px 24px rgba(41,151,255,.4);
  transition:transform .12s var(--ease);will-change:transform}
.ws-cta:hover{transform:translate3d(0,-2px,0);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 32px rgba(41,151,255,.5)}
.ws-cta:active{transform:scale(.96)}
.ws-skip{margin-top:14px;font-size:12px;color:var(--txt4);cursor:pointer;letter-spacing:.3px;
  opacity:0;animation:wFadeIn .4s ease 3s forwards}
.ws-skip:hover{color:var(--txt2)}

/* ── UI Tour ── */
.wtour{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.88);
  pointer-events:none;opacity:0;will-change:opacity;transition:opacity .35s ease}
.wtour.active{pointer-events:auto;opacity:1}

.wtour-card{
  width:min(560px,92vw);
  background:rgba(14,14,18,.95);border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,255,255,.16);
  border-radius:var(--r-2xl);padding:36px 36px 28px;
  box-shadow:0 24px 80px rgba(0,0,0,.7),0 4px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;overflow:hidden;
  transform:translate3d(0,24px,0) scale(.97);opacity:0;
  transition:transform .35s var(--ease-spring),opacity .3s ease;
  will-change:transform,opacity}
.wtour-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:240px;height:1px;background:linear-gradient(90deg,transparent,rgba(41,151,255,.6),transparent)}
.wtour.active .wtour-card{transform:translate3d(0,0,0) scale(1);opacity:1}

.wtour-dots{display:flex;gap:5px;justify-content:center;margin-bottom:28px}
.wtour-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.12);
  transition:transform .2s var(--ease),opacity .2s}
.wtour-dot.active{background:var(--blue);transform:scale(1.4)}
.wtour-dot.done{background:rgba(41,151,255,.4)}

.wtour-step{display:none;animation:wSlideUp .28s var(--ease) both}
.wtour-step.active{display:block}

.wts-icon{width:56px;height:56px;border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;font-size:26px;
  background:rgba(41,151,255,.12);border:1px solid rgba(41,151,255,.2)}
.wts-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--blue);text-align:center;margin-bottom:8px}
.wts-title{font-size:22px;font-weight:700;letter-spacing:-.03em;text-align:center;margin-bottom:10px}
.wts-desc{font-size:14px;color:var(--txt2);text-align:center;line-height:1.6;max-width:440px;margin:0 auto 24px}

.wts-preview{display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg);padding:16px;margin-bottom:24px}
.wts-island-mock{display:flex;align-items:center;gap:6px;padding:7px 14px;
  background:rgba(18,18,22,.8);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-pill);font-size:11px;font-weight:600;color:var(--txt2)}
.wts-island-mock svg{width:14px;height:14px;flex-shrink:0;color:var(--blue)}
.wts-arrow{color:var(--txt4);font-size:16px}

.wtour-nav{display:flex;align-items:center;justify-content:space-between;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06)}
.wtour-back{padding:10px 22px;font-size:13px;font-weight:600;font-family:var(--font);
  background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--txt3);
  border-radius:var(--radius-pill);cursor:pointer;transition:opacity .1s}
.wtour-back:hover{opacity:.7}
.wtour-next{padding:11px 30px;font-size:14px;font-weight:600;font-family:var(--font);
  background:var(--blue);color:#fff;border:none;border-radius:var(--radius-pill);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 16px rgba(41,151,255,.35);
  transition:transform .1s var(--ease);will-change:transform}
.wtour-next:hover{transform:translate3d(0,-1px,0)}
.wtour-next:active{transform:scale(.96)}
.wtour-step-count{font-size:11px;font-weight:600;color:var(--txt4);letter-spacing:.5px}

@media(max-width:768px){
  .left-nav{display:none!important}
  .bottom-island{display:none!important}
    .chat-popup,.notif-popup{display:none!important}
}
/* ── Mobile: premium bottom tab bar ── */
@media(max-width:480px){
    .mob-bar{display:flex!important}
    .main iframe{height:100%;width:100%}
  .wtour-card{padding:24px 20px;width:94vw}
  .ws-content{padding:0 20px}
  .ws-name{font-size:clamp(36px,11vw,72px)}
  input,textarea,select{font-size:16px!important}
  html[data-device="iphone-di"] .mob-bar{
    margin-bottom:env(safe-area-inset-bottom,0px)
  }
}
/* Mobile bar */
.mob-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;
  height:var(--mob-bar-h);
  padding:0 4px;
  padding-bottom:0;
  margin-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(5,10,20,.97);
  border-top:1px solid rgba(255,255,255,.07);
  align-items:center;justify-content:space-around;
  box-shadow:0 -1px 0 rgba(255,255,255,.04),0 -8px 24px rgba(0,0,0,.4);
}
html[data-pwa="1"] .mob-bar{background:rgba(5,10,20,.99);border-top-color:rgba(255,255,255,.05)}
.mob-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 0 4px;flex:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;border:none;background:transparent;
  position:relative;touch-action:manipulation;min-height:44px;min-width:44px;
}
.mob-tab svg{width:22px;height:22px;color:var(--txt4);will-change:transform;transition:opacity .12s}
.mob-tab-label{font-size:9px;font-weight:600;color:var(--txt4);letter-spacing:.3px;transition:opacity .12s}
.mob-tab.active svg{color:var(--blue)}
.mob-tab.active .mob-tab-label{color:var(--blue)}
.mob-tab.active::before{
  content:'';position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:28px;height:2.5px;
  background:var(--blue);border-radius:0 0 3px 3px;
}
.mob-tab-plus{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--r-xl);
  background:linear-gradient(145deg,#2997ff,#0066d6);
  border:none;cursor:pointer;
  box-shadow:0 4px 20px rgba(41,151,255,.4),inset 0 1px 0 rgba(255,255,255,.25);
  margin-bottom:4px;
  transition:transform .15s var(--ease-spring),box-shadow .15s;
  -webkit-tap-highlight-color:transparent;flex-shrink:0;touch-action:manipulation;
}
.mob-tab-plus:active{transform:scale(.88);box-shadow:0 2px 10px rgba(41,151,255,.3)}
.mob-tab-plus svg{width:22px;height:22px;color:#fff}

/* ── Right Island (onboarding) ── */
.oa-island{position:fixed;top:50%;right:8px;z-index:99;
  display:flex;flex-direction:column;gap:4px;padding:8px 6px;
  border-radius:var(--r-xl);background:rgba(18,18,22,.6);border:1px solid rgba(255,255,255,.05);
  border-left-color:rgba(255,255,255,.08);
  box-shadow:-2px 0 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
  width:44px;overflow:visible;
  transform:translateY(-50%) translateX(52px);opacity:0;pointer-events:none;
  transition:transform .3s var(--ease),opacity .3s var(--ease);will-change:transform,opacity}
.oa-island.visible{opacity:.25;transform:translateY(-50%) translateX(36px);pointer-events:auto}
.shell:hover .oa-island.visible{transform:translateY(-50%) translateX(20px);opacity:.5}
.oa-island.visible:hover{transform:translateY(-50%) translateX(0);opacity:1}
.oa-island-hdr{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--blue);text-align:center;padding:2px 0 4px;white-space:nowrap;
  writing-mode:vertical-lr;transform:rotate(180deg);align-self:center;line-height:1}
.oa-sep{width:18px;height:1px;background:rgba(255,255,255,.06);margin:2px auto}
.oa-step{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:5px 4px;border-radius:var(--r-md);cursor:pointer;position:relative;
  transition:opacity .06s;contain:layout style}
.oa-step:hover{background:rgba(255,255,255,.06)}
.oa-step.locked{opacity:.3;cursor:default;pointer-events:none}
.oa-step.locked:hover{background:none}
.oa-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;flex-shrink:0;will-change:transform}
.oa-step.done .oa-dot{background:var(--green);color:#fff}
.oa-step.current .oa-dot{background:var(--blue);color:#fff;
  box-shadow:0 0 10px rgba(41,151,255,.5);animation:oaPulse 2s infinite}
.oa-step.locked .oa-dot{background:rgba(255,255,255,.06);color:var(--txt4)}
.oa-step-num{font-size:7px;font-weight:700;color:var(--txt4);letter-spacing:.3px}
.oa-step.current .oa-step-num{color:var(--blue)}
.oa-step.done .oa-step-num{color:var(--green)}
.oa-flabel{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--txt2);
  white-space:nowrap;pointer-events:none;user-select:none;
  opacity:0;transition:opacity .12s;
  text-shadow:0 1px 4px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.5)}
.oa-step:hover .oa-flabel{opacity:1}
.oa-prog{font-size:8px;font-weight:700;color:var(--txt4);text-align:center;padding:4px 0 2px;white-space:nowrap}
.oa-prog span{color:var(--blue)}
@keyframes oaPulse{0%,100%{box-shadow:0 0 10px rgba(41,151,255,.4)}50%{box-shadow:0 0 18px rgba(41,151,255,.65)}}
@media(max-width:768px){.oa-island{display:none!important}}

/* ── Nav Event Bubble ── */
.nav-event{display:none;margin:0 4px 4px;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.06);background:var(--glass);box-shadow:var(--sh);
  transition:transform .12s var(--ease),opacity .12s;will-change:transform,opacity}
.nav-event.visible{display:block;animation:fadeUp .3s var(--ease-q)}
.nav-event:hover{transform:translateY(-2px);opacity:.9}
.nav-event:active{transform:scale(.97);transition-duration:.06s}
.nav-event-inner{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.nav-event-tag{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:2px 6px;border-radius:4px;display:inline-flex;align-self:flex-start}
.nav-event-tag.offer{background:rgba(126,203,161,.15);color:var(--green)}
.nav-event-tag.update{background:rgba(41,151,255,.15);color:var(--blue)}
.nav-event-tag.call{background:rgba(255,159,10,.15);color:var(--orange)}
.nav-event-title{font-size:12px;font-weight:600;color:var(--txt);line-height:1.3}
.nav-event-meta{font-size:10px;color:var(--txt3)}
.nav-event-timer{font-size:14px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.nav-event-close{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.06);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.nav-event:hover .nav-event-close{opacity:1}
.nav-event-close svg{width:10px;height:10px;color:var(--txt3)}
.nav-event{position:relative}

/* Nav lock for trials */
.ln-btn.tw-locked,.mob-tab.tw-locked{opacity:.25!important;pointer-events:none!important;position:relative}


/* ═══════════════════════════════════════════════════════════════
   HOME (WEBSITE) COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
/* ── Page-specific component styles (design-system tokens only) ── */
html{scroll-behavior:smooth}
.home-page{min-height:100vh;overflow-x:hidden;width:100%;font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{position:relative;z-index:1;max-width:100vw}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--s3)}
.section{position:relative;padding:var(--s10) 0;overflow:hidden}
.section>*{position:relative;z-index:1}

/* ── Section Header ── */
.section-header{text-align:center;margin-bottom:var(--s4)}
.section-header .section-label{margin-bottom:var(--s2)}
.section-header .section-title{margin-bottom:var(--s2)}

/* ── Section Label ── */
.section-label{
  display:inline-block;font-size:14px;font-weight:700;line-height:1.5;
  text-transform:uppercase;letter-spacing:2px;color:var(--blue-brand);
}

/* ── Section Title & Sub ── */
.section-title{
  font-family:var(--font-display);font-size:clamp(28px,4vw,52px);font-weight:600;line-height:1.2;
  letter-spacing:-.035em;text-wrap:balance;
}
.section-sub{
  font-family:var(--font-display);font-size:clamp(16px,2vw,22px);font-weight:500;
  max-width:860px;margin:0 auto;line-height:1.5;text-wrap:pretty;max-width:65ch;
}

/* ── Hero ── */
.hero{padding:var(--s8) 0 var(--s4);text-align:center}
.hero-logo{height:64px;margin-bottom:var(--s3);object-fit:contain}
.hero-title{
  font-family:var(--font-display);font-size:clamp(30px,4.5vw,56px);font-weight:600;line-height:1.15;
  letter-spacing:-.04em;margin-bottom:var(--s3);max-width:900px;margin-left:auto;margin-right:auto;
  text-wrap:balance;
}
.hero-title .line1{display:block;font-weight:600}
.hero-title .line2{display:block;font-weight:600;font-size:.85em;letter-spacing:-.02em;margin-top:var(--s1)}
.hero-title em{font-style:normal;font-weight:600}
.hero-sub{
  font-size:clamp(15px,1.6vw,18px);max-width:700px;max-width:65ch;
  margin:0 auto var(--s3);line-height:1.6;font-weight:400;letter-spacing:.01em;text-wrap:pretty;
}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}

/* ── Buttons ── */
.btn-primary{background:var(--blue-brand);color:#fff;box-shadow:var(--sh-btn)}
.btn-primary:hover{background:var(--blue-hover);transform:translateY(-2px)}
.btn-primary:active{transform:scale(.97);transition-duration:40ms}
.btn-hero{padding:0 var(--s4);font-size:16px;font-weight:600;height:48px}
.section-cta{text-align:center;margin-top:var(--s4);display:flex;flex-direction:column;align-items:center;gap:var(--s1)}

/* ── Stats Row ── */
.stats-row{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-bottom:var(--s4)}
.stat{text-align:center;padding:0 var(--s2);position:relative}
.stat+.stat::before{
  content:'';position:absolute;left:0;top:20%;height:60%;width:1px;
  background:rgba(210,210,215,1);
}
.stat-value{font-size:17px;font-weight:700;margin-bottom:0}
.stat-value.accent{color:var(--blue-brand)}
.stat-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.stat-label.accent{color:var(--blue-brand)}

/* ── Showcase Cards ── */
.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);max-width:1200px;margin:0 auto}
.showcase-card{
  background:#f5f5f7;border:1px solid rgba(210,210,215,1);border-radius:var(--r-xl);
  padding:var(--s2);box-shadow:0 1px 3px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.1);
  transition:transform .35s var(--ease),opacity .35s var(--ease);position:relative;overflow:hidden;will-change:transform;
  cursor:pointer;
}
.showcase-card.active{transform:scale(1.04);border-color:rgba(0,113,227,.15);box-shadow:0 4px 16px rgba(0,0,0,.22),0 12px 32px rgba(0,0,0,.15);z-index:2}
.showcase-card.inactive::after{
  content:'';position:absolute;inset:0;border-radius:var(--r-xl);
  background:rgba(0,0,0,.05);z-index:3;pointer-events:none;transition:opacity .35s var(--ease);
}
.showcase-card.inactive:hover::after{opacity:.25}
.showcase-card:hover{border-color:rgba(0,113,227,.15)}
.showcase-labels-row{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s1);justify-content:center}
.showcase-top-label{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:4px var(--s1);background:rgba(0,0,0,.04);border-radius:var(--s1);white-space:nowrap;flex:1;text-align:center;
}
.showcase-top-label-spacer{width:var(--s2);flex-shrink:0}
.showcase-top-label-raw{color:var(--txt2)}
.showcase-top-label-edit{color:var(--blue-brand)}
.showcase-compare{display:flex;align-items:stretch;gap:var(--s1);position:relative}
.showcase-video{
  flex:1;position:relative;aspect-ratio:9/16;border-radius:var(--s1);overflow:hidden;
  background:#f5f5f7;border:1px solid rgba(255,255,255,.12);
}
.showcase-video video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
.showcase-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;color:var(--txt3)}
.showcase-arrow svg{opacity:.4}

/* ── Stars Row ── */
.stars-row{display:flex;justify-content:center;gap:var(--s1);margin-bottom:var(--s2)}
.stars-row svg{width:18px;height:18px;fill:var(--blue-brand)}

/* ── Creator Rail ── */
.creator-rail-wrap{
  position:relative;background:#f5f5f7;border:1px solid rgba(210,210,215,1);
  border-radius:var(--r-xl);padding:var(--s3);box-shadow:var(--sh);overflow:visible;
}
.creator-rail{
  display:flex;gap:var(--s3);padding:var(--s2);overflow-x:auto;scroll-behavior:smooth;cursor:grab;
  justify-content:center;-ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.creator-rail::-webkit-scrollbar{display:none}
.creator-rail.grabbing{cursor:grabbing;scroll-behavior:auto}
.creator-chip{
  display:flex;flex-direction:column;align-items:center;gap:var(--s1);
  flex-shrink:0;cursor:pointer;padding:var(--s2);border-radius:var(--r-xl);
  position:relative;min-width:120px;
}
.creator-chip:hover{background:#f5f5f7}
.creator-chip::after{
  content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;
  background:var(--blue-brand);border-radius:1px;transform:translateX(-50%);
  transition:width .3s var(--ease);
}
.creator-chip.active::after{width:48px}
.creator-chip.active{background:rgba(0,113,227,.04)}
.creator-chip-avatar{
  width:110px;height:110px;border-radius:50%;overflow:hidden;
  border:3px solid rgba(255,255,255,.12);
  transition:transform .3s var(--ease);will-change:transform;position:relative;
}
.creator-chip:hover .creator-chip-avatar{border-color:rgba(0,113,227,.25)}
.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-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.creator-chip-handle{font-size:12px;font-weight:500;color:var(--txt2);letter-spacing:-.01em;white-space:nowrap}
.creator-chip.active .creator-chip-handle{color:var(--txt)}
.creator-chip-subs{font-size:13px;font-weight:700;color:var(--txt3)}
.creator-chip.active .creator-chip-subs{color:var(--blue-brand)}

/* Showcase Stage */
.showcase-divider{height:1px;margin:var(--s2) 0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.03),transparent)}
.showcase-stage{
  opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease);
  max-height:0;overflow:hidden;will-change:transform;
}
.showcase-stage.open{opacity:1;transform:translateY(0);max-height:600px;overflow:visible}
.showcase-meta{text-align:center;margin-bottom:var(--s2)}
.showcase-meta-name{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:var(--s1)}
.showcase-meta-subs{font-size:13px;font-weight:600;color:var(--blue-brand);margin-bottom:var(--s1)}
.showcase-meta-focus{font-size:13px;line-height:1.5;max-width:480px;margin:0 auto}
.showcase-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.showcase-vcard{
  background:#f5f5f7;border:1px solid rgba(210,210,215,1);border-radius:var(--r-lg);
  padding:var(--s1);overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.12);
  transition:transform .3s var(--ease);will-change:transform;
}
.showcase-vcard:hover{border-color:rgba(0,113,227,.2);transform:translateY(-3px)}
.showcase-vcard iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-md);display:block}

/* ── Marquee ── */
.marquee{overflow:hidden;padding:var(--s1) 0;margin-top:var(--s2);position:relative}
.marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,#fff,transparent)}
.marquee-track{display:flex;gap:64px;animation:marquee-scroll 45s linear infinite;width:max-content;will-change:transform}
.marquee-track img{height:38px;width:auto;mix-blend-mode:multiply;object-fit:contain;opacity:.5;transition:opacity .15s var(--ease);flex-shrink:0}
.marquee-track img:hover{opacity:.85}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── Card ── */
.card{
  position:relative;background:#fff;border:1px solid rgba(210,210,215,1);
  border-radius:var(--r-xl);padding:var(--s3);box-shadow:var(--sh);
  transition:transform .3s var(--ease);will-change:transform;
}
.card:hover{transform:translateY(-4px)}

/* ── Steps ── */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.step-number{
  width:42px;height:42px;border-radius:var(--r-lg);background:var(--blue-brand);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;color:#fff;box-shadow:0 4px 12px rgba(0,113,227,.3);
}
.step-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.step-title{font-size:15px;font-weight:700}
.step-desc{font-size:13px;line-height:1.55;margin-bottom:var(--s1);text-wrap:pretty;max-width:65ch}
.step-list{display:flex;flex-direction:column;gap:var(--s1)}
.step-item{display:flex;align-items:center;gap:var(--s1);font-size:12px}
.step-item svg{width:14px;height:14px;stroke:var(--blue-brand);fill:none;stroke-width:2.5;flex-shrink:0}

/* ── Portfolio ── */
.portfolio-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
.portfolio-card{
  position:relative;aspect-ratio:9/16;border-radius:var(--r-xl);overflow:hidden;
  background:#000;box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition:transform .3s var(--ease);will-change:transform;
}
.portfolio-card:hover{transform:translateY(-4px)}
.portfolio-card video{width:100%;height:100%;object-fit:cover;display:block}
.portfolio-badge{
  position:absolute;top:var(--s1);left:50%;transform:translateX(-50%);
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:4px var(--s1);border-radius:var(--r-sm);white-space:nowrap;z-index:2;
  background:rgba(0,0,0,.6);color:#fff;
}

/* ── Features ── */
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.feature-icon{
  width:42px;height:42px;border-radius:var(--r-lg);
  background:rgba(0,113,227,.08);border:1px solid rgba(0,113,227,.12);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--s2);
}
.feature-icon svg{width:20px;height:20px;stroke:var(--blue-brand);fill:none;stroke-width:1.8}
.feature-title{font-size:15px;font-weight:700;margin-bottom:var(--s1)}
.feature-desc{font-size:13px;line-height:1.55;text-wrap:pretty;max-width:65ch}

/* ── Comparison Tables ── */
.tables-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.table-card{
  border-radius:var(--r-xl);border:1px solid rgba(210,210,215,1);
  overflow:hidden;background:#fff;
}
.table-header{padding:var(--s3);border-bottom:1px solid rgba(210,210,215,.5)}
.table-header h3{font-size:18px;font-weight:700;margin-bottom:var(--s1)}
.table-header p{font-size:13px;line-height:1.5;text-wrap:pretty}
.table-cols{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;padding:var(--s1) var(--s3);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:rgba(0,0,0,.02);
}
.table-cols span:last-child{color:var(--blue-brand)}
.table-row{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;padding:var(--s2) var(--s3);
  border-bottom:1px solid rgba(210,210,215,.3);font-size:13px;align-items:center;
}
.table-row span:first-child{font-weight:600}
.val-no{color:var(--txt3)}
.val-yes{color:var(--blue-brand);font-weight:600}

/* ── Reviews ── */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:var(--s3)}
.review-card{display:flex;flex-direction:column;gap:var(--s2)}
.review-top{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.review-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.review-info{flex:1;min-width:0}
.review-name{font-size:14px;font-weight:700}
.review-name a{text-decoration:none;color:inherit}
.review-name a:hover{color:var(--blue-brand)}
.review-badge{font-size:11px;font-weight:600;color:var(--blue-brand)}
.review-stars{color:var(--gold);font-size:14px;margin-left:auto}
.review-quote{font-size:13px;line-height:1.6;text-wrap:pretty;max-width:65ch}

/* Featured Review */
.featured-review{
  padding:var(--s4);margin-bottom:var(--s3);border-radius:var(--r-xl);
  border:1px solid rgba(210,210,215,1);background:#fff;
}
.featured-top{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);flex-wrap:wrap}
.featured-avatar{
  width:48px;height:48px;border-radius:50%;background:var(--blue-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0;
}
.featured-info{flex:1;min-width:0}
.featured-info h4{font-size:16px;font-weight:700}
.featured-info p{font-size:12px;color:var(--txt3)}
.featured-badge{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:var(--s1) var(--s2);border-radius:var(--r-sm);
  background:rgba(0,113,227,.08);color:var(--blue-brand);
}
.featured-body p{font-size:14px;line-height:1.7;margin-bottom:var(--s2);text-wrap:pretty;max-width:65ch}

/* Mini Reviews */
.sub-title{font-size:18px;font-weight:700;text-align:center;margin-bottom:var(--s3)}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:var(--s3)}
.mini-card{display:flex;flex-direction:column;gap:var(--s2)}
.mini-top{display:flex;align-items:center;gap:var(--s2)}
.mini-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--blue-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;
}
.mini-name{font-size:13px;font-weight:700}
.mini-role{font-size:11px;color:var(--txt3)}
.mini-stars{color:var(--gold);font-size:12px;margin-left:auto}
.mini-quote{font-size:12px;line-height:1.55;text-wrap:pretty;max-width:65ch}
.mini-stack{display:flex;flex-direction:column;gap:var(--s2)}

/* ── Sticky CTA ── */
.sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:999;
  display:none;justify-content:center;padding:var(--s2);
  background:rgba(255,255,255,.95);border-top:1px solid rgba(210,210,215,.5);
}
.sticky-cta.on{display:flex}

/* ═══ LIGHT SECTION TEXT COLORS ═══ */
.bg-light .hero-title,.bg-light .section-title,.bg-light .hero-title em,
.bg-light .hero-title .line1,.bg-light .step-title,.bg-light .feature-title,
.bg-light .table-header h3,.bg-light .review-name,.bg-light .featured-info h4,
.bg-light .mini-name,.bg-light .sub-title,.bg-light .showcase-meta-name{color:#1d1d1f}
.bg-light .hero-title .line2,.bg-light .hero-sub,.bg-light .section-sub,
.bg-light .step-desc,.bg-light .feature-desc,.bg-light .table-header p,
.bg-light .review-quote,.bg-light .mini-quote,.bg-light .featured-body p,
.bg-light .showcase-meta-focus,.bg-light .step-item,.bg-light .stat-value,
.bg-light .table-row span:first-child{color:#424245}
.bg-light .stat-label,.bg-light .review-badge,.bg-light .featured-info p,
.bg-light .mini-role{color:#86868b}

/* ═══ DARK SECTION TEXT / CARD OVERRIDES ═══ */
.bg-navy .section-title,.bg-navy .section-label,.bg-navy .step-title,
.bg-navy .feature-title,.bg-navy .table-header h3,.bg-navy .review-name,
.bg-navy .review-quote,.bg-navy .review-quote strong,.bg-navy .featured-body p,
.bg-navy .featured-body strong,.bg-navy .featured-info h4,.bg-navy .mini-name,
.bg-navy .mini-quote,.bg-navy .mini-quote strong,.bg-navy .sub-title,
.bg-navy .showcase-meta-name,.bg-navy .stat-value,
.bg-dark .section-title,.bg-dark .section-label,.bg-dark .step-title,
.bg-dark .feature-title,.bg-dark .table-header h3,.bg-dark .review-name,
.bg-dark .review-quote,.bg-dark .review-quote strong,.bg-dark .featured-body p,
.bg-dark .featured-body strong,.bg-dark .featured-info h4,.bg-dark .mini-name,
.bg-dark .mini-quote,.bg-dark .mini-quote strong,.bg-dark .sub-title,
.bg-dark .showcase-meta-name,.bg-dark .stat-value{color:var(--txt)}
.bg-navy .hero-sub,.bg-navy .section-sub,.bg-navy .table-header p,
.bg-navy .val-no,.bg-navy .review-badge,.bg-navy .featured-info p,
.bg-navy .mini-role,.bg-navy .showcase-meta-focus,.bg-navy .step-item,
.bg-navy .step-desc,.bg-navy .feature-desc,.bg-navy .table-row span:first-child,
.bg-dark .hero-sub,.bg-dark .section-sub,.bg-dark .table-header p,
.bg-dark .val-no,.bg-dark .review-badge,.bg-dark .featured-info p,
.bg-dark .mini-role,.bg-dark .showcase-meta-focus,.bg-dark .step-item,
.bg-dark .step-desc,.bg-dark .feature-desc,.bg-dark .table-row span:first-child{color:var(--txt2)}
.bg-navy .section-label,.bg-dark .section-label{color:#2997ff}
.bg-navy .val-yes,.bg-dark .val-yes{color:#2997ff}
.bg-navy .table-cols span:last-child,.bg-dark .table-cols span:last-child{color:#2997ff}
.bg-navy .card,.bg-navy .table-card,.bg-dark .card,.bg-dark .table-card{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);
}
.bg-navy .card:hover,.bg-dark .card:hover{border-color:rgba(41,151,255,.25)}
.bg-navy .table-cols,.bg-dark .table-cols{background:rgba(255,255,255,.04)}
.bg-navy .table-row,.bg-dark .table-row{border-bottom-color:rgba(255,255,255,.06)}
.bg-navy .table-header,.bg-dark .table-header{border-bottom-color:rgba(255,255,255,.08)}
.bg-navy .step-number,.bg-dark .step-number{
  background:linear-gradient(135deg,#2997ff,var(--blue-brand));
  box-shadow:0 4px 16px rgba(41,151,255,.3);
}
.bg-navy .feature-icon,.bg-dark .feature-icon{
  background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.2);
}
.bg-navy .stat+.stat::before,.bg-dark .stat+.stat::before{background:rgba(255,255,255,.12)}
.bg-navy .review-card,.bg-navy .mini-card,.bg-navy .featured-review,
.bg-dark .review-card,.bg-dark .mini-card,.bg-dark .featured-review{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);
}
.bg-navy .review-stars,.bg-navy .mini-stars,
.bg-dark .review-stars,.bg-dark .mini-stars{color:var(--gold)}
.bg-navy .btn-ghost,.bg-dark .btn-ghost{color:#2997ff;border-color:rgba(41,151,255,.3)}
.bg-navy .btn-ghost:hover,.bg-dark .btn-ghost:hover{background:rgba(41,151,255,.1);border-color:rgba(41,151,255,.5)}
/* Dark creator rail */
.bg-navy .creator-rail-wrap,.bg-dark .creator-rail-wrap{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);
}
.bg-navy .creator-chip:hover,.bg-dark .creator-chip:hover{background:rgba(255,255,255,.06)}
.bg-navy .creator-chip.active,.bg-dark .creator-chip.active{background:rgba(41,151,255,.08)}
.bg-navy .creator-chip-avatar,.bg-dark .creator-chip-avatar{border-color:rgba(255,255,255,.12)}
.bg-navy .creator-chip:hover .creator-chip-avatar,.bg-dark .creator-chip:hover .creator-chip-avatar{border-color:rgba(41,151,255,.3)}
.bg-navy .creator-chip-handle,.bg-dark .creator-chip-handle{color:#a1a1a6}
.bg-navy .creator-chip.active .creator-chip-handle,.bg-dark .creator-chip.active .creator-chip-handle{color:#f5f5f7}
.bg-navy .creator-chip-subs,.bg-dark .creator-chip-subs{color:#86868b}
.bg-navy .creator-chip.active .creator-chip-subs,.bg-dark .creator-chip.active .creator-chip-subs{color:#2997ff}
.bg-navy .showcase-divider,.bg-dark .showcase-divider{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
.bg-navy .showcase-vcard,.bg-dark .showcase-vcard{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.2);
}
.bg-navy .showcase-vcard:hover,.bg-dark .showcase-vcard:hover{border-color:rgba(41,151,255,.25)}
.bg-navy .stars-row svg,.bg-dark .stars-row svg{fill:#2997ff}
/* Dark marquee */
.bg-navy .marquee::before,.bg-dark .marquee::before{background:linear-gradient(90deg,#0c1627,transparent)}
.bg-navy .marquee::after,.bg-dark .marquee::after{background:linear-gradient(270deg,#0c1627,transparent)}
.bg-navy .marquee-track img,.bg-dark .marquee-track img{mix-blend-mode:screen;opacity:.35}
.bg-navy .marquee-track img:hover,.bg-dark .marquee-track img:hover{opacity:.6}
/* Dark showcase cards */
.bg-navy .showcase-card,.bg-dark .showcase-card{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);
  box-shadow:0 1px 3px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.2);
}
.bg-navy .showcase-card.active,.bg-dark .showcase-card.active{border-color:rgba(41,151,255,.2);box-shadow:0 4px 16px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.25)}
.bg-navy .showcase-card.inactive::after,.bg-dark .showcase-card.inactive::after{background:rgba(0,0,0,.2)}
.bg-navy .showcase-top-label,.bg-dark .showcase-top-label{background:rgba(255,255,255,.06)}
.bg-navy .showcase-top-label-raw,.bg-dark .showcase-top-label-raw{color:#a1a1a6}
.bg-navy .showcase-top-label-edit,.bg-dark .showcase-top-label-edit{color:#2997ff}
.bg-navy .showcase-video,.bg-dark .showcase-video{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.06)}
.bg-navy .showcase-arrow,.bg-dark .showcase-arrow{color:#a1a1a6}
/* Dark portfolio */
.bg-navy .portfolio-card,.bg-dark .portfolio-card{box-shadow:0 2px 8px rgba(0,0,0,.5)}

/* ── Responsive ── */
@media(max-width:768px){
  .section{padding:var(--s6) 0}
  .section-title{font-size:clamp(22px,5vw,32px)}
  .hero-title{font-size:clamp(24px,6vw,36px)}
  .hero-logo{height:48px}
  .btn-hero{height:48px;padding:0 var(--s3);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}
  .tables-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 body{padding-bottom:70px}
}
@media(max-width:480px){
  .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)}
  .showcase-grid{max-width:300px}
}
@media(prefers-reduced-motion:reduce){}

  position:fixed;inset:0;z-index:99999;display:none;
  background:rgba(0,0,0,.92);
  flex-direction:column;
}
#cb-sg-overlay.open{display:flex}
#cb-sg-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:44px;flex-shrink:0;
  background:#111214;border-bottom:1px solid rgba(255,255,255,.1);
}
#cb-sg-topbar span{font:600 12px/1 -apple-system,sans-serif;color:#a1a1a6;letter-spacing:.02em}
#cb-sg-topbar strong{color:#f5f5f7}
#cb-sg-close{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:#a1a1a6;padding:5px 14px;border-radius:6px;cursor:pointer;
  font:600 12px/1 -apple-system,sans-serif;transition:all .1s;
}
#cb-sg-close:hover{background:rgba(255,255,255,.12);color:#f5f5f7}
#cb-sg-frame{flex:1;border:none;width:100%}
#cb-sg-hint{
  position:fixed;bottom:24px;right:24px;z-index:99998;
  background:#111214;border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:10px 16px;
  font:500 11px/1.4 -apple-system,sans-serif;color:#6e6e73;
  pointer-events:none;opacity:0;transition:opacity .2s;
  display:flex;align-items:center;gap:8px;
}
#cb-sg-hint.show{opacity:1}
#cb-sg-hint code{
  background:rgba(255,255,255,.06);padding:2px 6px;border-radius:4px;
  color:#a1a1a6;font:600 11px/1 monospace;
}


/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO (WEBSITE) COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
   Content Bug Design System v8.0 — Header
   Tokens: master style guide (style-guide repo)
   Theme: Marketing Light (white bg, dark text)
   ═══════════════════════════════════════════════════════════ */

.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(--txt) !important;font-family:var(--font) !important}

/* ── Header Shell ── */
.cb-header{
  position:fixed;top:0;left:0;right:0;
  width:100%;
  background:#fff;
  border-bottom:1px solid rgba(210,210,215,1);
  z-index:1000;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.cb-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--s4);
  height:64px;
}

/* ── Logo ── */
.cb-logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
  transition:opacity .25s var(--ease);
  will-change:transform;
}
.cb-logo:hover{opacity:.7}
.cb-logo img{
  height:26px;
  width:auto;
  display:block;
}

/* ── Desktop Nav ── */
.cb-nav{
  display:flex;
  align-items:center;
  gap:var(--s1);
}

.cb-nav-link{
  display:inline-flex;
  align-items:center;
  font-size:14px;
  font-weight:500;
  color:var(--txt2);
  text-decoration:none;
  padding:var(--s1) var(--s2);
  border-radius:var(--r-lg);
}
.cb-nav-link:hover{
  color:var(--txt);
}

/* ── CTA Button (nav variant) — uses --blue-brand for light-mode CTA ── */
.cb-nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 20px;
  margin-left:var(--s1);
  font-size:14px;
  font-weight:600;
  color:#fff;
  background:var(--blue-brand);
  text-decoration:none;
  border:none;
  border-radius:var(--r-lg);
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,113,227,.12);
  transition:transform 80ms var(--ease);
  will-change:transform;
}
.cb-nav-cta:hover{
  background:var(--blue-hover);
  transform:translateY(-1px);
}
.cb-nav-cta:active{
  transform:scale(.97);
  transition-duration:40ms;
}

/* ── Mobile Hamburger Toggle ── */
.cb-hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:44px;
  height:44px;
  padding:0;
  background:transparent;
  border:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cb-hamburger span{
  display:block;
  width:20px;
  height:2px;
  background:var(--txt);
  border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
  will-change:transform;
}
.cb-hamburger span:nth-child(1){margin-bottom:5px}
.cb-hamburger span:nth-child(3){margin-top:5px}

/* Hamburger -> X animation (transform + opacity only) */
.cb-hamburger.is-active span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.cb-hamburger.is-active span:nth-child(2){
  opacity:0;
}
.cb-hamburger.is-active span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* ── Mobile Dropdown Panel (GPU-composited: opacity + transform only) ── */
.cb-mobile-nav{
  display:none;
  flex-direction:column;
  width:100%;
  background:#fff;
  border-bottom:1px solid rgba(210,210,215,1);
  opacity:0;
  transform:translateY(-8px);
  visibility:hidden;
  pointer-events:none;
  transition:transform .2s var(--ease),opacity .2s var(--ease);
  will-change:transform;
}
.cb-mobile-nav.is-open{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
}
.cb-mobile-nav-inner{
  display:flex;
  flex-direction:column;
  max-width:1200px;
  margin:0 auto;
  padding:var(--s1) var(--s4) var(--s3);
  gap:var(--s1);
}
.cb-mobile-nav-link{
  display:flex;
  align-items:center;
  font-size:16px;
  font-weight:500;
  color:var(--txt2);
  text-decoration:none;
  padding:12px var(--s2);
  border-radius:var(--r-lg);
}
.cb-mobile-nav-link:hover{
  color:var(--txt);
  background:rgba(0,0,0,.03);
}
.cb-mobile-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  height:48px;
  margin-top:var(--s1);
  font-size:16px;
  font-weight:600;
  color:#fff;
  background:var(--blue-brand);
  text-decoration:none;
  border:none;
  border-radius:var(--r-lg);
  cursor:pointer;
  transition:transform 80ms var(--ease);
  will-change:transform;
}
.cb-mobile-cta:hover{
  background:var(--blue-hover);
  transform:translateY(-1px);
}
.cb-mobile-cta:active{
  transform:scale(.97);
  transition-duration:40ms;
}

/* ── Responsive: Mobile <= 768px ── */
@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}
}

/* ── Reduced Motion ── */
@media(prefers-reduced-motion:reduce){

}

   Content Bug Design System v8.0 — Footer (Dark)
   Tokens: master style guide (style-guide repo)
   Background: #0c1627 — even-section dark color
   ═══════════════════════════════════════════════════════ */

#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 Container ── */
.cb-footer{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  background:var(--ft-bg);
  padding:var(--s8) var(--s6) var(--s4);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  color:var(--ft-text);
}

/* Liquid glass bubble — subtle radial glow */
.cb-footer::before{
  content:'';
  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{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--s4);
  width:100%;
  margin-bottom:var(--s6);
}

/* ── Column Headings ── */
.cb-ft-heading{
  display:block;
  font-family:var(--font);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--ft-text);
  margin-bottom:var(--s2);
}

/* ── Link Columns ── */
.cb-ft-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cb-ft-nav a{
  font-size:14px;
  font-weight:400;
  text-decoration:none;
  color:var(--ft-text2);
  line-height:1.9;
}
.cb-ft-nav a:hover{
  color:var(--ft-link-hover);
}

/* ── Social Row ── */
.cb-ft-social{
  display:flex;
  gap:var(--s1);
}
.cb-ft-social a{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--ft-icon);
  text-decoration:none;
  transition:transform 80ms var(--ease),opacity .15s var(--ease);
  will-change:transform;
}
.cb-ft-social a:hover{
  color:var(--ft-icon-hover);
  background:rgba(41,151,255,.12);
  border-color:rgba(41,151,255,.25);
  transform:translateY(-2px);
}
.cb-ft-social a:active{
  transform:scale(.95);
  transition-duration:40ms;
}
.cb-ft-social svg{
  width:15px;
  height:15px;
}

/* ── Divider ── */
.cb-ft-divider{
  position:relative;
  z-index:1;
  width:100%;
  height:1px;
  background:var(--ft-divider);
  margin-bottom:var(--s3);
}

/* ── Bottom Bar (Legal + Copyright) ── */
.cb-ft-bottom{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--s2);
  width:100%;
}
.cb-ft-copyright{
  font-size:13px;
  color:var(--ft-text3);
}
.cb-ft-legal-links{
  display:flex;
  align-items:center;
  gap:var(--s1) var(--s2);
  flex-wrap:wrap;
}
.cb-ft-legal-links a{
  font-size:13px;
  color:var(--ft-text3);
  text-decoration:none;
}
.cb-ft-legal-links a:hover{
  color:var(--ft-link);
}
.cb-ft-legal-sep{
  font-size:13px;
  color:var(--ft-text3);
  opacity:.5;
}

/* ── Responsive: Tablet ── */
@media(max-width:900px){
  .cb-ft-grid{
    grid-template-columns:repeat(4, 1fr);
    gap:var(--s3);
  }
}

/* ── 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;
  }
}

/* ── Reduced Motion ── */
@media(prefers-reduced-motion:reduce){

}

/* ═══════════════════════════════════════════════════════════════
   ACCOUNT COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
/* ── Shell overrides (base from common.css) ── */
html, /* scoped body rule removed — was leaking globally */
.shell-head { animation: none }
.pg-title { margin-bottom: 4px; background: linear-gradient(135deg,#fff,var(--txt3)) }

/* ── Section overrides ── */
.section { transition: border-color 80ms }
.section:hover { border-color: rgba(41,151,255,.2); transform: none }
.sec-head svg { width: 20px; height: 20px; color: var(--blue) }
.sec-head h2  { font-size: 18px; font-weight: 600 }
.sec-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px }
.sec-count { font-size: 12px; color: var(--txt3); font-weight: 500 }
.sec-save  { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06) }

/* Profile header */
.profile-row { display: flex; align-items: center; gap: 20px }
.avatar      { width: 72px; height: 72px; border-radius: 50%; background: var(--purple); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #fff; box-shadow: var(--sh); flex-shrink: 0; overflow: hidden }
.avatar img  { width: 100%; height: 100%; object-fit: cover; border-radius: 50% }
.p-info h3   { font-size: 20px; font-weight: 600; margin-bottom: 4px }
.p-info p    { font-size: 13px; color: var(--txt2); margin-bottom: 6px }

.status-badge    { display: inline-flex; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-left: 6px }
.status-core     { background: rgba(41,151,255,.1);  color: var(--blue) }
.status-master   { background: rgba(191,90,242,.1);  color: var(--purple) }
.status-new      { background: rgba(126,203,161,.1); color: var(--green) }
.status-training { background: rgba(255,159,10,.1);  color: var(--orange) }

.avatar-edit { position: relative; cursor: pointer }
.avatar-edit .cam-btn { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; background: var(--blue); border: 2.5px solid var(--bg-el); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .2s var(--ease); z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.4); will-change: transform }
.avatar-edit:hover .cam-btn { transform: scale(1.15); background: var(--blue-hv) }
.avatar-edit .cam-btn svg { width: 12px; height: 12px; color: #fff }

/* Health hero */
.health-hero       { text-align: center; padding: 24px 20px; background: var(--glass); border: var(--glass-b); border-top-color: var(--glass-bt); border-radius: var(--r-xl); box-shadow: var(--sh); margin-bottom: 16px }
.health-hero-score { font-size: 52px; font-weight: 800; line-height: 1 }
.health-hero-grade { display: inline-block; padding: 4px 14px; border-radius: var(--radius-pill); font-size: 16px; font-weight: 800; color: #fff; margin-top: 6px }
.health-hero-label { font-size: 12px; color: var(--txt3); margin-top: 6px }

/* Stats grid */
.stats-grid     { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px }
.stat-card      { background: var(--glass); border: var(--glass-b); border-top-color: var(--glass-bt); border-radius: var(--r-xl); box-shadow: var(--sh); padding: 16px 18px; text-align: center }
.stat-card-val  { font-size: 24px; font-weight: 800; line-height: 1.2 }
.stat-card-label { font-size: 10px; font-weight: 600; color: var(--txt3); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px }

/* Project table */
.proj-table { width: 100%; border-collapse: collapse; background: var(--glass); border: var(--glass-b); border-top-color: var(--glass-bt); border-radius: var(--r-xl); box-shadow: var(--sh); overflow: hidden }
.proj-table th { padding: 10px 14px; font-size: 10px; font-weight: 600; color: var(--txt3); text-transform: uppercase; letter-spacing: .05em; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06) }
.proj-table td { padding: 10px 14px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.03) }
.proj-table tr:hover td { background: rgba(255,255,255,.02) }

/* Form */
.form-row        { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-bottom: 16px }
.form-row.single { grid-template-columns: 1fr }
.fg       { display: flex; flex-direction: column; gap: 6px }
.fg label { font-size: 11px; font-weight: 600; color: var(--txt2); text-transform: uppercase; letter-spacing: .5px }
.fg input, .fg select { padding: 12px 14px; background: rgba(10,14,28,.45); border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.12); border-radius: var(--r-md); color: var(--txt); font-size: 14px; font-family: inherit; outline: none; box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 .5px 0 rgba(255,255,255,.1); transition: border-color 80ms var(--ease) }
.fg input:focus, .fg select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(41,151,255,.1) }
.fg input::placeholder { color: var(--txt3) }

.color-row  { display: flex; gap: 14px; align-items: center; margin-top: 8px }
.color-item { display: flex; align-items: center; gap: 8px }
.color-item input[type=color] { width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer; background: none }
.color-item span { font-size: 11px; color: var(--txt3) }

/* Buttons */
.btn-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 32px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; background: var(--blue); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 16px rgba(41,151,255,.3); transition: transform .15s var(--ease-q); will-change: transform }
.btn-save:hover   { transform: translateY(-1px) }
.btn-save:active  { transform: scale(.96) }
.btn-save:disabled { opacity: .5; cursor: not-allowed; transform: none }

/* Toast override (centered pill, different from common glass toast) */
.toast { bottom: 32px; left: 50%; right: auto; transform: translateX(-50%) translateY(80px); padding: 12px 24px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; color: #fff; background: var(--green); border: none; border-top-color: transparent }
.toast.visible { transform: translateX(-50%) translateY(0) }
.toast.success { border-color: transparent; color: #fff }
.toast.error   { background: var(--red); border-color: transparent; color: #fff }

/* Role-view FAB */
.rv-fab   { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 100; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(10,14,28,.8); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--txt3); box-shadow: 0 4px 16px rgba(0,0,0,.4); transition: all .2s var(--ease) }
.rv-fab:hover { border-color: rgba(255,255,255,.2); color: var(--txt); transform: translateY(-50%) scale(1.1) }
.rv-panel { position: fixed; right: 12px; top: 50%; transform: translateY(-50%) scale(.9); transform-origin: right center; z-index: 101; background: rgba(10,14,28,.9); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px 0; box-shadow: 0 8px 32px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: all .15s var(--ease) }
.rv-panel.open { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1) }
.rv-label { font-size: 9px; color: var(--txt4); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; padding: 6px 14px 4px 10px; user-select: none }
.rv-btn   { border: none; background: transparent; color: var(--txt4); cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; font-size: 11px; font-weight: 600; font-family: var(--font); letter-spacing: .3px; text-transform: uppercase; transition: color .12s; white-space: nowrap; width: 100% }
.rv-btn:hover { color: var(--txt); background: rgba(255,255,255,.05) }
.rv-btn.active { color: var(--blue); background: rgba(41,151,255,.1) }
.rv-btn .rv-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0 }
.rv-btn .rv-dot.trial  { background: var(--orange) }
.rv-btn .rv-dot.client { background: var(--blue) }
.rv-btn .rv-dot.editor { background: var(--green) }
.rv-btn .rv-dot.admin  { background: var(--red) }
.rv-btn .rv-dot.owner  { background: var(--gold) }

@media (max-width: 700px) {
  .shell-head { padding: 16px 16px 0 }
  .shell-inner { padding: 16px 16px 60px }
  .stats-grid { grid-template-columns: repeat(2,1fr) }
  .po-tiers { grid-template-columns: 1fr }
  .profile-row { flex-direction: column; text-align: center }
  .proj-table { font-size: 11px }
  .proj-table th, .proj-table td { padding: 8px 10px }
  .rv-fab { top: auto; bottom: 90px; transform: translateY(0) }
  .rv-fab:hover { transform: scale(1.1) }
  .rv-panel { top: auto; bottom: 130px; transform: scale(.9); transform-origin: right bottom }
  .rv-panel.open { transform: scale(1) }
}
@media (max-width: 480px) {
  .pg-title { font-size: 26px }
  .stats-grid { grid-template-columns: 1fr }
}

@media(max-width:768px){
  html,body{overflow-x:hidden}
  .acc-wrap{padding:var(--s3) var(--s2)}
  .acc-sections{grid-template-columns:1fr}
  .acc-card{padding:var(--s3)}
  input,textarea,select{font-size:16px!important}
}
@media(max-width:480px){
  .acc-wrap{padding:var(--s2)}
}

/* ═══════════════════════════════════════════════════════════════
   BLUEPRINTS COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Shell overrides (base from common.css) ── */
.shell-head{text-align:center;padding:56px 40px 0;max-width:1100px;animation:none}
.shell-body{min-height:0;display:flex;flex-direction:column}
.shell-inner{max-width:1100px;padding:16px 40px 20px;flex:1;display:flex;flex-direction:column;min-height:0}
#qContainer{flex:1;display:flex;flex-direction:column;min-height:0}
.shell-inner .q-wrap.active{display:flex;flex-direction:column;flex:1;min-height:0}
.shell-foot{max-width:1100px;padding:12px 40px 24px}

.shell-head h1{font-size:clamp(30px,4.5vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1.05;margin-bottom:14px;color:var(--txt)}
.shell-head h1 .grad{background:linear-gradient(135deg,var(--blue),var(--blue-hv));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.shell-head p{font-size:22px;color:var(--txt2);margin-bottom:32px;font-weight:500}

/* Progress */
.prog{display:flex;gap:4px;margin:0 auto;padding:8px 16px;background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.15);border-radius:100px;max-width:fit-content;box-shadow:var(--sh)}
.prog-seg{width:28px;height:6px;background:rgba(255,255,255,.08);border-radius:3px;transition:opacity .2s var(--ease)}
.prog-seg.done{background:var(--blue)}.prog-seg.active{background:linear-gradient(90deg,var(--blue),var(--blue-hv));box-shadow:0 0 8px rgba(41,151,255,.3)}

/* Question */
.q-wrap{display:none;animation:fadeUp .3s var(--ease-q)}
.q-num{text-align:center;font-size:11px;color:var(--txt3);margin-bottom:8px;text-transform:uppercase;letter-spacing:3px;font-weight:600}
.q-title{font-size:40px;font-weight:700;text-align:center;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15;color:var(--txt)}
.q-sub{text-align:center;color:var(--txt2);font-size:18px;margin-bottom:28px;max-width:700px;margin-left:auto;margin-right:auto;line-height:1.5}

/* Live Preview */
.live-preview{display:flex;justify-content:center;align-items:center;min-height:80px;margin-bottom:20px;padding:20px;background:rgba(10,14,28,.52);border-radius:var(--r-2xl);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.16);box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 .5px 0 rgba(255,255,255,.12)}

/* Shared card styles */
.card-base{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.15);cursor:pointer;transition:transform .12s var(--ease-q);box-shadow:var(--sh);contain:layout paint;will-change:transform}
.card-base:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 .5px 0 rgba(255,255,255,.15)}
.card-base.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.1))}
.card-base:active{transform:scale(.96);transition-duration:.08s}

/* Options Grid */
.opts{display:grid;gap:14px}
.opts.c2{grid-template-columns:repeat(2,1fr)}.opts.c3{grid-template-columns:repeat(3,1fr)}.opts.c4{grid-template-columns:repeat(4,1fr)}
.opt-card{border-radius:var(--r-lg);padding:14px;text-align:center;position:relative;overflow:hidden}
.opt-prev{height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.4)}
.opt-prev video{width:100%;height:100%;object-fit:cover}
.opt-title{font-weight:600;font-size:13px;margin-bottom:2px;color:var(--txt)}
.opt-desc{font-size:11px;color:var(--txt3);line-height:1.3}

/* Format choice cards (Q2) */
.bp-fmt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:600px;margin:0 auto}
.bp-fmt{border-radius:var(--r-xl);padding:32px 24px;text-align:center;position:relative;overflow:hidden}
.bp-fmt:hover{transform:translateY(-4px)}
.bp-fmt.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.18),rgba(41,151,255,.08))}
.bp-fmt-icon{display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.bp-dev{background:var(--bg-sf);border:2px solid rgba(255,255,255,.12);border-radius:16px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.bp-dev::after{content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);border-radius:16px 16px 0 0;pointer-events:none}
.bp-dev.portrait{width:64px;height:110px}.bp-dev.landscape{width:140px;height:84px}
.bp-dev svg{width:28px;height:28px;opacity:.3}
.bp-fmt h3{font-weight:700;font-size:20px;margin-bottom:6px}
.bp-fmt .f-desc{font-size:13px;color:var(--txt3);line-height:1.4}
.bp-fmt .f-tag{display:inline-block;margin-top:10px;padding:5px 14px;background:rgba(255,255,255,.06);border-radius:100px;font-size:13px;font-weight:600;color:var(--txt2)}
.bp-fmt.selected .f-tag{background:rgba(41,151,255,.2);color:var(--blue)}

/* Ratio cards (Q8) */
.ratio-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;flex:1;min-height:0}
.ratio-card{border-radius:var(--r-xl);padding:36px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.ratio-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.4),inset 0 .5px 0 rgba(255,255,255,.15)}
.ratio-card.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.18),rgba(41,151,255,.08))}
.ratio-icon{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.08));border:2px solid rgba(41,151,255,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;transition:transform .3s var(--ease);will-change:transform}
.ratio-icon::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(41,151,255,.08);transition:transform .3s var(--ease);will-change:transform}
.ratio-card:hover .ratio-icon,.ratio-card.selected .ratio-icon{background:linear-gradient(135deg,var(--blue),var(--blue-dk));border-color:var(--blue);box-shadow:0 0 40px rgba(41,151,255,.4),0 0 80px rgba(41,151,255,.15)}
.ratio-card:hover .ratio-icon::after,.ratio-card.selected .ratio-icon::after{border-color:rgba(41,151,255,.4);inset:-14px;border-width:2px}
@keyframes r-orbit{0%{transform:rotate(0) scale(1)}25%{transform:rotate(90deg) scale(1.12)}50%{transform:rotate(180deg) scale(1)}75%{transform:rotate(270deg) scale(.92)}100%{transform:rotate(360deg) scale(1)}}
@keyframes r-radar{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.5}100%{transform:scale(1);opacity:1}}
@keyframes r-explode{0%{transform:scale(1) rotate(0)}20%{transform:scale(1.3) rotate(-10deg)}40%{transform:scale(.9) rotate(6deg)}55%{transform:scale(1.15) rotate(-4deg)}70%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes r-glow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes r-ring{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.ratio-icon svg{transition:transform .2s var(--ease);will-change:transform}
.ratio-card[data-value="Light"]:hover .ratio-icon svg,.ratio-card[data-value="Light"].selected .ratio-icon svg{animation:r-orbit 1.2s linear infinite}
.ratio-card[data-value="Medium"]:hover .ratio-icon svg,.ratio-card[data-value="Medium"].selected .ratio-icon svg{animation:r-radar .6s var(--ease) infinite}
.ratio-card[data-value="Heavy"]:hover .ratio-icon svg,.ratio-card[data-value="Heavy"].selected .ratio-icon svg{animation:r-explode 1s var(--ease) infinite}
.ratio-card:hover .ratio-icon,.ratio-card.selected .ratio-icon{animation:r-glow 2s var(--ease) infinite}
.ratio-card:hover .ratio-icon::after,.ratio-card.selected .ratio-icon::after{animation:r-ring 2s var(--ease) infinite}
.ratio-title{font-weight:700;font-size:28px;color:var(--txt);letter-spacing:-.01em}.ratio-desc{font-size:17px;color:var(--txt3);line-height:1.5}

/* Deadspace row (step 4) */
.hs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;flex:1;min-height:0}
.hs-card{border-radius:var(--r-xl);padding:36px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.hs-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.4),inset 0 .5px 0 rgba(255,255,255,.15)}
.hs-card.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.18),rgba(41,151,255,.08))}
.hs-icon{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.08));border:2px solid rgba(41,151,255,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;transition:transform .1s var(--ease);will-change:transform}
.hs-icon::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(41,151,255,.08);transition:transform .1s var(--ease);will-change:transform}
.hs-card:hover .hs-icon,.hs-card.selected .hs-icon{background:linear-gradient(135deg,var(--blue),var(--blue-dk));border-color:var(--blue);box-shadow:0 0 40px rgba(41,151,255,.4),0 0 80px rgba(41,151,255,.15)}
.hs-card:hover .hs-icon::after,.hs-card.selected .hs-icon::after{border-color:rgba(41,151,255,.4);inset:-14px;border-width:2px}
@keyframes hs-bolt{0%{transform:scale(1) rotate(0)}15%{transform:scale(1.25) rotate(-8deg)}30%{transform:scale(.95) rotate(4deg)}45%{transform:scale(1.15) rotate(-3deg)}60%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes hs-wave{0%{transform:translateX(0) scaleX(1)}20%{transform:translateX(3px) scaleX(1.1)}40%{transform:translateX(-3px) scaleX(.9)}60%{transform:translateX(2px) scaleX(1.05)}80%{transform:translateX(-1px)}100%{transform:translateX(0) scaleX(1)}}
@keyframes hs-breathe{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:1}}
@keyframes hs-glow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes hs-ring{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.hs-icon svg{transition:transform .2s var(--ease);will-change:transform}
.hs-card[data-value="Tight"]:hover .hs-icon svg,.hs-card[data-value="Tight"].selected .hs-icon svg{animation:hs-bolt .6s var(--ease) infinite}
.hs-card[data-value="Natural"]:hover .hs-icon svg,.hs-card[data-value="Natural"].selected .hs-icon svg{animation:hs-wave .7s var(--ease) infinite}
.hs-card[data-value="Raw"]:hover .hs-icon svg,.hs-card[data-value="Raw"].selected .hs-icon svg{animation:hs-breathe 2s var(--ease) infinite}
.hs-card:hover .hs-icon,.hs-card.selected .hs-icon{animation:hs-glow 2s var(--ease) infinite}
.hs-card:hover .hs-icon::after,.hs-card.selected .hs-icon::after{animation:hs-ring 2s var(--ease) infinite}
.hs-title{font-weight:700;font-size:28px;color:var(--txt);letter-spacing:-.01em}.hs-desc{font-size:17px;color:var(--txt3);line-height:1.5}

/* 9:16 B-Roll video cards */
.v9-grid{display:flex;gap:10px;flex:1;min-height:0;justify-content:center;padding:0 4px 8px}
.v9-grid::-webkit-scrollbar{height:0}
.v9-card{position:relative;flex:1 1 0%;min-width:0;height:100%;border-radius:var(--r-xl);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:transform .25s var(--ease);will-change:transform}
.v9-card:hover{transform:scale(1.04);border-color:rgba(255,255,255,.25);box-shadow:0 0 24px rgba(41,151,255,.2);z-index:2}
.v9-card.selected{border-color:var(--border-sel);box-shadow:0 0 28px rgba(41,151,255,.3)}
.v9-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v9-card .v9-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.15) 35%,transparent 55%);z-index:1}
.v9-card .v9-info{position:absolute;bottom:0;left:0;right:0;padding:10px;z-index:2}
.v9-card .v9-title{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v9-card .v9-desc{font-size:10px;color:rgba(255,255,255,.55);max-height:0;overflow:hidden;opacity:0;transition:max-height .3s var(--ease),opacity .3s var(--ease);margin-top:0}
.v9-card:hover .v9-desc{max-height:40px;opacity:1;margin-top:3px}
.v9-card .v9-check{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--blue);display:none;align-items:center;justify-content:center;z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.v9-card.selected .v9-check{display:flex}

/* Video Grid */
.vid-grid{display:flex;gap:12px;justify-content:center;flex:1;min-height:0;padding:0 4px 0;overflow:hidden}
.vid-grid::-webkit-scrollbar{height:0}
.vid-grid.c3{justify-content:center}
.vid-card{border-radius:var(--r-lg);overflow:hidden;position:relative;flex:1 1 0%;min-width:0;height:100%}
.vid-card.selected{border-color:var(--border-sel)}
.vid-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vid-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.7) 35%,rgba(0,0,0,.2) 70%,transparent 100%);z-index:1;pointer-events:none}
.vid-name{position:absolute;bottom:0;left:0;right:0;padding:12px 8px 14px;text-align:center;font-weight:700;font-size:13px;color:#fff;z-index:2;text-shadow:0 2px 6px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,.5)}
.vid-name div:last-child{font-weight:500;color:rgba(255,255,255,.85)}

/* Placement */
.place-grid{display:flex;gap:10px;width:100%;justify-content:center;max-width:900px;margin:0 auto;flex:1;min-height:0}
.place-card{border-radius:var(--r-lg);padding:12px 8px 10px;text-align:center;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;flex:1 1 0%;min-width:0}
.place-card:hover{transform:translateY(-4px)}
.place-icon{width:100%;aspect-ratio:9/16;max-height:180px;margin-bottom:8px;border-radius:10px;background:rgba(0,0,0,.4);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.16)}
.place-icon .frame{position:absolute;inset:0;border:2px solid rgba(41,151,255,.35);border-radius:var(--r-md)}
.place-icon.fullscreen .broll{position:absolute;inset:4px;background:var(--blue);border-radius:8px}
.place-icon.halfscreen .speaker,.place-icon.halfscreentweaked .speaker,.place-icon.pip .speaker{position:absolute;background:linear-gradient(135deg,var(--bg-sf),var(--bg-el));display:flex;align-items:center;justify-content:center}
.place-icon.halfscreen .speaker::after,.place-icon.halfscreentweaked .speaker::after,.place-icon.pip .speaker::after{content:'';background:rgba(255,255,255,.2);border-radius:50%}
.place-icon.halfscreen .speaker{left:4px;top:4px;bottom:4px;width:48%;border-radius:var(--r-sm)}
.place-icon.halfscreen .speaker::after{width:24px;height:24px}
.place-icon.halfscreen .broll,.place-icon.halfscreentweaked .broll{position:absolute;right:4px;top:4px;bottom:4px;background:var(--blue);border-radius:var(--r-sm)}
.place-icon.halfscreen .broll{width:48%}.place-icon.halfscreentweaked .broll{width:50%}
.place-icon.filmmatte .broll{position:absolute;inset:4px;background:var(--blue);border-radius:var(--r-sm)}
.place-icon.filmmatte .matte{position:absolute;left:4px;right:4px;height:20%;background:rgba(255,214,10,.4);border-radius:4px}
.place-icon.filmmatte .matte.top{top:4px;border-radius:var(--r-sm) var(--r-sm) 0 0}
.place-icon.filmmatte .matte.bottom{bottom:4px;border-radius:0 0 var(--r-sm) var(--r-sm)}
.place-icon.halfscreentweaked .speaker{left:4px;top:15%;bottom:15%;width:45%;border-radius:var(--r-sm);border:2px solid var(--gold)}
.place-icon.halfscreentweaked .speaker::after{width:24px;height:24px}
.place-icon.letterbox .broll{position:absolute;left:4px;right:4px;top:25%;bottom:25%;background:var(--blue);border-radius:4px}
.place-icon.letterbox .bar{position:absolute;left:4px;right:4px;height:22%;background:#000}
.place-icon.letterbox .bar.top{top:4px}.place-icon.letterbox .bar.bottom{bottom:4px}
.place-icon.pip .broll{position:absolute;inset:4px;background:var(--blue);border-radius:var(--r-sm)}
.place-icon.pip .speaker{right:10px;bottom:10px;width:35%;height:30%;border-radius:8px;border:2px solid rgba(255,255,255,.3);z-index:2}
.place-icon.pip .speaker::after{width:16px;height:16px}
.place-title{font-weight:700;font-size:12px;margin-bottom:2px;position:relative;z-index:1;color:var(--txt);white-space:nowrap}
.place-desc{font-size:10px;color:var(--txt3);position:relative;z-index:1;line-height:1.3}
.place-icon,.place-title,.place-desc{position:relative;z-index:1}

/* Caption styles */
.style-bold{color:#fff;font-weight:700}
.style-outline{color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000}
.style-glow{color:#fff;text-shadow:0 0 10px rgba(41,151,255,.8),0 0 20px rgba(41,151,255,.5),0 0 40px rgba(41,151,255,.3)}
.style-shadow{color:#fff;text-shadow:4px 4px 8px rgba(0,0,0,.9)}
.style-highlight span{background:var(--blue);color:#fff;padding:6px 14px;display:inline-block;border-radius:8px}
.style-boxed span{background:rgba(0,0,0,.85);color:#fff;padding:8px 16px;display:inline-block;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.18)}

/* Font scroll row */
.font-scroll{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;flex:1;min-height:0;align-items:stretch}
.font-scroll::-webkit-scrollbar{display:none}
.font-scroll .opt-card{min-width:120px;max-width:160px;flex-shrink:0;scroll-snap-align:start;justify-content:center;display:flex;flex-direction:column}

/* Font style previews — system font only, differentiated by weight/spacing/transform */
.font-montserrat{font-family:var(--font);font-weight:900;letter-spacing:-.02em}
.font-bebas{font-family:var(--font);font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.font-poppins{font-family:var(--font);font-weight:800;letter-spacing:.01em}
.font-system{font-family:var(--font);font-weight:700;text-transform:uppercase}
.font-oswald{font-family:var(--font);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-stretch:condensed}
.font-raleway{font-family:var(--font);font-weight:300;letter-spacing:.08em;text-transform:uppercase}
.font-roboto{font-family:var(--font);font-weight:700;letter-spacing:-.01em;font-stretch:condensed}
.font-anton{font-family:var(--font);font-weight:900;letter-spacing:.1em;text-transform:uppercase}

/* Animations */
@keyframes capFade{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes capPop{0%{transform:scale(.4);opacity:0}50%{transform:scale(1.08)}70%{transform:scale(.97)}100%{transform:scale(1);opacity:1}}
@keyframes capWord{0%,100%{opacity:.25;transform:translateY(0)}15%{opacity:1;transform:translateY(-2px)}30%{opacity:.25;transform:translateY(0)}}
@keyframes capType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.anim-none{opacity:1}
.anim-fade{animation:capFade 2s var(--ease-q) infinite alternate}
.anim-pop{animation:capPop .8s var(--ease-spring) infinite}
.anim-word-by-word .word{display:inline-block;animation:capWord 1.2s var(--ease-q) infinite}
.anim-word-by-word .word:nth-child(2){animation-delay:.25s}
.anim-word-by-word .word:nth-child(3){animation-delay:.5s}
.anim-word-by-word .word:nth-child(4){animation-delay:.75s}
.anim-typewriter{position:relative;display:inline-block;white-space:nowrap;animation:capType 1.2s steps(18) infinite alternate;margin:0 auto}
.anim-typewriter::after{content:'';position:absolute;right:0;top:0;bottom:0;width:3px;background:var(--blue);animation:blink .8s step-end infinite}

/* Animation choice grid (Q17) */
.anim-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;width:100%;flex:1;min-height:0;align-items:stretch}
.anim-grid .opt-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 14px;border-radius:var(--r-xl)}
.anim-grid .opt-prev{flex:1;width:100%;min-height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;border-radius:var(--r-md);overflow:hidden;background:rgba(0,0,0,.4)}
.anim-grid .opt-title{font-weight:700;font-size:17px;margin-bottom:4px;color:var(--txt)}
.anim-grid .opt-desc{font-size:13px;color:var(--txt3);line-height:1.4}

/* Text input */
.text-input{width:100%;max-width:100%;margin:0 auto;display:block;background:rgba(10,14,28,.45);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.14);border-radius:var(--r-lg);padding:26px 32px;font-size:20px;font-weight:500;color:var(--txt);outline:none;transition:border-color 80ms var(--ease);box-shadow:var(--sh);font-family:var(--font)}
.text-input:focus{border-color:var(--border-sel);box-shadow:0 0 0 3px rgba(41,151,255,.1)}
.text-input::placeholder{color:var(--txt3)}

/* Nav buttons */
.nav-btns{display:flex;justify-content:center;gap:16px}
/* ── Button overrides (base from common.css) ── */
.btn{padding:14px 44px;contain:layout paint}
.btn-back{border-color:rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.15)}
.btn-back:hover{transform:translateY(-2px)}
.btn-next{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.15),0 4px 16px rgba(41,151,255,.3);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.btn-next:hover{box-shadow:0 16px 48px rgba(41,151,255,.25)}
.btn-next:disabled{opacity:.4}

/* vid-grid now standardized at c3 for all videoChoice steps */

.sound-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;flex:1;min-height:0}
.sound-card{border-radius:var(--r-xl);padding:36px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;position:relative}
.sound-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.4),inset 0 .5px 0 rgba(255,255,255,.15)}
.sound-card.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.18),rgba(41,151,255,.08))}
.sound-level{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.08));border:2px solid rgba(41,151,255,.25);display:flex;align-items:flex-end;justify-content:center;gap:4px;flex-shrink:0;padding:20px 16px 24px;position:relative;transition:transform .3s var(--ease);will-change:transform}
.sound-level::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(41,151,255,.08);transition:transform .3s var(--ease);will-change:transform}
.sound-card:hover .sound-level,.sound-card.selected .sound-level{background:linear-gradient(135deg,var(--blue),var(--blue-dk));border-color:var(--blue);box-shadow:0 0 40px rgba(41,151,255,.4),0 0 80px rgba(41,151,255,.15)}
.sound-card:hover .sound-level::after,.sound-card.selected .sound-level::after{border-color:rgba(41,151,255,.4);inset:-14px}
@keyframes snd-glow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes snd-ring{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.sound-card:hover .sound-level,.sound-card.selected .sound-level{animation:snd-glow 2s var(--ease) infinite}
.sound-card:hover .sound-level::after,.sound-card.selected .sound-level::after{animation:snd-ring 2s var(--ease) infinite}
.sl-bar{width:5px;height:var(--sl-mx,20px);background:var(--blue);border-radius:3px;opacity:.35;animation:slBounce var(--sl-spd,.6s) var(--ease) infinite alternate;animation-delay:var(--sl-del,0s);transform-origin:bottom;will-change:transform}
@keyframes slBounce{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
.sound-card.selected .sl-bar{opacity:1}
.sound-card audio{display:none}

/* Music waveform cards */
.music-grid{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;flex:1;min-height:0;align-items:stretch}
.music-grid::-webkit-scrollbar{display:none}
.music-card{border-radius:var(--r-xl);padding:18px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-width:140px;max-width:160px;flex-shrink:0;scroll-snap-align:start}
.music-card:hover{transform:translateY(-4px)}
.music-card.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.15),rgba(41,151,255,.08))}
.music-wave{width:64px;height:36px;display:flex;align-items:flex-end;justify-content:center;gap:2px;flex-shrink:0;padding:4px;border-radius:8px;background:rgba(41,151,255,.08);border:1px solid rgba(41,151,255,.12)}
.mw-bar{width:3px;height:var(--mw-mx,16px);border-radius:1.5px;background:var(--blue);opacity:.4;animation:mwBounce var(--mw-spd,.7s) var(--ease) infinite alternate;animation-delay:var(--mw-del,0s);transform-origin:bottom;will-change:transform}
@keyframes mwBounce{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
.music-card.selected .mw-bar{opacity:1}
.music-card.selected .music-wave{background:rgba(41,151,255,.15);border-color:rgba(41,151,255,.25)}
.music-card audio{display:none}

/* Phone mockup (caption position/size) */
.phone-wrap{display:flex;justify-content:center;align-items:center;gap:40px;flex:1;min-height:0}
.phone-mock{width:240px;height:426px;border-radius:32px;border:3px solid rgba(255,255,255,.15);background:rgba(0,0,0,.85);position:relative;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.5),inset 0 0 60px rgba(41,151,255,.03);flex-shrink:0}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:60px;height:14px;background:#000;border-radius:0 0 10px 10px;z-index:3;border:1px solid rgba(255,255,255,.05);border-top:none}
.phone-screen{position:absolute;inset:3px;border-radius:23px;overflow:hidden;background:linear-gradient(180deg,rgba(10,14,28,.9),rgba(5,8,18,.95))}
.phone-speaker{position:absolute;bottom:35%;left:50%;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.phone-speaker::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.1)}
.phone-caption{position:absolute;left:12px;right:12px;text-align:center;font-weight:700;font-size:14px;color:#fff;padding:6px 10px;border-radius:6px;transition:transform .3s var(--ease-spring),opacity .3s var(--ease-spring);text-shadow:0 1px 4px rgba(0,0,0,.8);background:rgba(41,151,255,.2);border:1px solid rgba(41,151,255,.3)}
.phone-caption.pos-top{top:28px}.phone-caption.pos-center{top:50%;transform:translateY(-50%)}.phone-caption.pos-bottom{bottom:20px}
.phone-caption.size-xs{font-size:7px;padding:2px 4px}.phone-caption.size-small{font-size:9px;padding:3px 6px}.phone-caption.size-medium{font-size:14px}.phone-caption.size-large{font-size:18px;padding:8px 12px}.phone-caption.size-xl{font-size:22px;padding:10px 14px;letter-spacing:-.02em}

/* Size bubbles */
.size-bubbles{display:flex;gap:14px;justify-content:center;align-items:flex-end}
.size-bubble{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .15s var(--ease)}
.size-bubble:hover{transform:translateY(-3px)}
.sb-circle{border-radius:50%;background:rgba(10,14,28,.52);border:2px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--txt);transition:transform .2s var(--ease);box-shadow:var(--sh);will-change:transform}
.size-bubble.selected .sb-circle{border-color:var(--blue);background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;box-shadow:0 0 20px rgba(41,151,255,.3)}
.sb-range{font-size:10px;color:var(--txt3)}
.pos-btns{display:flex;flex-direction:column;gap:10px}
.pos-btn{padding:12px 28px;border-radius:100px;font-size:14px;font-weight:600;cursor:pointer;transition:transform 80ms var(--ease);background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.1);color:var(--txt2);text-align:left;will-change:transform}
.pos-btn:hover{border-color:rgba(255,255,255,.2);color:#fff}.pos-btn.selected{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;border-color:var(--blue)}

/* Summary celebration */
.sum-done{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;animation:fadeUp .4s var(--ease-q)}
.sum-check{width:90px;height:90px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:28px;box-shadow:0 0 40px rgba(126,203,161,.3);animation:checkPop .5s var(--ease-spring)}
@keyframes checkPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.sum-btns{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;justify-content:center}
.sum-btn{padding:14px 32px;border-radius:100px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s var(--ease-q);border:none;font-family:var(--font)}
.sum-btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;box-shadow:0 4px 16px rgba(41,151,255,.3)}
.sum-btn-primary:hover{transform:translateY(-2px)}.sum-btn-secondary{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.1);color:var(--txt2)}
.sum-btn-secondary:hover{border-color:rgba(255,255,255,.2);color:#fff;transform:translateY(-2px)}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
.confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99;overflow:hidden}
.confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;animation:confettiFall var(--dur,2s) var(--ease) forwards;animation-delay:var(--del,0s);top:-10px}

@media(max-width:768px){
  .shell-head{padding:16px 20px 0}.shell-inner{padding:14px 20px 16px}.shell-foot{padding:10px 20px 16px}
  .shell-head h1{font-size:34px}.q-title{font-size:26px}
  .opts.c4,.opts.c3{grid-template-columns:repeat(2,1fr)}
  .vid-grid{justify-content:flex-start}
  .place-grid{flex-wrap:wrap}.hs-grid{grid-template-columns:1fr}
  .v9-grid{justify-content:flex-start}
  .sum-bento{grid-template-columns:repeat(4,1fr);grid-template-rows:auto}.sound-opts{grid-template-columns:1fr}
}
@media(max-width:480px){
  .v9-grid{justify-content:flex-start}.phone-mock{width:180px;height:320px;border-radius:22px}
  .shell-head{padding:12px 14px 0}.shell-inner{padding:10px 14px 16px}.shell-foot{padding:8px 14px 12px}
  .shell-head h1{font-size:26px}.q-title{font-size:20px}
  .opts.c4,.opts.c3,.opts.c5{grid-template-columns:repeat(2,1fr)}
  .sum-bento{grid-template-columns:repeat(2,1fr)}
  input,textarea,select{font-size:16px!important}
}
/* Summary list */
.sum-wrap{width:100%;flex:1;display:flex;flex-direction:column;align-items:center;min-height:0;overflow-y:auto;padding:0 8px}
.sum-list{width:100%;max-width:480px;display:flex;flex-direction:column;gap:6px}
.sum-name{text-align:center;font-size:22px;font-weight:800;color:var(--txt);margin-bottom:8px;letter-spacing:-.02em}
.sum-name span{color:var(--blue)}
.sum-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-lg);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.sum-row:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.sum-row .sr-ico{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);background:rgba(41,151,255,.08)}
.sum-row .sr-ico svg{width:16px;height:16px;stroke:var(--blue)}
.sum-row .sr-body{flex:1;min-width:0}
.sum-row .sr-lbl{font-size:11px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;font-weight:600;line-height:1}
.sum-row .sr-val{font-size:14px;font-weight:700;color:var(--txt);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* === Landing / Library / Modal === */
/* Landing — 50/50 split choice */
#landingView{height:100%;display:flex;flex-direction:column;overflow:hidden}
.land-head{flex-shrink:0;text-align:center;padding:56px 40px 0;max-width:1100px;width:100%;margin:0 auto}
.land-head h1{font-size:80px;font-weight:700;letter-spacing:-.04em;line-height:1.05;margin-bottom:14px;color:var(--txt)}
.land-head p{font-size:22px;color:var(--txt2);margin-bottom:0}
.land-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 40px 40px}
.land-split{display:flex;gap:32px;max-width:900px;width:100%;align-items:stretch}
.land-half{flex:1;border-radius:var(--r-2xl);background:var(--glass);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.16);box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 32px;gap:20px;cursor:pointer;transition:transform .25s var(--ease);min-height:300px;will-change:transform}
.land-half:hover{transform:translateY(-6px);border-color:rgba(41,151,255,.4);box-shadow:var(--sh-glow)}
.land-half:active{transform:scale(.97);transition-duration:.08s}
.lh-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.land-half:first-child .lh-icon{background:linear-gradient(135deg,var(--blue),var(--blue-dk))}
.land-half:last-child .lh-icon{background:linear-gradient(135deg,var(--green),#0a84ff)}
.lh-title{font-size:24px;font-weight:700;color:var(--txt);text-align:center}
.lh-sub{font-size:14px;color:var(--txt3);text-align:center;line-height:1.5;max-width:240px}
/* Library view */
#libraryView{height:100%;display:none;flex-direction:column;overflow:hidden}
.lib-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:24px 40px 0;max-width:1440px;width:100%;margin:0 auto}
.lib-head h2{font-size:36px;font-weight:700;color:var(--txt);letter-spacing:-.02em}
.lib-back{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);cursor:pointer;color:var(--txt2);font-size:13px;font-weight:600;transition:opacity 80ms}
.lib-back:hover{background:rgba(255,255,255,.1);color:var(--txt)}
.lib-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:20px 40px 40px;max-width:1440px;width:100%;margin:0 auto}
.lib-body::-webkit-scrollbar{width:0}
.lib-section{}
.lib-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--txt3);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.lib-label svg{width:14px;height:14px;stroke:var(--txt3)}
.lib-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;padding:0 0 8px}
/* Blueprint card — iPhone pipeline style */
.bp-lib-card{aspect-ratio:9/16;border-radius:24px;overflow:visible;position:relative;cursor:pointer;transition:transform .1s var(--ease);contain:layout paint;backface-visibility:hidden;will-change:transform}
.bp-lib-card::before{content:'';position:absolute;inset:-4px;background:var(--glass);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.15);border-radius:28px;z-index:-1;box-shadow:var(--sh),inset 0 -1px 0 rgba(0,0,0,.5);transition:border-color .1s var(--ease)}
.bp-lib-card::after{content:'';position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06) 30%,rgba(255,255,255,.02) 60%,transparent);border-radius:24px 24px 0 0;pointer-events:none;z-index:10}
.bp-lib-card:hover{transform:translateY(-2px);z-index:50}
.bp-lib-card:hover::before{border-color:rgba(41,151,255,.35)}
.bp-lib-card:active{transform:scale(.96)}
.blc-bg{position:absolute;inset:0;border-radius:24px;overflow:hidden}
.blc-bg video{width:100%;height:100%;object-fit:cover;transition:opacity .35s;transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.blc-darken{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.55) 30%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.85));border-radius:24px;z-index:1;pointer-events:none}
.bp-lib-card:hover .blc-darken{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.02) 30%,rgba(0,0,0,.02) 70%,rgba(0,0,0,.5))}
/* Island notch — iPhone 17 Pro style */
.blc-island{position:absolute;top:6px;left:50%;transform:translateX(-50%);min-width:56px;height:20px;padding:0 10px;background:#000;border-radius:12px;z-index:15;display:flex;align-items:center;justify-content:center;gap:5px;box-shadow:inset 0 1px 2px rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.5)}
.blc-island-dot{width:5px;height:5px;background:#12121f;border-radius:50%}
.blc-island-lbl{font-size:8px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.5px}
/* Tier badge — top right, T1/T2/T3, hover shows full Tier word */
.blc-tier{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:6px;font-size:9px;font-weight:800;z-index:12;letter-spacing:.5px;-webkit-cursor:default;transition:padding .12s var(--ease),min-width .12s var(--ease);overflow:hidden;white-space:nowrap}
.blc-tier .tier-full{display:inline;max-width:0;opacity:0;transition:max-width .15s var(--ease),opacity .12s;overflow:hidden;vertical-align:baseline}
.blc-tier:hover .tier-full{max-width:30px;opacity:1}
.tier-3{background:rgba(191,90,242,.35);color:#e0b0ff;border:1px solid rgba(191,90,242,.5)}
.tier-2{background:rgba(41,151,255,.35);color:#a8d8ff;border:1px solid rgba(41,151,255,.5)}
.tier-1{background:rgba(255,255,255,.14);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.2)}
/* Card bottom info */
.blc-info{position:absolute;bottom:0;left:0;right:0;padding:12px 14px 14px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);border-radius:0 0 24px 24px;z-index:7}
.blc-name{font-size:11px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.blc-type{font-size:10px;color:rgba(255,255,255,.55);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-empty{padding:20px;text-align:center;color:var(--txt3);font-size:13px;background:rgba(255,255,255,.03);border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.06)}
.wiz-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt2);transition:opacity 80ms;z-index:5}
.wiz-close:hover{background:rgba(255,255,255,.1);color:var(--txt)}
.bp-modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:40px}
.bp-modal-inner{width:100%;max-width:1440px;max-height:90vh;overflow-y:auto;background:var(--bg-el);border-radius:var(--r-2xl);border:1px solid rgba(255,255,255,.1);box-shadow:0 32px 100px rgba(0,0,0,.6);padding:32px}
.bp-modal-inner::-webkit-scrollbar{width:0}
.bpm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.bpm-title{font-size:26px;font-weight:800;color:var(--txt);letter-spacing:-.02em}
.bpm-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt2);transition:opacity 80ms}
.bpm-close:hover{background:rgba(255,255,255,.1);color:var(--txt)}
.bpm-body{display:flex;gap:20px;align-items:stretch}
.bpm-col{flex:1;display:flex;flex-direction:column;gap:6px;justify-content:center}
.bpm-center{flex:0 0 280px;display:flex;align-items:center;justify-content:center}
.bpm-preview{width:100%;aspect-ratio:9/16;border-radius:var(--r-lg);background:rgba(0,0,0,.4);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.bpm-fields{display:none}
.bpm-field{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.bf-ico{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(41,151,255,.08)}
.bf-ico svg{width:14px;height:14px;stroke:var(--blue)}
.bf-body{flex:1;min-width:0}
.bf-lbl{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.bf-val{font-size:13px;font-weight:700;color:var(--txt);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bpm-actions{display:flex;gap:12px;margin-top:20px;justify-content:center}
/* ── Tier Breakdown Section ── */
.tier-section{margin-top:32px;padding:0 0 32px}
.tier-section-title{font-size:22px;font-weight:800;color:var(--txt);margin-bottom:6px;letter-spacing:-.02em}
.tier-section-sub{font-size:13px;color:var(--txt3);margin-bottom:20px}
.tier-cards{display:flex;flex-direction:column;gap:24px}
.tier-row{display:flex;gap:16px;align-items:stretch}
.tier-row .tier-card{flex:0 0 340px;max-width:340px}
.tier-presets{flex:1;display:flex;gap:12px;overflow-x:auto;padding:4px 0;min-width:0;align-items:stretch}
.tier-presets::-webkit-scrollbar{display:none}
.tier-presets .bp-lib-card{flex:0 0 160px;min-width:160px}
.tier-card{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.08);border-top-color:rgba(255,255,255,.14);border-radius:var(--r-xl);padding:24px 20px;position:relative;overflow:hidden;cursor:pointer;transition:transform .15s var(--ease);box-shadow:var(--sh);will-change:transform}
.tier-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r-xl) var(--r-xl) 0 0}
.tier-card.tc-1::after{background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.05))}
.tier-card.tc-2::after{background:linear-gradient(90deg,var(--blue),rgba(41,151,255,.3))}
.tier-card.tc-3::after{background:linear-gradient(90deg,var(--purple),rgba(191,90,242,.3))}
.tier-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.15);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.tier-card.active{border-color:var(--border-sel)}
.tc-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tc-badge{font-size:11px;font-weight:800;padding:4px 10px;border-radius:6px;letter-spacing:.5px}
.tc-1 .tc-badge{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.tc-2 .tc-badge{background:rgba(41,151,255,.2);color:#a8d8ff}
.tc-3 .tc-badge{background:rgba(191,90,242,.2);color:#e0b0ff}
.tc-name{font-size:16px;font-weight:700;color:var(--txt)}
.tc-desc{font-size:12px;color:var(--txt3);line-height:1.5;margin-bottom:16px}
.tc-includes{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.tc-includes li{font-size:11px;color:var(--txt2);display:flex;align-items:center;gap:7px}
.tc-includes li svg{width:12px;height:12px;flex-shrink:0;color:var(--green)}
.tc-turnaround{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);padding:10px 12px}
.tc-ta-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--txt3);margin-bottom:8px}
.tc-ta-grid{display:grid;grid-template-columns:auto 1fr 1fr;gap:4px 10px;font-size:11px}
.tc-ta-hdr{font-weight:700;color:var(--txt3);font-size:9px;text-transform:uppercase;letter-spacing:.5px}
.tc-ta-lbl{color:var(--txt3);font-weight:600}
.tc-ta-val{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums}
/* LF expanded turnaround detail */
.tc-lf-expand{max-height:0;overflow:hidden;transition:max-height .25s var(--ease);margin-top:0}
.tc-lf-expand.open{max-height:200px;margin-top:8px}
.tc-lf-rows{display:flex;flex-direction:column;gap:4px}
.tc-lf-row{display:flex;justify-content:space-between;font-size:10px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.tc-lf-row:last-child{border-bottom:none}
.tc-lf-dur{color:var(--txt3)}.tc-lf-time{color:var(--txt);font-weight:700}
.tc-lf-toggle{font-size:10px;color:var(--blue);cursor:pointer;margin-top:6px;display:inline-flex;align-items:center;gap:4px;font-weight:600}
.tc-lf-toggle:hover{color:var(--blue-hv)}
.tc-lf-toggle svg{width:10px;height:10px;transition:transform .15s var(--ease)}
.tc-lf-toggle.open svg{transform:rotate(180deg)}
@media(max-width:768px){.land-head{padding:16px 20px 0}.land-head h1{font-size:34px}.land-body{padding:0 20px 20px}.land-split{flex-direction:column;gap:16px}.land-half{min-height:180px;padding:28px 20px;gap:14px}.lh-icon{width:56px;height:56px}.lh-title{font-size:18px}.lib-head{padding:16px 20px 0}.lib-body{padding:12px 20px 20px}.bp-lib-card{flex:0 0 120px}.bp-modal{padding:16px}.bp-modal-inner{padding:20px}.bpm-body{flex-direction:column}.bpm-center{flex:none;width:200px;margin:0 auto}.tier-row{flex-direction:column}.tier-row .tier-card{max-width:100%;flex-basis:auto}.tier-presets{overflow-x:auto}.tc-ta-grid{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ═══════════════════════════════════════════════════════════════
   CHAT COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
/* ── Page-specific animations ── */
@keyframes sendPulse{0%{transform:scale(1)}50%{transform:scale(.88)}100%{transform:scale(1)}}
@keyframes emojiPop{from{opacity:0;transform:scale(.8) translate3d(0,8px,0)}to{opacity:1;transform:scale(1) translate3d(0,0,0)}}

/* ── LAYOUT ── */
.layout{display:flex;height:100vh;overflow:hidden}

/* ══════════════════════════════════════════════════════════
   CHANNEL SIDEBAR — Discord-style (unique component)
   ══════════════════════════════════════════════════════════ */
.ch-sidebar{width:240px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-el,#111);border-right:1px solid rgba(255,255,255,.06)}
.ch-sb-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.06)}
.ch-sb-title{font-size:14px;font-weight:700;color:var(--txt);letter-spacing:-.01em}
.ch-sb-new-dm{width:24px;height:24px;border-radius:8px;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;transition:background .08s,color .08s}
.ch-sb-new-dm:hover{background:rgba(255,255,255,.1);color:var(--txt)}
.ch-sb-new-dm svg{width:14px;height:14px}
.ch-sb-search-wrap{padding:8px 10px;flex-shrink:0}
.ch-sb-search{width:100%;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--txt);font-size:11px;font-family:var(--font);outline:none;transition:border-color .08s,box-shadow .08s}
.ch-sb-search::placeholder{color:var(--txt4)}
.ch-sb-search:focus{border-color:rgba(41,151,255,.4);box-shadow:0 0 0 3px rgba(41,151,255,.08)}
.ch-sb-body{flex:1;overflow-y:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}
.ch-sb-body::-webkit-scrollbar{width:4px}
.ch-sb-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* Category */
.ch-sb-cat{margin-bottom:4px}
.ch-sb-cat-hdr{display:flex;align-items:center;gap:4px;padding:6px 10px 4px;cursor:pointer;user-select:none}
.ch-sb-cat-hdr:hover .ch-sb-cat-name{color:var(--txt2)}
.ch-sb-chevron{width:10px;height:10px;color:var(--txt4);transition:transform .08s;will-change:transform;flex-shrink:0}
.ch-sb-cat.collapsed .ch-sb-chevron{transform:rotate(-90deg)}
.ch-sb-cat-name{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--txt4);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-sb-cat-count{font-size:9px;color:var(--txt4);font-weight:600;min-width:14px;text-align:right}
.ch-sb-cat.collapsed .ch-sb-cat-list{display:none}

/* Channel row */
.ch-sb-ch{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 14px;margin:1px 6px;border-radius:8px;cursor:pointer;transition:background .08s;position:relative}
.ch-sb-ch:hover{background:rgba(255,255,255,.05)}
.ch-sb-ch.active{background:rgba(41,151,255,.12)}
.ch-sb-ch.active .ch-sb-ch-name{color:var(--txt)}
.ch-sb-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;font-size:9px;font-weight:700;color:#fff}
.ch-sb-av.contact{background:linear-gradient(135deg,rgba(41,151,255,.3),rgba(41,151,255,.15));box-shadow:0 1px 4px rgba(0,0,0,.2)}
.ch-sb-av.group{background:rgba(255,255,255,.06);color:var(--txt3);font-size:14px;font-weight:700}
.ch-sb-av.team{background:linear-gradient(135deg,rgba(48,209,88,.2),rgba(48,209,88,.08));box-shadow:0 1px 4px rgba(0,0,0,.2)}
.ch-sb-av.dm{background:linear-gradient(135deg,rgba(191,90,242,.25),rgba(191,90,242,.1));box-shadow:0 1px 4px rgba(0,0,0,.2)}
.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-name{font-size:12px;font-weight:600;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.ch-sb-ch-sub{font-size:9px;color:var(--txt4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;margin-top:1px}
.ch-sb-badge{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red,#ff453a);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ch-sb-badge:empty{display:none}

/* DM separator */
.ch-sb-dm-sep{height:1px;background:rgba(255,255,255,.06);margin:8px 14px}

/* Sidebar loading */
.ch-sb-loading{display:flex;align-items:center;justify-content:center;padding:32px;color:var(--txt4)}

/* ══════════════════════════════════════════════════════════
   EVENT BANNER
   ══════════════════════════════════════════════════════════ */
.event-banner{max-height:120px;background:linear-gradient(135deg,rgba(41,151,255,.06),rgba(191,90,242,.04)),var(--bg-el,#111);border:1px solid rgba(255,255,255,.08);border-radius:14px;margin:12px 16px 0;overflow:hidden;flex-shrink:0;display:flex;align-items:center;gap:14px;padding:14px 16px;position:relative}
.event-banner::before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
.event-banner-logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,rgba(41,151,255,.15),rgba(191,90,242,.1));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.event-banner-logo img{width:22px;height:22px;opacity:.9}
.event-banner-text{flex:1;min-width:0}
.event-banner-title{font-size:13px;font-weight:700;color:var(--txt);letter-spacing:-.01em}
.event-banner-sub{font-size:10px;color:var(--txt3);margin-top:2px}
.event-banner-close{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:6px;border:none;background:rgba(255,255,255,.06);color:var(--txt4);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background .08s,color .08s}
.event-banner-close:hover{background:rgba(255,255,255,.12);color:var(--txt2)}

/* ══════════════════════════════════════════════════════════
   CHAT PANEL
   ══════════════════════════════════════════════════════════ */
.chat-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:rgba(10,10,12,.3)}

.chat-hdr{padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:12px;flex-shrink:0;width:100%;background:rgba(255,255,255,.02)}
.chat-hdr-icon{width:32px;height:32px;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;flex-shrink:0;box-shadow:0 2px 8px rgba(41,151,255,.15);overflow:hidden}
.chat-hdr-icon svg{width:16px;height:16px;color:var(--blue)}
.chat-hdr-info{flex:1;min-width:0}
.chat-hdr-title{font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-hdr-sub{font-size:10px;color:var(--txt3);margin-top:1px}
.chat-hdr-btn{width:28px;height:28px;border-radius:8px;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;transition:background-color .08s,color .08s}
.chat-hdr-btn:hover{color:var(--txt);background:rgba(255,255,255,.1)}
.chat-hdr-btn svg{width:14px;height:14px}
.chat-hdr-menu{display:none}

/* ── MESSAGES ── */
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;scroll-behavior:smooth;width:100%;contain:layout style;will-change:scroll-position}
.msgs::-webkit-scrollbar{width:4px}
.msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}

/* Date divider */
.date-div{display:flex;align-items:center;justify-content:center;padding:14px 0 10px}
.date-div span{font-size:10px;font-weight:600;color:var(--txt4);background:rgba(255,255,255,.04);padding:4px 12px;border-radius:100px;letter-spacing:.3px}

/* Thread-style messages */
.ch-msg{display:flex;gap:10px;margin-bottom:12px;animation:fadeUp .2s var(--ease-q) both}
.ch-msg.no-anim{animation:none!important}
.ch-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,rgba(41,151,255,.3),rgba(41,151,255,.15));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ch-avatar 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:baseline;gap:8px;margin-bottom:3px}
.ch-msg-name{font-size:11px;font-weight:700;color:var(--txt)}
.ch-msg-role{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:100px}
.ch-msg-time{font-size:9px;color:var(--txt4);opacity:.6}
.ch-msg-text{font-size:13px;color:var(--txt2);line-height:1.5;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:8px 12px;box-shadow:inset 0 .5px 0 rgba(255,255,255,.04)}
.ch-msg-text a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.ch-msg-text img.msg-img{max-width:100%;max-height:280px;border-radius:10px;margin-top:6px;cursor:pointer;display:block}

/* @mention in message */
.mention{color:var(--blue);font-weight:600;background:rgba(41,151,255,.12);padding:1px 4px;border-radius:4px}

/* Emoji-only messages */
.ch-msg-text.emoji-only{background:transparent!important;border:none!important;box-shadow:none!important;font-size:28px;line-height:1.2;padding:4px 2px}

/* ── EMPTY / LOADING ── */
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--txt4);padding:40px;animation:fadeUp .15s var(--ease)}
.chat-empty svg{width:44px;height:44px;opacity:.2}
.chat-empty .et{font-size:15px;font-weight:600;color:var(--txt3)}
.chat-empty .ed{font-size:12px;text-align:center;max-width:280px;line-height:1.5}

/* ── INPUT AREA ── */
.chat-input{flex-shrink:0;padding:10px 16px;border-top:1px solid rgba(255,255,255,.06);width:100%}
.chat-inp-row{display:flex;align-items:flex-end;gap:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:6px;transition:border-color .08s,box-shadow .08s;position:relative}
.chat-inp-row:focus-within{border-color:rgba(41,151,255,.45);box-shadow:0 0 0 3px rgba(41,151,255,.1)}
.ch-attach{width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);background:transparent;color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .08s,color .08s,border-color .08s}
.ch-attach:hover{background:rgba(255,255,255,.08);color:var(--txt);border-color:rgba(255,255,255,.25)}
.ch-attach svg{width:14px;height:14px}

/* Attach popup */
.ch-attach-popup{position:absolute;bottom:100%;left:0;margin-bottom:8px;display:none;flex-direction:column;gap:2px;padding:6px;background:rgba(10,14,28,.95);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:40;min-width:180px}
.ch-attach-popup.open{display:flex}
.ch-attach-opt{display:flex;align-items:center;gap:10px;padding:8px 12px;border:none;background:transparent;color:var(--txt2);font-size:12px;font-weight:500;font-family:var(--font);cursor:pointer;border-radius:8px;transition:background .08s,color .08s;white-space:nowrap}
.ch-attach-opt:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.ch-attach-opt svg{width:16px;height:16px;color:var(--txt3);flex-shrink:0}
.ch-attach-opt:hover svg{color:var(--blue)}

.chat-inp{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-size:13px;font-family:var(--font);padding:4px 4px;resize:none;min-height:20px;max-height:120px;line-height:1.4}
.chat-inp::placeholder{color:var(--txt4)}
.send-btn{width:28px;height:28px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--imsg,#0b84fe),var(--imsg-dk,#0066d6));color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(11,132,254,.3),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .08s,opacity .08s;opacity:.5}
.chat-inp-row:focus-within .send-btn,.send-btn.ready{opacity:1}
.send-btn:hover{transform:scale(1.08)}
.send-btn:active{animation:sendPulse .2s var(--ease)}
.send-btn:disabled{opacity:.25;cursor:default;transform:none}
.send-btn svg{width:12px;height:12px;transform:rotate(-45deg) translate(1px,-1px)}

/* ── @MENTION AUTOCOMPLETE ── */
.mention-popup{position:absolute;bottom:100%;left:0;right:40px;margin-bottom:6px;background:rgba(10,14,28,.95);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.6);max-height:200px;overflow-y:auto;display:none;z-index:50;animation:emojiPop .2s var(--ease) both;scrollbar-width:thin}
.mention-popup.visible{display:block}
.mention-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:background .08s}
.mention-item:first-child{border-radius:14px 14px 0 0}
.mention-item:last-child{border-radius:0 0 14px 14px}
.mention-item:only-child{border-radius:14px}
.mention-item:hover,.mention-item.active{background:rgba(41,151,255,.12)}
.mention-av{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--bg-sf);display:flex;align-items:center;justify-content:center}
.mention-av img{width:100%;height:100%;object-fit:cover}
.mention-av span{font-size:10px;font-weight:700;color:var(--txt3)}
.mention-name{font-size:13px;font-weight:600;flex:1}
.mention-role{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:100px}

/* ── EMOJI PICKER ── */
.emoji-picker{position:absolute;bottom:100%;left:0;margin-bottom:8px;background:rgba(10,14,28,.95);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.5);width:280px;max-height:280px;display:none;z-index:50;animation:emojiPop .2s var(--ease) both;overflow:hidden}
.emoji-picker.visible{display:flex;flex-direction:column}
.emoji-search{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.emoji-search input{width:100%;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--txt);font-size:12px;font-family:var(--font);outline:none}
.emoji-search input::placeholder{color:var(--txt4)}
.emoji-cats{display:flex;gap:2px;padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.emoji-cat{padding:4px 8px;border-radius:6px;font-size:14px;cursor:pointer;transition:background .08s;border:none;background:transparent}
.emoji-cat:hover,.emoji-cat.active{background:rgba(255,255,255,.08)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;overflow-y:auto;flex:1;scrollbar-width:thin}
.emoji-grid button{width:100%;aspect-ratio:1;border:none;background:transparent;font-size:22px;cursor:pointer;border-radius:8px;transition:background .08s,transform .08s;display:flex;align-items:center;justify-content:center;will-change:transform}
.emoji-grid button:hover{background:rgba(255,255,255,.08);transform:scale(1.15)}

/* ══════════════════════════════════════════════════════════
   PROJECT FORUM — right panel
   ══════════════════════════════════════════════════════════ */
.forum{width:380px;border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;background:rgba(10,14,28,.4)}
.forum-hdr{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:10px;flex-shrink:0;background:rgba(255,255,255,.02)}
.forum-hdr-icon{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,rgba(191,90,242,.2),rgba(191,90,242,.08));display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(191,90,242,.15)}
.forum-hdr-icon svg{width:16px;height:16px;color:var(--purple)}
.forum-hdr-title{font-size:14px;font-weight:700;flex:1}
.forum-count{font-size:11px;color:var(--txt3);font-weight:600}
.forum-feed{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:var(--txt4) transparent}
.forum-feed::-webkit-scrollbar{width:4px}
.forum-feed::-webkit-scrollbar-thumb{background:var(--txt4);border-radius:2px}

/* Project Card */
.pcard{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl,16px);padding:14px;cursor:pointer;transition:background-color .08s,border-color .08s,transform .08s;position:relative;overflow:hidden;box-shadow:var(--sh,0 2px 8px rgba(0,0,0,.12));will-change:transform}
.pcard::before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
.pcard:hover{border-color:rgba(255,255,255,.14);transform:translateY(-1px)}
.pcard:active{transform:scale(.99)}
.pcard-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pcard-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pcard-icon.queue{background:rgba(255,159,10,.1)}.pcard-icon.queue svg{color:var(--orange)}
.pcard-icon.editing{background:rgba(41,151,255,.1)}.pcard-icon.editing svg{color:var(--blue)}
.pcard-icon.review{background:rgba(191,90,242,.1)}.pcard-icon.review svg{color:var(--purple)}
.pcard-icon.approved{background:rgba(126,203,161,.1)}.pcard-icon.approved svg{color:var(--green)}
.pcard-icon.revisions{background:rgba(192,57,43,.1)}.pcard-icon.revisions svg{color:var(--red)}
.pcard-icon svg{width:18px;height:18px}
.pcard-info{flex:1;min-width:0}
.pcard-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-type{font-size:11px;color:var(--txt3);margin-top:1px}
.pcard-version{font-size:10px;font-weight:700;color:var(--blue);background:rgba(41,151,255,.1);padding:2px 7px;border-radius:6px;flex-shrink:0}
.pcard-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pcard-status{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:6px}
.pcard-status.queue{background:rgba(255,159,10,.12);color:var(--orange)}
.pcard-status.editing{background:rgba(41,151,255,.12);color:var(--blue)}
.pcard-status.review{background:rgba(191,90,242,.12);color:var(--purple)}
.pcard-status.approved{background:rgba(126,203,161,.12);color:var(--green)}
.pcard-status.revisions{background:rgba(192,57,43,.12);color:var(--red)}
.pcard-bp{font-size:10px;color:var(--txt4);font-style:italic;flex:1;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-date{font-size:10px;color:var(--txt4)}
.pcard-instructions{font-size:11px;color:var(--txt3);line-height:1.4;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Expanded Project Overlay ── */
.project-expand{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.85);display:none;opacity:0;transition:opacity .25s var(--ease)}
.project-expand.open{display:flex;opacity:1}
.pe-container{display:flex;width:100%;height:100%;animation:fadeUp .3s var(--ease) both}
.pe-video-side{flex:1;display:flex;flex-direction:column;padding:20px;min-width:0}
.pe-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-shrink:0}
.pe-back{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:var(--txt2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .08s,color .08s}
.pe-back:hover{background:rgba(255,255,255,.12);color:var(--txt)}
.pe-back svg{width:18px;height:18px}
.pe-title{font-size:18px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-version{font-size:11px;font-weight:700;color:var(--blue);background:rgba(41,151,255,.1);padding:3px 10px;border-radius:8px}
.pe-status-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;border-radius:8px}
.pe-player-wrap{flex:1;background:#000;border-radius:16px;overflow:hidden;position:relative;min-height:0}
.pe-player-wrap video{width:100%;height:100%;object-fit:contain}
.pe-no-video{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--txt4);font-size:13px;flex-direction:column;gap:8px}
.pe-no-video svg{width:48px;height:48px;opacity:.2}
.pe-thread{width:380px;border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;background:rgba(10,14,28,.75);flex-shrink:0;box-shadow:inset 1px 0 0 rgba(255,255,255,.04)}
.pe-th-hdr{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;background:rgba(255,255,255,.02)}
.pe-th-title{font-size:14px;font-weight:700}
.pe-th-sub{font-size:11px;color:var(--txt3);margin-top:2px}
.pe-th-body{flex:1;overflow-y:auto;padding:14px;scrollbar-width:thin;scrollbar-color:var(--txt4) transparent}
.pe-th-body::-webkit-scrollbar{width:4px}
.pe-th-body::-webkit-scrollbar-thumb{background:var(--txt4);border-radius:2px}
.th-msg{display:flex;gap:10px;margin-bottom:14px;animation:fadeUp .25s var(--ease-q) both}
.th-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.th-av.default{background:linear-gradient(135deg,rgba(41,151,255,.3),rgba(41,151,255,.15))}
.th-av.system{background:rgba(41,151,255,.12)}
.th-av.rev{background:linear-gradient(135deg,var(--orange),var(--red))}
.th-msg-bd{flex:1;min-width:0}
.th-msg-top{display:flex;align-items:baseline;gap:6px;margin-bottom:3px;flex-wrap:wrap}
.th-msg-nm{font-size:11px;font-weight:700;color:var(--txt)}
.th-msg-badge{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:1px 5px;border-radius:3px}
.th-msg-badge.status{color:var(--blue);background:rgba(41,151,255,.12)}
.th-msg-badge.revision{color:var(--orange);background:rgba(255,159,10,.12)}
.th-msg-badge.note{color:var(--green);background:rgba(126,203,161,.12)}
.th-msg-tm{font-size:9px;color:var(--txt4)}
.th-msg-txt{font-size:13px;color:var(--txt2);line-height:1.5;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:8px 12px;box-shadow:inset 0 .5px 0 rgba(255,255,255,.04)}
.th-msg-txt.rev{background:rgba(255,159,10,.06);border-left:3px solid var(--orange);border-radius:0 14px 14px 0}
.th-msg-txt.sys{background:rgba(41,151,255,.04);border-left:3px solid var(--blue);border-radius:0 14px 14px 0;color:var(--txt3)}
.th-msg-txt .ts-link{color:var(--blue);font-weight:600;font-family:var(--mono);font-size:11px;cursor:pointer}
.th-msg-txt .ts-link:hover{text-decoration:underline}
.th-empty{text-align:center;padding:40px 16px;color:var(--txt4);font-size:12px}
.th-empty svg{width:36px;height:36px;opacity:.2;margin-bottom:8px;display:block;margin-left:auto;margin-right:auto}
.forum-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--txt4);padding:20px}
.forum-empty svg{width:36px;height:36px;opacity:.2}
.forum-empty .fe-title{font-size:13px;font-weight:600;color:var(--txt3)}
.forum-empty .fe-desc{font-size:11px;text-align:center;line-height:1.4}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media(max-width:1100px){.forum{width:320px}}
@media(max-width:900px){.forum{width:280px}}
@media(max-width:800px){
  .ch-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-100%);transition:transform .2s var(--ease);will-change:transform}
  .ch-sidebar.open{transform:translateX(0)}
  .ch-sb-overlay{display:none;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5)}
  .ch-sb-overlay.open{display:block}
  .chat-hdr-menu{display:flex}
  .forum{display:none}
  .pe-thread{width:280px}
}
@media(max-width:600px){
  .pe-container{flex-direction:column}
  .pe-thread{width:100%;height:50%;border-left:none;border-top:1px solid rgba(255,255,255,.06)}
  .event-banner{display:none}
  .ch-sidebar.open{width:280px}
}
@media(max-width:480px){
  .pe-container{flex-direction:column;height:100%}
  .pe-main{flex:1;min-height:0}
  .forum,.pe-thread{display:none}
  .ch-msg{gap:8px}
  .ch-avatar{width:26px;height:26px;font-size:9px}
  .ch-msg-text{font-size:13px;padding:6px 10px}
  .chat-input{padding:6px 10px 10px}
  .chat-inp-row{padding:4px}
  .emoji-picker{position:fixed!important;bottom:0!important;left:0!important;right:0!important;top:auto!important;width:100%!important;max-width:none;border-radius:14px 14px 0 0;max-height:50vh}
  .mention-popup{position:fixed!important;bottom:60px!important;left:8px!important;right:8px!important;max-width:none;width:auto}
  .ch-attach-popup{position:fixed!important;bottom:60px!important;left:8px!important;right:8px!important;max-width:none;width:auto}
  input,textarea,select{font-size:16px!important}
}

@media(prefers-reduced-motion:reduce){
  .ch-sb-chevron{transition:none}
  .ch-sidebar{transition:none}
  .ch-msg,.th-msg,.pcard{animation:none!important}
  .emoji-grid button{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   MEETINGS COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
/* ── Components not in design-system.css ── */
/* scoped body rule removed */

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

/* ── Shell overrides for meetings layout ── */
.shell-head { padding: 20px 32px 0; max-width: none; animation: none }

/* ── Tab overrides (pill style for meetings) ── */
.sub-tabs { gap: 6px; margin-top: 16px; padding: 0; padding-bottom: 16px; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; box-shadow: none; width: auto }
.sub-tab { padding: 8px 20px; border-radius: var(--radius-pill); font-size: 13px; border: 1px solid rgba(255,255,255,.08); transition: color 80ms, border-color 80ms, background 80ms }
.sub-tab:hover { border-color: rgba(255,255,255,.14) }
.sub-tab.active { background: linear-gradient(135deg,var(--blue),var(--blue-dk)); color: #fff; border-color: var(--blue); box-shadow: none }

/* ── Tab panel override ── */
.tab-panel { padding: 20px 32px 80px }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(420px,1fr)); gap: 24px; padding-top: 4px }

/* ── Create meeting button ── */
.create-mtg {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; font-family: var(--font);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: var(--txt2); cursor: pointer;
  transition: background 80ms, border-color 80ms, color 80ms;
}
.create-mtg:hover { background: rgba(41,151,255,.08); border-color: rgba(41,151,255,.2); color: var(--blue) }
.create-mtg svg { width: 16px; height: 16px }

/* ── Meeting cards ── */
.mtg-card {
  position: relative; aspect-ratio: 16/9; border-radius: var(--r-2xl);
  overflow: hidden; cursor: pointer;
  background: linear-gradient(145deg,rgba(10,14,28,.85),rgba(15,20,38,.92) 40%,rgba(8,12,24,.95));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .25s var(--ease); will-change: transform;
}
.mtg-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 20% 80%,rgba(41,151,255,.08) 0%,transparent 60%),
              radial-gradient(ellipse at 80% 20%,rgba(191,90,242,.05) 0%,transparent 50%);
}
.mtg-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  box-shadow: 0 20px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(41,151,255,.15);
  opacity: 0; transition: opacity .25s var(--ease);
}
.mtg-card:hover { transform: translateY(-4px) scale(1.01) }
.mtg-card:hover::after { opacity: 1 }
.mtg-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 28px 32px }
.mtg-top { display: flex; align-items: flex-start; justify-content: space-between }
.mtg-logo { width: 42px; height: 42px; border-radius: var(--r-md); opacity: .7; transition: opacity .2s }
.mtg-card:hover .mtg-logo { opacity: .9 }
.mtg-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.mtg-badge.live  { background: rgba(192,57,43,.15);  color: var(--red);  border: 1px solid rgba(192,57,43,.25) }
.mtg-badge.sched { background: rgba(41,151,255,.1);   color: var(--blue); border: 1px solid rgba(41,151,255,.2) }
.mtg-badge.ended { background: rgba(110,110,115,.1);  color: var(--txt3); border: 1px solid rgba(255,255,255,.06) }
.mtg-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0 }
.mtg-badge.live  .mtg-dot { background: var(--red);  animation: pulse 1.5s ease infinite }
.mtg-badge.sched .mtg-dot { background: var(--blue) }
.mtg-badge.ended .mtg-dot { background: var(--txt4) }
.mtg-details { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 8px 0 }
.mtg-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--txt) }
.mtg-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--txt2) }
.mtg-meta-item { display: flex; align-items: center; gap: 5px }
.mtg-meta-item svg { width: 13px; height: 13px; opacity: .5 }
.mtg-bottom { display: flex; align-items: center; justify-content: space-between }
.mtg-people { display: flex; align-items: center; gap: 8px }
.mtg-av {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(10,14,28,.9);
  background: linear-gradient(135deg,var(--blue),var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.mtg-names { font-size: 12px; color: var(--txt2) }
.mtg-join {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; font-family: var(--font);
  cursor: pointer; text-decoration: none; border: none;
  transition: transform 80ms, box-shadow 80ms; will-change: transform;
}
.mtg-join.primary  { background: linear-gradient(135deg,var(--blue),var(--blue-dk)); color: #fff; box-shadow: 0 4px 16px rgba(41,151,255,.3) }
.mtg-join.primary:hover  { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(41,151,255,.45) }
.mtg-join.secondary { background: rgba(255,255,255,.06); color: var(--txt2); border: 1px solid rgba(255,255,255,.1) }
.mtg-join.secondary:hover { background: rgba(255,255,255,.1); color: var(--txt) }
.mtg-join svg { width: 16px; height: 16px }

/* ── Empty state ── */
.room-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 80px 20px; text-align: center }
.room-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center }
.room-empty-icon svg { width: 28px; height: 28px; color: var(--txt4) }
.room-empty h3 { font-size: 16px; font-weight: 600; color: var(--txt2) }
.room-empty p  { font-size: 13px; color: var(--txt3); max-width: 320px }

/* ── Whiteboard view ── */
.wb-view { position: fixed; inset: 0; z-index: 100; background: #0a0e1c; display: none; flex-direction: column; animation: fadeIn .25s var(--ease) }
.wb-view.active { display: flex }
.wb-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; flex-shrink: 0; z-index: 10; background: rgba(10,14,28,.95); border-bottom: 1px solid rgba(255,255,255,.06) }
.wb-back { display: flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; font-family: var(--font); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: var(--txt2); cursor: pointer; transition: background 80ms, color 80ms }
.wb-back:hover { background: rgba(255,255,255,.1); color: var(--txt) }
.wb-back svg { width: 16px; height: 16px }
.wb-info { display: flex; align-items: center; gap: 12px }
.wb-info-title { font-size: 14px; font-weight: 700 }
.wb-badge { padding: 4px 10px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase }
.wb-badge.live  { background: rgba(192,57,43,.15); color: var(--red) }
.wb-badge.sched { background: rgba(41,151,255,.1);  color: var(--blue) }
.wb-badge.ended { background: rgba(110,110,115,.1);  color: var(--txt3) }
.wb-controls { display: flex; align-items: center; gap: 10px }
.wb-share-btn { display: flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: var(--txt3); transition: background 80ms, border-color 80ms, color 80ms }
.wb-share-btn.shared { background: rgba(126,203,161,.08); border-color: rgba(126,203,161,.2); color: var(--green) }
.wb-share-btn svg { width: 14px; height: 14px }
.wb-join-btn { padding: 7px 18px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; background: linear-gradient(135deg,var(--blue),var(--blue-dk)); color: #fff; border: none; cursor: pointer; font-family: var(--font); text-decoration: none; display: inline-flex; align-items: center; transition: box-shadow 80ms }
.wb-join-btn:hover { box-shadow: 0 4px 16px rgba(41,151,255,.3) }

/* ── Canvas ── */
.wb-canvas-wrap { flex: 1; position: relative; overflow: hidden; cursor: grab }
.wb-canvas-wrap.grabbing { cursor: grabbing }
.wb-canvas { position: absolute; transform-origin: 0 0; will-change: transform }
.wb-canvas-wrap::before { content: ''; position: absolute; inset: -200%; width: 400%; height: 400%; background-image: radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 0 }

/* ── Toolbar ── */
.wb-toolbar { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 20px; background: rgba(28,28,30,.95); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 8px 32px rgba(0,0,0,.4) }
.wb-tool { width: 40px; height: 40px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: transparent; color: var(--txt3); transition: background 80ms, color 80ms }
.wb-tool:hover  { background: rgba(255,255,255,.08); color: var(--txt) }
.wb-tool.active { background: rgba(41,151,255,.15); color: var(--blue) }
.wb-tool svg { width: 20px; height: 20px }
.wb-tool-sep { width: 24px; height: 1px; background: rgba(255,255,255,.06); margin: 4px auto }

/* ── Stickies ── */
.wb-sticky { position: absolute; width: 220px; min-height: 140px; border-radius: 4px 4px 16px 16px; padding: 16px; cursor: move; user-select: none; display: flex; flex-direction: column; font-size: 13px; line-height: 1.5; box-shadow: 0 4px 20px rgba(0,0,0,.25); transition: box-shadow .15s }
.wb-sticky:hover { box-shadow: 0 8px 32px rgba(0,0,0,.35); z-index: 5 }
.wb-sticky.dragging { opacity: .85; transform: scale(1.03); z-index: 100; transition: none }
.wb-sticky-text { flex: 1; outline: none; color: rgba(0,0,0,.75); font-family: var(--font); font-size: 13px; line-height: 1.55; font-weight: 500; min-height: 60px; word-break: break-word }
.wb-sticky-text:empty::before { content: 'Type here...'; color: rgba(0,0,0,.3); pointer-events: none }
.wb-sticky-del { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s; font-size: 12px; color: rgba(0,0,0,.4) }
.wb-sticky:hover .wb-sticky-del { opacity: 1 }
.wb-sticky-del:hover { background: rgba(0,0,0,.2) }
.wb-sticky-fold { position: absolute; top: 0; right: 0; width: 20px; height: 20px; overflow: hidden }
.wb-sticky-fold::before { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent rgba(0,0,0,.06) transparent transparent }
.wb-sticky.yellow { background: linear-gradient(135deg,#fff9c4,#fff59d) }
.wb-sticky.pink   { background: linear-gradient(135deg,#fce4ec,#f8bbd0) }
.wb-sticky.blue   { background: linear-gradient(135deg,#e3f2fd,#bbdefb) }
.wb-sticky.green  { background: linear-gradient(135deg,#e8f5e9,#c8e6c9) }
.wb-sticky.purple { background: linear-gradient(135deg,#f3e5f5,#e1bee7) }
.wb-sticky.orange { background: linear-gradient(135deg,#fff3e0,#ffe0b2) }
.wb-colors { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; opacity: 0; transition: opacity .15s }
.wb-sticky:hover .wb-colors { opacity: 1 }
.wb-color-dot { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; border: 1.5px solid rgba(0,0,0,.1); transition: transform 80ms }
.wb-color-dot:hover { transform: scale(1.25) }

/* ── Media ── */
.wb-media { position: absolute; border-radius: var(--r-lg); overflow: hidden; cursor: move; background: #111; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 4px 24px rgba(0,0,0,.3); transition: box-shadow .15s }
.wb-media:hover { box-shadow: 0 8px 40px rgba(0,0,0,.4); z-index: 5 }
.wb-media.dragging { opacity: .85; z-index: 100; transition: none }
.wb-media img, .wb-media video { width: 100%; height: 100%; object-fit: cover; display: block }
.wb-media-del { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s; color: #fff; font-size: 14px }
.wb-media:hover .wb-media-del { opacity: 1 }
.wb-resize { position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize }
.wb-resize::before { content: ''; position: absolute; bottom: 3px; right: 3px; width: 8px; height: 8px; border-right: 2px solid rgba(255,255,255,.3); border-bottom: 2px solid rgba(255,255,255,.3) }

/* ── Drop zone ── */
.wb-drop-zone { position: absolute; inset: 0; z-index: 50; background: rgba(41,151,255,.05); border: 2px dashed rgba(41,151,255,.3); display: none; align-items: center; justify-content: center; pointer-events: none }
.wb-drop-zone.active { display: flex }
.wb-drop-label { padding: 16px 32px; border-radius: var(--r-xl); background: rgba(10,14,28,.95); border: 1px solid rgba(41,151,255,.2); font-size: 15px; font-weight: 600; color: var(--blue) }

/* ── Zoom ── */
.wb-zoom { position: absolute; bottom: 16px; right: 16px; z-index: 10; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(28,28,30,.92); border: 1px solid rgba(255,255,255,.06); font-size: 11px; color: var(--txt3); font-weight: 600 }
.wb-zoom button { width: 24px; height: 24px; border-radius: var(--r-sm); border: none; background: rgba(255,255,255,.06); color: var(--txt2); cursor: pointer; font-size: 14px; font-family: var(--font); display: flex; align-items: center; justify-content: center; transition: background 80ms, color 80ms }
.wb-zoom button:hover { background: rgba(255,255,255,.12); color: var(--txt) }

::-webkit-scrollbar { width: 6px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px }

@media (max-width: 768px) {
  .room-grid { grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 16px }
  .shell-head { padding: 16px 16px 0 }
  .tab-panel { padding: 16px 16px 80px }
  .mtg-inner { padding: 20px 22px }
  .mtg-title { font-size: 18px }
}
@media (max-width: 480px) {
  .room-grid { grid-template-columns: 1fr; gap: 12px }
  .mtg-card { aspect-ratio: 16/10 }
  .mtg-inner { padding: 16px 18px }
  .mtg-title { font-size: 16px }
  .mtg-meta { gap: 10px; font-size: 11px }
  .mtg-join { padding: 8px 18px; font-size: 12px }
  .sub-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap }
  .sub-tab { white-space: nowrap; flex-shrink: 0 }
  .wb-topbar { padding: 8px 12px; flex-wrap: wrap; gap: 8px }
  .wb-toolbar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; transform: none; flex-direction: row; border-radius: var(--r-2xl) var(--r-2xl) 0 0; justify-content: center; gap: 2px; padding: 6px 12px }
  .wb-tool { width: 36px; height: 36px }
  .wb-tool-sep { width: 1px; height: 24px; margin: 0 4px }
  .wb-zoom { bottom: auto; top: 8px; right: 8px }
  .wb-info-title { font-size: 12px }
  .wb-controls { gap: 6px }
  .wb-share-btn span { display: none }
  input, textarea, select { font-size: 16px !important }
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
/* ── Animations (page-specific) ── */
@keyframes fadeSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes checkPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

/* ── Shell overrides for onboarding (standalone, no sidebar) ── */
.shell-head{padding:40px 40px 0;max-width:none;width:auto;animation:none;text-align:center}
.shell-body{min-height:0}

/* ── Onboarding name & tags ── */
.ob-name{font-size:22px;font-weight:600;color:var(--txt);margin:6px 0 12px;letter-spacing:-.01em}
.ob-tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.ob-tag{display:inline-flex;align-items:center;padding:5px 14px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.ob-tag.role{background:rgba(41,151,255,.15);color:var(--blue);border:1px solid rgba(41,151,255,.25)}
.ob-tag.status{background:rgba(126,203,161,.12);color:var(--green);border:1px solid rgba(126,203,161,.2)}

/* ── Steps bar ── */
.steps{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:100px;box-shadow:var(--sh)}
.sd{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:100px;font-size:11px;font-weight:600;color:var(--txt4);transition:opacity .2s var(--ease);white-space:nowrap}
.sd .dn{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:rgba(255,255,255,.06);color:var(--txt4);transition:opacity .2s var(--ease);flex-shrink:0}
.sd.active{color:var(--txt);background:rgba(41,151,255,.12)}
.sd.active .dn{background:var(--blue);color:#fff;box-shadow:0 0 12px var(--blue-glow)}
.sd.done .dn{background:var(--green);color:#fff}
.sd.done{color:var(--txt2)}
.sc{width:10px;height:1px;background:rgba(255,255,255,.1);flex-shrink:0}
.sc.done{background:var(--green)}

/* ── Wizard steps ── */
.wstep{display:none;max-width:880px;width:100%;margin:0 auto;padding:24px 40px 80px;animation:fadeSlide .15s var(--ease)}
.wstep.active{display:block}
.slbl{text-align:center;font-size:13px;color:var(--txt3);text-transform:uppercase;letter-spacing:3px;font-weight:600;margin-bottom:12px}
.stitle{font-size:36px;font-weight:700;text-align:center;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15}
.sdesc{text-align:center;color:var(--txt2);font-size:17px;margin-bottom:36px;max-width:700px;margin-left:auto;margin-right:auto;line-height:1.5}

/* ── Submit button (green variant not in common.css) ── */
.btn-submit{background:linear-gradient(135deg,var(--green),var(--green-dk));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 16px rgba(126,203,161,.3);min-width:180px;padding:16px 42px}
.btn-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 24px rgba(126,203,161,.35)}

/* ── Form fields ── */
.fgroup{margin-bottom:20px}
.flbl{display:block;font-size:11px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px}
.finp{width:100%;background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.035) 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:16px 20px;font-size:16px;font-weight:500;color:var(--txt);font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;box-shadow:inset 0 1px 2px rgba(0,0,0,.25),inset 0 -1px 0 rgba(255,255,255,.04),0 1px 3px rgba(0,0,0,.15)}
.finp:focus{border-color:rgba(41,151,255,.5);box-shadow:inset 0 1px 2px rgba(0,0,0,.2),0 0 0 3px rgba(41,151,255,.12),0 0 16px rgba(41,151,255,.06)}
.finp::placeholder{color:var(--txt4)}
.finp.err{border-color:var(--red)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Card grid ── */
.opts{display:grid;gap:14px}
.opts.c2{grid-template-columns:repeat(2,1fr)}
.opts.c3{grid-template-columns:repeat(3,1fr)}
.ocard{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-lg);padding:24px;cursor:pointer;transition:transform .12s var(--ease-q),border-color .15s,box-shadow .15s;box-shadow:var(--sh);text-align:center}
.ocard:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 .5px 0 rgba(255,255,255,.15)}
.ocard.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.1));box-shadow:0 0 40px var(--blue-glow)}
.ocard .oicon{font-size:32px;margin-bottom:10px}
.ocard .olbl{font-size:15px;font-weight:600;color:var(--txt)}
.ocard .osub{font-size:12px;color:var(--txt3);margin-top:4px}

/* ── Niche chips ── */
.niche-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.niche-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:100px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);cursor:pointer;transition:transform .1s var(--ease-q),border-color .12s,background .12s;font-size:12.5px;font-weight:500;color:var(--txt2)}
.niche-chip:hover{border-color:rgba(255,255,255,.18);transform:translateY(-1px);color:var(--txt)}
.niche-chip.selected{border-color:var(--border-sel);background:rgba(41,151,255,.15);color:var(--blue)}
.niche-chip .nc-icon{font-size:14px}
#subnicheGrid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.sub-chip{padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);cursor:pointer;font-size:11.5px;font-weight:500;color:var(--txt3);transition:opacity .1s var(--ease)}
.sub-chip:hover{border-color:rgba(255,255,255,.14);color:var(--txt2)}
.sub-chip.selected{border-color:var(--green);background:rgba(126,203,161,.1);color:var(--green)}

/* ── Color picker (unique component) ── */
.color-row{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.color-swatch{position:relative;width:80px;text-align:center;cursor:pointer}
.color-swatch .cs-circle{width:72px;height:72px;border-radius:50%;border:3px solid rgba(255,255,255,.12);transition:border-color .2s,transform .15s var(--ease-q),box-shadow .2s;box-shadow:var(--sh);margin:0 auto}
.color-swatch:hover .cs-circle{transform:scale(1.08);border-color:rgba(255,255,255,.3)}
.color-swatch.active .cs-circle{border-color:var(--blue);box-shadow:0 0 20px var(--blue-glow)}
.color-swatch .cs-lbl{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-top:8px}
.color-swatch .cs-hex{font-size:11px;color:var(--txt2);font-family:var(--mono);margin-top:2px}
.cw-panel{display:none;max-width:320px;margin:0 auto;padding:20px;background:var(--glass);border:var(--glass-b);border-radius:var(--r-xl);box-shadow:0 12px 48px rgba(0,0,0,.6);-webkit-animation:fadeSlide .15s var(--ease)}
.cw-panel.open{display:block}
.cw-canvas-wrap{position:relative;width:260px;height:260px;margin:0 auto 16px}
.cw-ring{position:absolute;inset:0}
.cw-sv{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.cw-cursor-ring{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 4px rgba(0,0,0,.5);pointer-events:none;transform:translate(-50%,-50%)}
.cw-cursor-sv{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 4px rgba(0,0,0,.5);pointer-events:none;transform:translate(-50%,-50%)}
.cw-inputs{display:flex;gap:10px;align-items:center}
.cw-hex-input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);padding:8px 10px;color:var(--txt);font-family:var(--mono);font-size:14px;font-weight:600;text-align:center;outline:none;transition:border-color .15s}
.cw-hex-input:focus{border-color:var(--blue)}
.cw-preview{width:38px;height:38px;border-radius:var(--r-sm);border:2px solid rgba(255,255,255,.15);flex-shrink:0}
.cw-presets{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.cw-preset{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s,border-color .15s}
.cw-preset:hover{transform:scale(1.2);border-color:rgba(255,255,255,.3)}

/* ── Avatar picker ── */
.avatar-area{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px}
.avatar-preview{width:120px;height:120px;border-radius:50%;border:3px solid rgba(255,255,255,.12);overflow:hidden;cursor:pointer;transition:border-color .2s,transform .15s var(--ease-q);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);font-size:40px;color:var(--txt4)}
.avatar-preview:hover{border-color:rgba(255,255,255,.3);transform:scale(1.05)}
.avatar-preview.has-img{border-color:var(--green)}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.avatar-opts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.avatar-opt{padding:8px 18px;border-radius:100px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--txt3);transition:opacity 80ms;font-family:var(--font)}
.avatar-opt:hover{border-color:rgba(255,255,255,.2);color:var(--txt2)}
.avatar-opt.active{background:linear-gradient(180deg,rgba(41,151,255,.2),rgba(41,151,255,.1));border-color:var(--blue);color:var(--blue)}

/* ── Social preview card ── */
.social-card{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:12px 16px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-lg);transition:border-color .15s,box-shadow .15s;box-shadow:var(--sh)}
.social-card:focus-within{border-color:var(--border-sel);box-shadow:0 0 24px var(--blue-glow)}
.social-card .sc-icon{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.social-card .sc-icon svg{width:24px;height:24px}
.social-card .sc-body{flex:1;min-width:0}
.social-card .sc-platform{font-size:10px;font-weight:700;color:var(--txt4);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.social-card .sc-input{width:100%;background:transparent;border:none;outline:none;color:var(--txt);font-size:15px;font-weight:500;font-family:var(--font)}
.social-card .sc-input::placeholder{color:var(--txt4)}
.social-card .sc-link{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);color:var(--txt4);cursor:pointer;transition:opacity 80ms;flex-shrink:0;text-decoration:none;opacity:0;pointer-events:none}
.social-card .sc-link.visible{opacity:1;pointer-events:auto}
.social-card .sc-link:hover{background:rgba(41,151,255,.15);color:var(--blue)}

/* ── Upload zone ── */
.upload-zone{border:2px dashed rgba(255,255,255,.12);border-radius:var(--r-lg);padding:40px 24px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:rgba(255,255,255,.02)}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--blue);background:rgba(41,151,255,.06)}
.upload-zone .uz-icon{font-size:36px;margin-bottom:12px;opacity:.5}
.upload-zone .uz-text{font-size:14px;color:var(--txt2)}
.upload-zone .uz-hint{font-size:12px;color:var(--txt4);margin-top:6px}
.upload-zone.has-file{border-style:solid;border-color:var(--green)}
.upload-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Logo preview chips ── */
.logo-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;justify-content:center}
.logo-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:100px;padding:6px 14px 6px 6px;font-size:12px;color:var(--txt2)}
.logo-chip img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.logo-chip .lc-x{cursor:pointer;opacity:.5;margin-left:4px}
.logo-chip .lc-x:hover{opacity:1;color:var(--red)}

/* ── Signature pad ── */
.sig-wrap{background:var(--glass);border:var(--glass-b);border-radius:var(--r-lg);padding:4px;position:relative;box-shadow:var(--sh)}
.sig-wrap canvas{width:100%;border-radius:var(--r-md);cursor:crosshair;display:block}
.sig-clear{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:6px 14px;font-size:11px;font-weight:600;color:var(--txt3);cursor:pointer;transition:opacity 80ms}
.sig-clear:hover{background:rgba(255,255,255,.15);color:var(--txt)}
.sig-label{text-align:center;font-size:12px;color:var(--txt4);margin-top:8px}

/* ── Contract box ── */
.contract-box{background:var(--glass);border:var(--glass-b);border-radius:var(--r-lg);padding:24px;max-height:260px;overflow-y:auto;font-size:13px;color:var(--txt2);line-height:1.7;box-shadow:var(--sh);margin-bottom:20px}
.contract-box::-webkit-scrollbar{width:4px}
.contract-box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.contract-box h3{font-size:15px;color:var(--txt);margin-bottom:8px;font-weight:600}
.contract-box p{margin-bottom:12px}

/* ── Review summary ── */
.review-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);padding:32px;box-shadow:var(--sh);margin-bottom:20px}
.review-card h3{font-size:18px;font-weight:600;margin-bottom:16px;color:var(--txt);display:flex;align-items:center;gap:10px}
.review-card h3 span{font-size:22px}
.rv-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.rv-row:last-child{border-bottom:none}
.rv-lbl{font-size:13px;color:var(--txt3);font-weight:500}
.rv-val{font-size:14px;color:var(--txt);font-weight:600;text-align:right;max-width:60%;word-break:break-word}
.rv-val .color-dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;margin-right:4px;border:1px solid rgba(255,255,255,.15)}

/* ── Success screen ── */
.success-wrap{text-align:center;padding:60px 20px;animation:fadeSlide .3s var(--ease)}
.success-icon{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-dk));display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 28px;animation:checkPop .4s var(--ease-spring);box-shadow:0 12px 40px rgba(126,203,161,.35)}
.success-title{font-size:34px;font-weight:700;margin-bottom:12px;letter-spacing:-.02em}
.success-sub{font-size:17px;color:var(--txt2);max-width:500px;margin:0 auto;line-height:1.5}

/* ── Loading state ── */
.loading-wrap{display:flex;align-items:center;justify-content:center;height:100%;flex-direction:column;gap:16px}

/* ── Mobile ── */
@media(max-width:700px){
  .shell-head h1{font-size:32px}
  .shell-head>p{font-size:15px}
  .wstep{padding:20px 20px 60px}
  .stitle{font-size:26px}
  .sdesc{font-size:15px;margin-bottom:24px}
  .frow,.upload-row{grid-template-columns:1fr}
  .opts.c2,.opts.c3{grid-template-columns:1fr}
  .shell-foot{padding:10px 20px 16px}
  .btn{padding:14px 32px;font-size:15px}
  .color-swatch .cs-circle{width:56px;height:56px}
  .cw-panel{padding:14px}
  .cw-canvas-wrap{width:220px;height:220px}
  .shell-head{padding:24px 20px 0}
  .sd span.sn{display:none}
}
@media(max-width:480px){
  .shell-head h1{font-size:24px}
  .ob-name{font-size:18px}
  .ob-tag{font-size:11px;padding:4px 10px}
  .stitle{font-size:22px}
  .sdesc{font-size:14px}
  .frow{gap:8px}
  .fin input,.fin textarea,.fin select{font-size:14px;padding:10px 12px}
  .fin label{font-size:12px}
  .btn{padding:12px 24px;font-size:14px}
  .color-swatch .cs-circle{width:44px;height:44px}
  .cw-canvas-wrap{width:200px;height:200px}
  .payout-opts{flex-direction:column}
  .payout-opts button{padding:10px}
  .sig-canvas{height:120px}
  .upload-zone{padding:16px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

@media(max-width:768px){
  html,body{overflow-x:hidden}
  .ob-card{width:94vw;padding:var(--s3) var(--s2)}
  .form-row{grid-template-columns:1fr}
  .social-row{flex-direction:column}
  input,textarea,select{font-size:16px!important}
}
@media(max-width:480px){
  .ob-card{width:98vw;padding:var(--s2)}
  .hex-row{flex-wrap:wrap}
}

/* ═══════════════════════════════════════════════════════════════
   REQUEST COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
/* ── Page-specific: no design-system equivalent ── */
html,/* scoped body rule removed */
@keyframes fadeSlide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@keyframes checkPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes dotFade{0%,20%{opacity:0}30%,100%{opacity:1}}
@keyframes checkDraw{to{stroke-dashoffset:0}}

/* ── Shell overrides (page layout) ── */
.shell-head{padding:56px 40px 0;max-width:none;width:auto;animation:none;text-align:center}
.shell-head h1{font-family:var(--font-display);font-size:clamp(30px,4.5vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1.05;margin-bottom:14px}
.shell-head p{font-size:22px;color:var(--txt2);margin-bottom:32px;font-weight:500}
.shell-body{min-height:0}

/* ── Step indicator (unique component) ── */
.steps{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 16px;background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.08);border-top-color:rgba(255,255,255,.18);border-radius:var(--radius-pill);max-width:fit-content;margin:0 auto;box-shadow:var(--sh)}
.sd{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;color:var(--txt4);transition:opacity .2s var(--ease);white-space:nowrap}
.sd .dn{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:rgba(255,255,255,.06);color:var(--txt4);transition:opacity .2s var(--ease);flex-shrink:0}
.sd .dl{max-width:0;overflow:hidden;opacity:0;transition:max-width .2s var(--ease),opacity .15s}
.sd.active{color:var(--txt);background:rgba(41,151,255,.12)}
.sd.active .dn{background:var(--blue);color:#fff;box-shadow:0 0 12px var(--blue-glow)}
.sd.active .dl{max-width:80px;opacity:1}
.sd.done .dn{background:var(--green);color:#fff}
.sd.done{color:var(--txt3)}
.sc{width:10px;height:1px;background:rgba(255,255,255,.1);flex-shrink:0}
.sc.done{background:var(--green)}

/* ── Wizard steps (unique component) ── */
.wstep{display:none;max-width:880px;width:100%;margin:0 auto;padding:24px 40px 80px;animation:fadeSlide .15s var(--ease)}
.wstep.active{display:block}
.slbl{text-align:center;font-size:13px;color:var(--txt3);text-transform:uppercase;letter-spacing:3px;font-weight:600;margin-bottom:12px}
.stitle{font-family:var(--font-display);font-size:40px;font-weight:700;text-align:center;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15}
.sdesc{text-align:center;color:var(--txt2);font-size:18px;margin-bottom:36px;max-width:700px;margin-left:auto;margin-right:auto;line-height:1.5}
.req{display:inline-block;font-size:9px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:1px;margin-left:4px;vertical-align:middle}

/* ── Button overrides ── */
.btn{padding:16px 42px}
.btn-submit{background:linear-gradient(135deg,var(--green),var(--green-dk));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.15),0 4px 16px rgba(126,203,161,.3);min-width:180px;will-change:transform}
.btn-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.15),0 8px 24px rgba(126,203,161,.35)}
.btn-submit:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Selectable card base (unique interactive) ── */
.cb{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.14);cursor:pointer;transition:transform .12s var(--ease-q),border-color .15s,box-shadow .15s;box-shadow:var(--sh);will-change:transform}
.cb:hover{border-color:rgba(255,255,255,.15);transform:translateY(-2px);box-shadow:var(--sh-glow)}
.cb.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.1));box-shadow:0 0 40px var(--blue-glow)}
.cb:active{transform:scale(.96);transition-duration:.08s}

/* ── Format cards (unique component) ── */
.fmt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:680px;margin:0 auto}
.fmt{border-radius:var(--r-lg);padding:28px;text-align:center;position:relative;overflow:hidden}
.fmt-icon{width:100%;max-height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.dev-frame{background:rgba(22,22,24,1);border:2px solid rgba(255,255,255,.12);border-radius:16px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.dev-frame::after{content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);border-radius:16px 16px 0 0;pointer-events:none}
.dev-frame.portrait{width:56px;height:96px}
.dev-frame.landscape{width:130px;height:78px}
.dev-frame svg{width:28px;height:28px;opacity:.3}
.fmt h3{font-weight:700;font-size:18px;margin-bottom:6px}
.fmt .fdesc{font-size:12px;color:var(--txt3);line-height:1.4}
.fmt .ftag{display:inline-block;margin-top:10px;padding:5px 12px;background:rgba(255,255,255,.06);border-radius:var(--radius-pill);font-size:13px;font-weight:600;color:var(--txt2)}
.fmt.selected .ftag{background:rgba(41,151,255,.2);color:var(--blue)}

/* ── Upload / drop zone (unique component) ── */
.upload-area{width:100%;max-width:900px;margin:0 auto}
.drop-zone{background:rgba(10,14,28,.52);border:2px dashed rgba(255,255,255,.12);border-radius:var(--r-lg);padding:40px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;box-shadow:var(--sh)}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.1),rgba(41,151,255,.05))}
.drop-zone.hidden{display:none}
.drop-icon{width:56px;height:56px;background:var(--blue-glow);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.drop-icon svg{width:28px;height:28px;color:var(--blue)}
.drop-title{font-size:16px;font-weight:700;margin-bottom:6px}
.drop-sub{font-size:13px;color:var(--txt3);margin-bottom:14px}
.browse-btn{padding:12px 32px;background:var(--blue);border:none;border-radius:var(--radius-pill);color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font);box-shadow:0 8px 32px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,.3);transition:transform 80ms;will-change:transform}
.browse-btn:hover{transform:translateY(-1px)}
.browse-btn:active{transform:scale(.96)}

.drop-link-toggle{margin-top:14px;font-size:11px;color:var(--txt4);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:opacity 80ms}
.drop-link-toggle:hover{color:var(--txt3)}
.drop-link-toggle svg{width:12px;height:12px}
.drop-link-row{display:none;align-items:center;gap:6px;max-width:380px;margin:6px auto 0;animation:fadeUp .2s var(--ease)}
.drop-link-row.open{display:flex}
.drop-link-inp{flex:1;padding:7px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-sm);color:var(--txt);font-size:11px;font-family:var(--font);outline:none;transition:border-color .15s,box-shadow .15s}
.drop-link-inp:focus{border-color:var(--border-sel);box-shadow:0 0 0 2px rgba(41,151,255,.1)}
.drop-link-inp::placeholder{color:var(--txt4)}
.drop-link-add{padding:5px 12px;background:rgba(41,151,255,.12);border:1px solid rgba(41,151,255,.2);border-radius:var(--r-sm);color:var(--blue);font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:var(--font);transition:opacity 80ms}
.drop-link-add:hover{background:rgba(41,151,255,.22)}
.link-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;justify-content:center}
.link-chip{display:flex;align-items:center;gap:5px;padding:4px 8px;background:rgba(41,151,255,.08);border:1px solid rgba(41,151,255,.15);border-radius:var(--radius-pill);font-size:10px;font-weight:600;color:var(--blue);max-width:100%;overflow:hidden}
.link-chip-icon{width:12px;height:12px;flex-shrink:0}
.link-chip-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.link-chip-rm{width:12px;height:12px;cursor:pointer;opacity:.4;flex-shrink:0;transition:opacity .15s}
.link-chip-rm:hover{opacity:1}
.link-chips-alt{padding:0 16px 10px;justify-content:flex-start}

/* ── File cards (unique component) ── */
.file-cards{display:none;flex-direction:column;align-items:center;gap:16px;animation:fadeUp .3s var(--ease-q)}
.file-cards.visible{display:flex}
.file-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.fcard{position:relative;perspective:1200px;animation:fadeUp .2s var(--ease) backwards}
.fshell{position:relative;width:140px;border-radius:24px;transform-style:preserve-3d;transition:transform .25s var(--ease-spring);will-change:transform}
.fshell:hover{transform:rotateY(-5deg) rotateX(3deg) translateY(-6px)}
.fshell::before{content:'';position:absolute;inset:-3px;border-radius:28px;background:linear-gradient(145deg,#3a3a3c,#2c2c2e 15%,#1c1c1e 40%,#0e0e10 60%,#1c1c1e 80%,#3a3a3c);z-index:-1;box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.1)}
.fscreen{position:relative;width:140px;aspect-ratio:9/19.5;background:#000;border-radius:24px;overflow:hidden;z-index:1}
.fscreen::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03) 30%,transparent);pointer-events:none;z-index:10;border-radius:28px 28px 0 0}
.fnotch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:60px;height:18px;background:#000;border-radius:20px;z-index:15;box-shadow:0 0 0 2px rgba(30,30,30,.8)}
.fscreen video{width:100%;height:100%;object-fit:cover}
.fstats{position:absolute;bottom:0;left:0;right:0;padding:16px 14px 20px;background:linear-gradient(transparent,rgba(0,0,0,.85) 40%,rgba(0,0,0,.95));z-index:12}
.fstats .fname{font-size:12px;font-weight:700;color:#fff;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fstats .fpills{display:flex;gap:6px;flex-wrap:wrap}
.fpill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(255,255,255,.15);border-radius:var(--radius-pill);font-size:10px;font-weight:600;color:rgba(255,255,255,.8)}
.fremove{position:absolute;top:-8px;right:-8px;width:28px;height:28px;background:var(--red);border:2px solid var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;transition:transform .15s;box-shadow:0 4px 12px rgba(192,57,43,.4);will-change:transform}
.fremove:hover{transform:scale(1.15)}
.fremove svg{width:12px;height:12px;color:#fff}
.add-card{width:200px;aspect-ratio:9/19.5;border-radius:28px;border:2px dashed rgba(255,255,255,.12);background:rgba(10,14,28,.52);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:transform .25s,border-color .25s;box-shadow:var(--sh);will-change:transform}
.add-card:hover{border-color:rgba(255,255,255,.15);background:linear-gradient(135deg,rgba(41,151,255,.1),rgba(41,151,255,.05));transform:translateY(-2px)}
.add-card svg{width:32px;height:32px;color:var(--txt3)}
.add-card span{font-size:13px;font-weight:600;color:var(--txt3)}
.files-sum{display:flex;align-items:center;gap:12px;padding:10px 20px;background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.12);border-radius:var(--radius-pill);box-shadow:var(--sh)}
.files-sum .cnt{width:28px;height:28px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
.files-sum span{font-size:14px;font-weight:600;color:var(--txt2)}

/* ── Blueprint row (unique component) ── */
.bp-select-row{display:flex;gap:16px;align-items:flex-end;justify-content:center;flex-wrap:wrap;padding:12px 2px;overflow:visible}
.bp-lib-trigger{flex-shrink:0;width:130px;border-radius:20px;border:2px dashed var(--blue);background:rgba(41,151,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform 80ms var(--ease-q),background 80ms,border-color 80ms;padding:16px 10px;text-align:center;will-change:transform}
.bp-lib-trigger:hover{transform:translateY(-3px);background:rgba(41,151,255,.12);border-color:var(--blue-hv)}
.bp-lib-trigger svg{width:28px;height:28px;color:var(--blue);opacity:.8}
.bp-lib-trigger span{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.3px;line-height:1.3}

.bp-phone{position:relative;flex-shrink:0;cursor:pointer}
.bp-phone-shell{width:120px;border-radius:20px;transform-style:preserve-3d;transition:transform .1s var(--ease-spring);will-change:transform}
.bp-phone:hover .bp-phone-shell{transform:translateY(-4px)}
.bp-phone-shell::before{content:'';position:absolute;inset:-2px;border-radius:22px;background:linear-gradient(145deg,#3a3a3c,#1c1c1e 50%,#3a3a3c);z-index:-1;box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.bp-phone.selected .bp-phone-shell::before{background:linear-gradient(145deg,var(--blue),rgba(41,151,255,.4) 50%,var(--blue));box-shadow:0 16px 40px rgba(41,151,255,.3),0 0 0 1px var(--blue)}
.bp-phone-screen{position:relative;width:120px;aspect-ratio:9/16;background:#000;border-radius:20px;overflow:hidden;z-index:1}
.bp-phone-screen video{width:100%;height:100%;object-fit:cover}
.bp-phone-screen .bp-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(10,14,28,.8);font-size:32px}
.bp-phone-screen .bp-placeholder span{font-size:10px;color:var(--txt3);font-weight:600}
.bp-phone-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:40px;height:12px;background:#000;border-radius:12px;z-index:15;box-shadow:0 0 0 1.5px rgba(30,30,30,.8)}
.bp-phone-info{position:absolute;bottom:0;left:0;right:0;padding:28px 10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.9) 50%);z-index:12;text-align:center}
.bp-phone-name{font-size:10px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.bp-check{position:absolute;top:-6px;right:-6px;width:22px;height:22px;background:var(--green);border:2px solid #000;border-radius:50%;display:none;align-items:center;justify-content:center;z-index:20;box-shadow:0 4px 12px rgba(126,203,161,.4)}
.bp-phone.selected .bp-check{display:flex}
.bp-check svg{width:14px;height:14px;color:#fff}

/* ── Blueprint library modal (unique component) ── */
.bp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9000;display:none;align-items:center;justify-content:center;padding:24px;animation:fadeUp .25s var(--ease)}
.bp-modal-overlay.open{display:flex}
.bp-modal{background:#1a1a1c;border:1px solid rgba(255,255,255,.1);border-radius:20px;width:100%;max-width:860px;max-height:85vh;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column}
.bp-modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.06)}
.bp-modal-head h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
.bp-modal-close{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);border:none;color:var(--txt2);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity 80ms}
.bp-modal-close:hover{background:rgba(255,255,255,.12);color:#fff}
.bp-modal-body{flex:1;overflow-y:auto;padding:24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.bp-modal-body::-webkit-scrollbar{width:4px}
.bp-modal-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.bp-modal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bp-modal-foot{display:flex;justify-content:center;gap:14px;padding:16px 24px;border-top:1px solid rgba(255,255,255,.06);background:rgba(10,14,28,.6)}
.bp-modal-foot .btn{padding:12px 32px;font-size:14px}

.bp-lib-card{border-radius:16px;overflow:hidden;cursor:pointer;transition:transform 80ms var(--ease-q),border-color 80ms,box-shadow 80ms;border:1px solid rgba(255,255,255,.08);background:rgba(10,14,28,.6);will-change:transform}
.bp-lib-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.15);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.bp-lib-card.selected{border-color:var(--blue);box-shadow:0 0 30px var(--blue-glow)}
.bp-lib-card-preview{position:relative;width:100%;aspect-ratio:9/16;background:#000;overflow:hidden}
.bp-lib-card-preview video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .1s}
.bp-lib-card:hover .bp-lib-card-preview video,.bp-lib-card.selected .bp-lib-card-preview video{opacity:1}
.bp-lib-card-preview .bp-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;background:rgba(10,14,28,.8)}
.bp-lib-card-info{padding:12px;background:linear-gradient(180deg,rgba(30,30,34,.95),rgba(22,22,23,1))}
.bp-lib-card-name{font-size:13px;font-weight:700;color:var(--txt);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-lib-card-creator{font-size:11px;color:var(--txt3);margin-bottom:6px}
.bp-lib-card-tier{display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);font-size:9px;font-weight:700;letter-spacing:.5px}
.bp-lib-card-tier.t3{background:rgba(191,90,242,.15);color:#bf5af2}
.bp-lib-card-tier.t2{background:rgba(41,151,255,.15);color:#2997ff}
.bp-lib-card-tier.t1{background:rgba(126,203,161,.15);color:#7ecba1}
.bp-lib-card-check{position:absolute;top:8px;right:8px;width:24px;height:24px;background:var(--green);border:2px solid rgba(0,0,0,.5);border-radius:50%;display:none;align-items:center;justify-content:center;z-index:5;box-shadow:0 2px 8px rgba(126,203,161,.4)}
.bp-lib-card.selected .bp-lib-card-check{display:flex}

/* ── Form (uses design-system tokens) ── */
.fg{margin-bottom:24px}
.fg-compact{margin-bottom:16px}
.flbl{display:block;font-size:12px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:3px;margin-bottom:10px}
.finp{width:100%;background:rgba(10,14,28,.45);border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.12);border-radius:var(--r-md);padding:18px 24px;font-size:17px;font-weight:500;color:var(--txt);font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;box-shadow:var(--sh)}
.finp:focus{border-color:var(--border-sel);box-shadow:0 0 40px var(--blue-glow)}
.finp::placeholder{color:var(--txt3)}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:580px;margin:0 auto}
.details-full{grid-column:1 / -1}

/* ── Badges (unique selectable pills) ── */
.badge-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.badge{border-radius:var(--radius-pill);padding:16px 32px;text-align:center}
.badge.selected{background:linear-gradient(135deg,var(--blue),var(--blue-dk));border-color:var(--border-sel);box-shadow:0 0 40px var(--blue-glow)}
.badge h4{font-weight:700;font-size:20px}
.badge .bdesc{font-size:13px;opacity:.8;margin-top:3px}
.badge-sm{padding:12px 24px;border-radius:var(--radius-pill);min-width:72px;text-align:center}
.badge-sm h4{font-size:16px}
.badge-sm .bdesc{font-size:11px;margin-top:2px}

/* ── Confirm card (unique component) ── */
.confirm-card{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.16);border-radius:16px;overflow:hidden;box-shadow:var(--sh);max-width:520px;margin:0 auto}
.confirm-head{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.06);text-align:center}
.confirm-head h3{font-size:15px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:2px}
.confirm-row{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(255,255,255,.04)}
.confirm-row:last-child{border-bottom:none}
.confirm-lbl{color:var(--txt3);font-size:13px;display:flex;align-items:center;gap:6px}
.confirm-val{color:var(--txt);font-weight:600;font-size:13px;text-align:right;max-width:55%}
.confirm-val.grn{color:var(--green)}

/* ── Submit overlay (unique component) ── */
.sub-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;will-change:transform;padding:0 40px}
.sub-tracker{display:flex;align-items:center;gap:0;max-width:560px;width:100%;margin:0 auto 48px;position:relative}
.sub-seg{display:flex;align-items:center;flex:1;position:relative}
.sub-seg:last-child{flex:0}
.sub-node{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:2;flex-shrink:0}
.sub-ring{width:52px;height:52px;border-radius:50%;position:relative;background:rgba(255,255,255,.06);border:2.5px solid rgba(255,255,255,.1);transition:all .35s var(--ease);will-change:transform}
.sub-ring svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);opacity:0;transition:all .12s var(--ease-spring);will-change:transform;width:22px;height:22px}
.sub-ring .sub-spin{position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border:2.5px solid rgba(41,151,255,.25);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;display:none}
.sub-node.active .sub-ring{border-color:var(--blue);background:rgba(41,151,255,.1);transform:scale(1.15);box-shadow:0 0 30px rgba(41,151,255,.35)}
.sub-node.active .sub-spin{display:block}
.sub-node.done .sub-ring{border-color:var(--green);background:var(--green);transform:scale(1.1);box-shadow:0 0 20px rgba(126,203,161,.4)}
.sub-node.done .sub-ring svg{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sub-node.done .sub-spin{display:none}
.sub-lbl{font-size:13px;font-weight:600;color:var(--txt4);white-space:nowrap;transition:opacity .1s var(--ease)}
.sub-node.active .sub-lbl{color:var(--blue)}
.sub-node.done .sub-lbl{color:var(--green)}
.sub-dots-anim .d{opacity:0;animation:dotFade 1.2s steps(1,end) infinite}
.sub-dots-anim .d:nth-child(2){animation-delay:.3s}
.sub-dots-anim .d:nth-child(3){animation-delay:.6s}
.sub-wire{flex:1;height:2.5px;background:rgba(255,255,255,.08);margin:0 -2px;position:relative;overflow:hidden;transform:translateY(-16px)}
.sub-wire-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--green),var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .2s cubic-bezier(.4,0,.2,1);will-change:transform}
.sub-wire.filled .sub-wire-fill{transform:scaleX(1)}
.sub-status{font-size:20px;font-weight:600;color:var(--txt2);min-height:28px;transition:opacity .2s;text-align:center}

/* ── Success ── */
.sub-done-badge{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,var(--green),#24c550);display:flex;align-items:center;justify-content:center;margin:0 auto 28px;animation:checkPop .45s var(--ease-spring);box-shadow:0 0 60px rgba(126,203,161,.35),0 0 0 10px rgba(126,203,161,.08);will-change:transform}
.sub-done-badge svg{stroke-dasharray:30;stroke-dashoffset:30;animation:checkDraw .5s ease .15s forwards}
.sub-success-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;position:relative;z-index:2}
.sub-success-wrap h2{font-size:38px;font-weight:700;margin-bottom:10px;animation:fadeUp .3s var(--ease) .1s both}
.sub-success-wrap .sub-desc{color:var(--txt2);font-size:18px;margin-bottom:36px;max-width:500px;text-align:center;animation:fadeUp .3s var(--ease) .15s both}
.sub-card{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.14);border-radius:18px;padding:24px 28px;text-align:center;animation:fadeUp .25s var(--ease) backwards;box-shadow:var(--sh)}
.sub-card h4{font-size:18px;font-weight:600;margin-bottom:8px}
.sub-card .meta{display:flex;gap:16px;font-size:14px;color:var(--txt3);justify-content:center}
.sub-success-wrap .sub-card{max-width:460px;margin:0 auto 36px;animation:fadeUp .3s var(--ease) .2s both}
.sub-success-btns{position:absolute;bottom:40px;left:0;right:0;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;animation:fadeUp .3s var(--ease) .25s both}
.sub-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:18px 40px;border-radius:var(--radius-pill);font-size:17px;font-weight:600;cursor:pointer;border:none;font-family:var(--font);transition:transform .15s;will-change:transform}
.sub-btn:hover{transform:scale(1.03)}
.sub-btn:active{transform:scale(.96)}
.sub-btn.primary{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;box-shadow:0 4px 16px var(--blue-glow)}
.sub-btn.secondary{background:rgba(255,255,255,.06);color:var(--txt2);border:1px solid rgba(255,255,255,.08)}
.sub-canvas{position:fixed;inset:0;pointer-events:none;z-index:9999}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}

@media(max-width:700px){.bp-modal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .shell-head{padding:16px 16px 0}
  .shell-head h1{font-size:28px}
  .wstep{padding:16px 16px 80px}
  .shell-foot{padding:10px 16px 16px}
  .stitle{font-size:22px}
  .fmt-grid{grid-template-columns:1fr;max-width:280px}
  .badge-grid{flex-direction:column;align-items:center}
  .drop-zone{padding:24px 16px}
  .sd .dl{display:none!important}
  .steps{gap:4px;padding:8px 12px}
}
@media(max-width:480px){
  .shell-head{padding:10px 12px 0}
  .shell-head h1{font-size:22px}
  .shell-head p{font-size:14px;margin-bottom:16px}
  .wstep{padding:12px 14px 90px}
  .stitle{font-size:18px}
  .sdesc{font-size:14px;margin-bottom:24px}
  .shell-foot{padding:8px 14px 14px}
  .btn{min-height:44px;font-size:14px}
  .bp-modal-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  input,textarea,select{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Stagger entrance */
.section:nth-child(1) { animation: fadeUp .25s var(--ease) 0s backwards }
.section:nth-child(2) { animation: fadeUp .25s var(--ease) .06s backwards }
.section:nth-child(3) { animation: fadeUp .25s var(--ease) .12s backwards }

/* Section head sub-styles */
.sec-head svg { width: var(--s3); height: var(--s3); color: var(--blue); flex-shrink: 0 }
.sec-head h2 { font-size: var(--s3); font-weight: 600; color: var(--txt) }

/* Rows */
.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); padding: var(--s2) var(--s1); margin: 0 calc(var(--s1) * -1);
  border-bottom: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-md); transition: background .2s var(--ease);
}
.row:hover { background: rgba(255,255,255,.03) }
.row:last-child { border-bottom: none }
.row h4 { font-size: var(--s2); font-weight: 600; margin-bottom: var(--s0); color: var(--txt) }
.row p { font-size: 13px; color: var(--txt3) }

/* Toggle switch */
.tog { position: relative; width: var(--s6); height: 28px; flex-shrink: 0 }
.tog input { opacity: 0; width: 0; height: 0 }
.tog-sl {
  position: absolute; cursor: pointer; inset: 0;
  background: rgba(255,255,255,.12); border-radius: 28px;
  transition: background .15s var(--ease);
}
.tog-sl::before {
  content: ''; position: absolute; height: 22px; width: 22px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%;
  transition: transform .15s var(--ease);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.tog input:checked + .tog-sl { background: var(--blue) }
.tog input:checked + .tog-sl::before { transform: translateX(20px) }

/* Segmented control */
.seg-ctrl {
  display: flex; background: rgba(255,255,255,.06);
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}
.seg-btn {
  padding: var(--s1) var(--s2); font-size: 13px; font-weight: 600;
  font-family: var(--font); color: var(--txt3); background: transparent;
  border: none; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.seg-btn:not(:last-child) { border-right: 1px solid rgba(255,255,255,.06) }
.seg-btn.active {
  background: var(--blue); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.seg-btn:hover:not(.active) { background: rgba(255,255,255,.04); color: var(--txt2) }

/* Section actions */
.sec-actions {
  display: flex; justify-content: flex-end; gap: var(--s1);
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Mobile */
@media (max-width: 480px) {
  .shell-head { padding: var(--s1) var(--s1) 0 }
  .shell-inner { padding: var(--s1) var(--s1) var(--s6) }
  .pg-title { font-size: var(--s3) }
  .sec-body { padding: var(--s2) }
  .btn { width: 100%; justify-content: center; min-height: 44px }
  .sec-actions { flex-direction: column }
  .seg-btn { padding: var(--s1) var(--s1); font-size: 12px }
}

/* ═══════════════════════════════════════════════════════════════
   STORAGE COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
/* ── Page context: rendered inside portal iframe shell ── */
/* scoped body rule removed */

/* ── Shell layout overrides (base in common.css) ── */
.shell-head { max-width: none; animation: none }
.shell-inner { max-width: none; padding: 12px 28px 72px }

/* ── Page title overrides (base in common.css) ── */
.pg-title { background: none; -webkit-text-fill-color: var(--txt); color: var(--txt) }
.pg-sub { margin-bottom: 16px }

/* ── Toolbar override (common.css .toolbar uses padding; page needs no side padding) ── */
.toolbar { padding: 0; margin-bottom: 16px }

/* ── Search box override (common.css .search-box is a plain input; page needs icon wrapper) ── */
.search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass);
  border: var(--glass-b);
  border-top-color: var(--glass-bt);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  flex: 1;
  max-width: 320px;
  box-shadow: var(--sh);
  transition: border-color .15s var(--ease);
}
.search-wrap:focus-within { border-color: rgba(41,151,255,.35) }
.search-wrap svg { width: 14px; height: 14px; color: var(--txt4); flex-shrink: 0 }
.search-wrap input { background: transparent; border: none; outline: none; color: var(--txt); font-size: 13px; font-family: var(--font); width: 100% }
.search-wrap input::placeholder { color: var(--txt4) }
.folder-count { font-size: 12px; color: var(--txt3); font-weight: 600 }

/* ── Breadcrumb (no design-system equivalent) ── */
.breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 13px }
.bc-item { color: var(--txt3); cursor: pointer; transition: color .15s var(--ease); display: flex; align-items: center; gap: 4px }
.bc-item:hover { color: var(--txt) }
.bc-item.active { color: var(--txt); font-weight: 600; cursor: default }
.bc-sep { color: var(--txt4) }
.bc-item svg { width: 14px; height: 14px }

/* ── Folder grid (page-specific layout) ── */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px }
.fc {
  background: var(--glass);
  border: var(--glass-b);
  border-top-color: var(--glass-bt);
  border-radius: var(--r-xl);
  cursor: pointer;
  box-shadow: var(--sh);
  text-align: center;
  overflow: hidden;
  animation: fadeUp .25s var(--ease) backwards;
  transition: transform .12s var(--ease-q), border-color .15s var(--ease);
}
.fc:hover { border-color: rgba(41,151,255,.3); transform: translateY(-3px) }
.fc:active { transform: scale(.96); transition-duration: .08s }

.folder-thumb {
  width: 100%;
  aspect-ratio: 9/16;
  max-height: 140px;
  background-size: cover;
  background-position: center;
  background-color: rgba(10,10,15,.6);
  position: relative;
  overflow: hidden;
}
.folder-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6)) }

.folder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: opacity .2s var(--ease);
}
.folder-icon svg { width: 22px; height: 22px; color: rgba(255,255,255,.7) }
.folder-icon.project { border-color: rgba(126,203,161,.25) }
.folder-icon.project svg { color: rgba(126,203,161,.8) }
.fc.has-thumb .folder-icon { opacity: 0 }

.folder-body { padding: 12px 14px 14px }
.folder-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--txt) }
.folder-meta { font-size: 11px; color: var(--txt3) }
.folder-role { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-top: 5px }

/* ── File list (no design-system equivalent) ── */
.file-list { display: flex; flex-direction: column; gap: 4px }
.file-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--glass);
  border: var(--glass-b);
  border-top-color: var(--glass-bt);
  border-radius: var(--r-lg);
  cursor: pointer;
  box-shadow: var(--sh);
  animation: fadeUp .2s var(--ease) backwards;
  transition: transform .12s var(--ease-q), border-color .15s var(--ease);
}
.file-row:hover { border-color: rgba(41,151,255,.3); transform: translateX(4px) }
.file-row:active { transform: scale(.98); transition-duration: .08s }

.file-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.file-icon.video  { background: linear-gradient(135deg, rgba(191,90,242,.2),  rgba(191,90,242,.08)) }
.file-icon.video  svg { color: var(--purple) }
.file-icon.image  { background: linear-gradient(135deg, rgba(126,203,161,.2), rgba(126,203,161,.08)) }
.file-icon.image  svg { color: var(--green) }
.file-icon.doc    { background: linear-gradient(135deg, rgba(41,151,255,.2),  rgba(41,151,255,.08)) }
.file-icon.doc    svg { color: var(--blue) }
.file-icon.folder { background: linear-gradient(135deg, rgba(255,214,10,.2),  rgba(255,214,10,.08)) }
.file-icon.folder svg { color: var(--gold) }
.file-icon.other  { background: rgba(255,255,255,.05) }
.file-icon.other  svg { color: var(--txt3) }
.file-icon svg { width: 20px; height: 20px }

.file-info { flex: 1; min-width: 0 }
.file-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--txt) }
.file-detail { font-size: 11px; color: var(--txt3); margin-top: 2px }
.file-size { font-size: 12px; color: var(--txt4); font-weight: 500; flex-shrink: 0; min-width: 60px; text-align: right }

/* ── Empty & loading states (spinner + empty in common.css) ── */
.loading-state { text-align: center; padding: 60px }

/* ── Preview modal (no design-system equivalent) ── */
.pv-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.85);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.pv-overlay.show { display: flex; animation: fadeIn .15s ease }
.pv-top { position: absolute; top: 0; left: 0; right: 0; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; z-index: 2 }
.pv-name { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60% }
.pv-close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s var(--ease); flex-shrink: 0 }
.pv-close:hover { background: rgba(255,255,255,.2) }
.pv-body { max-width: 90vw; max-height: 80vh; display: flex; align-items: center; justify-content: center }
.pv-body img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5) }
.pv-body video { max-width: 90vw; max-height: 80vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5); outline: none }
.pv-info { text-align: center; padding: 40px; color: var(--txt2) }
.pv-info svg { width: 64px; height: 64px; margin-bottom: 16px; opacity: .3 }
.pv-info h3 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 4px }
.pv-info p { font-size: 13px; margin-bottom: 16px }
.pv-dl { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: var(--blue); color: #fff; border: none; border-radius: var(--r-md); font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: background .15s var(--ease) }
.pv-dl:hover { background: var(--blue-hv) }

/* ── Mobile ── */
@media (max-width: 768px) {
  .shell-head { padding: 16px 16px 0 }
  .shell-inner { padding: 8px 16px 48px }
  .folder-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) }
}
@media (max-width: 480px) {
  .toolbar { flex-direction: column; align-items: stretch }
  .search-wrap { max-width: none }
  .folder-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) }
  input, textarea, select { font-size: 16px !important }
}

/* ═══════════════════════════════════════════════════════════════
   TEAM COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   TEAM HUB — page-specific components only
   Components NOT available in design-system.css or common.css.
   ══════════════════════════════════════════════════════════════ */

/* removed: was leaking globally */

/* ── Team filter pills (page-specific) ── */
.tf-row{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.tf-pill{padding:6px 16px;border-radius:100px;font-size:12px;font-weight:600;cursor:pointer;transition:opacity 80ms;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--txt3);font-family:var(--font)}
.tf-pill:hover{border-color:rgba(255,255,255,.16);color:var(--txt2)}
.tf-pill.active{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;border-color:var(--blue)}

/* ── 3-column dashboard (page-specific) ── */
.dash-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;height:100%}
.dash-col{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.dash-col-head{font-size:14px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.dash-col-head .cnt{font-size:11px;color:var(--txt3);font-weight:500;background:rgba(255,255,255,.06);padding:2px 8px;border-radius:100px}
.dash-col-body{flex:1;overflow-y:auto;padding-right:4px}
.dash-col-body::-webkit-scrollbar{width:4px}
.dash-col-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* ── Leaderboard avatar img (extends common.css lb-*) ── */
.lb-avatar img{width:100%;height:100%;object-fit:cover}

/* ── Project card overrides (extends common.css pj-*) ── */
.pj-card{box-shadow:var(--sh);transition:border-color .15s}
.pj-card:hover{border-color:rgba(255,255,255,.16)}
.pj-card.late{border-left:3px solid var(--red)}
.pj-name{margin-bottom:4px}
.pj-row{gap:6px;font-size:11px;color:var(--txt3);flex-wrap:wrap}
.pj-editor{display:flex;align-items:center;gap:4px}
.pj-editor img{width:16px;height:16px;border-radius:50%;object-fit:cover}
.pj-due{font-family:var(--mono);font-weight:600}

/* ── Reports table (page-specific) ── */
.report-table{width:100%;border-collapse:separate;border-spacing:0 4px}
.report-table th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--txt4);text-align:left;padding:6px 10px}
.report-table td{padding:8px 10px;font-size:12px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.04)}
.report-table td:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.report-table td:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.report-table tr:hover td{background:rgba(255,255,255,.04)}

/* ── Client cards (page-specific) ── */
.client-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);box-shadow:var(--sh);padding:20px;margin-bottom:16px}
.client-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.client-avatar{width:44px;height:44px;border-radius:50%;background:var(--bg-sf);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--txt3);overflow:hidden;flex-shrink:0}
.client-avatar img{width:100%;height:100%;object-fit:cover}
.client-info{flex:1;min-width:0}
.client-name{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-company{font-size:12px;color:var(--txt3)}
.client-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.client-tag{padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.client-tag-active{background:rgba(126,203,161,.1);color:var(--green)}
.client-tag-trial{background:rgba(255,159,10,.1);color:var(--orange)}
.client-tag-canceled{background:rgba(192,57,43,.1);color:var(--red)}
.client-tag-tier{background:rgba(41,151,255,.1);color:var(--blue)}
.client-projects-row{display:flex;gap:10px;overflow-x:auto;padding:4px 0}
.proj-mini{flex-shrink:0;width:220px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);padding:12px 14px;transition:border-color .15s}
.proj-mini:hover{border-color:rgba(255,255,255,.14)}
.proj-mini-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.proj-mini-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.proj-mini-tag{padding:2px 6px;border-radius:100px;font-size:9px;font-weight:700;text-transform:uppercase}
.proj-mini-timer{font-size:11px;font-weight:600;font-family:var(--mono)}

/* ── Section title (page-specific) ── */
.sec-title{font-size:16px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sec-title .sec-count{font-size:12px;color:var(--txt3);font-weight:500}

/* ── Team health hero (page-specific) ── */
.health-hero{text-align:center;padding:32px 20px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);box-shadow:var(--sh);margin-bottom:20px}
.health-hero-score{font-size:64px;font-weight:800;line-height:1}
.health-hero-grade{display:inline-block;padding:4px 16px;border-radius:100px;font-size:18px;font-weight:800;color:#fff;margin-top:8px}
.health-hero-label{font-size:13px;color:var(--txt3);margin-top:8px}
.score-bars{display:grid;gap:12px;margin-bottom:20px}

/* ── Empty state (page-specific) ── */
.empty-col{text-align:center;padding:40px 16px;color:var(--txt4);font-size:13px}
.empty-col svg{width:32px;height:32px;margin-bottom:8px;opacity:.3}

/* ── Responsive ── */
@media(max-width:1100px){
  .dash-3col{grid-template-columns:1fr 1fr}
  .dash-col:nth-child(3){display:none}
}
@media(max-width:900px){
  .dash-3col{grid-template-columns:1fr}
  .dash-col:nth-child(2),.dash-col:nth-child(3){display:none}
}
@media(max-width:600px){
  .shell-head{padding:16px 16px 0}
  .tab-panel{padding:16px 16px 60px}
}
@media(max-width:480px){
  .sub-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .sub-tab{white-space:nowrap;flex-shrink:0}
  input,textarea,select{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Login buttons ── */
.login-btn {
  width: 100%;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  border-radius: var(--r-lg);
  border: none;
  cursor: pointer;
  min-height: 44px;
  position: relative;
  transition: transform 120ms var(--ease), opacity 120ms var(--ease);
  will-change: transform;
  display: block;
}
.login-btn-primary {
  background: linear-gradient(180deg, #3da5ff 0%, #2997ff 45%, #1d85e8 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-bottom-color: rgba(0,0,0,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.3), 0 4px 16px rgba(41,151,255,.15);
}
.login-btn-primary:hover   { transform: translateY(-1px); }
.login-btn-primary:active  { transform: translateY(0) scale(.98); }
.login-btn-primary:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.login-btn-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
  color: var(--txt2);
  border: 1px solid rgba(255,255,255,.1);
  margin-top: var(--s1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 4px rgba(0,0,0,.2);
}
.login-btn-secondary:hover { transform: translateY(-1px); color: var(--txt); }
.login-btn.loading { color: transparent; pointer-events: none; }
.login-btn.loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loginSpin .7s linear infinite;
}

/* ── Login links ── */
.login-page a { color: var(--txt3); text-decoration: none; transition: color 80ms; }
.login-page a:hover { color: var(--txt); }
.login-page a span, .login-page .link-blue { color: var(--blue); font-weight: 500; }
.login-page .footer-links { margin-top: var(--s3); text-align: center; }
.login-page .footer-links a { color: var(--txt3); font-size: 12px; }
.login-page .footer-links a:hover { color: var(--txt); }

/* ── Resend button ── */
.resend-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 13px;
  font-family: var(--font);
  cursor: pointer;
  padding: var(--s1) var(--s2);
  border-radius: var(--r-md);
  min-height: 44px;
  transition: opacity 80ms;
}
.resend-btn:hover { opacity: .8; }
.resend-btn:disabled { color: var(--txt3); cursor: not-allowed; opacity: 1; }


/* ═══════════════════════════════════════════════════════════════
   PORTAL PAGE COMPONENTS — RECOVERED FROM ORIGINAL STYLE BLOCKS
   Every class used across all 14 portal pages
   ═══════════════════════════════════════════════════════════════ */


/* ═══ DASHBOARD.HTML ═══ */

/* ── Dashboard-only components not in design-system.css or common.css ── */

/* Section anchors */
.section-anchor{padding-top:8px;margin-bottom:24px}
.sec-h{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--txt3);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sec-h::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06)}

/* Stat cards row */
.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.stat-sub{font-size:11px;color:var(--txt4);margin-top:4px}

/* 3-column grid */
.dash-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.dash-col{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.dash-col-head{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-shrink:0;color:var(--txt)}
.dash-col-head .cnt{font-size:10px;color:var(--txt3);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:100px}
.dash-col-body{flex:1;overflow-y:auto;padding-right:2px}
.dash-col-body::-webkit-scrollbar{width:3px}
.dash-col-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* Co-editors row */
.co-editors{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.co-ed{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:100px;box-shadow:var(--sh)}
.co-av{width:28px;height:28px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.co-av img{width:100%;height:100%;object-fit:cover}
.co-name{font-size:12px;font-weight:600;color:var(--txt2)}
.co-score{font-size:11px;font-weight:700;margin-left:4px}

/* Admin overview grid */
.ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px}
.ov-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);box-shadow:var(--sh);padding:18px 20px;position:relative;overflow:hidden}
.ov-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.ov-big{font-size:34px;font-weight:800;letter-spacing:-.025em;line-height:1}
.ov-lbl{font-size:11px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}

/* Finance placeholder */
.finance-iframe-wrap{width:100%;min-height:500px;border-radius:var(--r-xl);overflow:hidden;background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--txt4);font-size:14px;padding:60px 20px;text-align:center}
.finance-iframe-wrap svg{width:48px;height:48px;opacity:.3}

/* Late project card accent */
.pj-card.late{border-left:3px solid var(--red)}
.pj-card.due-soon{border-left:3px solid var(--orange)}
.pj-due.today{color:var(--orange)}

/* Cancer badge for leaderboard */
.lb-card.lb-cancer{border-color:rgba(192,57,43,.4);background:linear-gradient(135deg,rgba(192,57,43,.08),rgba(10,14,28,.55));position:relative}
.lb-cancer-badge{position:absolute;top:10px;right:10px;background:var(--red);color:#fff;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:100px;display:flex;align-items:center;gap:4px}
.lb-late-warn{font-size:11px;font-weight:700;color:var(--red);display:flex;align-items:center;gap:4px;margin-top:6px}

/* Admin tab visibility */
.cat-tab.admin-tab{display:none}
body[data-role="admin"] .cat-tab.admin-tab,
body[data-role="owner"] .cat-tab.admin-tab{display:inline-block}

/* Payout total label */
.po-total-lbl{font-size:13px;color:var(--txt3);font-weight:500;margin-left:8px}

/* Responsive */
@media(max-width:1100px){.dash-3col{grid-template-columns:1fr 1fr}}
@media(max-width:750px){.dash-3col{grid-template-columns:1fr}}
@media(max-width:600px){
  .shell-head{padding:14px 16px 0}
  .tab-panel{padding:14px 16px 60px}
  .stat-row{gap:8px}
}
@media(max-width:480px){
  .shell-head h1{font-size:20px}
  .cat-tabs{width:100%;overflow-x:auto}
  .cat-tab{font-size:11px;padding:6px 14px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ═══ PIPELINE.HTML ═══ */

/* ══════════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC CSS — Only for components NOT in design-system.css
   or common.css. Zero duplication with design system utilities.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────── */
.page{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.page-head{flex-shrink:0;padding:20px 28px 0}
.page-body{flex:1;overflow:auto;padding:0 20px 20px;-webkit-overflow-scrolling:touch}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hdr-left h1{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--txt);margin:0;display:flex;align-items:center;gap:8px}
.hdr-left p{font-size:12px;color:var(--txt3);margin:2px 0 0}
.hdr-right{display:flex;align-items:center;gap:10px}

/* ── Search ─────────────────────────────────────────────────────────── */
.search{display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:6px 14px;transition:border-color .2s}
.search:focus-within{border-color:rgba(41,151,255,.35)}
.search svg{width:16px;height:16px;color:var(--txt3);flex-shrink:0}
.search input{background:none;border:none;color:var(--txt);font-size:13px;width:160px;outline:none;font-family:var(--font)}
.search input::placeholder{color:var(--txt4)}

/* ── Density toggle ─────────────────────────────────────────────────── */
.density{display:flex;gap:2px;background:var(--glass);border-radius:var(--r-md);padding:2px}
.density button{border:none;background:none;color:var(--txt3);font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--r-sm);cursor:pointer;font-family:var(--font);transition:background .15s,color .15s}
.density button.active{background:rgba(41,151,255,.2);color:var(--blue)}

/* ── Team filter bar ────────────────────────────────────────────────── */
.team-filter-bar{display:flex;gap:6px;padding:0 28px 8px;flex-wrap:wrap}
.tf-pill{padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.08);background:var(--glass);color:var(--txt3);transition:all .15s;font-family:var(--font)}
.tf-pill.active{background:rgba(41,151,255,.15);border-color:rgba(41,151,255,.3);color:var(--blue)}

/* ── Sub-nav pills ──────────────────────────────────────────────────── */
.sub-pills{display:none;gap:6px;padding:0 28px 8px}
.sub-pills.active{display:flex}
.sub-pill{padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.06);background:transparent;color:var(--txt3);transition:all .15s;font-family:var(--font)}
.sub-pill.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.25);color:var(--blue)}

/* ── Pipe view containers ───────────────────────────────────────────── */
.pipe-view{display:none;flex-direction:column;flex:1;overflow:hidden}
.pipe-view.active{display:flex}

/* ── Team/Person pipeline kanban ────────────────────────────────────── */
.tp-kanban{display:flex;gap:12px;overflow-x:auto;padding:12px 20px 16px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.tp-col{flex:0 0 260px;background:var(--glass);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);display:flex;flex-direction:column;scroll-snap-align:start}
.tp-col-hdr{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.05)}
.tp-col-title{font-size:13px;font-weight:700;color:var(--txt)}
.tp-col-sub{font-size:10px;color:var(--txt3);display:block;margin-top:2px}
.tp-col-count{font-size:11px;font-weight:700;color:var(--txt3);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:100px}
.tp-col-body{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;max-height:60vh}
.tp-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);padding:10px 12px;cursor:pointer;transition:background .15s,transform .1s}
.tp-card:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}
.tp-card.dragging{opacity:.5;transform:scale(.96)}
.tp-card-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tp-card-avatar{width:28px;height:28px;border-radius:50%;background:rgba(41,151,255,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--blue);overflow:hidden;flex-shrink:0}
.tp-card-avatar img{width:100%;height:100%;object-fit:cover}
.tp-card-name{font-size:12px;font-weight:600;color:var(--txt);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-card-grade{font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px}
.tp-card-tags{display:flex;gap:4px;flex-wrap:wrap}
.tp-card-tag{font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px}
.tp-card-stats{display:flex;gap:8px;margin-bottom:6px}
.tp-card-stat{font-size:10px;color:var(--txt3)}
.tp-card-scores{display:flex;gap:4px;margin-bottom:6px}
.tp-card-sc{flex:1;text-align:center;padding:4px;background:rgba(255,255,255,.03);border-radius:6px}
.tp-card-sc-label{font-size:8px;font-weight:600;color:var(--txt4);text-transform:uppercase;letter-spacing:.04em}
.tp-card-sc-val{font-size:13px;font-weight:700;color:var(--txt)}
.tp-empty{padding:16px;text-align:center;font-size:11px;color:var(--txt4)}

/* ── Mobile stage dots ──────────────────────────────────────────────── */
.tp-stage-dots{display:none;justify-content:center;gap:6px;padding:6px 0 2px}
.tp-stage-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.15);cursor:pointer;transition:background .2s,transform .2s}
.tp-stage-dot.active{background:var(--blue);transform:scale(1.3)}

/* ── Trash zone ─────────────────────────────────────────────────────── */
.trash-zone{position:fixed;bottom:0;left:0;right:0;height:70px;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(0deg,rgba(192,57,43,.25),transparent);border-top:2px dashed rgba(192,57,43,.4);color:var(--red);font-size:13px;font-weight:700;z-index:100;transform:translateY(100%);transition:transform .2s var(--ease);pointer-events:none;font-family:var(--font)}
.trash-zone svg{width:20px;height:20px}
.trash-zone.visible{transform:translateY(0);pointer-events:all}
.trash-zone.hover{background:linear-gradient(0deg,rgba(192,57,43,.45),transparent);border-color:var(--red)}

/* ── Blueprint modal/tooltip ────────────────────────────────────────── */
.bp-modal-overlay{display:none;position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.6);align-items:center;justify-content:center}
.bp-modal-overlay.show{display:flex}
.bp-modal{background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:24px;max-width:480px;width:90%;max-height:70vh;overflow-y:auto;box-shadow:var(--sh)}
.bp-modal h3{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--txt);margin:0 0 16px}
.bp-modal h3 svg{width:18px;height:18px;color:var(--blue)}
.bp-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--txt3);font-size:20px;cursor:pointer}
.bp-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.bp-list li{display:flex;justify-content:space-between;padding:8px 12px;background:rgba(255,255,255,.03);border-radius:var(--r-md);font-size:12px}
.bp-key{color:var(--txt3);font-weight:600}
.bp-val{color:var(--txt);font-weight:500}
.bp-tip{display:none;position:fixed;z-index:1200;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:12px;max-width:300px;box-shadow:var(--sh)}
.bp-tip.show{display:block}
.bp-tip-name{font-size:12px;font-weight:700;color:var(--txt);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.bp-tip-name svg{width:14px;height:14px;color:var(--blue)}
.bp-tip-row{display:flex;justify-content:space-between;font-size:10px;padding:2px 0}
.bp-tip-k{color:var(--txt3);font-weight:600}
.bp-tip-v{color:var(--txt)}
.bp-tip-empty{font-size:11px;color:var(--txt4);padding:4px}

/* ── Kanban overrides — common.css provides base .kanban/.col/.col-hdr etc ── */
.col-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.col-dot[data-status="queue"]{background:var(--st-queue,#8e8e93)}
.col-dot[data-status="active"]{background:var(--st-active,#ff9500)}
.col-dot[data-status="review"]{background:var(--st-review,#5ac8fa)}
.col-dot[data-status="revisions"]{background:var(--st-revisions,#bf5af2)}
.col-dot[data-status="approved"]{background:var(--st-approved,#30d158)}

/* ── Project Card — iPhone-style glass card ─────────────────────────── */
.card{position:relative;border-radius:var(--r-xl);overflow:hidden;cursor:pointer;aspect-ratio:9/16;background:#0a0e1c;box-shadow:0 4px 24px rgba(0,0,0,.35);transition:transform .2s var(--ease),box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.5)}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.12);pointer-events:none;z-index:5}
.card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 20%);pointer-events:none;z-index:5}
.card.dragging{opacity:.6;transform:scale(.95) rotate(2deg);z-index:50}
.card-thumb{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0}
.card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.8) 100%);z-index:1}
.card-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:3px 10px;background:rgba(0,0,0,.5);border-radius:20px;z-index:10}
.notch-dot{width:5px;height:5px;border-radius:50%;background:var(--blue)}
.notch-ver{font-size:9px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.04em}
.card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:6;opacity:0;transition:opacity .15s}
.card-play svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.card:hover .card-play{opacity:1}
.card-badges{position:absolute;top:32px;left:8px;display:flex;gap:4px;z-index:10;flex-wrap:wrap}
.badge-fmt{padding:2px 6px;border-radius:6px;font-size:9px;font-weight:800;letter-spacing:.04em}
.badge-fmt.sf{background:rgba(41,151,255,.2);color:var(--blue)}
.badge-fmt.lf{background:rgba(191,90,242,.2);color:var(--purple)}
.badge-tier{padding:2px 6px;border-radius:6px;font-size:9px;font-weight:800;background:rgba(255,255,255,.1);color:var(--txt2)}
.badge-health{padding:2px 6px;border-radius:6px;font-size:9px;font-weight:800}
.health-a{background:rgba(126,203,161,.15);color:#7ecba1}
.health-b{background:rgba(90,200,250,.15);color:#5ac8fa}
.health-c{background:rgba(255,159,10,.15);color:#ff9f0a}
.health-d{background:rgba(245,166,35,.15);color:#f5a623}
.health-f{background:rgba(192,57,43,.15);color:#c0392b}
.card-bp-icon{cursor:pointer;display:flex;align-items:center}
.card-bp-icon svg{width:12px;height:12px;color:var(--txt3);transition:color .15s}
.card-bp-icon:hover svg{color:var(--blue)}

/* Asset items */
.asset{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);cursor:pointer;transition:background .15s}
.asset:hover{background:rgba(255,255,255,.04)}
.asset-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.asset-icon svg{width:16px;height:16px}
.asset-name{font-size:12px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.asset-size{font-size:10px;color:var(--txt4)}

/* ── Timeline bar on cards ──────────────────────────────────────────── */
.card-tl{position:absolute;bottom:0;left:0;right:0;padding:8px 10px 10px;z-index:6}
.tl-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.tl-name{font-size:11px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.tl-timer{display:flex;align-items:center;gap:3px;font-size:9px;font-weight:700;letter-spacing:.02em;padding:2px 6px;border-radius:6px}
.tl-timer svg{width:10px;height:10px}
.tl-timer.ok{color:#7ecba1;background:rgba(126,203,161,.12)}
.tl-timer.warn{color:#ff9f0a;background:rgba(255,159,10,.12)}
.tl-timer.overdue{color:#c0392b;background:rgba(192,57,43,.12)}
.tl-timer.done{color:#30d158;background:rgba(48,209,88,.12)}
.tl-scrub{height:3px;background:rgba(255,255,255,.1);border-radius:2px;position:relative;overflow:visible}
.tl-fill{position:absolute;left:0;top:0;bottom:0;background:var(--blue);border-radius:2px;transform-origin:left;transition:transform .3s}
.tl-knob{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid var(--blue);transform:translate(-50%,-50%);transition:left .3s}

/* ── Density variants ───────────────────────────────────────────────── */
.density-sm .card{aspect-ratio:auto;min-height:48px;border-radius:var(--r-md)}
.density-sm .card-thumb,.density-sm .card-overlay,.density-sm .card-notch,.density-sm .card-play,.density-sm .card-badges{display:none}
.density-sm .card-tl{position:relative;padding:8px 12px}
.density-sm .tl-scrub{display:none}
.density-lg .card{aspect-ratio:9/18}

/* ── Expanded project view ──────────────────────────────────────────── */
.project-view{position:fixed;inset:0;z-index:500;background:var(--bg);transform:translateX(100%);transition:transform .25s var(--ease);display:flex;flex-direction:column}
.project-view.open{transform:none}
.pv-shell{display:flex;flex:1;overflow:hidden}
.pv-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.pv-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.pv-bar-left,.pv-bar-right{display:flex;align-items:center;gap:8px}
.pv-bar-center{flex:1;display:flex;justify-content:center}
.pv-back{background:none;border:none;color:var(--txt2);cursor:pointer;padding:4px;display:flex;align-items:center}
.pv-back svg{width:20px;height:20px}
.pv-title{font-size:15px;font-weight:700;color:var(--txt);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-status-badge{padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;color:#fff}

/* ── Detail bubble (center) ─────────────────────────────────────────── */
.pv-detail-bubble{display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:100px}
.pv-d-item{font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px}
.pv-d-fmt.sf{background:rgba(41,151,255,.15);color:var(--blue)}
.pv-d-fmt.lf{background:rgba(191,90,242,.15);color:var(--purple)}
.pv-d-tier{background:rgba(255,255,255,.08);color:var(--txt2)}
.pv-d-sep{width:1px;height:14px;background:rgba(255,255,255,.1)}
.pv-d-ver{display:flex;align-items:center;gap:2px}
.pv-d-ver-btn{background:none;border:none;color:var(--txt3);cursor:pointer;padding:2px;display:flex;align-items:center}
.pv-d-ver-btn:disabled{opacity:.3;cursor:default}
.pv-d-ver-btn svg{width:12px;height:12px}
.pv-d-ver-label{font-size:10px;font-weight:700;color:var(--txt)}
.pv-d-bp{cursor:pointer}
.pv-d-bp svg{width:14px;height:14px;color:var(--txt3)}
.pv-d-bp:hover svg{color:var(--blue)}
.pv-d-health{font-size:10px;font-weight:800}

/* ── Right bubble (staff) ───────────────────────────────────────────── */
.pv-right-bubble{display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:100px}
.pv-rb-editor{display:flex;align-items:center;gap:5px}
.pv-rb-avatar{width:22px;height:22px;border-radius:50%;background:rgba(41,151,255,.12);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--blue);overflow:hidden}
.pv-rb-avatar img{width:100%;height:100%;object-fit:cover}
.pv-rb-name{font-size:10px;font-weight:600;color:var(--txt2);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-rb-sep{width:1px;height:14px;background:rgba(255,255,255,.1)}
.pv-rb-timer{display:flex;align-items:center;gap:3px;font-size:10px;font-weight:700}
.pv-rb-timer.ok{color:#7ecba1}
.pv-rb-timer.warn{color:#ff9f0a}
.pv-rb-timer.overdue{color:#c0392b}
.pv-rb-timer.done{color:#30d158}
.pv-rb-icon{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .15s}
.pv-rb-icon svg{width:14px;height:14px}
.pv-rb-icon:hover{color:var(--blue)}
.pv-rb-icon.approve:hover{color:#30d158}
.pv-rb-icon.deliver:hover{color:var(--orange)}
.pv-pill{font-size:10px}

/* ── Video area ─────────────────────────────────────────────────────── */
.pv-video{position:relative;flex:1;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:300px}
.pv-video.loading::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.3)}
.pv-video video{width:100%;height:100%;object-fit:contain}
.pv-loader{display:none;position:absolute;z-index:10}
.pv-video.loading .pv-loader{display:block}
.pv-loader-ring{width:36px;height:36px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--blue);border-radius:50%;animation:spin .6s linear infinite}
.snap-flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:30;pointer-events:none;transition:opacity .05s}
.snap-flash.fire{opacity:.6;transition:none}

/* ── Review dock ────────────────────────────────────────────────────── */
.pv-dock{position:relative;flex-shrink:0}
.dock-bubble{padding:0 16px 12px;transition:transform .2s var(--ease),opacity .2s;transform:translateY(100%);opacity:0}
.dock-bubble.dk-visible{transform:none;opacity:1}
.dock-bubble.vid-playing{transform:translateY(8px);opacity:.6}
.dock-bubble.review-glow{animation:reviewPulse 2s ease infinite}
.review-hint{text-align:center;font-size:11px;color:rgba(41,151,255,.6);padding:6px 0 4px;display:none}
.dock-bubble.review-glow .review-hint{display:block}

.dk-island-wrap{background:var(--glass-flat);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.dk-island-wrap.dk-tools-locked .dk-tools{opacity:.4;pointer-events:none}

.dk-input{display:flex;align-items:center;gap:8px}
.dk-ts{font-size:10px;font-weight:700;color:var(--blue);min-width:36px;text-align:center}
.dk-inp-wrap{flex:1;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);padding:4px 8px}
.dk-textarea{flex:1;background:none;border:none;color:var(--txt);font-size:12px;resize:none;outline:none;font-family:var(--font);line-height:1.4;max-height:60px}
.dk-textarea::placeholder{color:var(--txt4)}
.dk-send{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .15s}
.dk-send svg{width:16px;height:16px}
.dk-send.ready{color:var(--blue)}
.dk-row-divider{height:1px;background:rgba(255,255,255,.06);margin:2px 0}

/* ── Dock tools row ─────────────────────────────────────────────────── */
.dk-tools{display:flex;align-items:center;gap:6px}
.dk-btn{background:none;border:none;color:var(--txt3);cursor:pointer;padding:5px;border-radius:var(--r-sm);transition:background .15s,color .15s;display:flex;align-items:center}
.dk-btn svg{width:16px;height:16px}
.dk-btn.active{background:rgba(41,151,255,.15);color:var(--blue)}
.dk-btn:hover{background:rgba(255,255,255,.06)}
.dk-sep{width:1px;height:20px;background:rgba(255,255,255,.08)}

/* ── 3D Rotary Knobs ────────────────────────────────────────────────── */
.dk-knob{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;-webkit-user-select:none;user-select:none}
.dk-knob-body{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.12),rgba(255,255,255,.02) 60%);border:1px solid rgba(255,255,255,.1);position:relative;transition:box-shadow .15s}
.dk-knob.active .dk-knob-body{box-shadow:0 0 12px rgba(41,151,255,.3)}
.dk-knob-tick{position:absolute;top:4px;left:50%;width:2px;height:10px;background:var(--blue);border-radius:1px;transform-origin:bottom center;transform:translateX(-50%)}
.dk-knob-lbl{font-size:8px;font-weight:700;color:var(--txt4);text-transform:uppercase;letter-spacing:.04em}
.dk-knob-tip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:4px 8px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);font-size:9px;font-weight:600;color:var(--txt2);white-space:nowrap}
.dk-knob-tip.show{display:block}
.dk-size-wrap{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:1px}
.dk-size-lbl{font-size:7px;font-weight:700;color:var(--txt4)}

/* ── Dock timeline ──────────────────────────────────────────────────── */
.dk-timeline-bar{padding:4px 0 0}
.dk-timeline{display:flex;align-items:center;gap:8px}
.dk-play{background:none;border:none;color:var(--txt);cursor:pointer;padding:2px;display:flex;align-items:center}
.dk-play svg{width:18px;height:18px}
.dk-time{font-size:10px;font-weight:700;color:var(--txt3);min-width:32px;text-align:center;font-family:var(--mono)}
.dk-track-wrap{flex:1;position:relative;cursor:pointer;padding:8px 0}
.dk-track-wrap.scrubbing{cursor:grabbing}
.dk-track{height:3px;background:rgba(255,255,255,.1);border-radius:2px;position:relative}
.dk-fill{position:absolute;left:0;top:0;bottom:0;background:var(--blue);border-radius:2px;transform-origin:left;will-change:transform}
.dk-thumb{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--blue);transform:translate(-50%,-50%);will-change:left;transition:box-shadow .15s}
.dk-track-wrap.scrubbing .dk-thumb{box-shadow:0 0 8px rgba(41,151,255,.5);transform:translate(-50%,-50%) scale(1.2)}
.dk-rev-tick{position:absolute;top:-3px;width:3px;height:9px;background:var(--orange);border-radius:2px;z-index:2;cursor:pointer;transition:transform .1s}
.dk-rev-tick:hover{transform:scaleY(1.5)}
.dk-rev-tip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:6px 8px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);font-size:9px;white-space:nowrap;z-index:10;max-width:280px;white-space:normal}
.dk-rev-tick:hover .dk-rev-tip{display:block}
.tip-ts{font-weight:700;color:var(--orange);margin-right:4px}
.tip-icon{margin-right:2px}
.tip-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--txt2);font-size:9px}
.tip-note.expanded{display:block;-webkit-line-clamp:unset}
.tip-more{font-size:8px;color:var(--blue);cursor:pointer;margin-left:2px}

/* ── Thread panel ───────────────────────────────────────────────────── */
.pv-thread{width:340px;border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;background:rgba(10,14,28,.4);transition:width .2s var(--ease),opacity .2s}
.pv-thread.collapsed{width:0;opacity:0;overflow:hidden;border:none}
.pv-thread-tab{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%);background:var(--glass);border:1px solid rgba(255,255,255,.08);border-right:none;border-radius:var(--r-md) 0 0 var(--r-md);padding:8px 4px;cursor:pointer;z-index:10;color:var(--txt3)}
.pv-thread-tab.visible{display:block}
.pv-thread-tab svg{width:18px;height:18px}
.th-hdr{padding:12px 14px 6px;flex-shrink:0}
.th-hdr-top{display:flex;align-items:center;justify-content:space-between}
.th-title{font-size:13px;font-weight:700;color:var(--txt)}
.th-close{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;display:flex;align-items:center}
.th-close svg{width:16px;height:16px}

/* ── Staff panel in thread ──────────────────────────────────────────── */
.th-staff-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:6px 14px;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;font-size:11px;font-weight:600;color:var(--txt3);font-family:var(--font)}
.th-staff-toggle svg{width:12px;height:12px;transition:transform .2s}
.th-staff-toggle.open svg{transform:rotate(180deg)}
.th-staff-panel{max-height:0;overflow:hidden;transition:max-height .2s var(--ease);padding:0 14px}
.th-staff-panel.open{max-height:200px;padding:8px 14px}
.th-staff-row{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:11px}
.th-staff-row svg{width:12px;height:12px;color:var(--txt4);flex-shrink:0}
.staff-label{color:var(--txt3);font-weight:600;flex:1}
.staff-val{color:var(--txt);font-weight:700;font-size:12px}
.staff-val a{color:var(--blue);text-decoration:none}

/* ── Assets dropdown ────────────────────────────────────────────────── */
.th-assets-toggle{display:flex;align-items:center;gap:6px;width:100%;padding:6px 14px;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;font-size:11px;font-weight:600;color:var(--txt3);font-family:var(--font)}
.th-assets-toggle svg{width:12px;height:12px}
.th-assets-chev{margin-left:auto;transition:transform .2s}
.th-assets-toggle.open .th-assets-chev{transform:rotate(180deg)}
.th-assets-cnt{font-size:9px;font-weight:700;background:rgba(41,151,255,.15);color:var(--blue);padding:1px 5px;border-radius:100px}
.th-assets-dropdown{max-height:0;overflow:hidden;transition:max-height .2s var(--ease)}
.th-assets-dropdown.open{max-height:220px;overflow-y:auto}
.th-assets-body{padding:6px 10px}

/* ── Thread messages ────────────────────────────────────────────────── */
.th-body{flex:1;overflow-y:auto;padding:8px 14px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}
.th-msg{display:flex;gap:8px;align-items:flex-start}
.th-msg.optimistic{opacity:.7}
.th-avatar{width:28px;height:28px;border-radius:50%;background:rgba(41,151,255,.12);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--blue);flex-shrink:0;overflow:hidden}
.th-avatar img{width:100%;height:100%;object-fit:cover}
.th-avatar.system{background:rgba(255,159,10,.12)}
.th-avatar.system img{width:18px;height:18px;object-fit:contain}
.th-msg-body{flex:1;min-width:0}
.th-msg-top{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.th-msg-name{font-size:11px;font-weight:700;color:var(--txt)}
.th-msg-badge{font-size:8px;font-weight:700;padding:1px 5px;border-radius:4px}
.th-msg-badge.status{background:rgba(255,159,10,.12);color:var(--orange)}
.th-msg-time{font-size:9px;color:var(--txt4);margin-left:auto}
.th-msg-text{font-size:12px;color:var(--txt2);line-height:1.5;word-break:break-word}
.th-msg-text.status-update{color:var(--txt3);font-style:italic;font-size:11px}

/* ── Thread input ───────────────────────────────────────────────────── */
.th-input{padding:8px 14px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.th-inp-wrap{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);padding:4px 8px}
.th-attach{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;display:flex;align-items:center}
.th-attach svg{width:16px;height:16px}
.th-textarea{flex:1;background:none;border:none;color:var(--txt);font-size:12px;resize:none;outline:none;font-family:var(--font);line-height:1.4;max-height:80px}
.th-textarea::placeholder{color:var(--txt4)}
.th-send{background:none;border:none;color:var(--txt3);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .15s}
.th-send svg{width:16px;height:16px}
.th-send.ready{color:var(--blue)}
.th-attach-popup{display:none;position:absolute;bottom:calc(100% + 4px);left:10px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:6px;z-index:20;box-shadow:var(--sh)}
.th-attach-popup.open{display:flex;flex-direction:column;gap:2px}
.th-attach-opt{display:flex;align-items:center;gap:8px;padding:8px 12px;background:none;border:none;color:var(--txt2);font-size:12px;font-weight:600;cursor:pointer;border-radius:var(--r-sm);transition:background .15s;font-family:var(--font)}
.th-attach-opt:hover{background:rgba(255,255,255,.06)}
.th-attach-opt svg{width:16px;height:16px}
.th-emoji-grid{display:none;position:absolute;bottom:calc(100% + 4px);left:10px;right:10px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:10px;z-index:20;box-shadow:var(--sh);max-height:200px;overflow-y:auto}
.th-emoji-grid.open{display:block}
.eg-cat{font-size:9px;font-weight:700;color:var(--txt4);text-transform:uppercase;letter-spacing:.04em;margin:6px 0 4px}
.eg-row{display:flex;flex-wrap:wrap;gap:2px}
.eg-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:2px;border-radius:4px;transition:background .1s}
.eg-btn:hover{background:rgba(255,255,255,.1)}

/* ── Custom modal system ────────────────────────────────────────────── */
.cb-modal-overlay{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.6);align-items:center;justify-content:center}
.cb-modal-overlay.open{display:flex}
.cb-modal{background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:24px;min-width:300px;max-width:400px;box-shadow:var(--sh)}
.cb-modal h3{font-size:16px;font-weight:700;color:var(--txt);margin:0 0 8px}
.cb-modal p{font-size:13px;color:var(--txt2);margin:0 0 16px;line-height:1.5}
.cb-modal-input{width:100%;padding:10px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);color:var(--txt);font-size:13px;outline:none;margin-bottom:16px;font-family:var(--font)}
.cb-modal-input:focus{border-color:rgba(41,151,255,.4)}
.cb-modal-actions{display:flex;gap:8px;justify-content:flex-end}

/* ── Star rating ────────────────────────────────────────────────────── */
.stars{display:flex;gap:4px;justify-content:center;margin:12px 0}
.star{background:none;border:none;cursor:pointer;padding:4px}
.star svg{width:28px;height:28px;fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.2);stroke-width:1.5;transition:fill .15s,transform .15s}
.star.active svg{fill:#ffd60a;stroke:#ffd60a}
.star:hover svg{transform:scale(1.15)}

/* ── Drawing canvas ─────────────────────────────────────────────────── */
.draw-canvas{position:absolute;inset:0;z-index:15;display:none;cursor:crosshair;touch-action:none}
.draw-canvas.active{display:block}
.draw-bar{display:none;position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:20;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:6px 10px;gap:4px;align-items:center;box-shadow:var(--sh)}
.draw-bar.active{display:flex}
.draw-tool{background:none;border:none;color:var(--txt3);cursor:pointer;padding:5px;border-radius:var(--r-sm);display:flex;align-items:center;transition:background .15s,color .15s}
.draw-tool svg{width:16px;height:16px}
.draw-tool.active{background:rgba(41,151,255,.15);color:var(--blue)}
.draw-tool:hover{background:rgba(255,255,255,.06)}
.draw-sep{width:1px;height:20px;background:rgba(255,255,255,.08);margin:0 2px}
.draw-colors{display:flex;gap:4px;align-items:center}
.draw-color{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .1s}
.draw-color.active{border-color:#fff;transform:scale(1.15)}
.draw-sizes{display:flex;gap:6px;align-items:center}
.draw-size{border-radius:50%;background:var(--txt3);cursor:pointer;border:2px solid transparent;transition:border-color .15s}
.draw-size.active{border-color:var(--blue)}

/* ── Recording indicator ────────────────────────────────────────────── */
.rec-indicator{display:none;position:absolute;top:12px;right:12px;z-index:25;padding:6px 12px;background:var(--glass-flat);border:1px solid rgba(255,59,48,.3);border-radius:var(--r-xl);align-items:center;gap:8px}
.rec-indicator.active{display:flex}
.rec-dot{width:8px;height:8px;border-radius:50%;background:#ff3b30;animation:recFlash 1s ease infinite}
.rec-label{font-size:10px;font-weight:700;color:#ff3b30;letter-spacing:.06em}
.rec-timer{font-size:10px;font-weight:700;color:var(--txt2);font-family:var(--mono)}
.rec-stop{background:none;border:none;color:#ff3b30;cursor:pointer;padding:2px;display:flex;align-items:center}
.rec-stop svg{width:16px;height:16px}
.rec-indicator.rec-warn{border-color:rgba(255,159,10,.4)}
.rec-indicator.rec-warn .rec-dot{background:var(--orange)}
.rec-indicator.rec-urgent{border-color:rgba(255,59,48,.6)}
.rec-indicator.rec-urgent .rec-dot{animation:recFlash .3s ease infinite}
.rec-transcript-live{font-size:9px;color:var(--txt3);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audio-wave{display:none;gap:2px;align-items:center}
.audio-wave span{width:2px;background:var(--blue);border-radius:1px;animation:wave .8s ease-in-out infinite}
.audio-wave span:nth-child(1){height:6px;animation-delay:0s}
.audio-wave span:nth-child(2){height:12px;animation-delay:.1s}
.audio-wave span:nth-child(3){height:8px;animation-delay:.2s}
.audio-wave span:nth-child(4){height:14px;animation-delay:.3s}
.audio-wave span:nth-child(5){height:6px;animation-delay:.4s}

/* ── Revision bubbles ───────────────────────────────────────────────── */
.rev-bubble{background:rgba(41,151,255,.04);border:1px solid rgba(41,151,255,.12);border-radius:var(--r-lg);padding:10px 12px;margin:6px 0}
.rev-bubble-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rev-bubble-tag{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px}
.rev-bubble-tag.draft-tag{background:rgba(255,159,10,.12);color:var(--orange)}
.rev-bubble-tag.confirmed{background:rgba(48,209,88,.12);color:#30d158}
.rev-bubble-count{font-size:9px;color:var(--txt4);margin-left:auto}
.rev-round-hdr{display:flex;align-items:center;gap:8px;padding:6px 0}
.rev-round-line{flex:1;height:1px;background:rgba(255,255,255,.06)}
.rev-round-num{font-size:9px;font-weight:700;color:var(--txt4)}
.rev-item{display:flex;align-items:flex-start;gap:6px;padding:4px 0;font-size:12px}
.rev-ts{font-size:10px;font-weight:700;color:var(--blue);cursor:pointer;min-width:36px}
.rev-ts.no-ts{color:var(--txt4);cursor:default}
.rev-sep{color:var(--txt4);font-size:10px}
.rev-note{color:var(--txt2);font-size:11px;line-height:1.4;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rev-note.expanded{-webkit-line-clamp:unset;display:block}
.rev-note-more{font-size:9px;color:var(--blue);cursor:pointer;margin-left:4px}
.rev-attach{font-size:11px}
.rev-delete{background:none;border:none;color:var(--txt4);cursor:pointer;font-size:14px;padding:0 2px;transition:color .15s}
.rev-delete:hover{color:var(--red)}
.rev-media{padding:4px 0 4px 42px}
.rev-media audio,
.rev-media video{max-width:100%;border-radius:var(--r-md)}
.rev-media img{max-width:100%;border-radius:var(--r-md)}
.rev-media-err{font-size:10px;color:var(--txt4)}
.rev-transcript-toggle{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--txt3);font-size:10px;font-weight:600;cursor:pointer;padding:2px 0;font-family:var(--font)}
.rev-transcript-toggle svg{width:10px;height:10px;transition:transform .2s}
.rev-transcript-toggle.expanded svg{transform:rotate(180deg)}
.rev-transcript-box{max-height:0;overflow:hidden;transition:max-height .2s var(--ease);font-size:10px;color:var(--txt3);line-height:1.5;padding:0 4px;white-space:pre-wrap}
.rev-transcript-box.open{max-height:300px;padding:4px}

/* ── Glass audio player ─────────────────────────────────────────────── */
.glass-audio{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);margin-top:4px}
.glass-audio+audio{display:none}
.glass-audio-play{background:none;border:none;color:var(--blue);cursor:pointer;padding:2px;display:flex;align-items:center}
.glass-audio-play svg{width:14px;height:14px}
.glass-audio-mid{flex:1}
.glass-audio-bar{height:3px;background:rgba(255,255,255,.1);border-radius:2px;cursor:pointer;position:relative}
.glass-audio-fill{height:100%;background:var(--blue);border-radius:2px;width:0;transition:width .1s}
.glass-audio-time{font-size:9px;font-weight:700;color:var(--txt3);min-width:28px;text-align:center;font-family:var(--mono)}

/* ── Right-click context menu ───────────────────────────────────────── */
.rv-ctx{display:none;position:absolute;z-index:100;background:var(--glass-flat);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:10px;min-width:240px;box-shadow:var(--sh);animation:rvCtxIn .15s var(--ease)}
.rv-ctx.open{display:block}
.rv-ctx-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rv-ctx-ts{font-size:12px;font-weight:700;color:var(--blue)}
.rv-ctx-close{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:16px}
.rv-ctx-modes{display:flex;gap:4px;margin-bottom:8px}
.rv-ctx-btn{display:flex;align-items:center;gap:3px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);padding:4px 8px;color:var(--txt3);font-size:9px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font)}
.rv-ctx-btn svg{width:12px;height:12px}
.rv-ctx-btn.active{background:rgba(41,151,255,.12);border-color:rgba(41,151,255,.25);color:var(--blue)}
.rv-ctx-input{display:none}
.rv-ctx-input.visible{display:block}
.rv-ctx-inp-wrap{display:flex;gap:6px;align-items:center}
.rv-ctx-textarea{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);color:var(--txt);font-size:11px;padding:6px 8px;resize:none;outline:none;font-family:var(--font)}
.rv-ctx-send{background:none;border:none;color:var(--blue);cursor:pointer;padding:4px;display:flex;align-items:center}
.rv-ctx-send svg{width:14px;height:14px}
.rv-pin{display:none;position:absolute;width:10px;height:10px;background:var(--blue);border-radius:50%;border:2px solid #fff;z-index:99;transform:translate(-50%,-50%);pointer-events:none}
.rv-pin.visible{display:block}

/* ── Revision review overlay ────────────────────────────────────────── */
.rev-review-overlay{display:none;position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.65);align-items:center;justify-content:center}
.rev-review-overlay.open{display:flex}
.rev-review-modal{background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);width:90%;max-width:540px;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--sh)}
.rev-review-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.rev-review-hdr h3{font-size:15px;font-weight:700;color:var(--txt);margin:0}
.rev-review-close{background:none;border:none;color:var(--txt3);font-size:20px;cursor:pointer}
.rev-review-body{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.rev-review-item{display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:var(--r-md);background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04)}
.rev-item-icon{font-size:14px;flex-shrink:0}
.rev-review-item-body{flex:1;min-width:0}
.rev-review-item-top{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.rev-review-item-note{font-size:11px;color:var(--txt2);line-height:1.4;white-space:pre-line}
.rev-review-item-del{background:none;border:none;color:var(--txt4);cursor:pointer;font-size:16px;transition:color .15s}
.rev-review-item-del:hover{color:var(--red)}
.rev-review-footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid rgba(255,255,255,.06)}
.rev-review-back{padding:8px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);color:var(--txt2);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
.rev-review-submit{padding:8px 20px;background:var(--blue);border:none;border-radius:var(--r-md);color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);transition:opacity .15s}
.rev-review-submit:disabled{opacity:.5;cursor:default}
.rev-review-empty{text-align:center;color:var(--txt4);padding:20px;font-size:12px}

/* ── Editor Revision Workbench ──────────────────────────────────────── */
.erw-overlay{display:none;position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.7);align-items:center;justify-content:center}
.erw-overlay.open{display:flex}
.erw-modal{background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);width:95%;max-width:1100px;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--sh)}
.erw-hdr{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.erw-hdr h3{font-size:15px;font-weight:700;color:var(--txt);margin:0}
.erw-round{font-size:11px;font-weight:700;color:var(--blue);background:rgba(41,151,255,.12);padding:3px 8px;border-radius:100px}
.erw-close{background:none;border:none;color:var(--txt3);font-size:20px;cursor:pointer;margin-left:auto}
.erw-body{display:flex;flex:1;overflow:hidden}
.erw-left{flex:1;display:flex;flex-direction:column;overflow:hidden}
.erw-right{width:300px;border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column}
.erw-player-wrap{position:relative;background:#000;aspect-ratio:16/9;flex-shrink:0}
.erw-video{width:100%;height:100%;object-fit:contain}
.erw-ver-toggle{position:absolute;top:8px;right:8px;display:flex;gap:4px;z-index:5}
.erw-ver-btn{padding:4px 10px;border-radius:100px;font-size:10px;font-weight:700;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.5);color:var(--txt3);cursor:pointer;font-family:var(--font)}
.erw-ver-btn.active{background:rgba(41,151,255,.2);border-color:rgba(41,151,255,.3);color:var(--blue)}
.erw-timeline{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
.erw-play{background:none;border:none;color:var(--txt);cursor:pointer;padding:2px;display:flex;align-items:center}
.erw-play svg{width:16px;height:16px}
.erw-time{font-size:10px;font-weight:700;color:var(--txt3);font-family:var(--mono)}
.erw-track-wrap{flex:1;position:relative;cursor:pointer;padding:6px 0}
.erw-track{height:3px;background:rgba(255,255,255,.1);border-radius:2px;position:relative}
.erw-fill{height:100%;background:var(--blue);border-radius:2px;width:0}
.erw-thumb{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid var(--blue);transform:translate(-50%,-50%);left:0}
.erw-ticks{position:absolute;inset:0}
.erw-tick{position:absolute;top:-2px;width:3px;height:7px;background:var(--orange);border-radius:1px;z-index:2;cursor:pointer}
.erw-tick-tip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:4px 8px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);font-size:9px;white-space:nowrap;z-index:10}
.erw-tick:hover .erw-tick-tip{display:block}
.erw-revisions{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px}
.erw-rev-item{display:flex;gap:8px;padding:6px 8px;border-radius:var(--r-md);cursor:pointer;transition:background .15s}
.erw-rev-item:hover,.erw-rev-item.active{background:rgba(41,151,255,.08)}
.erw-rev-ts{font-size:10px;font-weight:700;color:var(--blue);min-width:36px}
.erw-rev-body{flex:1}
.erw-rev-note{font-size:11px;color:var(--txt2);line-height:1.3}
.erw-rev-media{margin-top:4px}
.erw-rev-media video,.erw-rev-media img{max-width:100%;max-height:120px;border-radius:var(--r-md)}
.erw-check-hdr{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px;font-weight:700;color:var(--txt)}
.erw-check-hdr svg{width:16px;height:16px;color:var(--blue)}
.erw-check-progress{margin-left:auto;font-size:11px;color:var(--txt3)}
.erw-checklist{flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.erw-check-item{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:var(--r-md);cursor:pointer;transition:background .15s}
.erw-check-item:hover{background:rgba(255,255,255,.03)}
.erw-check-box{width:20px;height:20px;border:2px solid rgba(255,255,255,.15);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.erw-check-box svg{width:14px;height:14px;opacity:0;transition:opacity .15s}
.erw-check-item.checked .erw-check-box{background:rgba(48,209,88,.2);border-color:#30d158}
.erw-check-item.checked .erw-check-box svg{opacity:1;color:#30d158}
.erw-check-ts{font-size:10px;font-weight:700;color:var(--blue)}
.erw-check-note{font-size:11px;color:var(--txt2)}
.erw-check-footer{padding:12px;border-top:1px solid rgba(255,255,255,.04)}
.erw-submit-btn{width:100%;padding:10px;background:var(--blue);border:none;border-radius:var(--r-md);color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font)}
.erw-submit-btn:disabled{opacity:.4;cursor:default}

/* ── Webcam + Screen PIP ────────────────────────────────────────────── */
.cam-pip{display:none;position:absolute;bottom:16px;right:16px;width:140px;height:105px;border-radius:var(--r-lg);overflow:hidden;z-index:20;border:2px solid rgba(41,151,255,.3);box-shadow:0 4px 16px rgba(0,0,0,.5)}
.cam-pip.active{display:block}
.cam-pip video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.screen-pip{display:none;position:absolute;bottom:16px;left:16px;width:200px;height:120px;border-radius:var(--r-lg);overflow:hidden;z-index:20;border:2px solid rgba(191,90,242,.3);box-shadow:0 4px 16px rgba(0,0,0,.5)}
.screen-pip.active{display:block}
.screen-pip video{width:100%;height:100%;object-fit:contain;background:#000}

/* ── Approve overlay ────────────────────────────────────────────────── */
.approve-overlay{display:none;position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.8);align-items:center;justify-content:center}
.approve-overlay.active{display:flex}
.approve-card{text-align:center;padding:40px}
.approve-ring{position:relative;width:120px;height:120px;margin:0 auto 20px}
.approve-ring svg{width:120px;height:120px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:4}
.ring-fill{fill:none;stroke:var(--blue);stroke-width:4;stroke-dasharray:339.292;stroke-dashoffset:339.292;stroke-linecap:round;transition:stroke-dashoffset 2s}
.ring-fill.animate{stroke-dashoffset:0}
.approve-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
.approve-icon svg{width:36px;height:36px;color:var(--txt3);transition:color .3s}
.approve-icon.done svg{color:#30d158;animation:approveCheckPop .4s var(--ease)}
.approve-status{font-size:16px;font-weight:700;color:var(--txt);margin-bottom:6px}
.approve-step{font-size:12px;color:var(--txt3);margin-bottom:16px}
.approve-bar{width:200px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;margin:0 auto;overflow:hidden}
.approve-bar-fill{height:100%;background:var(--blue);border-radius:2px;width:0;transition:width .5s var(--ease)}
.approve-card.done .approve-status{color:#30d158}

/* ── Status transition banner ───────────────────────────────────────── */
.pv-status-transition{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;background:rgba(0,0,0,.6);opacity:0;transition:opacity .3s var(--ease)}
.pv-status-transition.active{opacity:1}
.pv-st-card{text-align:center;padding:24px 32px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);box-shadow:var(--sh)}
.pv-st-row{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:8px}
.pv-st-from{font-size:13px;font-weight:700;color:var(--txt3)}
.pv-st-to{font-size:13px;font-weight:700;color:var(--blue)}
.pv-st-sub{font-size:11px;color:var(--txt3);margin-bottom:10px}
.pv-st-check svg{animation:approveCheckPop .4s var(--ease)}

/* ── Mobile landscape prompt ────────────────────────────────────────── */
.mob-landscape-prompt{display:none;position:fixed;bottom:0;left:0;right:0;z-index:600;padding:20px;text-align:center;background:var(--glass-flat);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -8px 32px rgba(0,0,0,.4)}
.mob-landscape-prompt svg{width:40px;height:40px;color:var(--blue);margin-bottom:8px}
.mob-landscape-prompt h3{font-size:15px;font-weight:700;color:var(--txt);margin:0 0 4px}
.mob-landscape-prompt p{font-size:12px;color:var(--txt3);margin:0 0 12px}
.mlp-skip{padding:8px 20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);color:var(--txt2);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
body.dock-open .mob-landscape-prompt{display:block}

/* ── Page-specific keyframes ────────────────────────────────────────── */
@keyframes cardDismiss{to{transform:scale(.8) translateY(20px);opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes checkPop{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes recFlash{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes wave{0%,100%{height:4px}50%{height:var(--h,12px)}}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
@keyframes approveIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ringDraw{from{stroke-dashoffset:339.292}to{stroke-dashoffset:0}}
@keyframes approveCheckPop{0%{transform:translate(-50%,-50%) scale(0)}50%{transform:translate(-50%,-50%) scale(1.3)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes approvePulse{0%,100%{box-shadow:0 0 0 0 rgba(48,209,88,.3)}50%{box-shadow:0 0 20px 4px rgba(48,209,88,.15)}}
@keyframes approveShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes reviewPulse{0%,100%{border-color:rgba(41,151,255,.12)}50%{border-color:rgba(41,151,255,.35)}}
@keyframes rvCtxIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rotateHint{0%{transform:rotate(0)}10%{transform:rotate(-10deg)}20%{transform:rotate(10deg)}30%{transform:rotate(0)}100%{transform:rotate(0)}}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media(max-width:900px){
  .pv-thread{width:280px}
  .pv-bar-center{display:none}
  .erw-right{width:240px}
}
@media(max-width:600px){
  .page-head{padding:12px 16px 0}
  .hdr{flex-direction:column;align-items:flex-start;gap:10px}
  .hdr-right{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .search input{width:120px}
  .tp-stage-dots{display:flex}
  .kanban,.tp-kanban{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .kanban .col,.tp-col{flex:0 0 82vw;scroll-snap-align:start}
  .pv-shell{flex-direction:column}
  .pv-thread{width:100%;height:40vh;border-left:none;border-top:1px solid rgba(255,255,255,.06)}
  .pv-thread.collapsed{height:0}
  .erw-body{flex-direction:column}
  .erw-right{width:100%;border-left:none;border-top:1px solid rgba(255,255,255,.06)}
}
@media(max-width:480px){
  .density,.search{display:none}
  .card{aspect-ratio:4/5}
  .pv-title{max-width:120px;font-size:13px}
  .dock-bubble{padding:0 8px 8px}
}


/* ═══ ADMIN.HTML ═══ */

/* ── Page-specific: keyframes not in design system ── */
@keyframes dropGlow{0%{opacity:1}100%{opacity:0}}
@keyframes trashPulse{0%{opacity:1}100%{opacity:0}}

/* ── Shell overrides (admin needs full-height, no max-width) ── */
.shell-head{max-width:none;width:auto;animation:none}

/* ── Toolbar overrides (admin search is flex container) ── */
.toolbar{gap:12px;margin-bottom:16px;padding:0}
.search-box{display:flex;align-items:center;gap:8px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:100px;padding:7px 14px;min-width:200px;box-shadow:var(--sh);transition:border-color .15s var(--ease)}
.search-box:focus-within{border-color:rgba(41,151,255,.35)}
.search-box svg{width:14px;height:14px;color:var(--txt4);flex-shrink:0}
.search-box input{background:transparent;border:none;outline:none;color:var(--txt);font-size:12px;font-family:var(--font);width:100%}
.search-box input::placeholder{color:var(--txt4)}
.btn-new{padding:8px 18px;border:none;border-radius:100px;font-size:12px;font-weight:600;color:#fff;background:var(--blue);cursor:pointer;display:flex;align-items:center;gap:6px;transition:transform .12s var(--ease-q);font-family:var(--font);box-shadow:0 4px 16px rgba(41,151,255,.2),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-new:hover{transform:translateY(-1px)}.btn-new:active{transform:scale(.96)}
.btn-new svg{width:14px;height:14px}

/* ── Kanban overrides (admin-specific drag/drop) ── */
.kanban{gap:14px;overflow-y:hidden}
.kanban::-webkit-scrollbar{height:6px}
.kanban::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.col{max-width:320px;border-radius:var(--r-2xl);contain:layout paint;animation:colIn .25s var(--ease) backwards}
.col.drag-over{border-color:var(--blue);position:relative}
.col.drag-over::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 12px rgba(41,151,255,.4);animation:dropGlow .6s ease infinite;pointer-events:none}
.col-head{padding:14px 16px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.06)}
.col-color{width:10px;height:10px;border-radius:50%}
.col-cnt{border:1px solid rgba(255,255,255,.1);font-size:11px;font-weight:700;color:var(--txt2);min-width:24px;height:22px;display:flex;align-items:center;justify-content:center}
.col-del,.p-del{background:none;border:none;color:var(--txt4);font-size:11px;cursor:pointer;padding:2px 6px;border-radius:6px;opacity:0;transition:opacity 80ms;font-family:var(--font)}
.col-head:hover .col-del,.person:hover .p-del{opacity:1}
.col-del:hover,.p-del:hover{color:var(--red);background:rgba(192,57,43,.12)}
.p-del{position:absolute;top:4px;right:4px;font-size:10px;padding:1px 5px}
.col-body{padding:8px;min-height:60px;gap:0}
.col-body::-webkit-scrollbar{width:4px}
.col-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* ── Team scores strip ── */
.team-scores{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.ts-pill{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:100px;font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.ts-val{font-variant-numeric:tabular-nums}
.ts-a{color:var(--green);border-color:rgba(126,203,161,.2)}.ts-b{color:var(--blue);border-color:rgba(41,151,255,.2)}.ts-c{color:var(--orange);border-color:rgba(255,159,10,.2)}.ts-d{color:var(--red);border-color:rgba(192,57,43,.2)}.ts-f{color:var(--txt4);border-color:rgba(255,255,255,.06)}

/* ── Person card overrides (admin drag-drop) ── */
.person{position:relative;background:rgba(10,14,28,.4);border:1px solid rgba(255,255,255,.08);border-top-color:rgba(255,255,255,.12);border-radius:14px;margin-bottom:6px;transition:transform .12s var(--ease-q),border-color 80ms;user-select:none;animation:fadeUp .2s var(--ease) backwards;will-change:transform}
.person:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.person:active{cursor:grabbing;transform:scale(.97);transition:.08s}
.p-avatar{width:36px;height:36px;font-size:13px;font-weight:700;overflow:hidden}
.p-avatar.editor-av{background:var(--green)}.p-avatar.client-av{background:var(--blue)}.p-avatar.trial-av{background:var(--orange)}.p-avatar.admin-av{background:var(--purple)}.p-avatar.owner-av{background:var(--gold)}
.p-meta{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-tag{padding:2px 7px;letter-spacing:.3px}
.tag-client{background:rgba(41,151,255,.15)}
.tag-editor{background:rgba(126,203,161,.15);color:var(--green)}
.tag-trial{background:rgba(255,159,10,.15)}
.tag-admin{background:rgba(191,90,242,.15)}
.tag-owner{background:rgba(255,214,10,.15)}

/* ── Editor score mini-row ── */
.p-scores{display:flex;gap:4px;margin-top:4px}
.p-sc{font-size:9px;font-weight:600;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.04);color:var(--txt3);font-variant-numeric:tabular-nums}
.p-sc.good{color:var(--green)}.p-sc.ok{color:var(--blue)}.p-sc.mid{color:var(--orange)}.p-sc.bad{color:var(--red)}

/* ── Empty col ── */
.col-empty{text-align:center;padding:24px 12px;color:var(--txt4);font-size:12px;font-weight:500}

/* ── New team input ── */
.new-team-input{display:none;padding:8px 14px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:14px;box-shadow:var(--sh);margin-left:auto}
.new-team-input.visible{display:flex;align-items:center;gap:8px}
.nti-field{background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:7px 12px;color:var(--txt);font-size:13px;font-family:var(--font);outline:none;width:180px}
.nti-field:focus{border-color:rgba(41,151,255,.4)}
.nti-save{padding:7px 14px;border:none;border-radius:8px;background:var(--blue);color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
.nti-cancel{padding:7px 14px;border:none;border-radius:8px;background:rgba(255,255,255,.06);color:var(--txt3);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}


/* ── Trash zone (unique component) ── */
.trash-zone{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);display:flex;align-items:center;gap:10px;padding:16px 32px;background:rgba(192,57,43,.12);border:2px dashed rgba(192,57,43,.4);border-radius:20px;font-size:14px;font-weight:600;color:var(--red);transition:transform .25s var(--ease);z-index:100;will-change:transform}
.trash-zone svg{width:22px;height:22px}
.trash-zone.visible{transform:translateX(-50%) translateY(0)}
.trash-zone.hover{background:rgba(192,57,43,.25);border-color:var(--red);position:relative}
.trash-zone.hover::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 16px rgba(192,57,43,.5);animation:trashPulse .8s ease infinite;pointer-events:none}

/* ── Modal overrides ── */
.modal-bg{background:rgba(0,0,0,.8);z-index:200}
.modal{background:rgba(10,14,28,.88);max-width:380px;box-shadow:0 24px 80px rgba(0,0,0,.5);animation:fadeUp .2s var(--ease)}
.modal h3{font-size:18px;font-weight:700;margin-bottom:8px}
.modal p{font-size:14px;color:var(--txt2);margin-bottom:24px;line-height:1.5}
.modal-btn{border-radius:12px;font-size:13px;transition:transform .1s}
.modal-btn:active{transform:scale(.96)}
.modal-cancel{background:rgba(255,255,255,.08)}
.modal-delete{background:var(--red);color:#fff}

/* ── Toast overrides ── */
.toast{padding:12px 20px;background:rgba(10,14,28,.85);font-size:13px;transform:translateY(80px);z-index:100}
.toast.success{border-color:rgba(126,203,161,.3)}
.toast.error{border-color:rgba(192,57,43,.3)}

/* ── Pipeline status dot colors ── */
.ep-onboarding .col-color{background:var(--blue)!important}
.ep-new .col-color{background:#aaa!important}
.ep-core .col-color{background:var(--green)!important}
.ep-master .col-color{background:var(--green)!important}
.ep-inactive .col-color{background:var(--red)!important}


/* ── Editor pipeline card tags ── */
.ep-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ep-tag{padding:2px 7px;border-radius:100px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.ep-tag.tag-onboarding{background:rgba(41,151,255,.15);color:var(--blue)}
.ep-tag.tag-new{background:rgba(128,128,128,.15);color:#999}
.ep-tag.tag-core{background:rgba(126,203,161,.15);color:var(--green)}
.ep-tag.tag-master{background:rgba(126,203,161,.15);color:var(--green)}
.ep-tag.tag-inactive{background:rgba(192,57,43,.15);color:var(--red)}
.ep-tag.tag-team{background:rgba(191,90,242,.1);color:var(--purple)}
.ep-tag.tag-health{font-weight:800}
.ep-tag.health-a{background:rgba(126,203,161,.15);color:var(--green)}
.ep-tag.health-b{background:rgba(41,151,255,.12);color:var(--blue)}
.ep-tag.health-c{background:rgba(255,159,10,.12);color:var(--orange)}
.ep-tag.health-d{background:rgba(192,57,43,.1);color:var(--red)}
.ep-tag.health-f{background:rgba(255,255,255,.04);color:var(--txt4)}

/* ── Trial/Client/Role pipeline dot colors ── */
.tp-loggedin .col-color{background:var(--blue)!important}
.tp-blueprint .col-color{background:var(--orange)!important}
.tp-requested .col-color{background:var(--orange)!important}
.tp-approved .col-color{background:var(--green)!important}
.tp-expired .col-color{background:var(--red)!important}
.cp-onboarding .col-color{background:var(--blue)!important}
.cp-new .col-color{background:#aaa!important}
.cp-active .col-color{background:var(--green)!important}
.cp-failed-payment .col-color{background:var(--orange)!important}
.cp-canceled .col-color{background:var(--red)!important}
.rp-trial .col-color{background:var(--orange)!important}
.rp-client .col-color{background:var(--blue)!important}
.rp-editor .col-color{background:var(--green)!important}
.rp-admin .col-color{background:var(--purple)!important}
.rp-owner .col-color{background:var(--gold)!important}
.rp-expired .col-color{background:var(--txt4)!important}
.tag-expired{background:rgba(255,255,255,.06);color:var(--txt4)}

/* ── Tab panel overrides ── */
.tab-panel{display:none;flex:1;min-height:0;overflow:hidden;flex-direction:column;position:static;inset:auto;padding:0}
.tab-panel.active{display:flex;animation:none}


/* ── Reports tab ── */
.rpt-wrap{flex:1;overflow-y:auto;padding:0 28px 20px;display:flex;flex-direction:column;gap:24px}
.rpt-wrap::-webkit-scrollbar{width:4px}
.rpt-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:4px}
.rpt-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.rpt-grid{grid-template-columns:1fr}}
.rpt-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);padding:20px;box-shadow:var(--sh)}
.rpt-card h3{font-size:14px;font-weight:700;margin-bottom:12px;color:var(--txt2)}
.rpt-hero{text-align:center;padding:20px 0}
.rpt-hero-score{font-size:56px;font-weight:800;line-height:1}
.rpt-hero-grade{display:inline-block;padding:4px 14px;border-radius:100px;font-size:14px;font-weight:700;margin-top:8px}
.rpt-hero-label{font-size:12px;color:var(--txt3);margin-top:6px}
.rpt-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rpt-bar-label{font-size:11px;font-weight:600;color:var(--txt3);width:80px;flex-shrink:0}
.rpt-bar-track{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.rpt-bar-fill{height:100%;border-radius:3px;transform-origin:left;transition:transform .5s var(--ease);will-change:transform}
.rpt-bar-val{font-size:12px;font-weight:700;width:36px;text-align:right;flex-shrink:0}
.rpt-tbl{width:100%;border-collapse:separate;border-spacing:0}
.rpt-tbl th{font-size:10px;font-weight:700;color:var(--txt4);text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)}
.rpt-tbl td{font-size:12px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04)}
.rpt-tbl tr:hover td{background:rgba(255,255,255,.02)}
.rpt-grade{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;font-size:11px;font-weight:800}
.rpt-grade-a{background:rgba(126,203,161,.15);color:var(--green)}
.rpt-grade-b{background:rgba(41,151,255,.15);color:var(--blue)}
.rpt-grade-c{background:rgba(255,159,10,.15);color:var(--orange)}
.rpt-grade-d{background:rgba(192,57,43,.15);color:var(--red)}
.rpt-grade-f{background:rgba(255,255,255,.06);color:var(--txt4)}
.rpt-stars{color:var(--gold);font-size:11px;letter-spacing:1px}
.rpt-stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.rpt-stat{flex:1;min-width:100px;text-align:center;padding:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md)}
.rpt-stat-val{font-size:24px;font-weight:800;line-height:1.2}
.rpt-stat-lbl{font-size:10px;color:var(--txt3);font-weight:600;text-transform:uppercase;margin-top:4px}
.rpt-team-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.rpt-tp{padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--txt3);transition:opacity 80ms var(--ease);font-family:var(--font)}
.rpt-tp:hover{border-color:rgba(255,255,255,.2);color:var(--txt2)}
.rpt-tp.active{background:linear-gradient(180deg,rgba(41,151,255,.22),rgba(41,151,255,.1));border-color:var(--blue);color:var(--blue)}


/* ── Health/Performance tab ── */
.perf-wrap{flex:1;overflow-y:auto;padding:0 28px 20px;display:flex;flex-direction:column;gap:24px}
.perf-wrap::-webkit-scrollbar{width:4px}
.perf-wrap::-webkit-scrollbar-track{background:transparent}
.perf-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:4px}
.perf-section-title{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
.perf-lb{width:100%;border-collapse:separate;border-spacing:0 4px}
.perf-lb th{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--txt4);text-align:left;padding:4px 10px}
.perf-lb th:nth-child(n+4){text-align:center}
.perf-row{background:var(--glass);border-radius:var(--r-md)}
.perf-row:hover{background:rgba(255,255,255,.05)}
.perf-row td{padding:8px 10px;font-size:12px;font-weight:500}
.perf-row td:first-child{border-radius:var(--r-md) 0 0 var(--r-md);width:36px;text-align:center;font-weight:700}
.perf-row td:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
.perf-row td:nth-child(n+4){text-align:center;font-weight:700}

/* ── Pipelines hub tab ── */
.pl-section{padding:0 28px 32px;flex-shrink:0}
.pl-section-head{display:flex;align-items:center;gap:12px;padding:16px 0 12px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:16px}
.pl-section-title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.pl-section-sub{font-size:11px;color:var(--txt3);margin-left:2px}
.pl-badge{padding:3px 10px;border-radius:100px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.pl-badge-action{background:rgba(41,151,255,.12);color:var(--blue);border:1px solid rgba(41,151,255,.25)}
.pl-badge-auto{background:rgba(255,255,255,.05);color:var(--txt3);border:1px solid rgba(255,255,255,.08)}
.pl-kanban{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:4px 0 12px;-webkit-overflow-scrolling:touch;min-height:200px}
.pl-kanban::-webkit-scrollbar{height:5px}
.pl-kanban::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.pl-kanban.view-only .col{opacity:.82}
.pl-kanban.view-only .person{cursor:default!important}
.pl-kanban.view-only .person[draggable]{cursor:default}
.pl-scroll-wrap{flex:1;overflow-y:auto;min-height:0}
.pl-scroll-wrap::-webkit-scrollbar{width:4px}
.pl-scroll-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:3px}

/* ── Responsive ── */
@media(max-width:768px){.col{min-width:240px}.shell-head{padding:16px 16px 0}.kanban{padding:0 16px 20px}}
@media(max-width:480px){
  .shell-head h1{font-size:22px}
  .kanban{flex-direction:column;overflow-x:hidden;gap:8px;padding:0 10px 20px}
  .col{min-width:0!important;flex:none!important;width:100%;border-radius:var(--r-lg)}
  .col-body{max-height:350px}
  .sub-tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .sub-tab{white-space:nowrap;flex-shrink:0}
  .card{border-radius:16px;margin-bottom:8px}
  .page-body{padding:0 10px 16px}
  input,textarea,select{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ═══ INDEX.HTML ═══ */
/* ═══ Shell-only components — not in design-system.css ═══ */

@keyframes slideIn{from{opacity:0;transform:translate3d(-8px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* Shell — full viewport, islands float over content */

/* ═══ Left Glass Nav ═══ */
.left-nav{position:fixed;top:50%;left:8px;z-index:99;
  display:flex;flex-direction:column;gap:4px;padding:8px 6px;
  border-radius:var(--r-xl);background:rgba(18,18,22,.6);border:1px solid rgba(255,255,255,.05);
  border-right-color:rgba(255,255,255,.08);
  box-shadow:2px 0 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
  width:42px;overflow:visible;
  transform:translateY(-50%) translateX(-34px);opacity:.25;
  transition:transform .3s var(--ease),opacity .3s var(--ease);will-change:transform,opacity}
.left-nav:hover{transform:translateY(-50%) translateX(0);opacity:1}
.shell:hover .left-nav{transform:translateY(-50%) translateX(-20px);opacity:.45}
.ln-logo{display:block;width:22px;height:22px;margin:0 auto 2px;opacity:.7;transition:opacity .15s;pointer-events:none}
.left-nav:hover .ln-logo{opacity:1}
.left-nav .ln-btn{width:30px;height:30px;border-radius:var(--r-md);border:none;cursor:pointer;
  background:transparent;color:var(--txt3);display:flex;align-items:center;justify-content:center;
  transition:opacity .06s;position:relative;contain:layout style}
.left-nav .ln-btn:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.left-nav .ln-btn.active{background:rgba(255,255,255,.06);color:var(--txt)}
.left-nav .ln-btn.active::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:2px;height:12px;border-radius:1px;background:var(--blue);opacity:.6}
.left-nav .ln-btn svg{width:15px;height:15px;stroke-width:1.6;flex-shrink:0}
.left-nav .ln-sep{width:18px;height:1px;background:rgba(255,255,255,.06);margin:2px auto}
.ln-label{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--txt2);
  white-space:nowrap;user-select:none;pointer-events:none;
  opacity:0;transition:opacity .12s;
  text-shadow:0 1px 4px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.5)}
.left-nav .ln-btn:hover .ln-label{opacity:1}
.ln-badge{position:absolute;top:-2px;right:-2px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;
  background:var(--blue);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(41,151,255,.35)}
.ln-badge.zero{display:none}

/* ═══ Bottom Glass Island ═══ */
.bottom-island{position:fixed;bottom:8px;left:0;right:0;z-index:100;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
  transform:translateY(16px);opacity:.3;
  transition:transform .3s var(--ease),opacity .3s var(--ease);will-change:transform,opacity}
.bottom-island:hover{transform:translateY(0);opacity:1}
.shell:hover .bottom-island{transform:translateY(8px);opacity:.5}
.bottom-island-inner{pointer-events:auto;display:flex;align-items:center;gap:4px;padding:6px 10px;
  border-radius:var(--r-xl);background:rgba(18,18,22,.6);border:1px solid rgba(255,255,255,.05);
  border-top-color:rgba(255,255,255,.08);
  box-shadow:0 -2px 16px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04)}
.bottom-island-inner .bi-btn{width:30px;height:30px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.04);cursor:pointer;
  background:transparent;color:var(--txt3);display:flex;align-items:center;justify-content:center;
  transition:transform .06s,opacity .06s;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}
.bi-avatar{width:26px;height:26px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);transition:transform .1s}
.bi-avatar:hover{transform:scale(1.08);border-color:rgba(255,255,255,.2)}
.bi-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bi-badge{position:absolute;top:-2px;right:-2px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;
  background:#c0392b;color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(22,22,26,.75)}
.bi-badge:empty,.bi-badge.zero{display:none}

/* ═══ Chat Popup ═══ */
.chat-popup{
  position:fixed;bottom:58px;left:50%;
  transform:translateX(-50%) translateY(10px) scale(.96);
  width:320px;max-height:460px;z-index:101;
  display:flex;flex-direction:column;border-radius:var(--r-xl);
  background:rgba(16,16,20,.92);border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,255,255,.13);
  box-shadow:0 8px 48px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;pointer-events:none;overflow:hidden;
  transition:transform .22s var(--ease),opacity .18s ease;
  will-change:transform,opacity}
.chat-popup.open{transform:translateX(-50%) translateY(0) scale(1);opacity:1;pointer-events:auto}
.chat-popup-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 9px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.chat-popup-hdr h4{font-size:13px;font-weight:600;color:var(--txt);margin:0}
.chat-popup-expand{font-size:10px;font-weight:600;color:var(--blue);cursor:pointer;padding:3px 8px;border-radius:var(--r-sm);border:none;background:rgba(41,151,255,.12)}
.chat-popup-list{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:1px;min-height:0}
.chat-popup-dm{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-md);cursor:pointer}
.chat-popup-dm:hover{background:rgba(255,255,255,.05)}
.chat-popup-dm.active{background:rgba(41,151,255,.1)}
.chat-popup-dm-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,rgba(41,151,255,.3),rgba(41,151,255,.15));
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.chat-popup-dm-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.chat-popup-dm-info{flex:1;min-width:0}
.chat-popup-dm-name{font-size:11px;font-weight:600;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-popup-dm-preview{font-size:10px;color:var(--txt4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-popup-dm-badge{min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--red,#c0392b);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center}
.chat-popup-dm-badge:empty{display:none}
.chat-popup-thread{display:none;flex-direction:column;flex:1;min-height:0}
.chat-popup-thread.active{display:flex}
.chat-popup-thread-hdr{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.chat-popup-back{width:22px;height:22px;border-radius:var(--r-sm);border:none;background:rgba(255,255,255,.06);color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .1s}
.chat-popup-back:hover{opacity:.7}
.chat-popup-back svg{width:13px;height:13px}
.chat-popup-msgs{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:5px}
.chat-popup-msg{max-width:82%;padding:7px 11px;border-radius:13px;font-size:11px;line-height:1.4;color:var(--txt);word-break:break-word}
.chat-popup-msg.sent{align-self:flex-end;background:rgba(41,151,255,.22);border-bottom-right-radius:4px}
.chat-popup-msg.recv{align-self:flex-start;background:rgba(255,255,255,.07);border-bottom-left-radius:4px}
.chat-popup-input-row{display:flex;align-items:center;gap:7px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.chat-popup-input-row input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);
  padding:7px 10px;font-size:11px;color:var(--txt);font-family:var(--font);outline:none}
.chat-popup-input-row input:focus{border-color:rgba(41,151,255,.4)}
.chat-popup-input-row input::placeholder{color:var(--txt4)}
.chat-popup-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 .1s,opacity .15s;flex-shrink:0}
.chat-popup-send:hover{transform:scale(1.1)}
.chat-popup-send:disabled{opacity:.3;cursor:default;transform:none}
.chat-popup-send svg{width:13px;height:13px}

/* ═══ Notifications Popup ═══ */
.notif-popup{
  position:fixed;bottom:58px;left:50%;
  transform:translateX(-50%) translateY(10px) scale(.96);
  width:320px;max-height:400px;z-index:101;
  display:flex;flex-direction:column;border-radius:var(--r-xl);
  background:rgba(16,16,20,.92);border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,255,255,.13);
  box-shadow:0 8px 48px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;pointer-events:none;overflow:hidden;
  transition:transform .22s var(--ease),opacity .18s ease;
  will-change:transform,opacity}
.notif-popup.open{transform:translateX(-50%) translateY(0) scale(1);opacity:1;pointer-events:auto}
.notif-popup-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 9px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.notif-popup-hdr h4{font-size:13px;font-weight:600;color:var(--txt);margin:0}
.notif-popup-list{flex:1;overflow-y:auto;padding:6px}
.notif-popup-item{display:flex;align-items:flex-start;gap:9px;padding:9px;border-radius:var(--r-md);cursor:pointer}
.notif-popup-item:hover{background:rgba(255,255,255,.04)}
.notif-popup-item.unread{background:rgba(41,151,255,.06)}
.notif-popup-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px}
.notif-popup-icon.approval{background:rgba(126,203,161,.15);color:var(--green)}
.notif-popup-icon.alert{background:rgba(192,57,43,.15);color:var(--red)}
.notif-popup-icon.update{background:rgba(41,151,255,.15);color:var(--blue)}
.notif-popup-text{flex:1;min-width:0}
.notif-popup-title{font-size:11px;font-weight:600;color:var(--txt);line-height:1.3}
.notif-popup-meta{font-size:10px;color:var(--txt4);margin-top:2px}
.notif-popup-empty{padding:28px;text-align:center;color:var(--txt4);font-size:11px}

/* Main content — iframe transitions */
.main iframe{width:100%;flex:1;min-height:0;height:0;border:none;background:transparent;opacity:1;transition:opacity .06s ease-out;-webkit-overflow-scrolling:touch}
.main iframe.transitioning{opacity:0}

/* Mobile bar role visibility (shell-specific, extends common.css role gates) */
.staff-mob{display:none}
.client-mob{display:flex}
body[data-role="admin"] .staff-mob,body[data-role="owner"] .staff-mob,body[data-role="editor"] .staff-mob{display:flex}
body[data-role="admin"] .client-mob,body[data-role="owner"] .client-mob,body[data-role="editor"] .client-mob{display:none}

/* ════════════════════════════════════════════
   CINEMATIC WELCOME + UI TOUR
   ════════════════════════════════════════════ */

@keyframes wFadeIn  {from{opacity:0}to{opacity:1}}
@keyframes wSlideUp {from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes wGlowPulse{0%,100%{opacity:.4}50%{opacity:.8}}
@keyframes wLetterIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes wScanLine{from{transform:translateY(-100%)}to{transform:translateY(100vh)}}
@keyframes wCardIn  {from{opacity:0;transform:translate3d(0,32px,0) scale(.96)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes wDotIn   {from{transform:scale(0)}to{transform:scale(1)}}

.wstage{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:#000;pointer-events:none;opacity:0;will-change:opacity}
.wstage.active{pointer-events:auto;animation:wFadeIn .5s ease forwards}
.wstage.out{animation:wFadeIn .4s ease reverse forwards}

.ws-orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform,opacity}
.ws-orb.a{width:600px;height:600px;top:-100px;left:-100px;
  background:radial-gradient(circle,rgba(41,151,255,.12) 0%,transparent 60%);
  animation:wGlowPulse 3s ease-in-out infinite}
.ws-orb.b{width:500px;height:500px;bottom:-80px;right:-80px;
  background:radial-gradient(circle,rgba(160,80,240,.08) 0%,transparent 60%);
  animation:wGlowPulse 4s ease-in-out infinite .8s}
.ws-scan{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.06}
.ws-scan::after{content:'';position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  animation:wScanLine 2.5s cubic-bezier(.4,0,.6,1) .3s both}

.ws-content{position:relative;z-index:1;text-align:center;padding:0 40px}
.ws-greeting{font-size:clamp(14px,1.5vw,16px);font-weight:600;letter-spacing:4px;
  text-transform:uppercase;color:var(--blue);margin-bottom:16px;opacity:0;
  animation:wSlideUp .6s var(--ease) .4s forwards}
.ws-name{font-size:clamp(52px,8vw,96px);font-weight:700;letter-spacing:-.04em;
  line-height:1;color:#fff;display:flex;justify-content:center;flex-wrap:wrap;gap:0 .12em;
  margin-bottom:24px}
.ws-char{display:inline-block;opacity:0;will-change:transform,opacity}
.ws-sub{font-size:clamp(15px,1.8vw,19px);color:var(--txt2);max-width:520px;margin:0 auto;
  line-height:1.5;opacity:0;animation:wSlideUp .7s var(--ease) 1.6s forwards}
.ws-logo{width:140px;height:auto;margin:0 auto 40px;opacity:0;
  animation:wSlideUp .6s var(--ease) .2s forwards}
.ws-founders{display:flex;gap:28px;justify-content:center;margin-top:36px;opacity:0;
  animation:wSlideUp .6s var(--ease) 2.1s forwards}
.ws-founder{display:flex;flex-direction:column;align-items:center;gap:7px}
.ws-founder-photo{width:46px;height:46px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(41,151,255,.45);
  box-shadow:0 0 16px rgba(41,151,255,.25),0 0 32px rgba(41,151,255,.1),0 2px 12px rgba(0,0,0,.4)}
.ws-founder-photo img{width:100%;height:100%;object-fit:cover}
.ws-founder-name{font-size:10px;color:var(--txt3);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.ws-founder-title{font-size:9px;color:var(--txt4);letter-spacing:.3px}
.ws-cta-wrap{margin-top:40px;opacity:0;animation:wSlideUp .6s var(--ease) 2.5s forwards}
.ws-cta{padding:15px 52px;font-size:16px;font-weight:600;font-family:var(--font);
  color:#fff;background:var(--blue);border:none;border-radius:var(--radius-pill);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.15),0 6px 24px rgba(41,151,255,.4);
  transition:transform .12s var(--ease);will-change:transform}
.ws-cta:hover{transform:translate3d(0,-2px,0);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 32px rgba(41,151,255,.5)}
.ws-cta:active{transform:scale(.96)}
.ws-skip{margin-top:14px;font-size:12px;color:var(--txt4);cursor:pointer;letter-spacing:.3px;
  opacity:0;animation:wFadeIn .4s ease 3s forwards}
.ws-skip:hover{color:var(--txt2)}

/* ── UI Tour ── */
.wtour{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.88);
  pointer-events:none;opacity:0;will-change:opacity;transition:opacity .35s ease}
.wtour.active{pointer-events:auto;opacity:1}

.wtour-card{
  width:min(560px,92vw);
  background:rgba(14,14,18,.95);border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,255,255,.16);
  border-radius:var(--r-2xl);padding:36px 36px 28px;
  box-shadow:0 24px 80px rgba(0,0,0,.7),0 4px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;overflow:hidden;
  transform:translate3d(0,24px,0) scale(.97);opacity:0;
  transition:transform .35s var(--ease-spring),opacity .3s ease;
  will-change:transform,opacity}
.wtour-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:240px;height:1px;background:linear-gradient(90deg,transparent,rgba(41,151,255,.6),transparent)}
.wtour.active .wtour-card{transform:translate3d(0,0,0) scale(1);opacity:1}

.wtour-dots{display:flex;gap:5px;justify-content:center;margin-bottom:28px}
.wtour-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.12);
  transition:transform .2s var(--ease),opacity .2s}
.wtour-dot.active{background:var(--blue);transform:scale(1.4)}
.wtour-dot.done{background:rgba(41,151,255,.4)}

.wtour-step{display:none;animation:wSlideUp .28s var(--ease) both}
.wtour-step.active{display:block}

.wts-icon{width:56px;height:56px;border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;font-size:26px;
  background:rgba(41,151,255,.12);border:1px solid rgba(41,151,255,.2)}
.wts-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--blue);text-align:center;margin-bottom:8px}
.wts-title{font-size:22px;font-weight:700;letter-spacing:-.03em;text-align:center;margin-bottom:10px}
.wts-desc{font-size:14px;color:var(--txt2);text-align:center;line-height:1.6;max-width:440px;margin:0 auto 24px}

.wts-preview{display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg);padding:16px;margin-bottom:24px}
.wts-island-mock{display:flex;align-items:center;gap:6px;padding:7px 14px;
  background:rgba(18,18,22,.8);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-pill);font-size:11px;font-weight:600;color:var(--txt2)}
.wts-island-mock svg{width:14px;height:14px;flex-shrink:0;color:var(--blue)}
.wts-arrow{color:var(--txt4);font-size:16px}

.wtour-nav{display:flex;align-items:center;justify-content:space-between;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06)}
.wtour-back{padding:10px 22px;font-size:13px;font-weight:600;font-family:var(--font);
  background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--txt3);
  border-radius:var(--radius-pill);cursor:pointer;transition:opacity .1s}
.wtour-back:hover{opacity:.7}
.wtour-next{padding:11px 30px;font-size:14px;font-weight:600;font-family:var(--font);
  background:var(--blue);color:#fff;border:none;border-radius:var(--radius-pill);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 16px rgba(41,151,255,.35);
  transition:transform .1s var(--ease);will-change:transform}
.wtour-next:hover{transform:translate3d(0,-1px,0)}
.wtour-next:active{transform:scale(.96)}
.wtour-step-count{font-size:11px;font-weight:600;color:var(--txt4);letter-spacing:.5px}

@media(max-width:768px){
  .left-nav{display:none!important}
  .bottom-island{display:none!important}
    .chat-popup,.notif-popup{display:none!important}
}
/* ── Mobile: premium bottom tab bar ── */
@media(max-width:480px){
    .mob-bar{display:flex!important}
    .main iframe{height:100%;width:100%}
  .wtour-card{padding:24px 20px;width:94vw}
  .ws-content{padding:0 20px}
  .ws-name{font-size:clamp(36px,11vw,72px)}
  input,textarea,select{font-size:16px!important}
  html[data-device="iphone-di"] .mob-bar{
    margin-bottom:env(safe-area-inset-bottom,0px)
  }
}
/* Mobile bar */
.mob-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;
  height:var(--mob-bar-h);
  padding:0 4px;
  padding-bottom:0;
  margin-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(5,10,20,.97);
  border-top:1px solid rgba(255,255,255,.07);
  align-items:center;justify-content:space-around;
  box-shadow:0 -1px 0 rgba(255,255,255,.04),0 -8px 24px rgba(0,0,0,.4);
}
html[data-pwa="1"] .mob-bar{background:rgba(5,10,20,.99);border-top-color:rgba(255,255,255,.05)}
.mob-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 0 4px;flex:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;border:none;background:transparent;
  position:relative;touch-action:manipulation;min-height:44px;min-width:44px;
}
.mob-tab svg{width:22px;height:22px;color:var(--txt4);will-change:transform;transition:opacity .12s}
.mob-tab-label{font-size:9px;font-weight:600;color:var(--txt4);letter-spacing:.3px;transition:opacity .12s}
.mob-tab.active svg{color:var(--blue)}
.mob-tab.active .mob-tab-label{color:var(--blue)}
.mob-tab.active::before{
  content:'';position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:28px;height:2.5px;
  background:var(--blue);border-radius:0 0 3px 3px;
}
.mob-tab-plus{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--r-xl);
  background:linear-gradient(145deg,#2997ff,#0066d6);
  border:none;cursor:pointer;
  box-shadow:0 4px 20px rgba(41,151,255,.4),inset 0 1px 0 rgba(255,255,255,.25);
  margin-bottom:4px;
  transition:transform .15s var(--ease-spring),box-shadow .15s;
  -webkit-tap-highlight-color:transparent;flex-shrink:0;touch-action:manipulation;
}
.mob-tab-plus:active{transform:scale(.88);box-shadow:0 2px 10px rgba(41,151,255,.3)}
.mob-tab-plus svg{width:22px;height:22px;color:#fff}

/* ── Right Island (onboarding) ── */
.oa-island{position:fixed;top:50%;right:8px;z-index:99;
  display:flex;flex-direction:column;gap:4px;padding:8px 6px;
  border-radius:var(--r-xl);background:rgba(18,18,22,.6);border:1px solid rgba(255,255,255,.05);
  border-left-color:rgba(255,255,255,.08);
  box-shadow:-2px 0 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
  width:44px;overflow:visible;
  transform:translateY(-50%) translateX(52px);opacity:0;pointer-events:none;
  transition:transform .3s var(--ease),opacity .3s var(--ease);will-change:transform,opacity}
.oa-island.visible{opacity:.25;transform:translateY(-50%) translateX(36px);pointer-events:auto}
.shell:hover .oa-island.visible{transform:translateY(-50%) translateX(20px);opacity:.5}
.oa-island.visible:hover{transform:translateY(-50%) translateX(0);opacity:1}
.oa-island-hdr{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--blue);text-align:center;padding:2px 0 4px;white-space:nowrap;
  writing-mode:vertical-lr;transform:rotate(180deg);align-self:center;line-height:1}
.oa-sep{width:18px;height:1px;background:rgba(255,255,255,.06);margin:2px auto}
.oa-step{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:5px 4px;border-radius:var(--r-md);cursor:pointer;position:relative;
  transition:opacity .06s;contain:layout style}
.oa-step:hover{background:rgba(255,255,255,.06)}
.oa-step.locked{opacity:.3;cursor:default;pointer-events:none}
.oa-step.locked:hover{background:none}
.oa-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;flex-shrink:0;will-change:transform}
.oa-step.done .oa-dot{background:var(--green);color:#fff}
.oa-step.current .oa-dot{background:var(--blue);color:#fff;
  box-shadow:0 0 10px rgba(41,151,255,.5);animation:oaPulse 2s infinite}
.oa-step.locked .oa-dot{background:rgba(255,255,255,.06);color:var(--txt4)}
.oa-step-num{font-size:7px;font-weight:700;color:var(--txt4);letter-spacing:.3px}
.oa-step.current .oa-step-num{color:var(--blue)}
.oa-step.done .oa-step-num{color:var(--green)}
.oa-flabel{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--txt2);
  white-space:nowrap;pointer-events:none;user-select:none;
  opacity:0;transition:opacity .12s;
  text-shadow:0 1px 4px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.5)}
.oa-step:hover .oa-flabel{opacity:1}
.oa-prog{font-size:8px;font-weight:700;color:var(--txt4);text-align:center;padding:4px 0 2px;white-space:nowrap}
.oa-prog span{color:var(--blue)}
@keyframes oaPulse{0%,100%{box-shadow:0 0 10px rgba(41,151,255,.4)}50%{box-shadow:0 0 18px rgba(41,151,255,.65)}}
@media(max-width:768px){.oa-island{display:none!important}}

/* ── Nav Event Bubble ── */
.nav-event{display:none;margin:0 4px 4px;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.06);background:var(--glass);box-shadow:var(--sh);
  transition:transform .12s var(--ease),opacity .12s;will-change:transform,opacity}
.nav-event.visible{display:block;animation:fadeUp .3s var(--ease-q)}
.nav-event:hover{transform:translateY(-2px);opacity:.9}
.nav-event:active{transform:scale(.97);transition-duration:.06s}
.nav-event-inner{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.nav-event-tag{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:2px 6px;border-radius:4px;display:inline-flex;align-self:flex-start}
.nav-event-tag.offer{background:rgba(126,203,161,.15);color:var(--green)}
.nav-event-tag.update{background:rgba(41,151,255,.15);color:var(--blue)}
.nav-event-tag.call{background:rgba(255,159,10,.15);color:var(--orange)}
.nav-event-title{font-size:12px;font-weight:600;color:var(--txt);line-height:1.3}
.nav-event-meta{font-size:10px;color:var(--txt3)}
.nav-event-timer{font-size:14px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.nav-event-close{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.06);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.nav-event:hover .nav-event-close{opacity:1}
.nav-event-close svg{width:10px;height:10px;color:var(--txt3)}
.nav-event{position:relative}

/* Nav lock for trials */
.ln-btn.tw-locked,.mob-tab.tw-locked{opacity:.25!important;pointer-events:none!important;position:relative}


/* ═══ ACCOUNT.HTML ═══ */

/* ── Shell overrides (base from common.css) ── */
.shell-head { animation: none }
.pg-title { margin-bottom: 4px; background: linear-gradient(135deg,#fff,var(--txt3)) }

/* ── Section overrides ── */
.section { transition: border-color 80ms }
.section:hover { border-color: rgba(41,151,255,.2); transform: none }
.sec-head svg { width: 20px; height: 20px; color: var(--blue) }
.sec-head h2  { font-size: 18px; font-weight: 600 }
.sec-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px }
.sec-count { font-size: 12px; color: var(--txt3); font-weight: 500 }
.sec-save  { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06) }

/* Profile header */
.profile-row { display: flex; align-items: center; gap: 20px }
.avatar      { width: 72px; height: 72px; border-radius: 50%; background: var(--purple); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #fff; box-shadow: var(--sh); flex-shrink: 0; overflow: hidden }
.avatar img  { width: 100%; height: 100%; object-fit: cover; border-radius: 50% }
.p-info h3   { font-size: 20px; font-weight: 600; margin-bottom: 4px }
.p-info p    { font-size: 13px; color: var(--txt2); margin-bottom: 6px }

.status-badge    { display: inline-flex; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-left: 6px }
.status-core     { background: rgba(41,151,255,.1);  color: var(--blue) }
.status-master   { background: rgba(191,90,242,.1);  color: var(--purple) }
.status-new      { background: rgba(126,203,161,.1); color: var(--green) }
.status-training { background: rgba(255,159,10,.1);  color: var(--orange) }

.avatar-edit { position: relative; cursor: pointer }
.avatar-edit .cam-btn { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; background: var(--blue); border: 2.5px solid var(--bg-el); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .2s var(--ease); z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.4); will-change: transform }
.avatar-edit:hover .cam-btn { transform: scale(1.15); background: var(--blue-hv) }
.avatar-edit .cam-btn svg { width: 12px; height: 12px; color: #fff }

/* Health hero */
.health-hero       { text-align: center; padding: 24px 20px; background: var(--glass); border: var(--glass-b); border-top-color: var(--glass-bt); border-radius: var(--r-xl); box-shadow: var(--sh); margin-bottom: 16px }
.health-hero-score { font-size: 52px; font-weight: 800; line-height: 1 }
.health-hero-grade { display: inline-block; padding: 4px 14px; border-radius: var(--radius-pill); font-size: 16px; font-weight: 800; color: #fff; margin-top: 6px }
.health-hero-label { font-size: 12px; color: var(--txt3); margin-top: 6px }

/* Stats grid */
.stats-grid     { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px }
.stat-card      { background: var(--glass); border: var(--glass-b); border-top-color: var(--glass-bt); border-radius: var(--r-xl); box-shadow: var(--sh); padding: 16px 18px; text-align: center }
.stat-card-val  { font-size: 24px; font-weight: 800; line-height: 1.2 }
.stat-card-label { font-size: 10px; font-weight: 600; color: var(--txt3); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px }

/* Project table */
.proj-table { width: 100%; border-collapse: collapse; background: var(--glass); border: var(--glass-b); border-top-color: var(--glass-bt); border-radius: var(--r-xl); box-shadow: var(--sh); overflow: hidden }
.proj-table th { padding: 10px 14px; font-size: 10px; font-weight: 600; color: var(--txt3); text-transform: uppercase; letter-spacing: .05em; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06) }
.proj-table td { padding: 10px 14px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.03) }
.proj-table tr:hover td { background: rgba(255,255,255,.02) }

/* Form */
.form-row        { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-bottom: 16px }
.form-row.single { grid-template-columns: 1fr }
.fg       { display: flex; flex-direction: column; gap: 6px }
.fg label { font-size: 11px; font-weight: 600; color: var(--txt2); text-transform: uppercase; letter-spacing: .5px }
.fg input, .fg select { padding: 12px 14px; background: rgba(10,14,28,.45); border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.12); border-radius: var(--r-md); color: var(--txt); font-size: 14px; font-family: inherit; outline: none; box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 .5px 0 rgba(255,255,255,.1); transition: border-color 80ms var(--ease) }
.fg input:focus, .fg select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(41,151,255,.1) }
.fg input::placeholder { color: var(--txt3) }

.color-row  { display: flex; gap: 14px; align-items: center; margin-top: 8px }
.color-item { display: flex; align-items: center; gap: 8px }
.color-item input[type=color] { width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer; background: none }
.color-item span { font-size: 11px; color: var(--txt3) }

/* Buttons */
.btn-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 32px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; background: var(--blue); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 16px rgba(41,151,255,.3); transition: transform .15s var(--ease-q); will-change: transform }
.btn-save:hover   { transform: translateY(-1px) }
.btn-save:active  { transform: scale(.96) }
.btn-save:disabled { opacity: .5; cursor: not-allowed; transform: none }

/* Toast override (centered pill, different from common glass toast) */
.toast { bottom: 32px; left: 50%; right: auto; transform: translateX(-50%) translateY(80px); padding: 12px 24px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; color: #fff; background: var(--green); border: none; border-top-color: transparent }
.toast.visible { transform: translateX(-50%) translateY(0) }
.toast.success { border-color: transparent; color: #fff }
.toast.error   { background: var(--red); border-color: transparent; color: #fff }

/* Role-view FAB */
.rv-fab   { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 100; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(10,14,28,.8); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--txt3); box-shadow: 0 4px 16px rgba(0,0,0,.4); transition: all .2s var(--ease) }
.rv-fab:hover { border-color: rgba(255,255,255,.2); color: var(--txt); transform: translateY(-50%) scale(1.1) }
.rv-panel { position: fixed; right: 12px; top: 50%; transform: translateY(-50%) scale(.9); transform-origin: right center; z-index: 101; background: rgba(10,14,28,.9); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px 0; box-shadow: 0 8px 32px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: all .15s var(--ease) }
.rv-panel.open { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1) }
.rv-label { font-size: 9px; color: var(--txt4); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; padding: 6px 14px 4px 10px; user-select: none }
.rv-btn   { border: none; background: transparent; color: var(--txt4); cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; font-size: 11px; font-weight: 600; font-family: var(--font); letter-spacing: .3px; text-transform: uppercase; transition: color .12s; white-space: nowrap; width: 100% }
.rv-btn:hover { color: var(--txt); background: rgba(255,255,255,.05) }
.rv-btn.active { color: var(--blue); background: rgba(41,151,255,.1) }
.rv-btn .rv-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0 }
.rv-btn .rv-dot.trial  { background: var(--orange) }
.rv-btn .rv-dot.client { background: var(--blue) }
.rv-btn .rv-dot.editor { background: var(--green) }
.rv-btn .rv-dot.admin  { background: var(--red) }
.rv-btn .rv-dot.owner  { background: var(--gold) }

@media (max-width: 700px) {
  .shell-head { padding: 16px 16px 0 }
  .shell-inner { padding: 16px 16px 60px }
  .stats-grid { grid-template-columns: repeat(2,1fr) }
  .po-tiers { grid-template-columns: 1fr }
  .profile-row { flex-direction: column; text-align: center }
  .proj-table { font-size: 11px }
  .proj-table th, .proj-table td { padding: 8px 10px }
  .rv-fab { top: auto; bottom: 90px; transform: translateY(0) }
  .rv-fab:hover { transform: scale(1.1) }
  .rv-panel { top: auto; bottom: 130px; transform: scale(.9); transform-origin: right bottom }
  .rv-panel.open { transform: scale(1) }
}
@media (max-width: 480px) {
  .pg-title { font-size: 26px }
  .stats-grid { grid-template-columns: 1fr }
}

@media(max-width:768px){
  html,body{overflow-x:hidden}
  .acc-wrap{padding:var(--s3) var(--s2)}
  .acc-sections{grid-template-columns:1fr}
  .acc-card{padding:var(--s3)}
  input,textarea,select{font-size:16px!important}
}
@media(max-width:480px){
  .acc-wrap{padding:var(--s2)}
}


/* ═══ BLUEPRINTS.HTML ═══ */

/* ── Shell overrides (base from common.css) ── */
.shell-head{text-align:center;padding:56px 40px 0;max-width:1100px;animation:none}
.shell-body{min-height:0;display:flex;flex-direction:column}
.shell-inner{max-width:1100px;padding:16px 40px 20px;flex:1;display:flex;flex-direction:column;min-height:0}
#qContainer{flex:1;display:flex;flex-direction:column;min-height:0}
.shell-inner .q-wrap.active{display:flex;flex-direction:column;flex:1;min-height:0}
.shell-foot{max-width:1100px;padding:12px 40px 24px}

.shell-head h1{font-size:clamp(30px,4.5vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1.05;margin-bottom:14px;color:var(--txt)}
.shell-head h1 .grad{background:linear-gradient(135deg,var(--blue),var(--blue-hv));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.shell-head p{font-size:22px;color:var(--txt2);margin-bottom:32px;font-weight:500}

/* Progress */
.prog{display:flex;gap:4px;margin:0 auto;padding:8px 16px;background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.15);border-radius:100px;max-width:fit-content;box-shadow:var(--sh)}
.prog-seg{width:28px;height:6px;background:rgba(255,255,255,.08);border-radius:3px;transition:opacity .2s var(--ease)}
.prog-seg.done{background:var(--blue)}.prog-seg.active{background:linear-gradient(90deg,var(--blue),var(--blue-hv));box-shadow:0 0 8px rgba(41,151,255,.3)}

/* Question */
.q-wrap{display:none;animation:fadeUp .3s var(--ease-q)}
.q-num{text-align:center;font-size:11px;color:var(--txt3);margin-bottom:8px;text-transform:uppercase;letter-spacing:3px;font-weight:600}
.q-title{font-size:40px;font-weight:700;text-align:center;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15;color:var(--txt)}
.q-sub{text-align:center;color:var(--txt2);font-size:18px;margin-bottom:28px;max-width:700px;margin-left:auto;margin-right:auto;line-height:1.5}

/* Live Preview */
.live-preview{display:flex;justify-content:center;align-items:center;min-height:80px;margin-bottom:20px;padding:20px;background:rgba(10,14,28,.52);border-radius:var(--r-2xl);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.16);box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 .5px 0 rgba(255,255,255,.12)}

/* Shared card styles */
.card-base{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.15);cursor:pointer;transition:transform .12s var(--ease-q);box-shadow:var(--sh);contain:layout paint;will-change:transform}
.card-base:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 .5px 0 rgba(255,255,255,.15)}
.card-base.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.1))}
.card-base:active{transform:scale(.96);transition-duration:.08s}

/* Options Grid */
.opts{display:grid;gap:14px}
.opts.c2{grid-template-columns:repeat(2,1fr)}.opts.c3{grid-template-columns:repeat(3,1fr)}.opts.c4{grid-template-columns:repeat(4,1fr)}
.opt-card{border-radius:var(--r-lg);padding:14px;text-align:center;position:relative;overflow:hidden}
.opt-prev{height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.4)}
.opt-prev video{width:100%;height:100%;object-fit:cover}
.opt-title{font-weight:600;font-size:13px;margin-bottom:2px;color:var(--txt)}
.opt-desc{font-size:11px;color:var(--txt3);line-height:1.3}

/* Format choice cards (Q2) */
.bp-fmt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:600px;margin:0 auto}
.bp-fmt{border-radius:var(--r-xl);padding:32px 24px;text-align:center;position:relative;overflow:hidden}
.bp-fmt:hover{transform:translateY(-4px)}
.bp-fmt.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.18),rgba(41,151,255,.08))}
.bp-fmt-icon{display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.bp-dev{background:var(--bg-sf);border:2px solid rgba(255,255,255,.12);border-radius:16px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.bp-dev::after{content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);border-radius:16px 16px 0 0;pointer-events:none}
.bp-dev.portrait{width:64px;height:110px}.bp-dev.landscape{width:140px;height:84px}
.bp-dev svg{width:28px;height:28px;opacity:.3}
.bp-fmt h3{font-weight:700;font-size:20px;margin-bottom:6px}
.bp-fmt .f-desc{font-size:13px;color:var(--txt3);line-height:1.4}
.bp-fmt .f-tag{display:inline-block;margin-top:10px;padding:5px 14px;background:rgba(255,255,255,.06);border-radius:100px;font-size:13px;font-weight:600;color:var(--txt2)}
.bp-fmt.selected .f-tag{background:rgba(41,151,255,.2);color:var(--blue)}

/* Ratio cards (Q8) */
.ratio-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;flex:1;min-height:0}
.ratio-card{border-radius:var(--r-xl);padding:36px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.ratio-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.4),inset 0 .5px 0 rgba(255,255,255,.15)}
.ratio-card.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.18),rgba(41,151,255,.08))}
.ratio-icon{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.08));border:2px solid rgba(41,151,255,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;transition:transform .3s var(--ease);will-change:transform}
.ratio-icon::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(41,151,255,.08);transition:transform .3s var(--ease);will-change:transform}
.ratio-card:hover .ratio-icon,.ratio-card.selected .ratio-icon{background:linear-gradient(135deg,var(--blue),var(--blue-dk));border-color:var(--blue);box-shadow:0 0 40px rgba(41,151,255,.4),0 0 80px rgba(41,151,255,.15)}
.ratio-card:hover .ratio-icon::after,.ratio-card.selected .ratio-icon::after{border-color:rgba(41,151,255,.4);inset:-14px;border-width:2px}
@keyframes r-orbit{0%{transform:rotate(0) scale(1)}25%{transform:rotate(90deg) scale(1.12)}50%{transform:rotate(180deg) scale(1)}75%{transform:rotate(270deg) scale(.92)}100%{transform:rotate(360deg) scale(1)}}
@keyframes r-radar{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.5}100%{transform:scale(1);opacity:1}}
@keyframes r-explode{0%{transform:scale(1) rotate(0)}20%{transform:scale(1.3) rotate(-10deg)}40%{transform:scale(.9) rotate(6deg)}55%{transform:scale(1.15) rotate(-4deg)}70%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes r-glow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes r-ring{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.ratio-icon svg{transition:transform .2s var(--ease);will-change:transform}
.ratio-card[data-value="Light"]:hover .ratio-icon svg,.ratio-card[data-value="Light"].selected .ratio-icon svg{animation:r-orbit 1.2s linear infinite}
.ratio-card[data-value="Medium"]:hover .ratio-icon svg,.ratio-card[data-value="Medium"].selected .ratio-icon svg{animation:r-radar .6s var(--ease) infinite}
.ratio-card[data-value="Heavy"]:hover .ratio-icon svg,.ratio-card[data-value="Heavy"].selected .ratio-icon svg{animation:r-explode 1s var(--ease) infinite}
.ratio-card:hover .ratio-icon,.ratio-card.selected .ratio-icon{animation:r-glow 2s var(--ease) infinite}
.ratio-card:hover .ratio-icon::after,.ratio-card.selected .ratio-icon::after{animation:r-ring 2s var(--ease) infinite}
.ratio-title{font-weight:700;font-size:28px;color:var(--txt);letter-spacing:-.01em}.ratio-desc{font-size:17px;color:var(--txt3);line-height:1.5}

/* Deadspace row (step 4) */
.hs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;flex:1;min-height:0}
.hs-card{border-radius:var(--r-xl);padding:36px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.hs-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.4),inset 0 .5px 0 rgba(255,255,255,.15)}
.hs-card.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.18),rgba(41,151,255,.08))}
.hs-icon{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.08));border:2px solid rgba(41,151,255,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;transition:transform .1s var(--ease);will-change:transform}
.hs-icon::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(41,151,255,.08);transition:transform .1s var(--ease);will-change:transform}
.hs-card:hover .hs-icon,.hs-card.selected .hs-icon{background:linear-gradient(135deg,var(--blue),var(--blue-dk));border-color:var(--blue);box-shadow:0 0 40px rgba(41,151,255,.4),0 0 80px rgba(41,151,255,.15)}
.hs-card:hover .hs-icon::after,.hs-card.selected .hs-icon::after{border-color:rgba(41,151,255,.4);inset:-14px;border-width:2px}
@keyframes hs-bolt{0%{transform:scale(1) rotate(0)}15%{transform:scale(1.25) rotate(-8deg)}30%{transform:scale(.95) rotate(4deg)}45%{transform:scale(1.15) rotate(-3deg)}60%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes hs-wave{0%{transform:translateX(0) scaleX(1)}20%{transform:translateX(3px) scaleX(1.1)}40%{transform:translateX(-3px) scaleX(.9)}60%{transform:translateX(2px) scaleX(1.05)}80%{transform:translateX(-1px)}100%{transform:translateX(0) scaleX(1)}}
@keyframes hs-breathe{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:1}}
@keyframes hs-glow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes hs-ring{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.hs-icon svg{transition:transform .2s var(--ease);will-change:transform}
.hs-card[data-value="Tight"]:hover .hs-icon svg,.hs-card[data-value="Tight"].selected .hs-icon svg{animation:hs-bolt .6s var(--ease) infinite}
.hs-card[data-value="Natural"]:hover .hs-icon svg,.hs-card[data-value="Natural"].selected .hs-icon svg{animation:hs-wave .7s var(--ease) infinite}
.hs-card[data-value="Raw"]:hover .hs-icon svg,.hs-card[data-value="Raw"].selected .hs-icon svg{animation:hs-breathe 2s var(--ease) infinite}
.hs-card:hover .hs-icon,.hs-card.selected .hs-icon{animation:hs-glow 2s var(--ease) infinite}
.hs-card:hover .hs-icon::after,.hs-card.selected .hs-icon::after{animation:hs-ring 2s var(--ease) infinite}
.hs-title{font-weight:700;font-size:28px;color:var(--txt);letter-spacing:-.01em}.hs-desc{font-size:17px;color:var(--txt3);line-height:1.5}

/* 9:16 B-Roll video cards */
.v9-grid{display:flex;gap:10px;flex:1;min-height:0;justify-content:center;padding:0 4px 8px}
.v9-grid::-webkit-scrollbar{height:0}
.v9-card{position:relative;flex:1 1 0%;min-width:0;height:100%;border-radius:var(--r-xl);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:transform .25s var(--ease);will-change:transform}
.v9-card:hover{transform:scale(1.04);border-color:rgba(255,255,255,.25);box-shadow:0 0 24px rgba(41,151,255,.2);z-index:2}
.v9-card.selected{border-color:var(--border-sel);box-shadow:0 0 28px rgba(41,151,255,.3)}
.v9-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v9-card .v9-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.15) 35%,transparent 55%);z-index:1}
.v9-card .v9-info{position:absolute;bottom:0;left:0;right:0;padding:10px;z-index:2}
.v9-card .v9-title{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v9-card .v9-desc{font-size:10px;color:rgba(255,255,255,.55);max-height:0;overflow:hidden;opacity:0;transition:max-height .3s var(--ease),opacity .3s var(--ease);margin-top:0}
.v9-card:hover .v9-desc{max-height:40px;opacity:1;margin-top:3px}
.v9-card .v9-check{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--blue);display:none;align-items:center;justify-content:center;z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.v9-card.selected .v9-check{display:flex}

/* Video Grid */
.vid-grid{display:flex;gap:12px;justify-content:center;flex:1;min-height:0;padding:0 4px 0;overflow:hidden}
.vid-grid::-webkit-scrollbar{height:0}
.vid-grid.c3{justify-content:center}
.vid-card{border-radius:var(--r-lg);overflow:hidden;position:relative;flex:1 1 0%;min-width:0;height:100%}
.vid-card.selected{border-color:var(--border-sel)}
.vid-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vid-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.7) 35%,rgba(0,0,0,.2) 70%,transparent 100%);z-index:1;pointer-events:none}
.vid-name{position:absolute;bottom:0;left:0;right:0;padding:12px 8px 14px;text-align:center;font-weight:700;font-size:13px;color:#fff;z-index:2;text-shadow:0 2px 6px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,.5)}
.vid-name div:last-child{font-weight:500;color:rgba(255,255,255,.85)}

/* Placement */
.place-grid{display:flex;gap:10px;width:100%;justify-content:center;max-width:900px;margin:0 auto;flex:1;min-height:0}
.place-card{border-radius:var(--r-lg);padding:12px 8px 10px;text-align:center;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;flex:1 1 0%;min-width:0}
.place-card:hover{transform:translateY(-4px)}
.place-icon{width:100%;aspect-ratio:9/16;max-height:180px;margin-bottom:8px;border-radius:10px;background:rgba(0,0,0,.4);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.16)}
.place-icon .frame{position:absolute;inset:0;border:2px solid rgba(41,151,255,.35);border-radius:var(--r-md)}
.place-icon.fullscreen .broll{position:absolute;inset:4px;background:var(--blue);border-radius:8px}
.place-icon.halfscreen .speaker,.place-icon.halfscreentweaked .speaker,.place-icon.pip .speaker{position:absolute;background:linear-gradient(135deg,var(--bg-sf),var(--bg-el));display:flex;align-items:center;justify-content:center}
.place-icon.halfscreen .speaker::after,.place-icon.halfscreentweaked .speaker::after,.place-icon.pip .speaker::after{content:'';background:rgba(255,255,255,.2);border-radius:50%}
.place-icon.halfscreen .speaker{left:4px;top:4px;bottom:4px;width:48%;border-radius:var(--r-sm)}
.place-icon.halfscreen .speaker::after{width:24px;height:24px}
.place-icon.halfscreen .broll,.place-icon.halfscreentweaked .broll{position:absolute;right:4px;top:4px;bottom:4px;background:var(--blue);border-radius:var(--r-sm)}
.place-icon.halfscreen .broll{width:48%}.place-icon.halfscreentweaked .broll{width:50%}
.place-icon.filmmatte .broll{position:absolute;inset:4px;background:var(--blue);border-radius:var(--r-sm)}
.place-icon.filmmatte .matte{position:absolute;left:4px;right:4px;height:20%;background:rgba(255,214,10,.4);border-radius:4px}
.place-icon.filmmatte .matte.top{top:4px;border-radius:var(--r-sm) var(--r-sm) 0 0}
.place-icon.filmmatte .matte.bottom{bottom:4px;border-radius:0 0 var(--r-sm) var(--r-sm)}
.place-icon.halfscreentweaked .speaker{left:4px;top:15%;bottom:15%;width:45%;border-radius:var(--r-sm);border:2px solid var(--gold)}
.place-icon.halfscreentweaked .speaker::after{width:24px;height:24px}
.place-icon.letterbox .broll{position:absolute;left:4px;right:4px;top:25%;bottom:25%;background:var(--blue);border-radius:4px}
.place-icon.letterbox .bar{position:absolute;left:4px;right:4px;height:22%;background:#000}
.place-icon.letterbox .bar.top{top:4px}.place-icon.letterbox .bar.bottom{bottom:4px}
.place-icon.pip .broll{position:absolute;inset:4px;background:var(--blue);border-radius:var(--r-sm)}
.place-icon.pip .speaker{right:10px;bottom:10px;width:35%;height:30%;border-radius:8px;border:2px solid rgba(255,255,255,.3);z-index:2}
.place-icon.pip .speaker::after{width:16px;height:16px}
.place-title{font-weight:700;font-size:12px;margin-bottom:2px;position:relative;z-index:1;color:var(--txt);white-space:nowrap}
.place-desc{font-size:10px;color:var(--txt3);position:relative;z-index:1;line-height:1.3}
.place-icon,.place-title,.place-desc{position:relative;z-index:1}

/* Caption styles */
.style-bold{color:#fff;font-weight:700}
.style-outline{color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000}
.style-glow{color:#fff;text-shadow:0 0 10px rgba(41,151,255,.8),0 0 20px rgba(41,151,255,.5),0 0 40px rgba(41,151,255,.3)}
.style-shadow{color:#fff;text-shadow:4px 4px 8px rgba(0,0,0,.9)}
.style-highlight span{background:var(--blue);color:#fff;padding:6px 14px;display:inline-block;border-radius:8px}
.style-boxed span{background:rgba(0,0,0,.85);color:#fff;padding:8px 16px;display:inline-block;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.18)}

/* Font scroll row */
.font-scroll{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;flex:1;min-height:0;align-items:stretch}
.font-scroll::-webkit-scrollbar{display:none}
.font-scroll .opt-card{min-width:120px;max-width:160px;flex-shrink:0;scroll-snap-align:start;justify-content:center;display:flex;flex-direction:column}

/* Font style previews — system font only, differentiated by weight/spacing/transform */
.font-montserrat{font-family:var(--font);font-weight:900;letter-spacing:-.02em}
.font-bebas{font-family:var(--font);font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.font-poppins{font-family:var(--font);font-weight:800;letter-spacing:.01em}
.font-system{font-family:var(--font);font-weight:700;text-transform:uppercase}
.font-oswald{font-family:var(--font);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-stretch:condensed}
.font-raleway{font-family:var(--font);font-weight:300;letter-spacing:.08em;text-transform:uppercase}
.font-roboto{font-family:var(--font);font-weight:700;letter-spacing:-.01em;font-stretch:condensed}
.font-anton{font-family:var(--font);font-weight:900;letter-spacing:.1em;text-transform:uppercase}

/* Animations */
@keyframes capFade{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes capPop{0%{transform:scale(.4);opacity:0}50%{transform:scale(1.08)}70%{transform:scale(.97)}100%{transform:scale(1);opacity:1}}
@keyframes capWord{0%,100%{opacity:.25;transform:translateY(0)}15%{opacity:1;transform:translateY(-2px)}30%{opacity:.25;transform:translateY(0)}}
@keyframes capType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.anim-none{opacity:1}
.anim-fade{animation:capFade 2s var(--ease-q) infinite alternate}
.anim-pop{animation:capPop .8s var(--ease-spring) infinite}
.anim-word-by-word .word{display:inline-block;animation:capWord 1.2s var(--ease-q) infinite}
.anim-word-by-word .word:nth-child(2){animation-delay:.25s}
.anim-word-by-word .word:nth-child(3){animation-delay:.5s}
.anim-word-by-word .word:nth-child(4){animation-delay:.75s}
.anim-typewriter{position:relative;display:inline-block;white-space:nowrap;animation:capType 1.2s steps(18) infinite alternate;margin:0 auto}
.anim-typewriter::after{content:'';position:absolute;right:0;top:0;bottom:0;width:3px;background:var(--blue);animation:blink .8s step-end infinite}

/* Animation choice grid (Q17) */
.anim-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;width:100%;flex:1;min-height:0;align-items:stretch}
.anim-grid .opt-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 14px;border-radius:var(--r-xl)}
.anim-grid .opt-prev{flex:1;width:100%;min-height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;border-radius:var(--r-md);overflow:hidden;background:rgba(0,0,0,.4)}
.anim-grid .opt-title{font-weight:700;font-size:17px;margin-bottom:4px;color:var(--txt)}
.anim-grid .opt-desc{font-size:13px;color:var(--txt3);line-height:1.4}

/* Text input */
.text-input{width:100%;max-width:100%;margin:0 auto;display:block;background:rgba(10,14,28,.45);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.14);border-radius:var(--r-lg);padding:26px 32px;font-size:20px;font-weight:500;color:var(--txt);outline:none;transition:border-color 80ms var(--ease);box-shadow:var(--sh);font-family:var(--font)}
.text-input:focus{border-color:var(--border-sel);box-shadow:0 0 0 3px rgba(41,151,255,.1)}
.text-input::placeholder{color:var(--txt3)}

/* Nav buttons */
.nav-btns{display:flex;justify-content:center;gap:16px}
/* ── Button overrides (base from common.css) ── */
.btn{padding:14px 44px;contain:layout paint}
.btn-back{border-color:rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.15)}
.btn-back:hover{transform:translateY(-2px)}
.btn-next{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.15),0 4px 16px rgba(41,151,255,.3);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.btn-next:hover{box-shadow:0 16px 48px rgba(41,151,255,.25)}
.btn-next:disabled{opacity:.4}

/* vid-grid now standardized at c3 for all videoChoice steps */

.sound-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;flex:1;min-height:0}
.sound-card{border-radius:var(--r-xl);padding:36px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;position:relative}
.sound-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.4),inset 0 .5px 0 rgba(255,255,255,.15)}
.sound-card.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.18),rgba(41,151,255,.08))}
.sound-level{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.08));border:2px solid rgba(41,151,255,.25);display:flex;align-items:flex-end;justify-content:center;gap:4px;flex-shrink:0;padding:20px 16px 24px;position:relative;transition:transform .3s var(--ease);will-change:transform}
.sound-level::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(41,151,255,.08);transition:transform .3s var(--ease);will-change:transform}
.sound-card:hover .sound-level,.sound-card.selected .sound-level{background:linear-gradient(135deg,var(--blue),var(--blue-dk));border-color:var(--blue);box-shadow:0 0 40px rgba(41,151,255,.4),0 0 80px rgba(41,151,255,.15)}
.sound-card:hover .sound-level::after,.sound-card.selected .sound-level::after{border-color:rgba(41,151,255,.4);inset:-14px}
@keyframes snd-glow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes snd-ring{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.sound-card:hover .sound-level,.sound-card.selected .sound-level{animation:snd-glow 2s var(--ease) infinite}
.sound-card:hover .sound-level::after,.sound-card.selected .sound-level::after{animation:snd-ring 2s var(--ease) infinite}
.sl-bar{width:5px;height:var(--sl-mx,20px);background:var(--blue);border-radius:3px;opacity:.35;animation:slBounce var(--sl-spd,.6s) var(--ease) infinite alternate;animation-delay:var(--sl-del,0s);transform-origin:bottom;will-change:transform}
@keyframes slBounce{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
.sound-card.selected .sl-bar{opacity:1}
.sound-card audio{display:none}

/* Music waveform cards */
.music-grid{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;flex:1;min-height:0;align-items:stretch}
.music-grid::-webkit-scrollbar{display:none}
.music-card{border-radius:var(--r-xl);padding:18px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-width:140px;max-width:160px;flex-shrink:0;scroll-snap-align:start}
.music-card:hover{transform:translateY(-4px)}
.music-card.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.15),rgba(41,151,255,.08))}
.music-wave{width:64px;height:36px;display:flex;align-items:flex-end;justify-content:center;gap:2px;flex-shrink:0;padding:4px;border-radius:8px;background:rgba(41,151,255,.08);border:1px solid rgba(41,151,255,.12)}
.mw-bar{width:3px;height:var(--mw-mx,16px);border-radius:1.5px;background:var(--blue);opacity:.4;animation:mwBounce var(--mw-spd,.7s) var(--ease) infinite alternate;animation-delay:var(--mw-del,0s);transform-origin:bottom;will-change:transform}
@keyframes mwBounce{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
.music-card.selected .mw-bar{opacity:1}
.music-card.selected .music-wave{background:rgba(41,151,255,.15);border-color:rgba(41,151,255,.25)}
.music-card audio{display:none}

/* Phone mockup (caption position/size) */
.phone-wrap{display:flex;justify-content:center;align-items:center;gap:40px;flex:1;min-height:0}
.phone-mock{width:240px;height:426px;border-radius:32px;border:3px solid rgba(255,255,255,.15);background:rgba(0,0,0,.85);position:relative;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.5),inset 0 0 60px rgba(41,151,255,.03);flex-shrink:0}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:60px;height:14px;background:#000;border-radius:0 0 10px 10px;z-index:3;border:1px solid rgba(255,255,255,.05);border-top:none}
.phone-screen{position:absolute;inset:3px;border-radius:23px;overflow:hidden;background:linear-gradient(180deg,rgba(10,14,28,.9),rgba(5,8,18,.95))}
.phone-speaker{position:absolute;bottom:35%;left:50%;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.phone-speaker::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.1)}
.phone-caption{position:absolute;left:12px;right:12px;text-align:center;font-weight:700;font-size:14px;color:#fff;padding:6px 10px;border-radius:6px;transition:transform .3s var(--ease-spring),opacity .3s var(--ease-spring);text-shadow:0 1px 4px rgba(0,0,0,.8);background:rgba(41,151,255,.2);border:1px solid rgba(41,151,255,.3)}
.phone-caption.pos-top{top:28px}.phone-caption.pos-center{top:50%;transform:translateY(-50%)}.phone-caption.pos-bottom{bottom:20px}
.phone-caption.size-xs{font-size:7px;padding:2px 4px}.phone-caption.size-small{font-size:9px;padding:3px 6px}.phone-caption.size-medium{font-size:14px}.phone-caption.size-large{font-size:18px;padding:8px 12px}.phone-caption.size-xl{font-size:22px;padding:10px 14px;letter-spacing:-.02em}

/* Size bubbles */
.size-bubbles{display:flex;gap:14px;justify-content:center;align-items:flex-end}
.size-bubble{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .15s var(--ease)}
.size-bubble:hover{transform:translateY(-3px)}
.sb-circle{border-radius:50%;background:rgba(10,14,28,.52);border:2px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--txt);transition:transform .2s var(--ease);box-shadow:var(--sh);will-change:transform}
.size-bubble.selected .sb-circle{border-color:var(--blue);background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;box-shadow:0 0 20px rgba(41,151,255,.3)}
.sb-range{font-size:10px;color:var(--txt3)}
.pos-btns{display:flex;flex-direction:column;gap:10px}
.pos-btn{padding:12px 28px;border-radius:100px;font-size:14px;font-weight:600;cursor:pointer;transition:transform 80ms var(--ease);background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.1);color:var(--txt2);text-align:left;will-change:transform}
.pos-btn:hover{border-color:rgba(255,255,255,.2);color:#fff}.pos-btn.selected{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;border-color:var(--blue)}

/* Summary celebration */
.sum-done{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;animation:fadeUp .4s var(--ease-q)}
.sum-check{width:90px;height:90px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:28px;box-shadow:0 0 40px rgba(126,203,161,.3);animation:checkPop .5s var(--ease-spring)}
@keyframes checkPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.sum-btns{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;justify-content:center}
.sum-btn{padding:14px 32px;border-radius:100px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s var(--ease-q);border:none;font-family:var(--font)}
.sum-btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;box-shadow:0 4px 16px rgba(41,151,255,.3)}
.sum-btn-primary:hover{transform:translateY(-2px)}.sum-btn-secondary{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.1);color:var(--txt2)}
.sum-btn-secondary:hover{border-color:rgba(255,255,255,.2);color:#fff;transform:translateY(-2px)}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
.confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99;overflow:hidden}
.confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;animation:confettiFall var(--dur,2s) var(--ease) forwards;animation-delay:var(--del,0s);top:-10px}

@media(max-width:768px){
  .shell-head{padding:16px 20px 0}.shell-inner{padding:14px 20px 16px}.shell-foot{padding:10px 20px 16px}
  .shell-head h1{font-size:34px}.q-title{font-size:26px}
  .opts.c4,.opts.c3{grid-template-columns:repeat(2,1fr)}
  .vid-grid{justify-content:flex-start}
  .place-grid{flex-wrap:wrap}.hs-grid{grid-template-columns:1fr}
  .v9-grid{justify-content:flex-start}
  .sum-bento{grid-template-columns:repeat(4,1fr);grid-template-rows:auto}.sound-opts{grid-template-columns:1fr}
}
@media(max-width:480px){
  .v9-grid{justify-content:flex-start}.phone-mock{width:180px;height:320px;border-radius:22px}
  .shell-head{padding:12px 14px 0}.shell-inner{padding:10px 14px 16px}.shell-foot{padding:8px 14px 12px}
  .shell-head h1{font-size:26px}.q-title{font-size:20px}
  .opts.c4,.opts.c3,.opts.c5{grid-template-columns:repeat(2,1fr)}
  .sum-bento{grid-template-columns:repeat(2,1fr)}
  input,textarea,select{font-size:16px!important}
}
/* Summary list */
.sum-wrap{width:100%;flex:1;display:flex;flex-direction:column;align-items:center;min-height:0;overflow-y:auto;padding:0 8px}
.sum-list{width:100%;max-width:480px;display:flex;flex-direction:column;gap:6px}
.sum-name{text-align:center;font-size:22px;font-weight:800;color:var(--txt);margin-bottom:8px;letter-spacing:-.02em}
.sum-name span{color:var(--blue)}
.sum-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-lg);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.sum-row:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.sum-row .sr-ico{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);background:rgba(41,151,255,.08)}
.sum-row .sr-ico svg{width:16px;height:16px;stroke:var(--blue)}
.sum-row .sr-body{flex:1;min-width:0}
.sum-row .sr-lbl{font-size:11px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;font-weight:600;line-height:1}
.sum-row .sr-val{font-size:14px;font-weight:700;color:var(--txt);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* === Landing / Library / Modal === */
/* Landing — 50/50 split choice */
#landingView{height:100%;display:flex;flex-direction:column;overflow:hidden}
.land-head{flex-shrink:0;text-align:center;padding:56px 40px 0;max-width:1100px;width:100%;margin:0 auto}
.land-head h1{font-size:80px;font-weight:700;letter-spacing:-.04em;line-height:1.05;margin-bottom:14px;color:var(--txt)}
.land-head p{font-size:22px;color:var(--txt2);margin-bottom:0}
.land-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 40px 40px}
.land-split{display:flex;gap:32px;max-width:900px;width:100%;align-items:stretch}
.land-half{flex:1;border-radius:var(--r-2xl);background:var(--glass);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.16);box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 32px;gap:20px;cursor:pointer;transition:transform .25s var(--ease);min-height:300px;will-change:transform}
.land-half:hover{transform:translateY(-6px);border-color:rgba(41,151,255,.4);box-shadow:var(--sh-glow)}
.land-half:active{transform:scale(.97);transition-duration:.08s}
.lh-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.land-half:first-child .lh-icon{background:linear-gradient(135deg,var(--blue),var(--blue-dk))}
.land-half:last-child .lh-icon{background:linear-gradient(135deg,var(--green),#0a84ff)}
.lh-title{font-size:24px;font-weight:700;color:var(--txt);text-align:center}
.lh-sub{font-size:14px;color:var(--txt3);text-align:center;line-height:1.5;max-width:240px}
/* Library view */
#libraryView{height:100%;display:none;flex-direction:column;overflow:hidden}
.lib-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:24px 40px 0;max-width:1440px;width:100%;margin:0 auto}
.lib-head h2{font-size:36px;font-weight:700;color:var(--txt);letter-spacing:-.02em}
.lib-back{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);cursor:pointer;color:var(--txt2);font-size:13px;font-weight:600;transition:opacity 80ms}
.lib-back:hover{background:rgba(255,255,255,.1);color:var(--txt)}
.lib-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:20px 40px 40px;max-width:1440px;width:100%;margin:0 auto}
.lib-body::-webkit-scrollbar{width:0}
.lib-section{}
.lib-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--txt3);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.lib-label svg{width:14px;height:14px;stroke:var(--txt3)}
.lib-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;padding:0 0 8px}
/* Blueprint card — iPhone pipeline style */
.bp-lib-card{aspect-ratio:9/16;border-radius:24px;overflow:visible;position:relative;cursor:pointer;transition:transform .1s var(--ease);contain:layout paint;backface-visibility:hidden;will-change:transform}
.bp-lib-card::before{content:'';position:absolute;inset:-4px;background:var(--glass);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.15);border-radius:28px;z-index:-1;box-shadow:var(--sh),inset 0 -1px 0 rgba(0,0,0,.5);transition:border-color .1s var(--ease)}
.bp-lib-card::after{content:'';position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06) 30%,rgba(255,255,255,.02) 60%,transparent);border-radius:24px 24px 0 0;pointer-events:none;z-index:10}
.bp-lib-card:hover{transform:translateY(-2px);z-index:50}
.bp-lib-card:hover::before{border-color:rgba(41,151,255,.35)}
.bp-lib-card:active{transform:scale(.96)}
.blc-bg{position:absolute;inset:0;border-radius:24px;overflow:hidden}
.blc-bg video{width:100%;height:100%;object-fit:cover;transition:opacity .35s;transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.blc-darken{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.55) 30%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.85));border-radius:24px;z-index:1;pointer-events:none}
.bp-lib-card:hover .blc-darken{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.02) 30%,rgba(0,0,0,.02) 70%,rgba(0,0,0,.5))}
/* Island notch — iPhone 17 Pro style */
.blc-island{position:absolute;top:6px;left:50%;transform:translateX(-50%);min-width:56px;height:20px;padding:0 10px;background:#000;border-radius:12px;z-index:15;display:flex;align-items:center;justify-content:center;gap:5px;box-shadow:inset 0 1px 2px rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.5)}
.blc-island-dot{width:5px;height:5px;background:#12121f;border-radius:50%}
.blc-island-lbl{font-size:8px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.5px}
/* Tier badge — top right, T1/T2/T3, hover shows full Tier word */
.blc-tier{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:6px;font-size:9px;font-weight:800;z-index:12;letter-spacing:.5px;-webkit-cursor:default;transition:padding .12s var(--ease),min-width .12s var(--ease);overflow:hidden;white-space:nowrap}
.blc-tier .tier-full{display:inline;max-width:0;opacity:0;transition:max-width .15s var(--ease),opacity .12s;overflow:hidden;vertical-align:baseline}
.blc-tier:hover .tier-full{max-width:30px;opacity:1}
.tier-3{background:rgba(191,90,242,.35);color:#e0b0ff;border:1px solid rgba(191,90,242,.5)}
.tier-2{background:rgba(41,151,255,.35);color:#a8d8ff;border:1px solid rgba(41,151,255,.5)}
.tier-1{background:rgba(255,255,255,.14);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.2)}
/* Card bottom info */
.blc-info{position:absolute;bottom:0;left:0;right:0;padding:12px 14px 14px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);border-radius:0 0 24px 24px;z-index:7}
.blc-name{font-size:11px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.blc-type{font-size:10px;color:rgba(255,255,255,.55);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-empty{padding:20px;text-align:center;color:var(--txt3);font-size:13px;background:rgba(255,255,255,.03);border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.06)}
.wiz-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt2);transition:opacity 80ms;z-index:5}
.wiz-close:hover{background:rgba(255,255,255,.1);color:var(--txt)}
.bp-modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:40px}
.bp-modal-inner{width:100%;max-width:1440px;max-height:90vh;overflow-y:auto;background:var(--bg-el);border-radius:var(--r-2xl);border:1px solid rgba(255,255,255,.1);box-shadow:0 32px 100px rgba(0,0,0,.6);padding:32px}
.bp-modal-inner::-webkit-scrollbar{width:0}
.bpm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.bpm-title{font-size:26px;font-weight:800;color:var(--txt);letter-spacing:-.02em}
.bpm-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt2);transition:opacity 80ms}
.bpm-close:hover{background:rgba(255,255,255,.1);color:var(--txt)}
.bpm-body{display:flex;gap:20px;align-items:stretch}
.bpm-col{flex:1;display:flex;flex-direction:column;gap:6px;justify-content:center}
.bpm-center{flex:0 0 280px;display:flex;align-items:center;justify-content:center}
.bpm-preview{width:100%;aspect-ratio:9/16;border-radius:var(--r-lg);background:rgba(0,0,0,.4);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.bpm-fields{display:none}
.bpm-field{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.bf-ico{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(41,151,255,.08)}
.bf-ico svg{width:14px;height:14px;stroke:var(--blue)}
.bf-body{flex:1;min-width:0}
.bf-lbl{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.bf-val{font-size:13px;font-weight:700;color:var(--txt);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bpm-actions{display:flex;gap:12px;margin-top:20px;justify-content:center}
/* ── Tier Breakdown Section ── */
.tier-section{margin-top:32px;padding:0 0 32px}
.tier-section-title{font-size:22px;font-weight:800;color:var(--txt);margin-bottom:6px;letter-spacing:-.02em}
.tier-section-sub{font-size:13px;color:var(--txt3);margin-bottom:20px}
.tier-cards{display:flex;flex-direction:column;gap:24px}
.tier-row{display:flex;gap:16px;align-items:stretch}
.tier-row .tier-card{flex:0 0 340px;max-width:340px}
.tier-presets{flex:1;display:flex;gap:12px;overflow-x:auto;padding:4px 0;min-width:0;align-items:stretch}
.tier-presets::-webkit-scrollbar{display:none}
.tier-presets .bp-lib-card{flex:0 0 160px;min-width:160px}
.tier-card{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.08);border-top-color:rgba(255,255,255,.14);border-radius:var(--r-xl);padding:24px 20px;position:relative;overflow:hidden;cursor:pointer;transition:transform .15s var(--ease);box-shadow:var(--sh);will-change:transform}
.tier-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r-xl) var(--r-xl) 0 0}
.tier-card.tc-1::after{background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.05))}
.tier-card.tc-2::after{background:linear-gradient(90deg,var(--blue),rgba(41,151,255,.3))}
.tier-card.tc-3::after{background:linear-gradient(90deg,var(--purple),rgba(191,90,242,.3))}
.tier-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.15);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.tier-card.active{border-color:var(--border-sel)}
.tc-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tc-badge{font-size:11px;font-weight:800;padding:4px 10px;border-radius:6px;letter-spacing:.5px}
.tc-1 .tc-badge{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.tc-2 .tc-badge{background:rgba(41,151,255,.2);color:#a8d8ff}
.tc-3 .tc-badge{background:rgba(191,90,242,.2);color:#e0b0ff}
.tc-name{font-size:16px;font-weight:700;color:var(--txt)}
.tc-desc{font-size:12px;color:var(--txt3);line-height:1.5;margin-bottom:16px}
.tc-includes{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.tc-includes li{font-size:11px;color:var(--txt2);display:flex;align-items:center;gap:7px}
.tc-includes li svg{width:12px;height:12px;flex-shrink:0;color:var(--green)}
.tc-turnaround{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);padding:10px 12px}
.tc-ta-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--txt3);margin-bottom:8px}
.tc-ta-grid{display:grid;grid-template-columns:auto 1fr 1fr;gap:4px 10px;font-size:11px}
.tc-ta-hdr{font-weight:700;color:var(--txt3);font-size:9px;text-transform:uppercase;letter-spacing:.5px}
.tc-ta-lbl{color:var(--txt3);font-weight:600}
.tc-ta-val{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums}
/* LF expanded turnaround detail */
.tc-lf-expand{max-height:0;overflow:hidden;transition:max-height .25s var(--ease);margin-top:0}
.tc-lf-expand.open{max-height:200px;margin-top:8px}
.tc-lf-rows{display:flex;flex-direction:column;gap:4px}
.tc-lf-row{display:flex;justify-content:space-between;font-size:10px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.tc-lf-row:last-child{border-bottom:none}
.tc-lf-dur{color:var(--txt3)}.tc-lf-time{color:var(--txt);font-weight:700}
.tc-lf-toggle{font-size:10px;color:var(--blue);cursor:pointer;margin-top:6px;display:inline-flex;align-items:center;gap:4px;font-weight:600}
.tc-lf-toggle:hover{color:var(--blue-hv)}
.tc-lf-toggle svg{width:10px;height:10px;transition:transform .15s var(--ease)}
.tc-lf-toggle.open svg{transform:rotate(180deg)}
@media(max-width:768px){.land-head{padding:16px 20px 0}.land-head h1{font-size:34px}.land-body{padding:0 20px 20px}.land-split{flex-direction:column;gap:16px}.land-half{min-height:180px;padding:28px 20px;gap:14px}.lh-icon{width:56px;height:56px}.lh-title{font-size:18px}.lib-head{padding:16px 20px 0}.lib-body{padding:12px 20px 20px}.bp-lib-card{flex:0 0 120px}.bp-modal{padding:16px}.bp-modal-inner{padding:20px}.bpm-body{flex-direction:column}.bpm-center{flex:none;width:200px;margin:0 auto}.tier-row{flex-direction:column}.tier-row .tier-card{max-width:100%;flex-basis:auto}.tier-presets{overflow-x:auto}.tc-ta-grid{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ═══ CHAT.HTML ═══ */

/* ── Page-specific animations ── */
@keyframes sendPulse{0%{transform:scale(1)}50%{transform:scale(.88)}100%{transform:scale(1)}}
@keyframes emojiPop{from{opacity:0;transform:scale(.8) translate3d(0,8px,0)}to{opacity:1;transform:scale(1) translate3d(0,0,0)}}

/* ── LAYOUT ── */
.layout{display:flex;height:100vh;overflow:hidden}

/* ══════════════════════════════════════════════════════════
   CHANNEL SIDEBAR — Discord-style (unique component)
   ══════════════════════════════════════════════════════════ */
.ch-sidebar{width:240px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-el,#111);border-right:1px solid rgba(255,255,255,.06)}
.ch-sb-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.06)}
.ch-sb-title{font-size:14px;font-weight:700;color:var(--txt);letter-spacing:-.01em}
.ch-sb-new-dm{width:24px;height:24px;border-radius:8px;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;transition:background .08s,color .08s}
.ch-sb-new-dm:hover{background:rgba(255,255,255,.1);color:var(--txt)}
.ch-sb-new-dm svg{width:14px;height:14px}
.ch-sb-search-wrap{padding:8px 10px;flex-shrink:0}
.ch-sb-search{width:100%;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--txt);font-size:11px;font-family:var(--font);outline:none;transition:border-color .08s,box-shadow .08s}
.ch-sb-search::placeholder{color:var(--txt4)}
.ch-sb-search:focus{border-color:rgba(41,151,255,.4);box-shadow:0 0 0 3px rgba(41,151,255,.08)}
.ch-sb-body{flex:1;overflow-y:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}
.ch-sb-body::-webkit-scrollbar{width:4px}
.ch-sb-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* Category */
.ch-sb-cat{margin-bottom:4px}
.ch-sb-cat-hdr{display:flex;align-items:center;gap:4px;padding:6px 10px 4px;cursor:pointer;user-select:none}
.ch-sb-cat-hdr:hover .ch-sb-cat-name{color:var(--txt2)}
.ch-sb-chevron{width:10px;height:10px;color:var(--txt4);transition:transform .08s;will-change:transform;flex-shrink:0}
.ch-sb-cat.collapsed .ch-sb-chevron{transform:rotate(-90deg)}
.ch-sb-cat-name{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--txt4);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-sb-cat-count{font-size:9px;color:var(--txt4);font-weight:600;min-width:14px;text-align:right}
.ch-sb-cat.collapsed .ch-sb-cat-list{display:none}

/* Channel row */
.ch-sb-ch{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 14px;margin:1px 6px;border-radius:8px;cursor:pointer;transition:background .08s;position:relative}
.ch-sb-ch:hover{background:rgba(255,255,255,.05)}
.ch-sb-ch.active{background:rgba(41,151,255,.12)}
.ch-sb-ch.active .ch-sb-ch-name{color:var(--txt)}
.ch-sb-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;font-size:9px;font-weight:700;color:#fff}
.ch-sb-av.contact{background:linear-gradient(135deg,rgba(41,151,255,.3),rgba(41,151,255,.15));box-shadow:0 1px 4px rgba(0,0,0,.2)}
.ch-sb-av.group{background:rgba(255,255,255,.06);color:var(--txt3);font-size:14px;font-weight:700}
.ch-sb-av.team{background:linear-gradient(135deg,rgba(48,209,88,.2),rgba(48,209,88,.08));box-shadow:0 1px 4px rgba(0,0,0,.2)}
.ch-sb-av.dm{background:linear-gradient(135deg,rgba(191,90,242,.25),rgba(191,90,242,.1));box-shadow:0 1px 4px rgba(0,0,0,.2)}
.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-name{font-size:12px;font-weight:600;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.ch-sb-ch-sub{font-size:9px;color:var(--txt4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;margin-top:1px}
.ch-sb-badge{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red,#ff453a);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ch-sb-badge:empty{display:none}

/* DM separator */
.ch-sb-dm-sep{height:1px;background:rgba(255,255,255,.06);margin:8px 14px}

/* Sidebar loading */
.ch-sb-loading{display:flex;align-items:center;justify-content:center;padding:32px;color:var(--txt4)}

/* ══════════════════════════════════════════════════════════
   EVENT BANNER
   ══════════════════════════════════════════════════════════ */
.event-banner{max-height:120px;background:linear-gradient(135deg,rgba(41,151,255,.06),rgba(191,90,242,.04)),var(--bg-el,#111);border:1px solid rgba(255,255,255,.08);border-radius:14px;margin:12px 16px 0;overflow:hidden;flex-shrink:0;display:flex;align-items:center;gap:14px;padding:14px 16px;position:relative}
.event-banner::before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
.event-banner-logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,rgba(41,151,255,.15),rgba(191,90,242,.1));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.event-banner-logo img{width:22px;height:22px;opacity:.9}
.event-banner-text{flex:1;min-width:0}
.event-banner-title{font-size:13px;font-weight:700;color:var(--txt);letter-spacing:-.01em}
.event-banner-sub{font-size:10px;color:var(--txt3);margin-top:2px}
.event-banner-close{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:6px;border:none;background:rgba(255,255,255,.06);color:var(--txt4);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background .08s,color .08s}
.event-banner-close:hover{background:rgba(255,255,255,.12);color:var(--txt2)}

/* ══════════════════════════════════════════════════════════
   CHAT PANEL
   ══════════════════════════════════════════════════════════ */
.chat-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:rgba(10,10,12,.3)}

.chat-hdr{padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:12px;flex-shrink:0;width:100%;background:rgba(255,255,255,.02)}
.chat-hdr-icon{width:32px;height:32px;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;flex-shrink:0;box-shadow:0 2px 8px rgba(41,151,255,.15);overflow:hidden}
.chat-hdr-icon svg{width:16px;height:16px;color:var(--blue)}
.chat-hdr-info{flex:1;min-width:0}
.chat-hdr-title{font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-hdr-sub{font-size:10px;color:var(--txt3);margin-top:1px}
.chat-hdr-btn{width:28px;height:28px;border-radius:8px;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;transition:background-color .08s,color .08s}
.chat-hdr-btn:hover{color:var(--txt);background:rgba(255,255,255,.1)}
.chat-hdr-btn svg{width:14px;height:14px}
.chat-hdr-menu{display:none}

/* ── MESSAGES ── */
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;scroll-behavior:smooth;width:100%;contain:layout style;will-change:scroll-position}
.msgs::-webkit-scrollbar{width:4px}
.msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}

/* Date divider */
.date-div{display:flex;align-items:center;justify-content:center;padding:14px 0 10px}
.date-div span{font-size:10px;font-weight:600;color:var(--txt4);background:rgba(255,255,255,.04);padding:4px 12px;border-radius:100px;letter-spacing:.3px}

/* Thread-style messages */
.ch-msg{display:flex;gap:10px;margin-bottom:12px;animation:fadeUp .2s var(--ease-q) both}
.ch-msg.no-anim{animation:none!important}
.ch-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,rgba(41,151,255,.3),rgba(41,151,255,.15));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ch-avatar 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:baseline;gap:8px;margin-bottom:3px}
.ch-msg-name{font-size:11px;font-weight:700;color:var(--txt)}
.ch-msg-role{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:100px}
.ch-msg-time{font-size:9px;color:var(--txt4);opacity:.6}
.ch-msg-text{font-size:13px;color:var(--txt2);line-height:1.5;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:8px 12px;box-shadow:inset 0 .5px 0 rgba(255,255,255,.04)}
.ch-msg-text a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.ch-msg-text img.msg-img{max-width:100%;max-height:280px;border-radius:10px;margin-top:6px;cursor:pointer;display:block}

/* @mention in message */
.mention{color:var(--blue);font-weight:600;background:rgba(41,151,255,.12);padding:1px 4px;border-radius:4px}

/* Emoji-only messages */
.ch-msg-text.emoji-only{background:transparent!important;border:none!important;box-shadow:none!important;font-size:28px;line-height:1.2;padding:4px 2px}

/* ── EMPTY / LOADING ── */
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--txt4);padding:40px;animation:fadeUp .15s var(--ease)}
.chat-empty svg{width:44px;height:44px;opacity:.2}
.chat-empty .et{font-size:15px;font-weight:600;color:var(--txt3)}
.chat-empty .ed{font-size:12px;text-align:center;max-width:280px;line-height:1.5}

/* ── INPUT AREA ── */
.chat-input{flex-shrink:0;padding:10px 16px;border-top:1px solid rgba(255,255,255,.06);width:100%}
.chat-inp-row{display:flex;align-items:flex-end;gap:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:6px;transition:border-color .08s,box-shadow .08s;position:relative}
.chat-inp-row:focus-within{border-color:rgba(41,151,255,.45);box-shadow:0 0 0 3px rgba(41,151,255,.1)}
.ch-attach{width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);background:transparent;color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .08s,color .08s,border-color .08s}
.ch-attach:hover{background:rgba(255,255,255,.08);color:var(--txt);border-color:rgba(255,255,255,.25)}
.ch-attach svg{width:14px;height:14px}

/* Attach popup */
.ch-attach-popup{position:absolute;bottom:100%;left:0;margin-bottom:8px;display:none;flex-direction:column;gap:2px;padding:6px;background:rgba(10,14,28,.95);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:40;min-width:180px}
.ch-attach-popup.open{display:flex}
.ch-attach-opt{display:flex;align-items:center;gap:10px;padding:8px 12px;border:none;background:transparent;color:var(--txt2);font-size:12px;font-weight:500;font-family:var(--font);cursor:pointer;border-radius:8px;transition:background .08s,color .08s;white-space:nowrap}
.ch-attach-opt:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.ch-attach-opt svg{width:16px;height:16px;color:var(--txt3);flex-shrink:0}
.ch-attach-opt:hover svg{color:var(--blue)}

.chat-inp{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-size:13px;font-family:var(--font);padding:4px 4px;resize:none;min-height:20px;max-height:120px;line-height:1.4}
.chat-inp::placeholder{color:var(--txt4)}
.send-btn{width:28px;height:28px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--imsg,#0b84fe),var(--imsg-dk,#0066d6));color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(11,132,254,.3),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .08s,opacity .08s;opacity:.5}
.chat-inp-row:focus-within .send-btn,.send-btn.ready{opacity:1}
.send-btn:hover{transform:scale(1.08)}
.send-btn:active{animation:sendPulse .2s var(--ease)}
.send-btn:disabled{opacity:.25;cursor:default;transform:none}
.send-btn svg{width:12px;height:12px;transform:rotate(-45deg) translate(1px,-1px)}

/* ── @MENTION AUTOCOMPLETE ── */
.mention-popup{position:absolute;bottom:100%;left:0;right:40px;margin-bottom:6px;background:rgba(10,14,28,.95);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.6);max-height:200px;overflow-y:auto;display:none;z-index:50;animation:emojiPop .2s var(--ease) both;scrollbar-width:thin}
.mention-popup.visible{display:block}
.mention-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:background .08s}
.mention-item:first-child{border-radius:14px 14px 0 0}
.mention-item:last-child{border-radius:0 0 14px 14px}
.mention-item:only-child{border-radius:14px}
.mention-item:hover,.mention-item.active{background:rgba(41,151,255,.12)}
.mention-av{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--bg-sf);display:flex;align-items:center;justify-content:center}
.mention-av img{width:100%;height:100%;object-fit:cover}
.mention-av span{font-size:10px;font-weight:700;color:var(--txt3)}
.mention-name{font-size:13px;font-weight:600;flex:1}
.mention-role{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:100px}

/* ── EMOJI PICKER ── */
.emoji-picker{position:absolute;bottom:100%;left:0;margin-bottom:8px;background:rgba(10,14,28,.95);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.5);width:280px;max-height:280px;display:none;z-index:50;animation:emojiPop .2s var(--ease) both;overflow:hidden}
.emoji-picker.visible{display:flex;flex-direction:column}
.emoji-search{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.emoji-search input{width:100%;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--txt);font-size:12px;font-family:var(--font);outline:none}
.emoji-search input::placeholder{color:var(--txt4)}
.emoji-cats{display:flex;gap:2px;padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.emoji-cat{padding:4px 8px;border-radius:6px;font-size:14px;cursor:pointer;transition:background .08s;border:none;background:transparent}
.emoji-cat:hover,.emoji-cat.active{background:rgba(255,255,255,.08)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;overflow-y:auto;flex:1;scrollbar-width:thin}
.emoji-grid button{width:100%;aspect-ratio:1;border:none;background:transparent;font-size:22px;cursor:pointer;border-radius:8px;transition:background .08s,transform .08s;display:flex;align-items:center;justify-content:center;will-change:transform}
.emoji-grid button:hover{background:rgba(255,255,255,.08);transform:scale(1.15)}

/* ══════════════════════════════════════════════════════════
   PROJECT FORUM — right panel
   ══════════════════════════════════════════════════════════ */
.forum{width:380px;border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;background:rgba(10,14,28,.4)}
.forum-hdr{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:10px;flex-shrink:0;background:rgba(255,255,255,.02)}
.forum-hdr-icon{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,rgba(191,90,242,.2),rgba(191,90,242,.08));display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(191,90,242,.15)}
.forum-hdr-icon svg{width:16px;height:16px;color:var(--purple)}
.forum-hdr-title{font-size:14px;font-weight:700;flex:1}
.forum-count{font-size:11px;color:var(--txt3);font-weight:600}
.forum-feed{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:var(--txt4) transparent}
.forum-feed::-webkit-scrollbar{width:4px}
.forum-feed::-webkit-scrollbar-thumb{background:var(--txt4);border-radius:2px}

/* Project Card */
.pcard{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl,16px);padding:14px;cursor:pointer;transition:background-color .08s,border-color .08s,transform .08s;position:relative;overflow:hidden;box-shadow:var(--sh,0 2px 8px rgba(0,0,0,.12));will-change:transform}
.pcard::before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
.pcard:hover{border-color:rgba(255,255,255,.14);transform:translateY(-1px)}
.pcard:active{transform:scale(.99)}
.pcard-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pcard-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pcard-icon.queue{background:rgba(255,159,10,.1)}.pcard-icon.queue svg{color:var(--orange)}
.pcard-icon.editing{background:rgba(41,151,255,.1)}.pcard-icon.editing svg{color:var(--blue)}
.pcard-icon.review{background:rgba(191,90,242,.1)}.pcard-icon.review svg{color:var(--purple)}
.pcard-icon.approved{background:rgba(126,203,161,.1)}.pcard-icon.approved svg{color:var(--green)}
.pcard-icon.revisions{background:rgba(192,57,43,.1)}.pcard-icon.revisions svg{color:var(--red)}
.pcard-icon svg{width:18px;height:18px}
.pcard-info{flex:1;min-width:0}
.pcard-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-type{font-size:11px;color:var(--txt3);margin-top:1px}
.pcard-version{font-size:10px;font-weight:700;color:var(--blue);background:rgba(41,151,255,.1);padding:2px 7px;border-radius:6px;flex-shrink:0}
.pcard-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pcard-status{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:6px}
.pcard-status.queue{background:rgba(255,159,10,.12);color:var(--orange)}
.pcard-status.editing{background:rgba(41,151,255,.12);color:var(--blue)}
.pcard-status.review{background:rgba(191,90,242,.12);color:var(--purple)}
.pcard-status.approved{background:rgba(126,203,161,.12);color:var(--green)}
.pcard-status.revisions{background:rgba(192,57,43,.12);color:var(--red)}
.pcard-bp{font-size:10px;color:var(--txt4);font-style:italic;flex:1;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-date{font-size:10px;color:var(--txt4)}
.pcard-instructions{font-size:11px;color:var(--txt3);line-height:1.4;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Expanded Project Overlay ── */
.project-expand{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.85);display:none;opacity:0;transition:opacity .25s var(--ease)}
.project-expand.open{display:flex;opacity:1}
.pe-container{display:flex;width:100%;height:100%;animation:fadeUp .3s var(--ease) both}
.pe-video-side{flex:1;display:flex;flex-direction:column;padding:20px;min-width:0}
.pe-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-shrink:0}
.pe-back{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:var(--txt2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .08s,color .08s}
.pe-back:hover{background:rgba(255,255,255,.12);color:var(--txt)}
.pe-back svg{width:18px;height:18px}
.pe-title{font-size:18px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-version{font-size:11px;font-weight:700;color:var(--blue);background:rgba(41,151,255,.1);padding:3px 10px;border-radius:8px}
.pe-status-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;border-radius:8px}
.pe-player-wrap{flex:1;background:#000;border-radius:16px;overflow:hidden;position:relative;min-height:0}
.pe-player-wrap video{width:100%;height:100%;object-fit:contain}
.pe-no-video{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--txt4);font-size:13px;flex-direction:column;gap:8px}
.pe-no-video svg{width:48px;height:48px;opacity:.2}
.pe-thread{width:380px;border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;background:rgba(10,14,28,.75);flex-shrink:0;box-shadow:inset 1px 0 0 rgba(255,255,255,.04)}
.pe-th-hdr{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;background:rgba(255,255,255,.02)}
.pe-th-title{font-size:14px;font-weight:700}
.pe-th-sub{font-size:11px;color:var(--txt3);margin-top:2px}
.pe-th-body{flex:1;overflow-y:auto;padding:14px;scrollbar-width:thin;scrollbar-color:var(--txt4) transparent}
.pe-th-body::-webkit-scrollbar{width:4px}
.pe-th-body::-webkit-scrollbar-thumb{background:var(--txt4);border-radius:2px}
.th-msg{display:flex;gap:10px;margin-bottom:14px;animation:fadeUp .25s var(--ease-q) both}
.th-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.th-av.default{background:linear-gradient(135deg,rgba(41,151,255,.3),rgba(41,151,255,.15))}
.th-av.system{background:rgba(41,151,255,.12)}
.th-av.rev{background:linear-gradient(135deg,var(--orange),var(--red))}
.th-msg-bd{flex:1;min-width:0}
.th-msg-top{display:flex;align-items:baseline;gap:6px;margin-bottom:3px;flex-wrap:wrap}
.th-msg-nm{font-size:11px;font-weight:700;color:var(--txt)}
.th-msg-badge{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:1px 5px;border-radius:3px}
.th-msg-badge.status{color:var(--blue);background:rgba(41,151,255,.12)}
.th-msg-badge.revision{color:var(--orange);background:rgba(255,159,10,.12)}
.th-msg-badge.note{color:var(--green);background:rgba(126,203,161,.12)}
.th-msg-tm{font-size:9px;color:var(--txt4)}
.th-msg-txt{font-size:13px;color:var(--txt2);line-height:1.5;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:8px 12px;box-shadow:inset 0 .5px 0 rgba(255,255,255,.04)}
.th-msg-txt.rev{background:rgba(255,159,10,.06);border-left:3px solid var(--orange);border-radius:0 14px 14px 0}
.th-msg-txt.sys{background:rgba(41,151,255,.04);border-left:3px solid var(--blue);border-radius:0 14px 14px 0;color:var(--txt3)}
.th-msg-txt .ts-link{color:var(--blue);font-weight:600;font-family:var(--mono);font-size:11px;cursor:pointer}
.th-msg-txt .ts-link:hover{text-decoration:underline}
.th-empty{text-align:center;padding:40px 16px;color:var(--txt4);font-size:12px}
.th-empty svg{width:36px;height:36px;opacity:.2;margin-bottom:8px;display:block;margin-left:auto;margin-right:auto}
.forum-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--txt4);padding:20px}
.forum-empty svg{width:36px;height:36px;opacity:.2}
.forum-empty .fe-title{font-size:13px;font-weight:600;color:var(--txt3)}
.forum-empty .fe-desc{font-size:11px;text-align:center;line-height:1.4}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media(max-width:1100px){.forum{width:320px}}
@media(max-width:900px){.forum{width:280px}}
@media(max-width:800px){
  .ch-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-100%);transition:transform .2s var(--ease);will-change:transform}
  .ch-sidebar.open{transform:translateX(0)}
  .ch-sb-overlay{display:none;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5)}
  .ch-sb-overlay.open{display:block}
  .chat-hdr-menu{display:flex}
  .forum{display:none}
  .pe-thread{width:280px}
}
@media(max-width:600px){
  .pe-container{flex-direction:column}
  .pe-thread{width:100%;height:50%;border-left:none;border-top:1px solid rgba(255,255,255,.06)}
  .event-banner{display:none}
  .ch-sidebar.open{width:280px}
}
@media(max-width:480px){
  .pe-container{flex-direction:column;height:100%}
  .pe-main{flex:1;min-height:0}
  .forum,.pe-thread{display:none}
  .ch-msg{gap:8px}
  .ch-avatar{width:26px;height:26px;font-size:9px}
  .ch-msg-text{font-size:13px;padding:6px 10px}
  .chat-input{padding:6px 10px 10px}
  .chat-inp-row{padding:4px}
  .emoji-picker{position:fixed!important;bottom:0!important;left:0!important;right:0!important;top:auto!important;width:100%!important;max-width:none;border-radius:14px 14px 0 0;max-height:50vh}
  .mention-popup{position:fixed!important;bottom:60px!important;left:8px!important;right:8px!important;max-width:none;width:auto}
  .ch-attach-popup{position:fixed!important;bottom:60px!important;left:8px!important;right:8px!important;max-width:none;width:auto}
  input,textarea,select{font-size:16px!important}
}

@media(prefers-reduced-motion:reduce){
  .ch-sb-chevron{transition:none}
  .ch-sidebar{transition:none}
  .ch-msg,.th-msg,.pcard{animation:none!important}
  .emoji-grid button{transition:none}
}


/* ═══ MEETINGS.HTML ═══ */

/* ── Components not in design-system.css ── */

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

/* ── Shell overrides for meetings layout ── */
.shell-head { padding: 20px 32px 0; max-width: none; animation: none }

/* ── Tab overrides (pill style for meetings) ── */
.sub-tabs { gap: 6px; margin-top: 16px; padding: 0; padding-bottom: 16px; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; box-shadow: none; width: auto }
.sub-tab { padding: 8px 20px; border-radius: var(--radius-pill); font-size: 13px; border: 1px solid rgba(255,255,255,.08); transition: color 80ms, border-color 80ms, background 80ms }
.sub-tab:hover { border-color: rgba(255,255,255,.14) }
.sub-tab.active { background: linear-gradient(135deg,var(--blue),var(--blue-dk)); color: #fff; border-color: var(--blue); box-shadow: none }

/* ── Tab panel override ── */
.tab-panel { padding: 20px 32px 80px }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(420px,1fr)); gap: 24px; padding-top: 4px }

/* ── Create meeting button ── */
.create-mtg {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; font-family: var(--font);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: var(--txt2); cursor: pointer;
  transition: background 80ms, border-color 80ms, color 80ms;
}
.create-mtg:hover { background: rgba(41,151,255,.08); border-color: rgba(41,151,255,.2); color: var(--blue) }
.create-mtg svg { width: 16px; height: 16px }

/* ── Meeting cards ── */
.mtg-card {
  position: relative; aspect-ratio: 16/9; border-radius: var(--r-2xl);
  overflow: hidden; cursor: pointer;
  background: linear-gradient(145deg,rgba(10,14,28,.85),rgba(15,20,38,.92) 40%,rgba(8,12,24,.95));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .25s var(--ease); will-change: transform;
}
.mtg-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 20% 80%,rgba(41,151,255,.08) 0%,transparent 60%),
              radial-gradient(ellipse at 80% 20%,rgba(191,90,242,.05) 0%,transparent 50%);
}
.mtg-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  box-shadow: 0 20px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(41,151,255,.15);
  opacity: 0; transition: opacity .25s var(--ease);
}
.mtg-card:hover { transform: translateY(-4px) scale(1.01) }
.mtg-card:hover::after { opacity: 1 }
.mtg-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 28px 32px }
.mtg-top { display: flex; align-items: flex-start; justify-content: space-between }
.mtg-logo { width: 42px; height: 42px; border-radius: var(--r-md); opacity: .7; transition: opacity .2s }
.mtg-card:hover .mtg-logo { opacity: .9 }
.mtg-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.mtg-badge.live  { background: rgba(192,57,43,.15);  color: var(--red);  border: 1px solid rgba(192,57,43,.25) }
.mtg-badge.sched { background: rgba(41,151,255,.1);   color: var(--blue); border: 1px solid rgba(41,151,255,.2) }
.mtg-badge.ended { background: rgba(110,110,115,.1);  color: var(--txt3); border: 1px solid rgba(255,255,255,.06) }
.mtg-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0 }
.mtg-badge.live  .mtg-dot { background: var(--red);  animation: pulse 1.5s ease infinite }
.mtg-badge.sched .mtg-dot { background: var(--blue) }
.mtg-badge.ended .mtg-dot { background: var(--txt4) }
.mtg-details { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 8px 0 }
.mtg-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--txt) }
.mtg-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--txt2) }
.mtg-meta-item { display: flex; align-items: center; gap: 5px }
.mtg-meta-item svg { width: 13px; height: 13px; opacity: .5 }
.mtg-bottom { display: flex; align-items: center; justify-content: space-between }
.mtg-people { display: flex; align-items: center; gap: 8px }
.mtg-av {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(10,14,28,.9);
  background: linear-gradient(135deg,var(--blue),var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.mtg-names { font-size: 12px; color: var(--txt2) }
.mtg-join {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; font-family: var(--font);
  cursor: pointer; text-decoration: none; border: none;
  transition: transform 80ms, box-shadow 80ms; will-change: transform;
}
.mtg-join.primary  { background: linear-gradient(135deg,var(--blue),var(--blue-dk)); color: #fff; box-shadow: 0 4px 16px rgba(41,151,255,.3) }
.mtg-join.primary:hover  { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(41,151,255,.45) }
.mtg-join.secondary { background: rgba(255,255,255,.06); color: var(--txt2); border: 1px solid rgba(255,255,255,.1) }
.mtg-join.secondary:hover { background: rgba(255,255,255,.1); color: var(--txt) }
.mtg-join svg { width: 16px; height: 16px }

/* ── Empty state ── */
.room-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 80px 20px; text-align: center }
.room-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center }
.room-empty-icon svg { width: 28px; height: 28px; color: var(--txt4) }
.room-empty h3 { font-size: 16px; font-weight: 600; color: var(--txt2) }
.room-empty p  { font-size: 13px; color: var(--txt3); max-width: 320px }

/* ── Whiteboard view ── */
.wb-view { position: fixed; inset: 0; z-index: 100; background: #0a0e1c; display: none; flex-direction: column; animation: fadeIn .25s var(--ease) }
.wb-view.active { display: flex }
.wb-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; flex-shrink: 0; z-index: 10; background: rgba(10,14,28,.95); border-bottom: 1px solid rgba(255,255,255,.06) }
.wb-back { display: flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; font-family: var(--font); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: var(--txt2); cursor: pointer; transition: background 80ms, color 80ms }
.wb-back:hover { background: rgba(255,255,255,.1); color: var(--txt) }
.wb-back svg { width: 16px; height: 16px }
.wb-info { display: flex; align-items: center; gap: 12px }
.wb-info-title { font-size: 14px; font-weight: 700 }
.wb-badge { padding: 4px 10px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase }
.wb-badge.live  { background: rgba(192,57,43,.15); color: var(--red) }
.wb-badge.sched { background: rgba(41,151,255,.1);  color: var(--blue) }
.wb-badge.ended { background: rgba(110,110,115,.1);  color: var(--txt3) }
.wb-controls { display: flex; align-items: center; gap: 10px }
.wb-share-btn { display: flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: var(--txt3); transition: background 80ms, border-color 80ms, color 80ms }
.wb-share-btn.shared { background: rgba(126,203,161,.08); border-color: rgba(126,203,161,.2); color: var(--green) }
.wb-share-btn svg { width: 14px; height: 14px }
.wb-join-btn { padding: 7px 18px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; background: linear-gradient(135deg,var(--blue),var(--blue-dk)); color: #fff; border: none; cursor: pointer; font-family: var(--font); text-decoration: none; display: inline-flex; align-items: center; transition: box-shadow 80ms }
.wb-join-btn:hover { box-shadow: 0 4px 16px rgba(41,151,255,.3) }

/* ── Canvas ── */
.wb-canvas-wrap { flex: 1; position: relative; overflow: hidden; cursor: grab }
.wb-canvas-wrap.grabbing { cursor: grabbing }
.wb-canvas { position: absolute; transform-origin: 0 0; will-change: transform }
.wb-canvas-wrap::before { content: ''; position: absolute; inset: -200%; width: 400%; height: 400%; background-image: radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 0 }

/* ── Toolbar ── */
.wb-toolbar { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 20px; background: rgba(28,28,30,.95); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 8px 32px rgba(0,0,0,.4) }
.wb-tool { width: 40px; height: 40px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: transparent; color: var(--txt3); transition: background 80ms, color 80ms }
.wb-tool:hover  { background: rgba(255,255,255,.08); color: var(--txt) }
.wb-tool.active { background: rgba(41,151,255,.15); color: var(--blue) }
.wb-tool svg { width: 20px; height: 20px }
.wb-tool-sep { width: 24px; height: 1px; background: rgba(255,255,255,.06); margin: 4px auto }

/* ── Stickies ── */
.wb-sticky { position: absolute; width: 220px; min-height: 140px; border-radius: 4px 4px 16px 16px; padding: 16px; cursor: move; user-select: none; display: flex; flex-direction: column; font-size: 13px; line-height: 1.5; box-shadow: 0 4px 20px rgba(0,0,0,.25); transition: box-shadow .15s }
.wb-sticky:hover { box-shadow: 0 8px 32px rgba(0,0,0,.35); z-index: 5 }
.wb-sticky.dragging { opacity: .85; transform: scale(1.03); z-index: 100; transition: none }
.wb-sticky-text { flex: 1; outline: none; color: rgba(0,0,0,.75); font-family: var(--font); font-size: 13px; line-height: 1.55; font-weight: 500; min-height: 60px; word-break: break-word }
.wb-sticky-text:empty::before { content: 'Type here...'; color: rgba(0,0,0,.3); pointer-events: none }
.wb-sticky-del { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s; font-size: 12px; color: rgba(0,0,0,.4) }
.wb-sticky:hover .wb-sticky-del { opacity: 1 }
.wb-sticky-del:hover { background: rgba(0,0,0,.2) }
.wb-sticky-fold { position: absolute; top: 0; right: 0; width: 20px; height: 20px; overflow: hidden }
.wb-sticky-fold::before { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent rgba(0,0,0,.06) transparent transparent }
.wb-sticky.yellow { background: linear-gradient(135deg,#fff9c4,#fff59d) }
.wb-sticky.pink   { background: linear-gradient(135deg,#fce4ec,#f8bbd0) }
.wb-sticky.blue   { background: linear-gradient(135deg,#e3f2fd,#bbdefb) }
.wb-sticky.green  { background: linear-gradient(135deg,#e8f5e9,#c8e6c9) }
.wb-sticky.purple { background: linear-gradient(135deg,#f3e5f5,#e1bee7) }
.wb-sticky.orange { background: linear-gradient(135deg,#fff3e0,#ffe0b2) }
.wb-colors { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; opacity: 0; transition: opacity .15s }
.wb-sticky:hover .wb-colors { opacity: 1 }
.wb-color-dot { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; border: 1.5px solid rgba(0,0,0,.1); transition: transform 80ms }
.wb-color-dot:hover { transform: scale(1.25) }

/* ── Media ── */
.wb-media { position: absolute; border-radius: var(--r-lg); overflow: hidden; cursor: move; background: #111; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 4px 24px rgba(0,0,0,.3); transition: box-shadow .15s }
.wb-media:hover { box-shadow: 0 8px 40px rgba(0,0,0,.4); z-index: 5 }
.wb-media.dragging { opacity: .85; z-index: 100; transition: none }
.wb-media img, .wb-media video { width: 100%; height: 100%; object-fit: cover; display: block }
.wb-media-del { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s; color: #fff; font-size: 14px }
.wb-media:hover .wb-media-del { opacity: 1 }
.wb-resize { position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize }
.wb-resize::before { content: ''; position: absolute; bottom: 3px; right: 3px; width: 8px; height: 8px; border-right: 2px solid rgba(255,255,255,.3); border-bottom: 2px solid rgba(255,255,255,.3) }

/* ── Drop zone ── */
.wb-drop-zone { position: absolute; inset: 0; z-index: 50; background: rgba(41,151,255,.05); border: 2px dashed rgba(41,151,255,.3); display: none; align-items: center; justify-content: center; pointer-events: none }
.wb-drop-zone.active { display: flex }
.wb-drop-label { padding: 16px 32px; border-radius: var(--r-xl); background: rgba(10,14,28,.95); border: 1px solid rgba(41,151,255,.2); font-size: 15px; font-weight: 600; color: var(--blue) }

/* ── Zoom ── */
.wb-zoom { position: absolute; bottom: 16px; right: 16px; z-index: 10; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(28,28,30,.92); border: 1px solid rgba(255,255,255,.06); font-size: 11px; color: var(--txt3); font-weight: 600 }
.wb-zoom button { width: 24px; height: 24px; border-radius: var(--r-sm); border: none; background: rgba(255,255,255,.06); color: var(--txt2); cursor: pointer; font-size: 14px; font-family: var(--font); display: flex; align-items: center; justify-content: center; transition: background 80ms, color 80ms }
.wb-zoom button:hover { background: rgba(255,255,255,.12); color: var(--txt) }

::-webkit-scrollbar { width: 6px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px }

@media (max-width: 768px) {
  .room-grid { grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 16px }
  .shell-head { padding: 16px 16px 0 }
  .tab-panel { padding: 16px 16px 80px }
  .mtg-inner { padding: 20px 22px }
  .mtg-title { font-size: 18px }
}
@media (max-width: 480px) {
  .room-grid { grid-template-columns: 1fr; gap: 12px }
  .mtg-card { aspect-ratio: 16/10 }
  .mtg-inner { padding: 16px 18px }
  .mtg-title { font-size: 16px }
  .mtg-meta { gap: 10px; font-size: 11px }
  .mtg-join { padding: 8px 18px; font-size: 12px }
  .sub-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap }
  .sub-tab { white-space: nowrap; flex-shrink: 0 }
  .wb-topbar { padding: 8px 12px; flex-wrap: wrap; gap: 8px }
  .wb-toolbar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; transform: none; flex-direction: row; border-radius: var(--r-2xl) var(--r-2xl) 0 0; justify-content: center; gap: 2px; padding: 6px 12px }
  .wb-tool { width: 36px; height: 36px }
  .wb-tool-sep { width: 1px; height: 24px; margin: 0 4px }
  .wb-zoom { bottom: auto; top: 8px; right: 8px }
  .wb-info-title { font-size: 12px }
  .wb-controls { gap: 6px }
  .wb-share-btn span { display: none }
  input, textarea, select { font-size: 16px !important }
}


/* ═══ ONBOARDING.HTML ═══ */

/* ── Animations (page-specific) ── */
@keyframes fadeSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes checkPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

/* ── Shell overrides for onboarding (standalone, no sidebar) ── */
.shell-head{padding:40px 40px 0;max-width:none;width:auto;animation:none;text-align:center}
.shell-body{min-height:0}

/* ── Onboarding name & tags ── */
.ob-name{font-size:22px;font-weight:600;color:var(--txt);margin:6px 0 12px;letter-spacing:-.01em}
.ob-tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.ob-tag{display:inline-flex;align-items:center;padding:5px 14px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.ob-tag.role{background:rgba(41,151,255,.15);color:var(--blue);border:1px solid rgba(41,151,255,.25)}
.ob-tag.status{background:rgba(126,203,161,.12);color:var(--green);border:1px solid rgba(126,203,161,.2)}

/* ── Steps bar ── */
.steps{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:100px;box-shadow:var(--sh)}
.sd{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:100px;font-size:11px;font-weight:600;color:var(--txt4);transition:opacity .2s var(--ease);white-space:nowrap}
.sd .dn{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:rgba(255,255,255,.06);color:var(--txt4);transition:opacity .2s var(--ease);flex-shrink:0}
.sd.active{color:var(--txt);background:rgba(41,151,255,.12)}
.sd.active .dn{background:var(--blue);color:#fff;box-shadow:0 0 12px var(--blue-glow)}
.sd.done .dn{background:var(--green);color:#fff}
.sd.done{color:var(--txt2)}
.sc{width:10px;height:1px;background:rgba(255,255,255,.1);flex-shrink:0}
.sc.done{background:var(--green)}

/* ── Wizard steps ── */
.wstep{display:none;max-width:880px;width:100%;margin:0 auto;padding:24px 40px 80px;animation:fadeSlide .15s var(--ease)}
.wstep.active{display:block}
.slbl{text-align:center;font-size:13px;color:var(--txt3);text-transform:uppercase;letter-spacing:3px;font-weight:600;margin-bottom:12px}
.stitle{font-size:36px;font-weight:700;text-align:center;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15}
.sdesc{text-align:center;color:var(--txt2);font-size:17px;margin-bottom:36px;max-width:700px;margin-left:auto;margin-right:auto;line-height:1.5}

/* ── Submit button (green variant not in common.css) ── */
.btn-submit{background:linear-gradient(135deg,var(--green),var(--green-dk));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 16px rgba(126,203,161,.3);min-width:180px;padding:16px 42px}
.btn-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 24px rgba(126,203,161,.35)}

/* ── Form fields ── */
.fgroup{margin-bottom:20px}
.flbl{display:block;font-size:11px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px}
.finp{width:100%;background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.035) 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:16px 20px;font-size:16px;font-weight:500;color:var(--txt);font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;box-shadow:inset 0 1px 2px rgba(0,0,0,.25),inset 0 -1px 0 rgba(255,255,255,.04),0 1px 3px rgba(0,0,0,.15)}
.finp:focus{border-color:rgba(41,151,255,.5);box-shadow:inset 0 1px 2px rgba(0,0,0,.2),0 0 0 3px rgba(41,151,255,.12),0 0 16px rgba(41,151,255,.06)}
.finp::placeholder{color:var(--txt4)}
.finp.err{border-color:var(--red)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Card grid ── */
.opts{display:grid;gap:14px}
.opts.c2{grid-template-columns:repeat(2,1fr)}
.opts.c3{grid-template-columns:repeat(3,1fr)}
.ocard{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-lg);padding:24px;cursor:pointer;transition:transform .12s var(--ease-q),border-color .15s,box-shadow .15s;box-shadow:var(--sh);text-align:center}
.ocard:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 .5px 0 rgba(255,255,255,.15)}
.ocard.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.1));box-shadow:0 0 40px var(--blue-glow)}
.ocard .oicon{font-size:32px;margin-bottom:10px}
.ocard .olbl{font-size:15px;font-weight:600;color:var(--txt)}
.ocard .osub{font-size:12px;color:var(--txt3);margin-top:4px}

/* ── Niche chips ── */
.niche-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.niche-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:100px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);cursor:pointer;transition:transform .1s var(--ease-q),border-color .12s,background .12s;font-size:12.5px;font-weight:500;color:var(--txt2)}
.niche-chip:hover{border-color:rgba(255,255,255,.18);transform:translateY(-1px);color:var(--txt)}
.niche-chip.selected{border-color:var(--border-sel);background:rgba(41,151,255,.15);color:var(--blue)}
.niche-chip .nc-icon{font-size:14px}
#subnicheGrid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.sub-chip{padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);cursor:pointer;font-size:11.5px;font-weight:500;color:var(--txt3);transition:opacity .1s var(--ease)}
.sub-chip:hover{border-color:rgba(255,255,255,.14);color:var(--txt2)}
.sub-chip.selected{border-color:var(--green);background:rgba(126,203,161,.1);color:var(--green)}

/* ── Color picker (unique component) ── */
.color-row{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.color-swatch{position:relative;width:80px;text-align:center;cursor:pointer}
.color-swatch .cs-circle{width:72px;height:72px;border-radius:50%;border:3px solid rgba(255,255,255,.12);transition:border-color .2s,transform .15s var(--ease-q),box-shadow .2s;box-shadow:var(--sh);margin:0 auto}
.color-swatch:hover .cs-circle{transform:scale(1.08);border-color:rgba(255,255,255,.3)}
.color-swatch.active .cs-circle{border-color:var(--blue);box-shadow:0 0 20px var(--blue-glow)}
.color-swatch .cs-lbl{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-top:8px}
.color-swatch .cs-hex{font-size:11px;color:var(--txt2);font-family:var(--mono);margin-top:2px}
.cw-panel{display:none;max-width:320px;margin:0 auto;padding:20px;background:var(--glass);border:var(--glass-b);border-radius:var(--r-xl);box-shadow:0 12px 48px rgba(0,0,0,.6);-webkit-animation:fadeSlide .15s var(--ease)}
.cw-panel.open{display:block}
.cw-canvas-wrap{position:relative;width:260px;height:260px;margin:0 auto 16px}
.cw-ring{position:absolute;inset:0}
.cw-sv{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.cw-cursor-ring{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 4px rgba(0,0,0,.5);pointer-events:none;transform:translate(-50%,-50%)}
.cw-cursor-sv{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 4px rgba(0,0,0,.5);pointer-events:none;transform:translate(-50%,-50%)}
.cw-inputs{display:flex;gap:10px;align-items:center}
.cw-hex-input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);padding:8px 10px;color:var(--txt);font-family:var(--mono);font-size:14px;font-weight:600;text-align:center;outline:none;transition:border-color .15s}
.cw-hex-input:focus{border-color:var(--blue)}
.cw-preview{width:38px;height:38px;border-radius:var(--r-sm);border:2px solid rgba(255,255,255,.15);flex-shrink:0}
.cw-presets{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.cw-preset{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s,border-color .15s}
.cw-preset:hover{transform:scale(1.2);border-color:rgba(255,255,255,.3)}

/* ── Avatar picker ── */
.avatar-area{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px}
.avatar-preview{width:120px;height:120px;border-radius:50%;border:3px solid rgba(255,255,255,.12);overflow:hidden;cursor:pointer;transition:border-color .2s,transform .15s var(--ease-q);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);font-size:40px;color:var(--txt4)}
.avatar-preview:hover{border-color:rgba(255,255,255,.3);transform:scale(1.05)}
.avatar-preview.has-img{border-color:var(--green)}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.avatar-opts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.avatar-opt{padding:8px 18px;border-radius:100px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--txt3);transition:opacity 80ms;font-family:var(--font)}
.avatar-opt:hover{border-color:rgba(255,255,255,.2);color:var(--txt2)}
.avatar-opt.active{background:linear-gradient(180deg,rgba(41,151,255,.2),rgba(41,151,255,.1));border-color:var(--blue);color:var(--blue)}

/* ── Social preview card ── */
.social-card{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:12px 16px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-lg);transition:border-color .15s,box-shadow .15s;box-shadow:var(--sh)}
.social-card:focus-within{border-color:var(--border-sel);box-shadow:0 0 24px var(--blue-glow)}
.social-card .sc-icon{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.social-card .sc-icon svg{width:24px;height:24px}
.social-card .sc-body{flex:1;min-width:0}
.social-card .sc-platform{font-size:10px;font-weight:700;color:var(--txt4);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.social-card .sc-input{width:100%;background:transparent;border:none;outline:none;color:var(--txt);font-size:15px;font-weight:500;font-family:var(--font)}
.social-card .sc-input::placeholder{color:var(--txt4)}
.social-card .sc-link{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);color:var(--txt4);cursor:pointer;transition:opacity 80ms;flex-shrink:0;text-decoration:none;opacity:0;pointer-events:none}
.social-card .sc-link.visible{opacity:1;pointer-events:auto}
.social-card .sc-link:hover{background:rgba(41,151,255,.15);color:var(--blue)}

/* ── Upload zone ── */
.upload-zone{border:2px dashed rgba(255,255,255,.12);border-radius:var(--r-lg);padding:40px 24px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:rgba(255,255,255,.02)}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--blue);background:rgba(41,151,255,.06)}
.upload-zone .uz-icon{font-size:36px;margin-bottom:12px;opacity:.5}
.upload-zone .uz-text{font-size:14px;color:var(--txt2)}
.upload-zone .uz-hint{font-size:12px;color:var(--txt4);margin-top:6px}
.upload-zone.has-file{border-style:solid;border-color:var(--green)}
.upload-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Logo preview chips ── */
.logo-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;justify-content:center}
.logo-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:100px;padding:6px 14px 6px 6px;font-size:12px;color:var(--txt2)}
.logo-chip img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.logo-chip .lc-x{cursor:pointer;opacity:.5;margin-left:4px}
.logo-chip .lc-x:hover{opacity:1;color:var(--red)}

/* ── Signature pad ── */
.sig-wrap{background:var(--glass);border:var(--glass-b);border-radius:var(--r-lg);padding:4px;position:relative;box-shadow:var(--sh)}
.sig-wrap canvas{width:100%;border-radius:var(--r-md);cursor:crosshair;display:block}
.sig-clear{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:6px 14px;font-size:11px;font-weight:600;color:var(--txt3);cursor:pointer;transition:opacity 80ms}
.sig-clear:hover{background:rgba(255,255,255,.15);color:var(--txt)}
.sig-label{text-align:center;font-size:12px;color:var(--txt4);margin-top:8px}

/* ── Contract box ── */
.contract-box{background:var(--glass);border:var(--glass-b);border-radius:var(--r-lg);padding:24px;max-height:260px;overflow-y:auto;font-size:13px;color:var(--txt2);line-height:1.7;box-shadow:var(--sh);margin-bottom:20px}
.contract-box::-webkit-scrollbar{width:4px}
.contract-box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.contract-box h3{font-size:15px;color:var(--txt);margin-bottom:8px;font-weight:600}
.contract-box p{margin-bottom:12px}

/* ── Review summary ── */
.review-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);padding:32px;box-shadow:var(--sh);margin-bottom:20px}
.review-card h3{font-size:18px;font-weight:600;margin-bottom:16px;color:var(--txt);display:flex;align-items:center;gap:10px}
.review-card h3 span{font-size:22px}
.rv-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.rv-row:last-child{border-bottom:none}
.rv-lbl{font-size:13px;color:var(--txt3);font-weight:500}
.rv-val{font-size:14px;color:var(--txt);font-weight:600;text-align:right;max-width:60%;word-break:break-word}
.rv-val .color-dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;margin-right:4px;border:1px solid rgba(255,255,255,.15)}

/* ── Success screen ── */
.success-wrap{text-align:center;padding:60px 20px;animation:fadeSlide .3s var(--ease)}
.success-icon{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-dk));display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 28px;animation:checkPop .4s var(--ease-spring);box-shadow:0 12px 40px rgba(126,203,161,.35)}
.success-title{font-size:34px;font-weight:700;margin-bottom:12px;letter-spacing:-.02em}
.success-sub{font-size:17px;color:var(--txt2);max-width:500px;margin:0 auto;line-height:1.5}

/* ── Loading state ── */
.loading-wrap{display:flex;align-items:center;justify-content:center;height:100%;flex-direction:column;gap:16px}

/* ── Mobile ── */
@media(max-width:700px){
  .shell-head h1{font-size:32px}
  .shell-head>p{font-size:15px}
  .wstep{padding:20px 20px 60px}
  .stitle{font-size:26px}
  .sdesc{font-size:15px;margin-bottom:24px}
  .frow,.upload-row{grid-template-columns:1fr}
  .opts.c2,.opts.c3{grid-template-columns:1fr}
  .shell-foot{padding:10px 20px 16px}
  .btn{padding:14px 32px;font-size:15px}
  .color-swatch .cs-circle{width:56px;height:56px}
  .cw-panel{padding:14px}
  .cw-canvas-wrap{width:220px;height:220px}
  .shell-head{padding:24px 20px 0}
  .sd span.sn{display:none}
}
@media(max-width:480px){
  .shell-head h1{font-size:24px}
  .ob-name{font-size:18px}
  .ob-tag{font-size:11px;padding:4px 10px}
  .stitle{font-size:22px}
  .sdesc{font-size:14px}
  .frow{gap:8px}
  .fin input,.fin textarea,.fin select{font-size:14px;padding:10px 12px}
  .fin label{font-size:12px}
  .btn{padding:12px 24px;font-size:14px}
  .color-swatch .cs-circle{width:44px;height:44px}
  .cw-canvas-wrap{width:200px;height:200px}
  .payout-opts{flex-direction:column}
  .payout-opts button{padding:10px}
  .sig-canvas{height:120px}
  .upload-zone{padding:16px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

@media(max-width:768px){
  html,body{overflow-x:hidden}
  .ob-card{width:94vw;padding:var(--s3) var(--s2)}
  .form-row{grid-template-columns:1fr}
  .social-row{flex-direction:column}
  input,textarea,select{font-size:16px!important}
}
@media(max-width:480px){
  .ob-card{width:98vw;padding:var(--s2)}
  .hex-row{flex-wrap:wrap}
}


/* ═══ REQUEST.HTML ═══ */

/* ── Page-specific: no design-system equivalent ── */
@keyframes fadeSlide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@keyframes checkPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes dotFade{0%,20%{opacity:0}30%,100%{opacity:1}}
@keyframes checkDraw{to{stroke-dashoffset:0}}

/* ── Shell overrides (page layout) ── */
.shell-head{padding:56px 40px 0;max-width:none;width:auto;animation:none;text-align:center}
.shell-head h1{font-family:var(--font-display);font-size:clamp(30px,4.5vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1.05;margin-bottom:14px}
.shell-head p{font-size:22px;color:var(--txt2);margin-bottom:32px;font-weight:500}
.shell-body{min-height:0}

/* ── Step indicator (unique component) ── */
.steps{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 16px;background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.08);border-top-color:rgba(255,255,255,.18);border-radius:var(--radius-pill);max-width:fit-content;margin:0 auto;box-shadow:var(--sh)}
.sd{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;color:var(--txt4);transition:opacity .2s var(--ease);white-space:nowrap}
.sd .dn{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:rgba(255,255,255,.06);color:var(--txt4);transition:opacity .2s var(--ease);flex-shrink:0}
.sd .dl{max-width:0;overflow:hidden;opacity:0;transition:max-width .2s var(--ease),opacity .15s}
.sd.active{color:var(--txt);background:rgba(41,151,255,.12)}
.sd.active .dn{background:var(--blue);color:#fff;box-shadow:0 0 12px var(--blue-glow)}
.sd.active .dl{max-width:80px;opacity:1}
.sd.done .dn{background:var(--green);color:#fff}
.sd.done{color:var(--txt3)}
.sc{width:10px;height:1px;background:rgba(255,255,255,.1);flex-shrink:0}
.sc.done{background:var(--green)}

/* ── Wizard steps (unique component) ── */
.wstep{display:none;max-width:880px;width:100%;margin:0 auto;padding:24px 40px 80px;animation:fadeSlide .15s var(--ease)}
.wstep.active{display:block}
.slbl{text-align:center;font-size:13px;color:var(--txt3);text-transform:uppercase;letter-spacing:3px;font-weight:600;margin-bottom:12px}
.stitle{font-family:var(--font-display);font-size:40px;font-weight:700;text-align:center;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15}
.sdesc{text-align:center;color:var(--txt2);font-size:18px;margin-bottom:36px;max-width:700px;margin-left:auto;margin-right:auto;line-height:1.5}
.req{display:inline-block;font-size:9px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:1px;margin-left:4px;vertical-align:middle}

/* ── Button overrides ── */
.btn{padding:16px 42px}
.btn-submit{background:linear-gradient(135deg,var(--green),var(--green-dk));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.15),0 4px 16px rgba(126,203,161,.3);min-width:180px;will-change:transform}
.btn-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.15),0 8px 24px rgba(126,203,161,.35)}
.btn-submit:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Selectable card base (unique interactive) ── */
.cb{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.14);cursor:pointer;transition:transform .12s var(--ease-q),border-color .15s,box-shadow .15s;box-shadow:var(--sh);will-change:transform}
.cb:hover{border-color:rgba(255,255,255,.15);transform:translateY(-2px);box-shadow:var(--sh-glow)}
.cb.selected{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(41,151,255,.1));box-shadow:0 0 40px var(--blue-glow)}
.cb:active{transform:scale(.96);transition-duration:.08s}

/* ── Format cards (unique component) ── */
.fmt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:680px;margin:0 auto}
.fmt{border-radius:var(--r-lg);padding:28px;text-align:center;position:relative;overflow:hidden}
.fmt-icon{width:100%;max-height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.dev-frame{background:rgba(22,22,24,1);border:2px solid rgba(255,255,255,.12);border-radius:16px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.dev-frame::after{content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);border-radius:16px 16px 0 0;pointer-events:none}
.dev-frame.portrait{width:56px;height:96px}
.dev-frame.landscape{width:130px;height:78px}
.dev-frame svg{width:28px;height:28px;opacity:.3}
.fmt h3{font-weight:700;font-size:18px;margin-bottom:6px}
.fmt .fdesc{font-size:12px;color:var(--txt3);line-height:1.4}
.fmt .ftag{display:inline-block;margin-top:10px;padding:5px 12px;background:rgba(255,255,255,.06);border-radius:var(--radius-pill);font-size:13px;font-weight:600;color:var(--txt2)}
.fmt.selected .ftag{background:rgba(41,151,255,.2);color:var(--blue)}

/* ── Upload / drop zone (unique component) ── */
.upload-area{width:100%;max-width:900px;margin:0 auto}
.drop-zone{background:rgba(10,14,28,.52);border:2px dashed rgba(255,255,255,.12);border-radius:var(--r-lg);padding:40px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;box-shadow:var(--sh)}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--border-sel);background:linear-gradient(135deg,rgba(41,151,255,.1),rgba(41,151,255,.05))}
.drop-zone.hidden{display:none}
.drop-icon{width:56px;height:56px;background:var(--blue-glow);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.drop-icon svg{width:28px;height:28px;color:var(--blue)}
.drop-title{font-size:16px;font-weight:700;margin-bottom:6px}
.drop-sub{font-size:13px;color:var(--txt3);margin-bottom:14px}
.browse-btn{padding:12px 32px;background:var(--blue);border:none;border-radius:var(--radius-pill);color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font);box-shadow:0 8px 32px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,.3);transition:transform 80ms;will-change:transform}
.browse-btn:hover{transform:translateY(-1px)}
.browse-btn:active{transform:scale(.96)}

.drop-link-toggle{margin-top:14px;font-size:11px;color:var(--txt4);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:opacity 80ms}
.drop-link-toggle:hover{color:var(--txt3)}
.drop-link-toggle svg{width:12px;height:12px}
.drop-link-row{display:none;align-items:center;gap:6px;max-width:380px;margin:6px auto 0;animation:fadeUp .2s var(--ease)}
.drop-link-row.open{display:flex}
.drop-link-inp{flex:1;padding:7px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-sm);color:var(--txt);font-size:11px;font-family:var(--font);outline:none;transition:border-color .15s,box-shadow .15s}
.drop-link-inp:focus{border-color:var(--border-sel);box-shadow:0 0 0 2px rgba(41,151,255,.1)}
.drop-link-inp::placeholder{color:var(--txt4)}
.drop-link-add{padding:5px 12px;background:rgba(41,151,255,.12);border:1px solid rgba(41,151,255,.2);border-radius:var(--r-sm);color:var(--blue);font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:var(--font);transition:opacity 80ms}
.drop-link-add:hover{background:rgba(41,151,255,.22)}
.link-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;justify-content:center}
.link-chip{display:flex;align-items:center;gap:5px;padding:4px 8px;background:rgba(41,151,255,.08);border:1px solid rgba(41,151,255,.15);border-radius:var(--radius-pill);font-size:10px;font-weight:600;color:var(--blue);max-width:100%;overflow:hidden}
.link-chip-icon{width:12px;height:12px;flex-shrink:0}
.link-chip-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.link-chip-rm{width:12px;height:12px;cursor:pointer;opacity:.4;flex-shrink:0;transition:opacity .15s}
.link-chip-rm:hover{opacity:1}
.link-chips-alt{padding:0 16px 10px;justify-content:flex-start}

/* ── File cards (unique component) ── */
.file-cards{display:none;flex-direction:column;align-items:center;gap:16px;animation:fadeUp .3s var(--ease-q)}
.file-cards.visible{display:flex}
.file-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.fcard{position:relative;perspective:1200px;animation:fadeUp .2s var(--ease) backwards}
.fshell{position:relative;width:140px;border-radius:24px;transform-style:preserve-3d;transition:transform .25s var(--ease-spring);will-change:transform}
.fshell:hover{transform:rotateY(-5deg) rotateX(3deg) translateY(-6px)}
.fshell::before{content:'';position:absolute;inset:-3px;border-radius:28px;background:linear-gradient(145deg,#3a3a3c,#2c2c2e 15%,#1c1c1e 40%,#0e0e10 60%,#1c1c1e 80%,#3a3a3c);z-index:-1;box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.1)}
.fscreen{position:relative;width:140px;aspect-ratio:9/19.5;background:#000;border-radius:24px;overflow:hidden;z-index:1}
.fscreen::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03) 30%,transparent);pointer-events:none;z-index:10;border-radius:28px 28px 0 0}
.fnotch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:60px;height:18px;background:#000;border-radius:20px;z-index:15;box-shadow:0 0 0 2px rgba(30,30,30,.8)}
.fscreen video{width:100%;height:100%;object-fit:cover}
.fstats{position:absolute;bottom:0;left:0;right:0;padding:16px 14px 20px;background:linear-gradient(transparent,rgba(0,0,0,.85) 40%,rgba(0,0,0,.95));z-index:12}
.fstats .fname{font-size:12px;font-weight:700;color:#fff;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fstats .fpills{display:flex;gap:6px;flex-wrap:wrap}
.fpill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(255,255,255,.15);border-radius:var(--radius-pill);font-size:10px;font-weight:600;color:rgba(255,255,255,.8)}
.fremove{position:absolute;top:-8px;right:-8px;width:28px;height:28px;background:var(--red);border:2px solid var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;transition:transform .15s;box-shadow:0 4px 12px rgba(192,57,43,.4);will-change:transform}
.fremove:hover{transform:scale(1.15)}
.fremove svg{width:12px;height:12px;color:#fff}
.add-card{width:200px;aspect-ratio:9/19.5;border-radius:28px;border:2px dashed rgba(255,255,255,.12);background:rgba(10,14,28,.52);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:transform .25s,border-color .25s;box-shadow:var(--sh);will-change:transform}
.add-card:hover{border-color:rgba(255,255,255,.15);background:linear-gradient(135deg,rgba(41,151,255,.1),rgba(41,151,255,.05));transform:translateY(-2px)}
.add-card svg{width:32px;height:32px;color:var(--txt3)}
.add-card span{font-size:13px;font-weight:600;color:var(--txt3)}
.files-sum{display:flex;align-items:center;gap:12px;padding:10px 20px;background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.12);border-radius:var(--radius-pill);box-shadow:var(--sh)}
.files-sum .cnt{width:28px;height:28px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
.files-sum span{font-size:14px;font-weight:600;color:var(--txt2)}

/* ── Blueprint row (unique component) ── */
.bp-select-row{display:flex;gap:16px;align-items:flex-end;justify-content:center;flex-wrap:wrap;padding:12px 2px;overflow:visible}
.bp-lib-trigger{flex-shrink:0;width:130px;border-radius:20px;border:2px dashed var(--blue);background:rgba(41,151,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform 80ms var(--ease-q),background 80ms,border-color 80ms;padding:16px 10px;text-align:center;will-change:transform}
.bp-lib-trigger:hover{transform:translateY(-3px);background:rgba(41,151,255,.12);border-color:var(--blue-hv)}
.bp-lib-trigger svg{width:28px;height:28px;color:var(--blue);opacity:.8}
.bp-lib-trigger span{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.3px;line-height:1.3}

.bp-phone{position:relative;flex-shrink:0;cursor:pointer}
.bp-phone-shell{width:120px;border-radius:20px;transform-style:preserve-3d;transition:transform .1s var(--ease-spring);will-change:transform}
.bp-phone:hover .bp-phone-shell{transform:translateY(-4px)}
.bp-phone-shell::before{content:'';position:absolute;inset:-2px;border-radius:22px;background:linear-gradient(145deg,#3a3a3c,#1c1c1e 50%,#3a3a3c);z-index:-1;box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.bp-phone.selected .bp-phone-shell::before{background:linear-gradient(145deg,var(--blue),rgba(41,151,255,.4) 50%,var(--blue));box-shadow:0 16px 40px rgba(41,151,255,.3),0 0 0 1px var(--blue)}
.bp-phone-screen{position:relative;width:120px;aspect-ratio:9/16;background:#000;border-radius:20px;overflow:hidden;z-index:1}
.bp-phone-screen video{width:100%;height:100%;object-fit:cover}
.bp-phone-screen .bp-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(10,14,28,.8);font-size:32px}
.bp-phone-screen .bp-placeholder span{font-size:10px;color:var(--txt3);font-weight:600}
.bp-phone-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:40px;height:12px;background:#000;border-radius:12px;z-index:15;box-shadow:0 0 0 1.5px rgba(30,30,30,.8)}
.bp-phone-info{position:absolute;bottom:0;left:0;right:0;padding:28px 10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.9) 50%);z-index:12;text-align:center}
.bp-phone-name{font-size:10px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.bp-check{position:absolute;top:-6px;right:-6px;width:22px;height:22px;background:var(--green);border:2px solid #000;border-radius:50%;display:none;align-items:center;justify-content:center;z-index:20;box-shadow:0 4px 12px rgba(126,203,161,.4)}
.bp-phone.selected .bp-check{display:flex}
.bp-check svg{width:14px;height:14px;color:#fff}

/* ── Blueprint library modal (unique component) ── */
.bp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9000;display:none;align-items:center;justify-content:center;padding:24px;animation:fadeUp .25s var(--ease)}
.bp-modal-overlay.open{display:flex}
.bp-modal{background:#1a1a1c;border:1px solid rgba(255,255,255,.1);border-radius:20px;width:100%;max-width:860px;max-height:85vh;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column}
.bp-modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.06)}
.bp-modal-head h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
.bp-modal-close{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);border:none;color:var(--txt2);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity 80ms}
.bp-modal-close:hover{background:rgba(255,255,255,.12);color:#fff}
.bp-modal-body{flex:1;overflow-y:auto;padding:24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.bp-modal-body::-webkit-scrollbar{width:4px}
.bp-modal-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.bp-modal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bp-modal-foot{display:flex;justify-content:center;gap:14px;padding:16px 24px;border-top:1px solid rgba(255,255,255,.06);background:rgba(10,14,28,.6)}
.bp-modal-foot .btn{padding:12px 32px;font-size:14px}

.bp-lib-card{border-radius:16px;overflow:hidden;cursor:pointer;transition:transform 80ms var(--ease-q),border-color 80ms,box-shadow 80ms;border:1px solid rgba(255,255,255,.08);background:rgba(10,14,28,.6);will-change:transform}
.bp-lib-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.15);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.bp-lib-card.selected{border-color:var(--blue);box-shadow:0 0 30px var(--blue-glow)}
.bp-lib-card-preview{position:relative;width:100%;aspect-ratio:9/16;background:#000;overflow:hidden}
.bp-lib-card-preview video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .1s}
.bp-lib-card:hover .bp-lib-card-preview video,.bp-lib-card.selected .bp-lib-card-preview video{opacity:1}
.bp-lib-card-preview .bp-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;background:rgba(10,14,28,.8)}
.bp-lib-card-info{padding:12px;background:linear-gradient(180deg,rgba(30,30,34,.95),rgba(22,22,23,1))}
.bp-lib-card-name{font-size:13px;font-weight:700;color:var(--txt);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-lib-card-creator{font-size:11px;color:var(--txt3);margin-bottom:6px}
.bp-lib-card-tier{display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);font-size:9px;font-weight:700;letter-spacing:.5px}
.bp-lib-card-tier.t3{background:rgba(191,90,242,.15);color:#bf5af2}
.bp-lib-card-tier.t2{background:rgba(41,151,255,.15);color:#2997ff}
.bp-lib-card-tier.t1{background:rgba(126,203,161,.15);color:#7ecba1}
.bp-lib-card-check{position:absolute;top:8px;right:8px;width:24px;height:24px;background:var(--green);border:2px solid rgba(0,0,0,.5);border-radius:50%;display:none;align-items:center;justify-content:center;z-index:5;box-shadow:0 2px 8px rgba(126,203,161,.4)}
.bp-lib-card.selected .bp-lib-card-check{display:flex}

/* ── Form (uses design-system tokens) ── */
.fg{margin-bottom:24px}
.fg-compact{margin-bottom:16px}
.flbl{display:block;font-size:12px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:3px;margin-bottom:10px}
.finp{width:100%;background:rgba(10,14,28,.45);border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.12);border-radius:var(--r-md);padding:18px 24px;font-size:17px;font-weight:500;color:var(--txt);font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;box-shadow:var(--sh)}
.finp:focus{border-color:var(--border-sel);box-shadow:0 0 40px var(--blue-glow)}
.finp::placeholder{color:var(--txt3)}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:580px;margin:0 auto}
.details-full{grid-column:1 / -1}

/* ── Badges (unique selectable pills) ── */
.badge-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.badge{border-radius:var(--radius-pill);padding:16px 32px;text-align:center}
.badge.selected{background:linear-gradient(135deg,var(--blue),var(--blue-dk));border-color:var(--border-sel);box-shadow:0 0 40px var(--blue-glow)}
.badge h4{font-weight:700;font-size:20px}
.badge .bdesc{font-size:13px;opacity:.8;margin-top:3px}
.badge-sm{padding:12px 24px;border-radius:var(--radius-pill);min-width:72px;text-align:center}
.badge-sm h4{font-size:16px}
.badge-sm .bdesc{font-size:11px;margin-top:2px}

/* ── Confirm card (unique component) ── */
.confirm-card{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.16);border-radius:16px;overflow:hidden;box-shadow:var(--sh);max-width:520px;margin:0 auto}
.confirm-head{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.06);text-align:center}
.confirm-head h3{font-size:15px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:2px}
.confirm-row{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(255,255,255,.04)}
.confirm-row:last-child{border-bottom:none}
.confirm-lbl{color:var(--txt3);font-size:13px;display:flex;align-items:center;gap:6px}
.confirm-val{color:var(--txt);font-weight:600;font-size:13px;text-align:right;max-width:55%}
.confirm-val.grn{color:var(--green)}

/* ── Submit overlay (unique component) ── */
.sub-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;will-change:transform;padding:0 40px}
.sub-tracker{display:flex;align-items:center;gap:0;max-width:560px;width:100%;margin:0 auto 48px;position:relative}
.sub-seg{display:flex;align-items:center;flex:1;position:relative}
.sub-seg:last-child{flex:0}
.sub-node{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:2;flex-shrink:0}
.sub-ring{width:52px;height:52px;border-radius:50%;position:relative;background:rgba(255,255,255,.06);border:2.5px solid rgba(255,255,255,.1);transition:all .35s var(--ease);will-change:transform}
.sub-ring svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);opacity:0;transition:all .12s var(--ease-spring);will-change:transform;width:22px;height:22px}
.sub-ring .sub-spin{position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border:2.5px solid rgba(41,151,255,.25);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;display:none}
.sub-node.active .sub-ring{border-color:var(--blue);background:rgba(41,151,255,.1);transform:scale(1.15);box-shadow:0 0 30px rgba(41,151,255,.35)}
.sub-node.active .sub-spin{display:block}
.sub-node.done .sub-ring{border-color:var(--green);background:var(--green);transform:scale(1.1);box-shadow:0 0 20px rgba(126,203,161,.4)}
.sub-node.done .sub-ring svg{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sub-node.done .sub-spin{display:none}
.sub-lbl{font-size:13px;font-weight:600;color:var(--txt4);white-space:nowrap;transition:opacity .1s var(--ease)}
.sub-node.active .sub-lbl{color:var(--blue)}
.sub-node.done .sub-lbl{color:var(--green)}
.sub-dots-anim .d{opacity:0;animation:dotFade 1.2s steps(1,end) infinite}
.sub-dots-anim .d:nth-child(2){animation-delay:.3s}
.sub-dots-anim .d:nth-child(3){animation-delay:.6s}
.sub-wire{flex:1;height:2.5px;background:rgba(255,255,255,.08);margin:0 -2px;position:relative;overflow:hidden;transform:translateY(-16px)}
.sub-wire-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--green),var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .2s cubic-bezier(.4,0,.2,1);will-change:transform}
.sub-wire.filled .sub-wire-fill{transform:scaleX(1)}
.sub-status{font-size:20px;font-weight:600;color:var(--txt2);min-height:28px;transition:opacity .2s;text-align:center}

/* ── Success ── */
.sub-done-badge{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,var(--green),#24c550);display:flex;align-items:center;justify-content:center;margin:0 auto 28px;animation:checkPop .45s var(--ease-spring);box-shadow:0 0 60px rgba(126,203,161,.35),0 0 0 10px rgba(126,203,161,.08);will-change:transform}
.sub-done-badge svg{stroke-dasharray:30;stroke-dashoffset:30;animation:checkDraw .5s ease .15s forwards}
.sub-success-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;position:relative;z-index:2}
.sub-success-wrap h2{font-size:38px;font-weight:700;margin-bottom:10px;animation:fadeUp .3s var(--ease) .1s both}
.sub-success-wrap .sub-desc{color:var(--txt2);font-size:18px;margin-bottom:36px;max-width:500px;text-align:center;animation:fadeUp .3s var(--ease) .15s both}
.sub-card{background:rgba(10,14,28,.52);border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.14);border-radius:18px;padding:24px 28px;text-align:center;animation:fadeUp .25s var(--ease) backwards;box-shadow:var(--sh)}
.sub-card h4{font-size:18px;font-weight:600;margin-bottom:8px}
.sub-card .meta{display:flex;gap:16px;font-size:14px;color:var(--txt3);justify-content:center}
.sub-success-wrap .sub-card{max-width:460px;margin:0 auto 36px;animation:fadeUp .3s var(--ease) .2s both}
.sub-success-btns{position:absolute;bottom:40px;left:0;right:0;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;animation:fadeUp .3s var(--ease) .25s both}
.sub-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:18px 40px;border-radius:var(--radius-pill);font-size:17px;font-weight:600;cursor:pointer;border:none;font-family:var(--font);transition:transform .15s;will-change:transform}
.sub-btn:hover{transform:scale(1.03)}
.sub-btn:active{transform:scale(.96)}
.sub-btn.primary{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;box-shadow:0 4px 16px var(--blue-glow)}
.sub-btn.secondary{background:rgba(255,255,255,.06);color:var(--txt2);border:1px solid rgba(255,255,255,.08)}
.sub-canvas{position:fixed;inset:0;pointer-events:none;z-index:9999}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}

@media(max-width:700px){.bp-modal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .shell-head{padding:16px 16px 0}
  .shell-head h1{font-size:28px}
  .wstep{padding:16px 16px 80px}
  .shell-foot{padding:10px 16px 16px}
  .stitle{font-size:22px}
  .fmt-grid{grid-template-columns:1fr;max-width:280px}
  .badge-grid{flex-direction:column;align-items:center}
  .drop-zone{padding:24px 16px}
  .sd .dl{display:none!important}
  .steps{gap:4px;padding:8px 12px}
}
@media(max-width:480px){
  .shell-head{padding:10px 12px 0}
  .shell-head h1{font-size:22px}
  .shell-head p{font-size:14px;margin-bottom:16px}
  .wstep{padding:12px 14px 90px}
  .stitle{font-size:18px}
  .sdesc{font-size:14px;margin-bottom:24px}
  .shell-foot{padding:8px 14px 14px}
  .btn{min-height:44px;font-size:14px}
  .bp-modal-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  input,textarea,select{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ═══ SETTINGS.HTML ═══ */
/* ── Page-specific: components not in design-system.css ── */

/* Stagger entrance */
.section:nth-child(1) { animation: fadeUp .25s var(--ease) 0s backwards }
.section:nth-child(2) { animation: fadeUp .25s var(--ease) .06s backwards }
.section:nth-child(3) { animation: fadeUp .25s var(--ease) .12s backwards }

/* Section head sub-styles */
.sec-head svg { width: var(--s3); height: var(--s3); color: var(--blue); flex-shrink: 0 }
.sec-head h2 { font-size: var(--s3); font-weight: 600; color: var(--txt) }

/* Rows */
.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); padding: var(--s2) var(--s1); margin: 0 calc(var(--s1) * -1);
  border-bottom: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-md); transition: background .2s var(--ease);
}
.row:hover { background: rgba(255,255,255,.03) }
.row:last-child { border-bottom: none }
.row h4 { font-size: var(--s2); font-weight: 600; margin-bottom: var(--s0); color: var(--txt) }
.row p { font-size: 13px; color: var(--txt3) }

/* Toggle switch */
.tog { position: relative; width: var(--s6); height: 28px; flex-shrink: 0 }
.tog input { opacity: 0; width: 0; height: 0 }
.tog-sl {
  position: absolute; cursor: pointer; inset: 0;
  background: rgba(255,255,255,.12); border-radius: 28px;
  transition: background .15s var(--ease);
}
.tog-sl::before {
  content: ''; position: absolute; height: 22px; width: 22px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%;
  transition: transform .15s var(--ease);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.tog input:checked + .tog-sl { background: var(--blue) }
.tog input:checked + .tog-sl::before { transform: translateX(20px) }

/* Segmented control */
.seg-ctrl {
  display: flex; background: rgba(255,255,255,.06);
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}
.seg-btn {
  padding: var(--s1) var(--s2); font-size: 13px; font-weight: 600;
  font-family: var(--font); color: var(--txt3); background: transparent;
  border: none; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.seg-btn:not(:last-child) { border-right: 1px solid rgba(255,255,255,.06) }
.seg-btn.active {
  background: var(--blue); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.seg-btn:hover:not(.active) { background: rgba(255,255,255,.04); color: var(--txt2) }

/* Section actions */
.sec-actions {
  display: flex; justify-content: flex-end; gap: var(--s1);
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Mobile */
@media (max-width: 480px) {
  .shell-head { padding: var(--s1) var(--s1) 0 }
  .shell-inner { padding: var(--s1) var(--s1) var(--s6) }
  .pg-title { font-size: var(--s3) }
  .sec-body { padding: var(--s2) }
  .btn { width: 100%; justify-content: center; min-height: 44px }
  .sec-actions { flex-direction: column }
  .seg-btn { padding: var(--s1) var(--s1); font-size: 12px }
}


/* ═══ STORAGE.HTML ═══ */

/* ── Page context: rendered inside portal iframe shell ── */

/* ── Shell layout overrides (base in common.css) ── */
.shell-head { max-width: none; animation: none }
.shell-inner { max-width: none; padding: 12px 28px 72px }

/* ── Page title overrides (base in common.css) ── */
.pg-title { background: none; -webkit-text-fill-color: var(--txt); color: var(--txt) }
.pg-sub { margin-bottom: 16px }

/* ── Toolbar override (common.css .toolbar uses padding; page needs no side padding) ── */
.toolbar { padding: 0; margin-bottom: 16px }

/* ── Search box override (common.css .search-box is a plain input; page needs icon wrapper) ── */
.search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass);
  border: var(--glass-b);
  border-top-color: var(--glass-bt);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  flex: 1;
  max-width: 320px;
  box-shadow: var(--sh);
  transition: border-color .15s var(--ease);
}
.search-wrap:focus-within { border-color: rgba(41,151,255,.35) }
.search-wrap svg { width: 14px; height: 14px; color: var(--txt4); flex-shrink: 0 }
.search-wrap input { background: transparent; border: none; outline: none; color: var(--txt); font-size: 13px; font-family: var(--font); width: 100% }
.search-wrap input::placeholder { color: var(--txt4) }
.folder-count { font-size: 12px; color: var(--txt3); font-weight: 600 }

/* ── Breadcrumb (no design-system equivalent) ── */
.breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 13px }
.bc-item { color: var(--txt3); cursor: pointer; transition: color .15s var(--ease); display: flex; align-items: center; gap: 4px }
.bc-item:hover { color: var(--txt) }
.bc-item.active { color: var(--txt); font-weight: 600; cursor: default }
.bc-sep { color: var(--txt4) }
.bc-item svg { width: 14px; height: 14px }

/* ── Folder grid (page-specific layout) ── */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px }
.fc {
  background: var(--glass);
  border: var(--glass-b);
  border-top-color: var(--glass-bt);
  border-radius: var(--r-xl);
  cursor: pointer;
  box-shadow: var(--sh);
  text-align: center;
  overflow: hidden;
  animation: fadeUp .25s var(--ease) backwards;
  transition: transform .12s var(--ease-q), border-color .15s var(--ease);
}
.fc:hover { border-color: rgba(41,151,255,.3); transform: translateY(-3px) }
.fc:active { transform: scale(.96); transition-duration: .08s }

.folder-thumb {
  width: 100%;
  aspect-ratio: 9/16;
  max-height: 140px;
  background-size: cover;
  background-position: center;
  background-color: rgba(10,10,15,.6);
  position: relative;
  overflow: hidden;
}
.folder-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6)) }

.folder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: opacity .2s var(--ease);
}
.folder-icon svg { width: 22px; height: 22px; color: rgba(255,255,255,.7) }
.folder-icon.project { border-color: rgba(126,203,161,.25) }
.folder-icon.project svg { color: rgba(126,203,161,.8) }
.fc.has-thumb .folder-icon { opacity: 0 }

.folder-body { padding: 12px 14px 14px }
.folder-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--txt) }
.folder-meta { font-size: 11px; color: var(--txt3) }
.folder-role { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-top: 5px }

/* ── File list (no design-system equivalent) ── */
.file-list { display: flex; flex-direction: column; gap: 4px }
.file-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--glass);
  border: var(--glass-b);
  border-top-color: var(--glass-bt);
  border-radius: var(--r-lg);
  cursor: pointer;
  box-shadow: var(--sh);
  animation: fadeUp .2s var(--ease) backwards;
  transition: transform .12s var(--ease-q), border-color .15s var(--ease);
}
.file-row:hover { border-color: rgba(41,151,255,.3); transform: translateX(4px) }
.file-row:active { transform: scale(.98); transition-duration: .08s }

.file-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.file-icon.video  { background: linear-gradient(135deg, rgba(191,90,242,.2),  rgba(191,90,242,.08)) }
.file-icon.video  svg { color: var(--purple) }
.file-icon.image  { background: linear-gradient(135deg, rgba(126,203,161,.2), rgba(126,203,161,.08)) }
.file-icon.image  svg { color: var(--green) }
.file-icon.doc    { background: linear-gradient(135deg, rgba(41,151,255,.2),  rgba(41,151,255,.08)) }
.file-icon.doc    svg { color: var(--blue) }
.file-icon.folder { background: linear-gradient(135deg, rgba(255,214,10,.2),  rgba(255,214,10,.08)) }
.file-icon.folder svg { color: var(--gold) }
.file-icon.other  { background: rgba(255,255,255,.05) }
.file-icon.other  svg { color: var(--txt3) }
.file-icon svg { width: 20px; height: 20px }

.file-info { flex: 1; min-width: 0 }
.file-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--txt) }
.file-detail { font-size: 11px; color: var(--txt3); margin-top: 2px }
.file-size { font-size: 12px; color: var(--txt4); font-weight: 500; flex-shrink: 0; min-width: 60px; text-align: right }

/* ── Empty & loading states (spinner + empty in common.css) ── */
.loading-state { text-align: center; padding: 60px }

/* ── Preview modal (no design-system equivalent) ── */
.pv-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.85);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.pv-overlay.show { display: flex; animation: fadeIn .15s ease }
.pv-top { position: absolute; top: 0; left: 0; right: 0; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; z-index: 2 }
.pv-name { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60% }
.pv-close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s var(--ease); flex-shrink: 0 }
.pv-close:hover { background: rgba(255,255,255,.2) }
.pv-body { max-width: 90vw; max-height: 80vh; display: flex; align-items: center; justify-content: center }
.pv-body img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5) }
.pv-body video { max-width: 90vw; max-height: 80vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5); outline: none }
.pv-info { text-align: center; padding: 40px; color: var(--txt2) }
.pv-info svg { width: 64px; height: 64px; margin-bottom: 16px; opacity: .3 }
.pv-info h3 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 4px }
.pv-info p { font-size: 13px; margin-bottom: 16px }
.pv-dl { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: var(--blue); color: #fff; border: none; border-radius: var(--r-md); font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: background .15s var(--ease) }
.pv-dl:hover { background: var(--blue-hv) }

/* ── Mobile ── */
@media (max-width: 768px) {
  .shell-head { padding: 16px 16px 0 }
  .shell-inner { padding: 8px 16px 48px }
  .folder-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) }
}
@media (max-width: 480px) {
  .toolbar { flex-direction: column; align-items: stretch }
  .search-wrap { max-width: none }
  .folder-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) }
  input, textarea, select { font-size: 16px !important }
}


/* ═══ TEAM.HTML ═══ */

/* ══════════════════════════════════════════════════════════════
   TEAM HUB — page-specific components only
   Components NOT available in design-system.css or common.css.
   ══════════════════════════════════════════════════════════════ */


/* ── Team filter pills (page-specific) ── */
.tf-row{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.tf-pill{padding:6px 16px;border-radius:100px;font-size:12px;font-weight:600;cursor:pointer;transition:opacity 80ms;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--txt3);font-family:var(--font)}
.tf-pill:hover{border-color:rgba(255,255,255,.16);color:var(--txt2)}
.tf-pill.active{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff;border-color:var(--blue)}

/* ── 3-column dashboard (page-specific) ── */
.dash-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;height:100%}
.dash-col{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.dash-col-head{font-size:14px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.dash-col-head .cnt{font-size:11px;color:var(--txt3);font-weight:500;background:rgba(255,255,255,.06);padding:2px 8px;border-radius:100px}
.dash-col-body{flex:1;overflow-y:auto;padding-right:4px}
.dash-col-body::-webkit-scrollbar{width:4px}
.dash-col-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* ── Leaderboard avatar img (extends common.css lb-*) ── */
.lb-avatar img{width:100%;height:100%;object-fit:cover}

/* ── Project card overrides (extends common.css pj-*) ── */
.pj-card{box-shadow:var(--sh);transition:border-color .15s}
.pj-card:hover{border-color:rgba(255,255,255,.16)}
.pj-card.late{border-left:3px solid var(--red)}
.pj-name{margin-bottom:4px}
.pj-row{gap:6px;font-size:11px;color:var(--txt3);flex-wrap:wrap}
.pj-editor{display:flex;align-items:center;gap:4px}
.pj-editor img{width:16px;height:16px;border-radius:50%;object-fit:cover}
.pj-due{font-family:var(--mono);font-weight:600}

/* ── Reports table (page-specific) ── */
.report-table{width:100%;border-collapse:separate;border-spacing:0 4px}
.report-table th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--txt4);text-align:left;padding:6px 10px}
.report-table td{padding:8px 10px;font-size:12px;background:var(--glass-flat);border:1px solid rgba(255,255,255,.04)}
.report-table td:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.report-table td:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.report-table tr:hover td{background:rgba(255,255,255,.04)}

/* ── Client cards (page-specific) ── */
.client-card{background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);box-shadow:var(--sh);padding:20px;margin-bottom:16px}
.client-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.client-avatar{width:44px;height:44px;border-radius:50%;background:var(--bg-sf);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--txt3);overflow:hidden;flex-shrink:0}
.client-avatar img{width:100%;height:100%;object-fit:cover}
.client-info{flex:1;min-width:0}
.client-name{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-company{font-size:12px;color:var(--txt3)}
.client-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.client-tag{padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.client-tag-active{background:rgba(126,203,161,.1);color:var(--green)}
.client-tag-trial{background:rgba(255,159,10,.1);color:var(--orange)}
.client-tag-canceled{background:rgba(192,57,43,.1);color:var(--red)}
.client-tag-tier{background:rgba(41,151,255,.1);color:var(--blue)}
.client-projects-row{display:flex;gap:10px;overflow-x:auto;padding:4px 0}
.proj-mini{flex-shrink:0;width:220px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);padding:12px 14px;transition:border-color .15s}
.proj-mini:hover{border-color:rgba(255,255,255,.14)}
.proj-mini-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.proj-mini-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.proj-mini-tag{padding:2px 6px;border-radius:100px;font-size:9px;font-weight:700;text-transform:uppercase}
.proj-mini-timer{font-size:11px;font-weight:600;font-family:var(--mono)}

/* ── Section title (page-specific) ── */
.sec-title{font-size:16px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sec-title .sec-count{font-size:12px;color:var(--txt3);font-weight:500}

/* ── Team health hero (page-specific) ── */
.health-hero{text-align:center;padding:32px 20px;background:var(--glass);border:var(--glass-b);border-top-color:var(--glass-bt);border-radius:var(--r-xl);box-shadow:var(--sh);margin-bottom:20px}
.health-hero-score{font-size:64px;font-weight:800;line-height:1}
.health-hero-grade{display:inline-block;padding:4px 16px;border-radius:100px;font-size:18px;font-weight:800;color:#fff;margin-top:8px}
.health-hero-label{font-size:13px;color:var(--txt3);margin-top:8px}
.score-bars{display:grid;gap:12px;margin-bottom:20px}

/* ── Empty state (page-specific) ── */
.empty-col{text-align:center;padding:40px 16px;color:var(--txt4);font-size:13px}
.empty-col svg{width:32px;height:32px;margin-bottom:8px;opacity:.3}

/* ── Responsive ── */
@media(max-width:1100px){
  .dash-3col{grid-template-columns:1fr 1fr}
  .dash-col:nth-child(3){display:none}
}
@media(max-width:900px){
  .dash-3col{grid-template-columns:1fr}
  .dash-col:nth-child(2),.dash-col:nth-child(3){display:none}
}
@media(max-width:600px){
  .shell-head{padding:16px 16px 0}
  .tab-panel{padding:16px 16px 60px}
}
@media(max-width:480px){
  .sub-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .sub-tab{white-space:nowrap;flex-shrink:0}
  input,textarea,select{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ═══ LOGIN.HTML ORIGINAL CSS ═══ */

/* ── Login-only layout (no design-system equivalent) ── */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 40px 20px;
}

/* ── Logo with spinning ring (login-specific) ── */
.logo-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 28px;
}
.logo-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.04);
  border-top-color: rgba(41,151,255,.4);
  border-right-color: rgba(41,151,255,.12);
  animation: loginSpin 8s linear infinite;
  will-change: transform;
}
.logo-orb {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 20px rgba(0,0,0,.35), 0 0 30px rgba(41,151,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-orb img { width: 66px; height: 66px; object-fit: contain; opacity: .95 }

/* ── Login container ── */
.login-container {
  width: 100%;
  max-width: 362px;
  margin: auto;
  text-align: center;
}

/* ── Step heading (login-specific) ── */
.heading { margin-bottom: 24px }
.heading h1 { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 4px }
.heading p { font-size: 12px; color: var(--txt2) }

/* ── Step visibility ── */
.form-step { display: none; animation: stepIn .2s var(--ease-q) }
.form-step.active { display: block }

/* ── Input group ── */
.input-group { margin-bottom: 16px }

/* ── 6-digit code inputs (login-specific, no DS equivalent) ── */
.code-inputs { display: flex; gap: 5px; justify-content: center; margin-bottom: 16px }
.code-input {
  width: 30px;
  height: 36px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--txt);
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.04), 0 1px 3px rgba(0,0,0,.15);
  outline: none;
  transition: border-color 80ms, box-shadow 80ms;
  caret-color: var(--blue);
}
.code-input:focus {
  border-color: rgba(41,151,255,.5);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2), 0 0 0 3px rgba(41,151,255,.12), 0 0 16px rgba(41,151,255,.06);
}
.code-input.filled    { border-color: rgba(41,151,255,.4); background: linear-gradient(180deg, rgba(41,151,255,.08) 0%, rgba(41,151,255,.03) 100%) }
.code-input.auto-fill { border-color: rgba(41,151,255,.7); background: rgba(41,151,255,.1); box-shadow: 0 0 0 3px rgba(41,151,255,.15); animation: digitPop .2s var(--ease-q) }
.code-input.error     { border-color: var(--red); animation: shake .3s var(--ease-q) }

/* ── Auto-verify state (ring speeds up) ── */
.auto-verifying .logo-ring { border-top-color: rgba(41,151,255,.6); animation: loginSpin 3s linear infinite }
.auto-verifying .logo-orb  { border-color: rgba(41,151,255,.3) }

/* ── Inline error message (login-specific) ── */
.error-msg {
  display: none;
  background: rgba(192,57,43,.08);
  border: 1px solid rgba(192,57,43,.2);
  border-radius: var(--r-md);
  padding: 11px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--red);
}
.error-msg.visible { display: block }

/* ── Login button overrides ── */
.login-btn {
  width: 100%;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  border-radius: var(--r-lg);
  border: none;
  cursor: pointer;
  min-height: 40px;
  position: relative;
  transition: transform 80ms, box-shadow 80ms;
  will-change: transform;
}
.login-btn-primary {
  background: linear-gradient(180deg, #3da5ff 0%, #2997ff 45%, #1d85e8 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-bottom-color: rgba(0,0,0,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.3), 0 4px 16px rgba(41,151,255,.15);
}
.login-btn-primary:hover   { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.1), 0 4px 14px rgba(0,0,0,.3), 0 6px 24px rgba(41,151,255,.2) }
.login-btn-primary:active  { transform: translateY(0) scale(.98); transition: transform 40ms; box-shadow: inset 0 2px 4px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.3) }
.login-btn-primary:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none }

.login-btn-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
  color: var(--txt2);
  border: 1px solid rgba(255,255,255,.1);
  margin-top: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 4px rgba(0,0,0,.2);
}
.login-btn-secondary:hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.05) 100%); color: var(--txt) }

/* ── Loading spinner inside button ── */
.login-btn.loading { color: transparent; pointer-events: none }
.login-btn.loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ── Resend code link (login-specific) ── */
.resend-link { text-align: center; margin-top: 14px }
.resend-link button {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 13px;
  font-family: var(--font);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--r-md);
  min-height: 44px;
  transition: opacity .08s;
}
.resend-link button:hover    { opacity: .8 }
.resend-link button:disabled { color: var(--txt3); cursor: not-allowed; opacity: 1 }

/* ── "New to Content Bug" link (login-specific) ── */
.create-section { margin-top: 24px; text-align: center }
.create-link { color: var(--txt3); font-size: 12px; text-decoration: none; font-family: var(--font); transition: color 80ms }
.create-link span { color: var(--blue); font-weight: 500 }
.create-link:hover { color: var(--txt2) }
.create-link:hover span { color: #5ab4ff }

/* ── Access disabled state (login-specific) ── */
.disabled-state { padding: 8px 0; animation: stepIn .2s var(--ease-q) }
.disabled-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(192,57,43,.08);
  border: 1px solid rgba(192,57,43,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.disabled-icon svg { width: 22px; height: 22px; color: #c0392b }
.disabled-state h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px }
.disabled-state p  { font-size: 14px; color: var(--txt2); line-height: 1.5; margin-bottom: 20px }
.support-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(41,151,255,.1) 0%, rgba(41,151,255,.04) 100%);
  border: 1px solid rgba(41,151,255,.15);
  box-shadow: inset 0 1px 0 rgba(41,151,255,.12), 0 1px 4px rgba(0,0,0,.2);
  transition: transform 80ms;
  will-change: transform;
}
.support-link:hover { transform: translateY(-1px) }

/* ── Success morph animation (login-specific) ── */
.success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.morph-container {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(-50px);
}
.morph-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transition: opacity .25s var(--ease);
}
.morph-img { width: 44px; height: 44px; object-fit: contain }
.morph-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.08);
  border-top-color: var(--blue);
  animation: spin 2.5s linear infinite;
  transition: border-color .25s, opacity .2s;
}
.morph-check {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.morph-check .check-circle {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-dasharray: 226;
  stroke-dashoffset: 226;
  transition: stroke-dashoffset .45s var(--ease);
}
.morph-check .check-tick {
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 56;
  stroke-dashoffset: 56;
  transition: stroke-dashoffset .3s var(--ease) .15s;
}
.morph-container.phase-in { opacity: 1; transform: translateY(0); transition: opacity .35s var(--ease), transform .4s var(--ease-q) }
.morph-container.phase-check .morph-ring     { border-color: transparent; opacity: 0 }
.morph-container.phase-check .morph-logo-wrap { opacity: 0 }
.morph-container.phase-check .morph-check    { opacity: 1 }
.morph-container.phase-check .check-circle   { stroke-dashoffset: 0 }
.morph-container.phase-check .check-tick     { stroke-dashoffset: 0 }

.success-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.success-sub {
  font-size: 13px;
  color: var(--txt3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s var(--ease) .05s, transform .25s var(--ease) .05s;
}
.success-title.visible,
.success-sub.visible { opacity: 1; transform: translateY(0) }

/* ── Footer links ── */
.login-footer { margin-top: 24px }
.login-footer a { color: var(--txt3); font-size: 12px; text-decoration: none; transition: color .08s }
.login-footer a:hover { color: var(--txt) }

/* ── Mobile ── */
@media (max-width: 480px) {
  .login-container    { max-width: 255px }
  .glass-bubble       { padding: 28px 20px 16px }
  .logo-wrap          { width: 88px; height: 88px; margin-bottom: 22px }
  .logo-orb           { width: 88px; height: 88px }
  .logo-orb img       { width: 56px; height: 56px }
  .heading h1         { font-size: 20px }
  .heading p          { font-size: 11px }
  .code-input         { width: 28px; height: 34px; font-size: 14px }
  input, textarea, select { font-size: 16px !important }
}


/* ═══════════════════════════════════════════════════════════════
   COMMON.CSS — RECOVERED (was deleted, contained shared portal classes)
   guide-dot, spinner, grade-pill, btn-danger, lb-*, sbar-*, doc-*, etc.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   CONTENT BUG — PORTAL COMMON CSS
   Shared component classes used across 3+ portal sub-pages.
   Design tokens come from design-system.css (loaded first).
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }
@keyframes spin     { to { transform:rotate(360deg) } }
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }

/* ══════════════════════════════════════════════════════════════
   1. SHELL LAYOUT
   ══════════════════════════════════════════════════════════════ */
.shell-head  { flex-shrink:0; padding:24px 28px 0; max-width:900px; width:100%; animation:fadeUp .3s var(--ease-q) backwards }
.shell-body  { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain }
.shell-body::-webkit-scrollbar { width:0 }
.shell-inner { max-width:900px; padding:16px 28px 80px }
.shell-foot  { flex-shrink:0; padding:14px 40px 24px; display:flex; justify-content:center; gap:14px }
.shell-sub   { font-size:14px; color:var(--txt2); margin-top:4px }

/* ══════════════════════════════════════════════════════════════
   2. PAGE HEADERS
   ══════════════════════════════════════════════════════════════ */
.pg-title {
  font-size:clamp(24px,3.5vw,40px); font-weight:700; letter-spacing:-.03em;
  line-height:1.1; margin-bottom:6px; font-family:var(--font-display);
  background:linear-gradient(135deg,var(--txt),var(--txt3));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.pg-sub { color:var(--txt2); font-size:14px; margin-bottom:20px }

/* Gradient accent span inside headings */
.grad {
  background:linear-gradient(135deg,var(--blue),var(--blue-hv));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ══════════════════════════════════════════════════════════════
   3. SECTION CARDS (glass container for settings/account groups)
   ══════════════════════════════════════════════════════════════ */
.section {
  background:rgba(10,14,28,.52); border:1px solid rgba(255,255,255,.07);
  border-top-color:rgba(255,255,255,.14); border-radius:var(--r-2xl);
  margin-bottom:24px; overflow:hidden; box-shadow:var(--sh);
  transition:border-color .15s var(--ease),transform .15s var(--ease);
}
.section:hover { border-color:rgba(41,151,255,.3); transform:translateY(-2px) }
.sec-head { display:flex; align-items:center; gap:12px; padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.06) }
.sec-body { padding:24px }

/* ══════════════════════════════════════════════════════════════
   4. BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 36px; border-radius:var(--radius-pill); font-size:16px;
  font-weight:600; font-family:var(--font); cursor:pointer; border:none;
  transition:transform .15s var(--ease-q); will-change:transform;
}
.btn-primary {
  background:var(--blue); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.15),0 4px 16px rgba(41,151,255,.3);
}
.btn-primary:hover { transform:translateY(-1px) }
.btn-primary:active { transform:scale(.97) }

.btn-back {
  background:rgba(10,14,28,.52); border:1px solid rgba(255,255,255,.07);
  border-top-color:rgba(255,255,255,.14); color:var(--txt2); box-shadow:var(--sh);
}
.btn-back:hover { border-color:rgba(255,255,255,.15); color:#fff; transform:translateY(-1px) }

.btn-next {
  background:linear-gradient(135deg,var(--blue),var(--blue-dk)); color:#fff;
  box-shadow:0 8px 32px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,.3);
  min-width:160px;
}
.btn-next:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 16px 48px var(--blue-glow) }
.btn-next:disabled { opacity:.35; cursor:not-allowed; transform:none; box-shadow:none }
.btn-next:active:not(:disabled) { transform:scale(.97) }

.btn-danger {
  background:rgba(192,57,43,.15); color:var(--red);
  border:1px solid rgba(192,57,43,.25);
}
.btn-danger:hover { background:rgba(192,57,43,.25); transform:translateY(-1px) }

.btn-ghost {
  background:transparent; color:var(--txt2); border:1px solid rgba(255,255,255,.08);
}
.btn-ghost:hover { color:var(--txt); border-color:rgba(255,255,255,.15) }

/* ══════════════════════════════════════════════════════════════
   5. TABS
   ══════════════════════════════════════════════════════════════ */

/* Glass container pill tabs (admin, dashboard) */
.sub-tabs {
  display:flex; gap:4px; padding:4px; background:var(--glass);
  border:var(--glass-b); border-top-color:var(--glass-bt);
  border-radius:14px; box-shadow:var(--sh); width:fit-content;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.sub-tab {
  padding:7px 18px; border:none; border-radius:10px; font-size:12px;
  font-weight:600; color:var(--txt3); background:transparent; cursor:pointer;
  transition:opacity 80ms; font-family:var(--font); white-space:nowrap;
}
.sub-tab:hover { color:var(--txt2) }
.sub-tab.active {
  background:rgba(255,255,255,.1); color:var(--txt);
  box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 .5px 0 rgba(255,255,255,.1);
}

/* Category tabs (pipeline, dashboard) */
.cat-tabs { display:flex; gap:4px; padding:4px; flex-wrap:wrap }
.cat-tab {
  padding:8px 20px; border-radius:100px; font-size:13px; font-weight:600;
  cursor:pointer; border:1px solid rgba(255,255,255,.08); background:transparent;
  color:var(--txt3); transition:opacity .12s var(--ease),border-color .12s,color .12s;
  white-space:nowrap; font-family:var(--font);
}
.cat-tab:hover { color:var(--txt2); border-color:rgba(255,255,255,.14) }
.cat-tab.active {
  background:linear-gradient(180deg,rgba(41,151,255,.2),rgba(41,151,255,.08));
  border-color:var(--blue); color:var(--blue);
  box-shadow:0 0 12px rgba(41,151,255,.12);
}

/* Tab panels */
.tab-panels { flex:1; overflow:hidden; position:relative }
.tab-panel  { position:absolute; inset:0; overflow-y:auto; padding:16px 32px 80px; display:none }
.tab-panel.active { display:block; animation:fadeUp .3s var(--ease) }

/* ══════════════════════════════════════════════════════════════
   6. TOAST NOTIFICATIONS
   ══════════════════════════════════════════════════════════════ */
.toast {
  position:fixed; bottom:24px; right:24px; padding:14px 20px;
  background:rgba(10,14,28,.82); border:1px solid rgba(255,255,255,.12);
  border-top-color:rgba(255,255,255,.18); border-radius:var(--r-lg);
  font-size:14px; font-family:var(--font); display:flex; align-items:center; gap:10px;
  transform:translateY(100px); opacity:0;
  box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 .5px 0 rgba(255,255,255,.12);
  transition:transform .2s var(--ease),opacity .15s var(--ease);
  z-index:1000; pointer-events:none;
}
.toast.visible { transform:translateY(0); opacity:1; pointer-events:auto }
.toast.success { border-color:var(--green); color:var(--green) }
.toast.error   { border-color:var(--red); color:var(--red) }

/* ══════════════════════════════════════════════════════════════
   7. ROLE PILLS
   ══════════════════════════════════════════════════════════════ */
.role-badge  { display:inline-flex; padding:3px 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em }
.role-owner  { background:rgba(255,214,10,.15); border:1px solid rgba(255,214,10,.3);  color:var(--gold) }
.role-editor { background:rgba(191,90,242,.15); border:1px solid rgba(191,90,242,.3);  color:var(--purple) }
.role-admin  { background:rgba(192,57,43,.15);  border:1px solid rgba(192,57,43,.3);   color:var(--red) }
.role-client { background:rgba(41,151,255,.15); border:1px solid rgba(41,151,255,.3);  color:var(--blue) }
.role-trial  { background:rgba(255,159,10,.15); border:1px solid rgba(255,159,10,.3);  color:var(--orange) }

/* ══════════════════════════════════════════════════════════════
   8. SCORE / GRADE SYSTEM
   ══════════════════════════════════════════════════════════════ */
.sc-hi { color:var(--green) }
.sc-md { color:var(--orange) }
.sc-lo { color:var(--red) }
.sc-ok { color:var(--blue) }

.grade-pill { display:inline-block; padding:2px 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:700; color:#fff }
.grade-a, .grade-A { background:var(--green) }
.grade-b, .grade-B { background:var(--blue) }
.grade-c, .grade-C { background:var(--orange) }
.grade-d, .grade-D { background:var(--red) }
.grade-f, .grade-F { background:var(--red) }

/* Score bars */
.sbar       { background:var(--glass); border:var(--glass-b); border-top-color:var(--glass-bt); border-radius:var(--r-lg); padding:14px 18px }
.sbar-top   { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px }
.sbar-label { font-size:12px; font-weight:600; color:var(--txt2) }
.sbar-val   { font-size:16px; font-weight:700 }
.sbar-track { height:6px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden }
.sbar-fill  { height:100%; border-radius:3px; transform-origin:left; transition:transform .5s var(--ease); will-change:transform }

/* ══════════════════════════════════════════════════════════════
   9. PAYOUT CARDS
   ══════════════════════════════════════════════════════════════ */
.payout-card  { background:var(--glass); border:var(--glass-b); border-top-color:var(--glass-bt); border-radius:var(--r-xl); box-shadow:var(--sh); padding:20px }
.po-row       { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.po-label     { font-size:13px; color:var(--txt2) }
.po-val       { font-size:15px; font-weight:700 }
.po-tiers     { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px }
.po-tier      { padding:10px; border-radius:var(--r-lg); text-align:center; font-size:12px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02) }
.po-tier.active-tier { border-color:var(--green); background:rgba(126,203,161,.06) }
.po-tier-pct  { font-size:16px; font-weight:700; margin-bottom:2px }
.po-tier-label { color:var(--txt3); font-size:10px; text-transform:uppercase }
.po-total     { font-size:28px; font-weight:800; color:var(--green); margin-top:12px }

/* ══════════════════════════════════════════════════════════════
   10. LEADERBOARD
   ══════════════════════════════════════════════════════════════ */
.lb-card       { background:var(--glass); border:var(--glass-b); border-top-color:var(--glass-bt); border-radius:var(--r-xl); box-shadow:var(--sh); padding:14px 16px; margin-bottom:10px; transition:border-color .15s var(--ease) }
.lb-card:hover { border-color:rgba(255,255,255,.18) }
.lb-card-me, .lb-card.lb-me { border-left:3px solid var(--blue); background:linear-gradient(135deg,rgba(41,151,255,.06) 0%,rgba(10,14,28,.55) 100%) }
.lb-top        { display:flex; align-items:center; gap:10px; margin-bottom:8px }
.lb-rank       { font-size:18px; font-weight:800; width:28px; text-align:center; flex-shrink:0 }
.lb-rank.r1, .r1 { color:var(--gold) }
.lb-rank.r2, .r2 { color:#c0c0c0 }
.lb-rank.r3, .r3 { color:#cd7f32 }
.lb-avatar     { width:32px; height:32px; border-radius:50%; overflow:hidden; flex-shrink:0 }
.lb-info       { flex:1; min-width:0 }
.lb-name       { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lb-meta       { display:flex; gap:4px; align-items:center; margin-top:2px; flex-wrap:wrap }
.lb-tag        { padding:2px 7px; border-radius:100px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em }
.lb-tag-core      { background:rgba(41,151,255,.1); color:var(--blue) }
.lb-tag-master    { background:rgba(191,90,242,.1); color:var(--purple) }
.lb-tag-applicant, .lb-tag-new { background:rgba(126,203,161,.1); color:var(--green) }
.lb-tag-training  { background:rgba(255,159,10,.1); color:var(--orange) }
.lb-grade      { margin-left:auto; flex-shrink:0 }
.lb-scores     { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:8px }
.lb-sc         { text-align:center; padding:6px 4px; border-radius:var(--r-sm); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.04) }
.lb-sc-label   { font-size:9px; color:var(--txt4); text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px }
.lb-sc-val     { font-size:14px; font-weight:700 }
.lb-stats      { display:flex; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--txt3) }
.lb-stat       { display:flex; align-items:center; gap:4px }
.lb-stat-val   { font-weight:700; color:var(--txt2) }
.lb-overall       { display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px solid rgba(255,255,255,.06); margin-top:6px }
.lb-overall-label { font-size:11px; font-weight:600; color:var(--txt3) }
.lb-overall-val   { font-size:18px; font-weight:800 }

/* ══════════════════════════════════════════════════════════════
   11. STATE MODIFIERS
   ══════════════════════════════════════════════════════════════ */
.spinner {
  display:inline-block; width:24px; height:24px;
  border:2px solid rgba(41,151,255,.2); border-top-color:var(--blue);
  border-radius:50%; animation:spin .8s linear infinite;
}
.loading { text-align:center; padding:48px; color:var(--txt3); font-size:14px }
.empty   { text-align:center; padding:48px 16px; color:var(--txt4); font-size:13px }
.empty svg { width:64px; height:64px; margin-bottom:16px; opacity:.2 }
.empty h3  { font-size:16px; font-weight:600; color:var(--txt2); margin-bottom:4px }
.empty p   { font-size:13px }

/* ══════════════════════════════════════════════════════════════
   12. VISIBILITY / ROLE 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 }

.client-only { display:none }
body[data-role="client"] .client-only,
body[data-role="trial"]  .client-only { display:flex }

/* ══════════════════════════════════════════════════════════════
   13. PROJECT CARDS (shared between dashboard + team)
   ══════════════════════════════════════════════════════════════ */
.pj-card { background:var(--glass); border:var(--glass-b); border-top-color:var(--glass-bt); border-radius:var(--r-lg); padding:12px 14px; margin-bottom:8px }
.pj-row  { display:flex; align-items:center; justify-content:space-between; gap:8px }
.pj-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 }
.pj-due  { font-size:11px; color:var(--txt3); flex-shrink:0 }
.pj-due.overdue { color:var(--red) }
.pj-tag  { padding:2px 8px; border-radius:100px; font-size:9px; font-weight:700; text-transform:uppercase }

/* ══════════════════════════════════════════════════════════════
   14. KANBAN (shared between admin + pipeline)
   ══════════════════════════════════════════════════════════════ */
.kanban    { display:flex; gap:16px; flex:1; overflow-x:auto; padding:0 28px 20px; -webkit-overflow-scrolling:touch }
.col       { min-width:280px; max-width:340px; flex:1; display:flex; flex-direction:column; background:var(--glass); border:var(--glass-b); border-top-color:var(--glass-bt); border-radius:var(--r-xl); box-shadow:var(--sh); overflow:hidden }
.col-hdr   { display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06) }
.col-dot   { width:8px; height:8px; border-radius:50%; flex-shrink:0 }
.col-name, .col-title { font-size:13px; font-weight:600; flex:1 }
.col-cnt, .col-count  { font-size:10px; color:var(--txt3); background:rgba(255,255,255,.06); padding:2px 8px; border-radius:100px }
.col-body  { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:6px }
.col-body::-webkit-scrollbar { width:0 }
.drag-over { background:rgba(41,151,255,.04); border-color:rgba(41,151,255,.2) }

/* Person cards (kanban) */
.person { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--glass); border:var(--glass-b); border-top-color:var(--glass-bt); border-radius:var(--r-lg); cursor:grab; transition:border-color .12s,transform .12s }
.person:hover { border-color:rgba(255,255,255,.18); transform:translateY(-1px) }
.person.dragging { opacity:.4; transform:scale(.95) }
.p-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; color:#fff }
.editor-av { background:var(--blue) }
.client-av { background:var(--green) }
.trial-av  { background:var(--orange) }
.admin-av  { background:var(--purple) }
.owner-av  { background:var(--gold); color:#000 }
.p-info { flex:1; min-width:0 }
.p-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.p-meta { font-size:11px; color:var(--txt3); margin-top:1px }
.p-tag  { padding:2px 8px; border-radius:100px; font-size:9px; font-weight:700; text-transform:uppercase; flex-shrink:0 }
.tag-editor { background:rgba(41,151,255,.12); color:var(--blue) }
.tag-client { background:rgba(126,203,161,.12); color:var(--green) }
.tag-trial  { background:rgba(255,159,10,.12); color:var(--orange) }
.tag-admin  { background:rgba(191,90,242,.12); color:var(--purple) }
.tag-owner  { background:rgba(255,214,10,.12); color:var(--gold) }

/* ══════════════════════════════════════════════════════════════
   15. MODAL (shared between admin + pipeline)
   ══════════════════════════════════════════════════════════════ */
.modal-bg {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  /* zero-blur: replaced backdrop-filter with opaque bg */
  display:none; align-items:center; justify-content:center; z-index:100;
}
.modal-bg.visible, .modal-bg.open { display:flex }
.modal {
  background:rgba(10,14,28,.92); border:1px solid rgba(255,255,255,.1);
  border-top-color:rgba(255,255,255,.18); border-radius:var(--r-2xl);
  padding:28px; max-width:420px; width:90%; box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.modal-actions { display:flex; gap:10px; margin-top:20px; justify-content:flex-end }
.modal-btn    { padding:10px 24px; border-radius:var(--radius-pill); font-size:14px; font-weight:600; cursor:pointer; border:none; font-family:var(--font) }
.modal-cancel { background:rgba(255,255,255,.06); color:var(--txt2) }
.modal-cancel:hover { background:rgba(255,255,255,.1) }
.modal-delete { background:rgba(192,57,43,.2); color:var(--red); border:1px solid rgba(192,57,43,.3) }
.modal-delete:hover { background:rgba(192,57,43,.35) }

/* ══════════════════════════════════════════════════════════════
   16. SEARCH BOX (shared between admin + storage)
   ══════════════════════════════════════════════════════════════ */
.toolbar    { display:flex; align-items:center; gap:10px; padding:0 28px 12px; flex-shrink:0; flex-wrap:wrap }
.search-box {
  flex:1; min-width:180px; padding:9px 14px 9px 36px; border-radius:var(--radius-pill);
  background:var(--glass); border:var(--glass-b); font-size:13px;
  color:var(--txt); font-family:var(--font); outline:none;
  transition:border-color .15s;
}
.search-box:focus { border-color:rgba(41,151,255,.4) }
.search-box::placeholder { color:var(--txt4) }

/* ═══════════════════════════════════════════════════════════════
   FINAL MISSING CLASSES — last 14 not in common.css or style blocks
   ═══════════════════════════════════════════════════════════════ */

/* Guide dot — step indicator */
.guide-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:background 200ms,transform 200ms;will-change:transform}
.guide-dot.active{background:var(--blue);transform:scale(1.25)}

/* btn-secondary */
.btn-secondary{background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%);color:var(--txt2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:var(--s1) var(--s3);font:600 14px/1 var(--font);cursor:pointer;transition:transform 120ms var(--ease),opacity 120ms;will-change:transform}
.btn-secondary:hover{transform:translateY(-1px);color:var(--txt)}

/* Meeting components */
.meeting-icon{width:40px;height:40px;border-radius:var(--r-lg);background:rgba(41,151,255,.1);border:1px solid rgba(41,151,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.meeting-title{font:600 14px/1.3 var(--font);color:var(--txt)}
.meeting-sub{font:400 12px/1.4 var(--font);color:var(--txt3);margin-top:var(--s0)}

/* Document / storage components */
.doc-icon{width:36px;height:36px;border-radius:var(--r-md);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.doc-item{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);border-radius:var(--r-lg);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);transition:transform 150ms var(--ease);will-change:transform}
.doc-item:hover{transform:translateY(-1px);background:rgba(255,255,255,.05)}
.doc-name{font:500 13px/1.3 var(--font);color:var(--txt)}
.doc-status{font:500 10px/1 var(--font);text-transform:uppercase;letter-spacing:.06em;color:var(--txt3)}

/* Payout / account components */
.method-btn{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);cursor:pointer;transition:all 150ms var(--ease);font:500 13px/1 var(--font);color:var(--txt2)}
.method-btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:var(--txt)}
.method-btn.active{border-color:rgba(41,151,255,.5);background:rgba(41,151,255,.08);color:var(--txt)}
.mark-paid-btn{padding:var(--s0) var(--s2);font:600 11px/1 var(--font);color:var(--green);background:rgba(126,203,161,.08);border:1px solid rgba(126,203,161,.2);border-radius:var(--r-md);cursor:pointer;transition:all 120ms}
.mark-paid-btn:hover{background:rgba(126,203,161,.14)}

/* Timer value */
.timer-val{font:700 13px/1 var(--mono);color:var(--txt);letter-spacing:.02em}
.timer-val.urgent{color:var(--red)}
.timer-val.warning{color:var(--orange)}

/* Pipeline column header sub-elements */
.col-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s1)}
.col-sub{font:400 11px/1 var(--font);color:var(--txt3)}

/* ═══════════════════════════════════════════════════════════════
   Full viewport, iframe fills all space, left nav floats
   ═══════════════════════════════════════════════════════════════ */





.main iframe {
  width: 100%;
  height: 100%;
  flex: 1;
  border: none;
  background: transparent;
  opacity: 1;
  transition: opacity 80ms ease-out;
  display: block;
}

.main iframe.transitioning { opacity: 0; }


/* ═══════════════════════════════════════════════════════════════
   PRODUCTION PORTAL SHELL — FULL SCREEN, ALL DEVICES
   Works on MacBook, iPad, iPhone, desktop monitor
   ═══════════════════════════════════════════════════════════════ */

/* Reset html+body for portal shell pages */
.shell-page,
.shell-page body { margin:0; padding:0; overflow:hidden; height:100%; width:100%; }

/* Full viewport shell container */
.shell {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  background: var(--bg);
}

/* Main iframe area — fills everything */
.main {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Iframe fills 100% of .main */
.main iframe,
#pageFrame {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  display: block;
}

.main iframe.transitioning,
#pageFrame.transitioning { opacity: 0; }

/* Left nav — floats over the iframe, left edge */
.left-nav {
  position: fixed;
  top: 50%;
  left: 8px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
  border-radius: var(--r-xl);
  background: rgba(18,18,22,.85);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 2px 0 16px rgba(0,0,0,.4);
  width: 42px;
  transform: translateY(-50%) translateX(-34px);
  opacity: .3;
  transition: transform 180ms var(--ease), opacity 180ms var(--ease);
  will-change: transform, opacity;
}
.left-nav:hover {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* Bottom island — floats over iframe, bottom center */
.bottom-island {
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  opacity: 0;
  z-index: 999;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
  will-change: transform, opacity;
}
.bottom-island:hover,
.shell:hover .bottom-island {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Welcome stage and tour — fullscreen overlays */
.wstage, .wtour {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

/* Responsive — all screen sizes */
@media (max-width: 768px) {
  .left-nav { display: none; }
  .bottom-island {
    left: 0; right: 0;
    transform: translateX(0) translateY(80px);
    width: 100%;
    bottom: 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .bottom-island:hover,
  .shell:hover .bottom-island {
    transform: translateX(0) translateY(0);
  }
}