/* ============================================================
   PBG Copilot — Cockpit design system (prototype)
   White foundation, bluish + greenish neon accents, glowing
   blue actions, Poppins, Apple restraint. Light + dark first class.
   ============================================================ */

:root{
  /* neon accents */
  --blue:#1896cf; --blue-2:#28bfe4; --cyan:#35d6e0;
  --green:#17bd88; --green-2:#33dca6;
  --gold:#bf8c2a; --gold-2:#d7a94a;
  --red:#df4460; --red-2:#ef6a82;

  /* foundation (light) */
  --bg:#eef4f8; --bg-2:#f5f9fc; --canvas:#ffffff;
  --card:#ffffff; --card-2:#f7fbfd;
  --ink:#0b2833; --ink-2:#294a56; --muted:#5c7783; --faint:#89a2ac;
  --line:rgba(11,40,51,.10); --line-2:rgba(11,40,51,.055); --line-strong:rgba(11,40,51,.16);

  /* input surfaces (readable, both themes) */
  --field:#ffffff; --field-line:rgba(11,40,51,.18); --field-line-focus:var(--blue);
  --field-ink:#0b2833; --field-ph:#8299a3;

  /* accents as soft washes */
  --blue-soft:rgba(24,150,207,.10); --blue-line:rgba(24,150,207,.30);
  --green-soft:rgba(23,189,136,.11); --green-line:rgba(23,189,136,.34);
  --gold-soft:rgba(191,140,42,.12); --gold-line:rgba(191,140,42,.34);
  --red-soft:rgba(223,68,96,.10); --red-line:rgba(223,68,96,.34);

  --glow:0 14px 36px -12px rgba(24,150,207,.55);
  --glow-hover:0 20px 48px -12px rgba(40,191,228,.66);
  --glow-green:0 14px 36px -12px rgba(23,189,136,.5);
  --shadow-card:0 18px 44px -26px rgba(11,40,51,.34);
  --shadow-soft:0 8px 24px -16px rgba(11,40,51,.28);
  --shadow-pop:0 30px 70px -22px rgba(11,40,51,.32);

  --ease:cubic-bezier(.22,.61,.36,1);
  --r-lg:24px; --r-md:18px; --r-sm:13px; --r-pill:999px;
  --topbar-h:64px;
}

html[data-theme="dark"]{
  --blue:#2fb4de; --blue-2:#41c9ea; --cyan:#4fe0e8;
  --green:#2bd6a0; --green-2:#4fe6b6;
  --gold:#d7a94a; --gold-2:#e6c273;
  --red:#ef6a82; --red-2:#ff879b;

  --bg:#061319; --bg-2:#08202a; --canvas:#04121a;
  --card:#0c2530; --card-2:#0f2c38;
  --ink:#eaf3f4; --ink-2:#c2d6db; --muted:#93aeb7; --faint:#6d8993;
  --line:rgba(234,243,244,.13); --line-2:rgba(234,243,244,.07); --line-strong:rgba(234,243,244,.2);

  --field:#12303c; --field-line:rgba(234,243,244,.24); --field-line-focus:var(--blue-2);
  --field-ink:#eaf3f4; --field-ph:#8aa6b0;

  --blue-soft:rgba(47,180,222,.14); --blue-line:rgba(47,180,222,.38);
  --green-soft:rgba(43,214,160,.13); --green-line:rgba(43,214,160,.4);
  --gold-soft:rgba(215,169,74,.15); --gold-line:rgba(215,169,74,.4);
  --red-soft:rgba(239,106,130,.14); --red-line:rgba(239,106,130,.42);

  --glow:0 16px 40px -12px rgba(47,180,222,.5);
  --glow-hover:0 22px 52px -12px rgba(65,201,234,.6);
  --glow-green:0 16px 40px -12px rgba(43,214,160,.46);
  --shadow-card:0 20px 50px -24px rgba(0,0,0,.7);
  --shadow-soft:0 10px 28px -18px rgba(0,0,0,.65);
  --shadow-pop:0 34px 80px -24px rgba(0,0,0,.75);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;color:inherit}
h1,h2,h3{letter-spacing:-.01em;line-height:1.2}
::selection{background:rgba(40,191,228,.25)}

/* ambient neon aurora — the quiet atmosphere */
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura::before,.aura::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.9}
.aura::before{width:640px;height:640px;background:radial-gradient(circle,rgba(40,191,228,.16),transparent 70%);top:-220px;right:-140px;animation:drift1 26s var(--ease) infinite}
.aura::after{width:560px;height:560px;background:radial-gradient(circle,rgba(23,189,136,.13),transparent 70%);bottom:-240px;left:-160px;animation:drift2 30s var(--ease) infinite}
html[data-theme="dark"] .aura::before{background:radial-gradient(circle,rgba(47,180,222,.14),transparent 70%)}
html[data-theme="dark"] .aura::after{background:radial-gradient(circle,rgba(43,214,160,.12),transparent 70%)}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,54px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(52px,-42px)}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* ---------------- eyebrow / labels ---------------- */
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* ---------------- top bar ---------------- */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--topbar-h);padding:0 26px;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
  border-bottom:1px solid var(--line-2)}
.topbar-left{display:flex;align-items:center;gap:18px;min-width:0}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;letter-spacing:-.02em}
.brand-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--blue-2),var(--blue));box-shadow:0 6px 16px -6px rgba(24,150,207,.7)}
.brand-mark svg{width:18px;height:18px}
.brand b{font-weight:700}.brand span{color:var(--muted);font-weight:500}

.call-pill{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;white-space:nowrap;box-shadow:var(--shadow-soft)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--faint);transition:.3s}
.call-pill.live{color:var(--green);border-color:var(--green-line);background:var(--green-soft)}
.call-pill.live .live-dot{background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(.82)}50%{opacity:1;transform:scale(1.14)}}
.call-timer{font-variant-numeric:tabular-nums;font-weight:600}

.status-cluster{display:flex;align-items:center;gap:9px}
.chip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--faint);transition:.3s var(--ease);box-shadow:var(--shadow-soft)}
.chip svg{width:18px;height:18px}
.chip .dot{width:11px;height:11px;border-radius:50%;background:currentColor}
.chip[data-state="on"]{color:var(--blue);border-color:var(--blue-line);background:var(--blue-soft)}
.chip[data-state="ok"]{color:var(--green);border-color:var(--green-line);background:var(--green-soft);box-shadow:0 0 14px -2px rgba(23,189,136,.4)}
.chip[data-state="rec"]{color:var(--red);border-color:var(--red-line);background:var(--red-soft)}
.chip[data-state="rec"] .dot{animation:recpulse 1.4s infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.3}}

.topbar-right{display:flex;align-items:center;gap:12px}

/* language day/night slider */
.lang-day-night{position:relative;display:inline-flex;align-items:center;justify-content:space-between;
  width:78px;height:38px;border-radius:var(--r-pill);padding:6px 8px;flex:none;
  background:linear-gradient(180deg,#fff,#eef5f9);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px -8px rgba(11,40,51,.2);
  overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none}
html[data-theme="dark"] .lang-day-night{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.24));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 26px -12px rgba(0,0,0,.7)}
.lds-side{position:relative;z-index:2;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:#fff;box-shadow:0 0 0 1px rgba(11,40,51,.12),0 2px 6px rgba(11,40,51,.16)}
.lds-side svg{width:26px;height:26px;display:block}
.lang-day-night[data-mode="day"] .lds-side--night,.lang-day-night[data-mode="night"] .lds-side--day{filter:grayscale(.4);opacity:.5}
.lds-knob{position:absolute;top:4px;left:6px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--blue-line);
  box-shadow:0 0 0 1px rgba(40,191,228,.35),0 0 12px rgba(40,191,228,.28);transition:transform .45s var(--ease);z-index:3}
.lang-day-night[data-mode="night"] .lds-knob{transform:translateX(36px)}

/* icon buttons */
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);color:var(--blue);transition:.25s var(--ease);box-shadow:var(--shadow-soft)}
.icon-btn:hover{transform:translateY(-1px);border-color:var(--blue-line);box-shadow:0 8px 20px -8px rgba(24,150,207,.45);color:var(--blue-2)}
.icon-btn.ghost{background:transparent;box-shadow:none;color:var(--muted)}
.icon-btn.ghost:hover{background:var(--card);color:var(--ink)}
.icon-btn.sm{width:34px;height:34px;border-radius:10px}
.icon-btn.sm svg{width:16px;height:16px}
.icon-btn svg,.ic svg{width:19px;height:19px;display:block}
.ic{display:inline-flex;align-items:center;justify-content:center}

/* tooltips */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--ink);color:var(--bg);font-size:11.5px;font-weight:600;letter-spacing:.01em;padding:6px 11px;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.2s var(--ease);z-index:200;box-shadow:var(--shadow-soft)}
[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.topbar [data-tip]::after,.status-cluster [data-tip]::after,.dock [data-tip]::after{bottom:auto;top:calc(100% + 9px);transform:translateX(-50%) translateY(-4px)}
.dock [data-tip]::after{top:auto;bottom:calc(100% + 11px);transform:translateX(-50%) translateY(4px)}
.topbar [data-tip]:hover::after,.status-cluster [data-tip]:hover::after,.dock [data-tip]:hover::after{transform:translateX(-50%) translateY(0)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;transition:.25s var(--ease);white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-glow{background:linear-gradient(135deg,var(--blue-2),var(--blue));color:#fff;border-radius:14px;padding:13px 26px;font-size:14px;box-shadow:var(--glow);position:relative;overflow:hidden}
.btn-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-glow:hover{transform:translateY(-2px);box-shadow:var(--glow-hover)}
.btn-glow:hover::after{transform:translateX(120%)}
.btn-glow:active{transform:translateY(0)}
.btn-glow.wide{width:100%}
.btn-green{background:linear-gradient(135deg,var(--green-2),var(--green));color:#03271d;box-shadow:var(--glow-green)}
html[data-theme="dark"] .btn-green{color:#03271d}
.btn-outline{border:1.6px solid var(--blue-line);color:var(--blue);border-radius:12px;padding:11px 20px;font-size:13.5px;background:var(--card)}
.btn-outline:hover{background:var(--blue-soft);border-color:var(--blue);transform:translateY(-1px)}
.btn-danger{border:1.6px solid var(--red-line);color:var(--red);border-radius:12px;padding:11px 20px;font-size:13.5px;background:var(--card)}
.btn-danger:hover{background:var(--red-soft)}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#2a1e05;border-radius:12px;padding:11px 20px;font-size:13.5px;box-shadow:0 12px 30px -12px rgba(191,140,42,.6)}
.btn-gold:hover{transform:translateY(-1px)}
.btn.sm{padding:9px 15px;font-size:12.5px;border-radius:10px;gap:7px}
.btn.sm svg{width:15px;height:15px}
.btn:focus-visible,.icon-btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.dock-btn:focus-visible{outline:2.5px solid var(--blue-2);outline-offset:2px}

/* ghost dock-style icon button used inline */
.mini-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);
  border:1px solid var(--line);background:var(--card);border-radius:9px;padding:6px 11px;transition:.2s var(--ease)}
.mini-btn:hover{color:var(--blue);border-color:var(--blue-line);background:var(--blue-soft)}
.mini-btn svg{width:14px;height:14px}

/* ---------------- fields (the dark-mode readability fix) ---------------- */
.field{display:flex;flex-direction:column;gap:7px}
.field > label,.field-label{font-size:11.5px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.field .hint{font-size:11px;color:var(--muted)}
input.inp,select.inp,textarea.inp,.inp{
  width:100%;background:var(--field);color:var(--field-ink);border:1.5px solid var(--field-line);
  border-radius:11px;padding:12px 14px;font-size:14px;font-weight:500;transition:.2s var(--ease);box-shadow:inset 0 1px 2px rgba(11,40,51,.04)}
textarea.inp{resize:vertical;min-height:84px;line-height:1.5}
.inp::placeholder{color:var(--field-ph);font-weight:400}
.inp:hover{border-color:var(--field-line-focus)}
.inp:focus{outline:none;border-color:var(--field-line-focus);box-shadow:0 0 0 3.5px var(--blue-soft)}
.select-wrap{position:relative}
.select-wrap select.inp{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer}
.select-wrap .sel-chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.select-wrap .sel-chev svg{width:16px;height:16px}

/* ---------------- app shell ---------------- */
.shell{position:relative;z-index:1;max-width:1680px;margin:0 auto;padding:22px 26px 120px}
.cockpit{display:grid;grid-template-columns:minmax(430px,38fr) 62fr;gap:22px;align-items:start}
@media (max-width:1180px){.cockpit{grid-template-columns:1fr}}

/* section title inside a card head */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}
.card-head{display:flex;align-items:center;gap:11px;padding:17px 20px;border-bottom:1px solid var(--line-2)}
.card-head .card-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue-line)}
.card-head .card-ic svg{width:17px;height:17px}
.card-head h2{font-size:15px;font-weight:600;flex:1;min-width:0}
.card-head .sub{font-size:11.5px;color:var(--muted);font-weight:500}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line)}
.tag.green{color:var(--green);background:var(--green-soft);border-color:var(--green-line)}
.tag.blue{color:var(--blue);background:var(--blue-soft);border-color:var(--blue-line)}
.tag.gold{color:var(--gold);background:var(--gold-soft);border-color:var(--gold-line)}
.tag.muted{color:var(--muted)}

/* ============================================================
   LEFT FLIGHT COLUMN — script stacked over living application,
   joined by a vertical progress spine. One block, never crowded.
   ============================================================ */
.flight-col{position:relative;display:flex;flex-direction:column;gap:16px}
.flight-col .card{position:relative}
/* the illuminated spine */
.flight-col::before{content:"";position:absolute;left:-1px;top:26px;bottom:26px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--blue-2),var(--green));opacity:.0}
.script-card{border-color:var(--blue-line)}
.script-card .card-head{background:linear-gradient(180deg,var(--blue-soft),transparent)}
.scr-nav{display:flex;align-items:center;gap:8px}
.scr-pos{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;min-width:44px;text-align:center}
.scr-body{padding:22px 22px 24px}
.scr-stage{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.scr-stage::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}

/* ---- the script runway: past above, current bright, five upcoming dimmed ahead ---- */
.scr-runway{position:relative;display:flex;flex-direction:column;gap:13px;padding-left:26px}
.scr-runway::before{content:"";position:absolute;left:6px;top:9px;bottom:9px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--green) 0%,var(--blue) 30%,var(--line) 42%,var(--line) 100%)}
.rl{position:relative}
.rl::before{content:"";position:absolute;left:-26px;top:4px;width:13px;height:13px;border-radius:50%;
  background:var(--card);border:2px solid var(--line-strong);z-index:1}
.rl.past{color:var(--muted);font-size:13.5px;line-height:1.5}
.rl.past::before{background:var(--green);border-color:var(--green)}
.rl.past .rl-check{display:inline-block;width:13px;height:13px;position:absolute;left:-26px;top:4px;z-index:2;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5 11.7l1.4-1.4 3.1 3.1 7-7L18 7.8z'/%3E%3C/svg%3E") center/10px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5 11.7l1.4-1.4 3.1 3.1 7-7L18 7.8z'/%3E%3C/svg%3E") center/10px no-repeat;background:#fff}
.rl.current::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft),0 0 12px var(--blue)}
.rl.current{margin:3px 0}
.rl.ahead{color:var(--muted);font-size:14px;line-height:1.55}
.rl.ahead::before{background:var(--card);border-color:var(--line-strong)}
.rl.ahead.far{opacity:.62}.rl.ahead.far2{opacity:.4}
.rl .rl-note{display:block;margin-top:9px;font-size:12.5px;color:var(--faint);font-style:italic;line-height:1.5}
.bubble{background:var(--card-2);border:1px solid var(--line);border-radius:16px;padding:16px 18px;font-size:15.5px;line-height:1.62;color:var(--ink);margin-bottom:12px}
.bubble.lead{font-size:17px;font-weight:500;border-color:var(--blue-line);background:linear-gradient(180deg,var(--blue-soft),transparent)}
.bubble .hl{color:var(--blue);font-weight:600}
.bubble.you::before,.bubble.client::before{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px;color:var(--faint)}
.bubble.you::before{content:"You say"}
.bubble.client::before{content:"If they ask"}
html[data-lang="es"] .bubble.you::before{content:"Tú dices"}
html[data-lang="es"] .bubble.client::before{content:"Si preguntan"}
.scr-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.scr-progress{flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.scr-progress i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--green))}

/* collapsed → slim bar in place */
.mini-head{display:none;align-items:center;gap:12px;padding:14px 20px;cursor:pointer}
.mini-head .card-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue-line)}
.mini-head .mini-title{font-weight:600;font-size:14px;flex:1}
.mini-head .mini-meta{font-size:12px;color:var(--muted);font-weight:500}
.card.collapsed > .card-head,.card.collapsed > .scr-body,.card.collapsed > .liveapp-wrap{display:none}
.card.collapsed > .mini-head{display:flex}
.card.collapsed{box-shadow:var(--shadow-soft)}

/* living application */
.liveapp-card{border-color:var(--green-line)}
.liveapp-card .card-head{background:linear-gradient(180deg,var(--green-soft),transparent)}
.liveapp-card .card-ic{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.liveapp-wrap{padding:20px 22px 24px}
.app-progress{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.app-progress .seg{flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.app-progress .seg.done i,.app-progress .seg.cur i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--blue-2))}
.app-progress .seg.cur i{width:55%}.app-progress .seg.done i{width:100%}
.app-progress .pct{font-size:12px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}
.app-section-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:20px 0 12px;display:flex;align-items:center;gap:8px}
.app-section-label:first-child{margin-top:0}
.app-section-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.app-grid.one{grid-template-columns:1fr}
.appf{display:flex;flex-direction:column;gap:6px}
.appf label{font-size:11px;font-weight:600;color:var(--ink-2)}
.appf .val{background:var(--field);border:1.5px solid var(--field-line);border-radius:10px;padding:11px 13px;font-size:14px;font-weight:500;color:var(--field-ink);display:flex;align-items:center;gap:8px;min-height:44px}
.appf.filled .val{border-color:var(--green-line);background:var(--green-soft)}
.appf.filled .val::after{content:"";width:15px;height:15px;margin-left:auto;flex:none;border-radius:50%;background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5 11.7l1.4-1.4 3.1 3.1 7-7L18 7.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5 11.7l1.4-1.4 3.1 3.1 7-7L18 7.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.appf.pending .val{color:var(--faint);font-weight:400;font-style:italic}

/* ============================================================
   RIGHT AREA — profile column + (chat over transcript) column
   ============================================================ */
.work-area{display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,1.15fr);gap:20px;align-items:start}
@media (max-width:1440px){.work-area{grid-template-columns:1fr}}
.work-col{display:flex;flex-direction:column;gap:20px}

/* client profile */
.profile-count{font-size:11.5px;font-weight:600;color:var(--green);background:var(--green-soft);border:1px solid var(--green-line);padding:4px 10px;border-radius:var(--r-pill)}
.profile-body{padding:8px 20px 18px}
.pf-identity{display:flex;align-items:center;gap:14px;padding:14px 0 16px;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.pf-avatar{width:52px;height:52px;border-radius:15px;flex:none;display:grid;place-items:center;font-size:19px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--blue-2),var(--green));box-shadow:0 8px 20px -8px rgba(24,150,207,.5)}
.pf-name{font-size:18px;font-weight:600;line-height:1.25}
.pf-sub{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px}
.pf-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.pf-row:last-child{border-bottom:none}
.pf-ic{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue)}
.pf-ic svg{width:16px;height:16px}
.pf-k{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--faint)}
.pf-v{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3;word-break:break-word}
.pf-row .pf-txt{min-width:0;flex:1}
.pf-fresh{margin-left:auto;font-size:10px;font-weight:600;color:var(--green);background:var(--green-soft);border:1px solid var(--green-line);padding:3px 8px;border-radius:var(--r-pill);flex:none}

/* ChatPBG coaching */
.coach-card .card-head{gap:11px}
.coach-privacy{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--muted);background:var(--card-2);border:1px solid var(--line);padding:5px 11px;border-radius:var(--r-pill);display:inline-flex;gap:6px;align-items:center}
.coach-privacy::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.coach-body{padding:18px 20px 20px}
.comp-card{background:var(--red-soft);border:1px solid var(--red-line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.comp-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.comp-label svg{width:15px;height:15px}
.comp-text{font-size:14.5px;line-height:1.55;color:var(--ink);font-weight:500}
.suggestion{background:linear-gradient(180deg,var(--blue-soft),transparent);border:1px solid var(--blue-line);border-radius:14px;padding:16px 18px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.suggestion .sug-lead{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.suggestion .sug-lead svg{width:15px;height:15px}
.suggestion b{color:var(--blue);font-weight:600}

/* live transcript */
.transcript-card .tr-body{padding:8px 20px 18px;max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.tr-line{display:flex;flex-direction:column;gap:3px}
.tr-who{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.tr-who.agent{color:var(--blue)}.tr-who.client{color:var(--green)}
.tr-who .conf{margin-left:auto;font-size:10px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--faint)}
.tr-txt{font-size:14px;line-height:1.55;color:var(--ink-2)}
.tr-line.client .tr-txt{color:var(--ink);font-weight:500}
.tr-interim{padding:12px 20px;border-top:1px solid var(--line-2);font-size:13.5px;color:var(--muted);font-style:italic;display:flex;align-items:center;gap:9px}
.tr-interim .wave{display:inline-flex;gap:3px}
.tr-interim .wave i{width:3px;height:12px;border-radius:2px;background:var(--blue);animation:wave 1s ease-in-out infinite}
.tr-interim .wave i:nth-child(2){animation-delay:.15s}.tr-interim .wave i:nth-child(3){animation-delay:.3s}.tr-interim .wave i:nth-child(4){animation-delay:.45s}
@keyframes wave{0%,100%{height:6px;opacity:.5}50%{height:15px;opacity:1}}

/* ============================================================
   ALERT RAIL — human words, above everything
   ============================================================ */
.alert-rail{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.alert{display:flex;align-items:flex-start;gap:15px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--muted);
  border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-card)}
.alert.attn{border-left-color:var(--gold);background:linear-gradient(100deg,var(--gold-soft),transparent 60%)}
.alert.warn{border-left-color:var(--red);background:linear-gradient(100deg,var(--red-soft),transparent 60%)}
.alert.info{border-left-color:var(--blue);background:linear-gradient(100deg,var(--blue-soft),transparent 60%)}
.alert.good{border-left-color:var(--green);background:linear-gradient(100deg,var(--green-soft),transparent 60%)}
.alert-ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center}
.alert.attn .alert-ic{background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line)}
.alert.warn .alert-ic{background:var(--red-soft);color:var(--red);border:1px solid var(--red-line)}
.alert.info .alert-ic{background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue-line)}
.alert.good .alert-ic{background:var(--green-soft);color:var(--green);border:1px solid var(--green-line)}
.alert-ic svg{width:21px;height:21px}
.alert-body{flex:1;min-width:0}
.alert-title{font-size:14.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.alert-title .when{font-size:11px;font-weight:500;color:var(--faint)}
.alert-line{font-size:13px;color:var(--muted);line-height:1.5;margin-top:4px}
.alert-actions{display:flex;gap:9px;align-items:center;flex:none;flex-wrap:wrap;justify-content:flex-end}
.alert-dismiss{color:var(--faint)}

/* ============================================================
   TOOL DOCK — floating, with the glowing Quote options CTA
   ============================================================ */
.dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:55;display:flex;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line);border-radius:20px;padding:10px 12px;box-shadow:var(--shadow-pop)}
.dock-btn{position:relative;display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 16px;border-radius:13px;
  font-size:13px;font-weight:600;color:var(--ink-2);background:var(--card-2);border:1px solid var(--line);transition:.22s var(--ease)}
.dock-btn svg{width:19px;height:19px;color:var(--blue)}
.dock-btn:hover{transform:translateY(-2px);border-color:var(--blue-line);color:var(--ink);box-shadow:0 10px 24px -12px rgba(24,150,207,.5)}
.dock-btn.icon-only{padding:0;width:46px;justify-content:center}
.dock-btn .dock-badge{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--green);color:#03271d;font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:0 3px 8px -2px rgba(23,189,136,.6)}
.dock-btn .dock-lock{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;background:var(--muted);color:#fff;display:grid;place-items:center}
.dock-btn .dock-lock svg{width:11px;height:11px;color:#fff}
/* the unmistakable Quote options button */
.dock-btn.cta{background:linear-gradient(135deg,var(--blue-2),var(--blue));color:#fff;border-color:transparent;box-shadow:var(--glow);padding:0 20px}
.dock-btn.cta svg{color:#fff}
.dock-btn.cta:hover{transform:translateY(-3px);box-shadow:var(--glow-hover);color:#fff}
.dock-sep{width:1px;height:28px;background:var(--line);margin:0 3px}
.dock-hang{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.dock-hang svg{color:var(--red)}
.dock-hang:hover{background:var(--red);color:#fff}.dock-hang:hover svg{color:#fff}

/* ============================================================
   TAKEOFF (idle) — call setup strip
   ============================================================ */
.hero-idle{max-width:1120px;margin:0 auto;text-align:center;padding:14px 0 8px}
.hero-idle .eyebrow{justify-content:center;margin-bottom:14px}
.hero-idle h1{font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1.12;margin-bottom:14px}
.hero-idle h1 .accent{background:linear-gradient(120deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-idle p{font-size:16px;color:var(--muted);max-width:560px;margin:0 auto 30px;line-height:1.6}
.takeoff{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-card);padding:22px;
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;max-width:1000px;margin:0 auto}
.takeoff .tf-field{display:flex;flex-direction:column;gap:6px;text-align:left}
.takeoff .tf-field .field-label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:600}
.tf-num{display:flex;gap:8px}
.tf-num .cc{width:64px}
.tf-grow{flex:1;min-width:150px}
.takeoff .btn-glow{padding:14px 30px}

/* readiness checklist under takeoff */
.ready-strip{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.ready-item{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 16px;box-shadow:var(--shadow-soft)}
.ready-item .ic{width:18px;height:18px;color:var(--green)}
.ready-item .ic svg{width:15px;height:15px}

/* takeoff bar: the call-setup strip at the top of the idle cockpit (before takeoff) */
.takeoff-bar{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:18px 22px;margin-bottom:22px;position:relative;overflow:hidden}
.takeoff-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--blue-2),var(--green))}
.takeoff-lead{display:flex;flex-direction:column;gap:3px;padding-right:6px}
.takeoff-lead .eyebrow{color:var(--blue)}
.takeoff-lead b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.takeoff-bar .tf-field{display:flex;flex-direction:column;gap:6px;text-align:left}
.takeoff-bar .tf-field .field-label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:600}
.takeoff-bar .tf-num{display:flex;gap:8px}
.takeoff-bar .cc{width:60px}
.takeoff-bar .btn-glow{padding:13px 26px;margin-left:auto}

/* empty states for the idle cockpit */
.empty-state{padding:34px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty-state .es-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--line);color:var(--faint)}
.empty-state .es-ic svg{width:22px;height:22px}
.empty-state b{font-size:14px;font-weight:600;color:var(--ink-2)}
.empty-state p{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:280px}

/* preview cards row on idle */
.idle-preview{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:44px;max-width:1120px;margin-left:auto;margin-right:auto}
@media (max-width:900px){.idle-preview{grid-template-columns:1fr}}
.prev-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-card)}
.prev-card .prev-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue-line);margin-bottom:15px}
.prev-card h3{font-size:15px;font-weight:600;margin-bottom:7px}
.prev-card p{font-size:13px;color:var(--muted);line-height:1.55}

/* ============================================================
   QUOTE COMPOSER + COMPARISON
   ============================================================ */
.quote-layout{display:grid;grid-template-columns:minmax(360px,1fr) minmax(420px,1.25fr);gap:24px;align-items:start}
@media (max-width:1080px){.quote-layout{grid-template-columns:1fr}}
.composer .card-head{background:linear-gradient(180deg,var(--blue-soft),transparent)}
.composer-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:18px}
.opt-builder{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--card-2)}
.opt-builder.active{border-color:var(--blue-line);background:linear-gradient(180deg,var(--blue-soft),transparent);box-shadow:0 0 0 1px var(--blue-line)}
.opt-builder-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.opt-badge{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--blue-2),var(--blue))}
.opt-builder:nth-child(2) .opt-badge{background:linear-gradient(135deg,var(--green-2),var(--green));color:#03271d}
.opt-builder-head .opt-name{font-weight:600;font-size:14.5px;flex:1}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-row.three{grid-template-columns:1fr 1fr 1fr}
.composer-actions{display:flex;gap:12px;align-items:center}

/* comparison — what the client sees */
.compare .card-head{background:linear-gradient(180deg,var(--green-soft),transparent)}
.compare-body{padding:22px}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qopt{position:relative;border:1.5px solid var(--line);border-radius:18px;padding:20px;background:var(--card);transition:.25s var(--ease)}
.qopt.pick{border-color:var(--green-line);box-shadow:0 0 0 1px var(--green-line),var(--glow-green)}
.qopt .pick-flag{position:absolute;top:-11px;left:20px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#03271d;background:linear-gradient(135deg,var(--green-2),var(--green));padding:5px 12px;border-radius:var(--r-pill);box-shadow:var(--glow-green)}
.qopt .qh{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.qopt .qface{font-size:15px;font-weight:600;margin-bottom:16px}
.qopt .qprice{display:flex;align-items:baseline;gap:4px;margin-bottom:4px}
.qopt .qprice b{font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.qopt .qprice .per{font-size:13px;color:var(--muted);font-weight:500}
.qopt.pick .qprice b{color:var(--green)}
.qopt .qnote{font-size:12px;color:var(--faint);margin-bottom:16px}
.qopt .qlist{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line-2);padding-top:16px}
.qopt .qrow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.qopt .qrow .qk{color:var(--muted)}.qopt .qrow .qv{font-weight:600;color:var(--ink)}
.compare-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.compare-foot .cf-note{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:9px}
.compare-foot .cf-actions{display:flex;gap:10px}

/* ============================================================
   CLIENT VIEWER — agent panel + live phone preview
   ============================================================ */
.viewer-layout{display:grid;grid-template-columns:minmax(380px,1fr) minmax(320px,380px);gap:26px;align-items:start}
@media (max-width:1040px){.viewer-layout{grid-template-columns:1fr}}
.viewer-panel{padding:22px 24px 26px}
.session-bar{display:flex;flex-direction:column;gap:14px;background:var(--card-2);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:20px}
.link-row{display:flex;gap:8px;align-items:center}
.link-row .inp{flex:1;font-size:13px;color:var(--ink-2);background:var(--field)}
.session-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px}
.session-view{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--green)}
.session-view .view-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);animation:pulse 2s infinite}
.session-count{margin-left:auto;display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:500}
.session-count b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}

.viewer-tabs{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;margin-bottom:20px}
.viewer-tab{font-size:13px;font-weight:600;color:var(--muted);padding:9px 18px;border-radius:var(--r-pill);transition:.22s var(--ease);display:inline-flex;gap:8px;align-items:center}
.viewer-tab svg{width:16px;height:16px}
.viewer-tab.active{background:linear-gradient(135deg,var(--blue-2),var(--blue));color:#fff;box-shadow:0 6px 16px -6px rgba(24,150,207,.6)}
.quick-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.quick-btn{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px 15px;transition:.22s var(--ease)}
.quick-btn:hover{border-color:var(--blue-line);background:var(--blue-soft);transform:translateY(-1px)}
.quick-btn .qbi{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue-line)}
.quick-btn .qbi svg{width:18px;height:18px}
.quick-btn .qbt b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.quick-btn .qbt span{font-size:11.5px;color:var(--muted)}
.build-fields{display:flex;flex-direction:column;gap:16px}

/* phone preview */
.preview-col{position:sticky;top:84px}
.pv-caption{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);text-align:center;margin-bottom:12px}
.anno-bar{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;margin-bottom:16px;box-shadow:var(--shadow-soft)}
.anno-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--muted);border:1px solid transparent;transition:.2s var(--ease)}
.anno-btn svg{width:18px;height:18px}
.anno-btn:hover{color:var(--blue);background:var(--blue-soft)}
.anno-btn.active{color:var(--blue);background:var(--blue-soft);border-color:var(--blue-line)}
.anno-sep{width:1px;height:22px;background:var(--line);margin:0 3px}
/* true modern phone: 9 : 19.5 screen aspect, thin uniform bezel, dynamic-island pill */
.phone{width:248px;margin:0 auto;background:linear-gradient(158deg,#232f3b,#0a1219);border-radius:44px;padding:10px;
  box-shadow:0 44px 90px -34px rgba(11,40,51,.62),inset 0 0 0 2px rgba(255,255,255,.07),0 0 0 1px rgba(11,40,51,.25)}
.phone-screen{position:relative;background:var(--canvas);border-radius:34px;overflow:hidden;
  width:100%;aspect-ratio:9 / 19.5;padding:46px 17px 22px;display:flex;flex-direction:column}
.phone-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:76px;height:22px;border-radius:999px;background:#050d13;z-index:5}
html[data-theme="dark"] .phone-screen{background:#081820}
.pv-brand{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:16px}
.pv-brand .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.pv-hero{font-size:16px;font-weight:600;line-height:1.35;margin-bottom:6px}
.pv-sub{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:18px}
.pv-quote{background:var(--card-2);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px}
.pv-quote .pvq-price{font-size:28px;font-weight:700;color:var(--green)}
.pv-quote .pvq-price small{font-size:12px;color:var(--muted);font-weight:500}
.pv-quote .pvq-k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:4px}
.pv-cta{width:100%;background:linear-gradient(135deg,var(--blue-2),var(--blue));color:#fff;border-radius:12px;padding:13px;font-size:14px;font-weight:600;text-align:center}
.pv-annohint{font-size:11.5px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}
.viewer-actions{display:flex;gap:12px;margin-top:22px}

/* ============================================================
   GALLERY INDEX
   ============================================================ */
.gallery{max-width:1180px;margin:0 auto;padding:60px 26px 100px}
.gallery-hero{text-align:center;margin-bottom:56px}
.gallery-hero .eyebrow{justify-content:center;margin-bottom:16px}
.gallery-hero h1{font-size:46px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-bottom:18px}
.gallery-hero h1 .accent{background:linear-gradient(120deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.gallery-hero p{font-size:17px;color:var(--muted);max-width:600px;margin:0 auto;line-height:1.6}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:760px){.gallery-grid{grid-template-columns:1fr}}
.g-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);overflow:hidden;text-decoration:none;color:inherit;transition:.28s var(--ease)}
.g-card:hover{transform:translateY(-4px);border-color:var(--blue-line);box-shadow:var(--glow-hover)}
.g-thumb{height:150px;position:relative;overflow:hidden;border-bottom:1px solid var(--line-2);background:linear-gradient(135deg,var(--bg-2),var(--card))}
.g-thumb .g-n{position:absolute;top:16px;left:18px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--faint)}
.g-thumb .g-glyph{position:absolute;right:18px;bottom:14px;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue-2),var(--blue));color:#fff;box-shadow:var(--glow)}
.g-thumb .g-glyph svg{width:26px;height:26px}
.g-thumb.green .g-glyph{background:linear-gradient(135deg,var(--green-2),var(--green));color:#03271d;box-shadow:var(--glow-green)}
.g-thumb.gold .g-glyph{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#2a1e05}
.g-thumb.red .g-glyph{background:linear-gradient(135deg,var(--red-2),var(--red));color:#fff}
/* mini wireframe hint in thumb */
.g-wire{position:absolute;inset:0;padding:20px 18px;display:flex;gap:8px;opacity:.5}
.g-wire i{background:var(--line);border-radius:5px;display:block}
.g-body{padding:20px 22px 22px}
.g-body h3{font-size:17px;font-weight:600;margin-bottom:7px}
.g-body p{font-size:13.5px;color:var(--muted);line-height:1.55}
.g-body .g-meta{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}

.page-foot{text-align:center;margin-top:52px;font-size:12.5px;color:var(--faint)}

/* screen chrome for state pages */
.state-note{max-width:1680px;margin:0 auto;padding:16px 26px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.state-note .back{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--blue);text-decoration:none;
  border:1px solid var(--blue-line);background:var(--blue-soft);border-radius:var(--r-pill);padding:7px 14px}
.state-note .back svg{width:15px;height:15px}
.state-note .crumb{font-size:12.5px;color:var(--muted)}
.state-note .crumb b{color:var(--ink);font-weight:600}
.state-note .hintflip{margin-left:auto;font-size:11.5px;color:var(--faint);display:inline-flex;align-items:center;gap:7px}

/* ============================================================
   DESKTOP / PHONE MODE TOGGLE  (viewer + quote comparison)
   ============================================================ */
.seg-toggle{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;gap:2px}
.seg-toggle button{font-size:12.5px;font-weight:600;color:var(--muted);padding:9px 16px;border-radius:var(--r-pill);
  display:inline-flex;gap:8px;align-items:center;transition:.22s var(--ease)}
.seg-toggle button svg{width:15px;height:15px}
.seg-toggle button:hover{color:var(--ink)}
.seg-toggle button.active{background:linear-gradient(135deg,var(--blue-2),var(--blue));color:#fff;box-shadow:0 6px 16px -6px rgba(24,150,207,.6)}
.mode-host .pane{display:none}
.mode-host[data-vmode="desktop"] .pane[data-pane="desktop"]{display:block;animation:fadeUp .3s var(--ease)}
.mode-host[data-vmode="phone"] .pane[data-pane="phone"]{display:block;animation:fadeUp .3s var(--ease)}
.mode-host[data-vmode="phone"] .mode-note{display:none}
.pane[data-pane="phone"]{max-width:380px;margin:0 auto}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mode-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.mode-note{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.mode-note svg{width:15px;height:15px;color:var(--faint)}
.mode-note.draw{color:var(--green)}.mode-note.draw svg{color:var(--green)}

/* share switch */
.switch{position:relative;width:42px;height:24px;border-radius:999px;background:var(--line-strong);transition:.22s var(--ease);flex:none;cursor:pointer}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.22s var(--ease);box-shadow:0 1px 3px rgba(11,40,51,.4)}
.switch.on{background:linear-gradient(135deg,var(--green-2),var(--green))}
.switch.on::after{transform:translateX(18px)}

/* ============================================================
   VIEWER DESKTOP WORKSPACE — arrange and choose cards
   ============================================================ */
.deck{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.deck{grid-template-columns:1fr}}
.deck-card{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:15px 16px;transition:.2s var(--ease)}
.deck-card.shared{border-color:var(--green-line);box-shadow:0 0 0 1px var(--green-line),0 10px 24px -16px rgba(23,189,136,.5)}
.deck-card .dc-head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.dc-grip{color:var(--faint);cursor:grab;display:inline-flex;flex:none}
.dc-grip svg{width:18px;height:18px}
.dc-ic{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue-line)}
.dc-ic svg{width:16px;height:16px}
.dc-title{font-weight:600;font-size:13.5px;flex:1;min-width:0;line-height:1.3}
.dc-body{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.dc-num{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1}
.dc-num .cur{font-size:16px;font-weight:600;color:var(--muted)}
.dc-sub{font-size:12.5px;color:var(--muted)}
.dc-lines{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.dc-line{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.dc-line .k{color:var(--muted)}.dc-line .v{font-weight:600;color:var(--ink)}
.dc-foot{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line-2);padding-top:11px}
.dc-foot .lbl{font-size:11.5px;font-weight:600}
.dc-foot .lbl.on{color:var(--green)}.dc-foot .lbl.off{color:var(--faint)}
.dc-foot .switch{margin-left:auto}
.deck-card.dragging{box-shadow:0 26px 60px -20px rgba(11,40,51,.5);transform:rotate(-1.4deg) scale(1.02);border-color:var(--blue-line);z-index:5;cursor:grabbing}
.deck-drop{border:1.6px solid var(--blue-line);background:var(--blue-soft);border-radius:16px;display:grid;place-items:center;
  min-height:120px;color:var(--blue);font-size:12.5px;font-weight:600;gap:8px}
.deck-drop .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--card);border:1px solid var(--blue-line)}
.deck-add{border:1.6px solid var(--line);background:var(--card-2);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:120px;color:var(--muted);font-size:12.5px;font-weight:600;transition:.2s var(--ease)}
.deck-add:hover{border-color:var(--blue-line);color:var(--blue);background:var(--blue-soft)}
.deck-add .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line)}
.deck-add:hover .ic{border-color:var(--blue-line);color:var(--blue)}
.workspace-divider{height:1px;background:var(--line-2);margin:22px 0}
.compose-head{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.compose-head::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}

/* anno-bar disabled note in desktop */
.anno-off{display:flex;align-items:center;gap:9px;justify-content:center;background:var(--card-2);border:1px solid var(--line);
  border-radius:14px;padding:11px 14px;margin-bottom:16px;font-size:12px;color:var(--muted)}
.anno-off svg{width:15px;height:15px;color:var(--faint)}

/* phone comparison content (client sees both options) */
.pv-compare{display:flex;flex-direction:column;gap:12px}
.pv-opt{background:var(--card-2);border:1px solid var(--line);border-radius:16px;padding:14px}
.pv-opt.pick{border-color:var(--green-line);background:var(--green-soft)}
.pv-opt .pvo-flag{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.pv-opt .pvo-name{font-size:13px;font-weight:600;margin-bottom:8px}
.pv-opt .pvo-price{font-size:24px;font-weight:700;color:var(--ink);line-height:1}
.pv-opt.pick .pvo-price{color:var(--green)}
.pv-opt .pvo-price small{font-size:11px;color:var(--muted);font-weight:500}
.pv-opt .pvo-meta{font-size:11px;color:var(--muted);margin-top:8px;display:flex;justify-content:space-between}

/* ============================================================
   CARRIER AREA — portals embedded in the shell, docked by name
   ============================================================ */
.carrier-layout{display:grid;grid-template-columns:minmax(300px,34fr) 66fr;gap:22px;align-items:start}
@media (max-width:1100px){.carrier-layout{grid-template-columns:1fr}}

/* source card: the PBG application feeding the carrier */
.source-card .card-head{background:linear-gradient(180deg,var(--green-soft),transparent)}
.source-card .card-ic{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.flow-note{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);padding:14px 20px;background:var(--card-2);border-bottom:1px solid var(--line-2)}
.flow-note svg{width:16px;height:16px;color:var(--green)}
.flow-note b{color:var(--green);font-weight:600}

/* embedded carrier portal, framed like a browser tab inside the shell */
.portal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}
.portal.out{border-color:var(--gold-line)}
.portal-chrome{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card-2);border-bottom:1px solid var(--line-2)}
.portal-dots{display:flex;gap:6px;flex:none}
.portal-dots i{width:11px;height:11px;border-radius:50%;background:var(--line-strong)}
.portal-url{display:inline-flex;align-items:center;gap:8px;flex:1;min-width:0;background:var(--field);border:1px solid var(--field-line);
  border-radius:var(--r-pill);padding:7px 14px;font-size:12.5px;color:var(--ink-2);font-weight:500}
.portal-url svg{width:14px;height:14px;color:var(--green);flex:none}
.portal-url .u-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portal-status{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;flex:none;padding:6px 12px;border-radius:var(--r-pill)}
.portal-status.in{color:var(--green);background:var(--green-soft);border:1px solid var(--green-line)}
.portal-status.in .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.portal-status.out{color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line)}
.portal-ctrls{display:flex;gap:6px;flex:none}
.portal-body{padding:22px 24px;position:relative}
.portal-carrier{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.portal-logo{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;
  background:linear-gradient(135deg,#1c5b8c,#0e3a5c);box-shadow:0 8px 18px -8px rgba(14,58,92,.7)}
.portal-carrier .pc-name{font-size:16px;font-weight:600}
.portal-carrier .pc-sub{font-size:12px;color:var(--muted)}
.portal-fillbar{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--blue);
  background:var(--blue-soft);border:1px solid var(--blue-line);padding:7px 13px;border-radius:var(--r-pill)}
.portal-fillbar .spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--blue-line);border-top-color:var(--blue);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.eform-sec{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:20px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line-2)}
.eform-sec:first-child{margin-top:0}
.eform-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.eform-grid{grid-template-columns:1fr}}
.eform-f{display:flex;flex-direction:column;gap:5px}
.eform-f label{font-size:11px;font-weight:500;color:var(--muted)}
.eform-f .box{background:var(--field);border:1.5px solid var(--field-line);border-radius:9px;padding:10px 12px;font-size:13.5px;font-weight:500;color:var(--field-ink);min-height:42px;display:flex;align-items:center}
.eform-f.just .box{border-color:var(--blue-line);background:var(--blue-soft);box-shadow:0 0 0 3px var(--blue-soft)}
.eform-f.just label{color:var(--blue)}
.eform-f .just-tag{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin-left:auto}

/* logged-out sign-in prompt (the expanded logged-out portal state) */
.portal-signin{padding:34px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.portal-signin .si-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line)}
.portal-signin .si-ic svg{width:26px;height:26px}
.portal-signin b{font-size:16px;font-weight:600}
.portal-signin p{font-size:13px;color:var(--muted);line-height:1.55;max-width:360px}

/* carrier dock rail: docked carriers along the bottom */
.carrier-dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:55;display:flex;align-items:center;gap:9px;
  max-width:calc(100vw - 40px);background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--line);border-radius:20px;padding:10px 12px;box-shadow:var(--shadow-pop)}
.cd-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:0 6px 0 4px;flex:none}
.carrier-chip{position:relative;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 15px;border-radius:13px;
  font-size:13px;font-weight:600;color:var(--ink-2);background:var(--card-2);border:1px solid var(--line);transition:.22s var(--ease);white-space:nowrap}
.carrier-chip .cc-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex:none}
.carrier-chip:hover{transform:translateY(-2px);border-color:var(--blue-line);color:var(--ink)}
.carrier-chip.active{border-color:var(--blue-line);background:var(--blue-soft);color:var(--ink);box-shadow:0 8px 20px -10px rgba(24,150,207,.5)}
.carrier-chip.add{color:var(--muted);font-weight:600}
.carrier-chip.add svg{width:16px;height:16px}
/* logged-out carrier ALERTS: glow, gold, a log-in badge */
.carrier-chip.out{border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold);animation:carrierAlert 1.6s var(--ease) infinite}
.carrier-chip.out .cc-dot{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.carrier-chip.out .cc-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#2a1e05;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));padding:4px 9px;border-radius:var(--r-pill)}
.carrier-chip.out .cc-badge svg{width:12px;height:12px}
@keyframes carrierAlert{0%,100%{box-shadow:0 0 0 0 rgba(191,140,42,0)}50%{box-shadow:0 0 0 5px rgba(191,140,42,.22),0 8px 22px -10px rgba(191,140,42,.5)}}
.carrier-dock .dock-sep{width:1px;height:26px;background:var(--line);margin:0 2px}