/**
 * vibe-code.css — Vibe Code surface (splash + Estimate + Studio + Inspector).
 *
 * Extracted from index.html in b.841 (was <style id="vcStyles">, lines
 * 101984-104080 in the b.840 single-file build). Content is byte-identical
 * to the inline block it replaced.
 *
 * CSS namespace: .vc-*  /  #vibeCodeEngine and children
 * Visible when body[data-active-tab="vibe"].
 * Reuses API keys from ceState.keys (Chat Engine).
 *
 * Originally in <body> just before <section id="vibeCodeEngine">; moved to
 * <head> as a <link> after styles/chat.css. Loading earlier is safe — these
 * rules are scoped to .vc-* and #vibeCodeEngine which don't exist until the
 * Vibe Code surface activates.
 */

    /* VIBE CODE ENGINE CSS b.598 -- mirrors Chat engine design system */
    #vibeCodeEngine {
      position: fixed;
      inset: 0;
      top: var(--header-h, 56px);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      background: transparent;
      z-index: 10;
    }

    .vc-stage {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      min-height: 0;
      max-width: none;
      width: 100%;
      margin: 0;
      padding: 18px 22px 7px;
      gap: 18px;
      background: transparent;
    }

    .vc-body {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .vc-body::-webkit-scrollbar {
      width: 6px;
    }

    .vc-body::-webkit-scrollbar-thumb {
      background: var(--lg-stroke);
      border-radius: 3px;
    }

    .vc-welcome {
      min-height: 70%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 16px;
      padding: 40px 20px;
    }

    .vc-welcome-icon {
      font-size: 42px;
      line-height: 1;
      opacity: .75;
      animation: vc-float 4s ease-in-out infinite;
    }

    @keyframes vc-float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-8px)
      }
    }

    .vc-welcome h2 {
      font-family: var(--font-display, 'Space Grotesk', sans-serif);
      font-size: 24px;
      font-weight: 800;
      color: var(--text);
      margin: 0;
      letter-spacing: -.02em;
    }

    .vc-welcome p {
      font-size: 13.5px;
      color: var(--text);
      max-width: 420px;
      line-height: 1.65;
      margin: 0;
    }

    .vc-subtitle-glass {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .18);
      -webkit-backdrop-filter: blur(40px) saturate(1.7);
      backdrop-filter: blur(40px) saturate(1.7);
      border-radius: 20px;
      padding: 14px 22px;
      box-shadow: 0 28px 64px -18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .10);
      text-align: center;
      max-width: 500px;
    }

    .vc-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      justify-content: center;
      max-width: 540px;
    }

    .vc-chip {
      padding: 7px 15px;
      border-radius: 20px;
      background: var(--lg-fill);
      border: 1px solid var(--lg-stroke);
      backdrop-filter: var(--lg-blur);
      -webkit-backdrop-filter: var(--lg-blur);
      font-size: 11.5px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all .2s;
      user-select: none;
    }

    .vc-chip:hover {
      background: var(--lg-fill-hover);
      color: var(--text);
    }

    .vc-error {
      background: rgba(239, 68, 68, .1);
      border: 1px solid rgba(239, 68, 68, .28);
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 12px;
      color: #fca5a5;
      margin-bottom: 12px;
      display: none;
    }

    .vc-error.on {
      display: block;
    }

    /* pipeline lives INSIDE build grid -- not a permanent top bar */
    .vc-pipeline {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 6px 0 10px;
    }

    .vc-step {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-faint);
      opacity: .4;
      transition: color .3s, opacity .3s;
    }

    .vc-step.active {
      color: rgb(var(--theme-accent-rgb, 74, 222, 128));
      opacity: 1;
    }

    .vc-step.done {
      color: var(--text-muted);
      opacity: 1;
    }

    .vc-step-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      flex-shrink: 0;
    }

    .vc-step.active .vc-step-dot {
      animation: vc-pulse 1.4s ease-in-out infinite;
    }

    @keyframes vc-pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 1
      }

      50% {
        transform: scale(1.6);
        opacity: .5
      }
    }

    .vc-step-div {
      width: 18px;
      height: 1px;
      background: var(--lg-stroke);
      margin: 0 6px;
      flex-shrink: 0;
    }

    .vc-build-grid {
      display: none;
      flex-direction: column;
      gap: 10px;
      padding-bottom: 16px;
    }

    .vc-build-grid.on {
      display: flex;
    }

    .vc-model-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .vc-card {
      border-radius: 14px;
      border: 1px solid var(--lg-stroke);
      background: var(--lg-fill);
      backdrop-filter: var(--lg-blur);
      -webkit-backdrop-filter: var(--lg-blur);
      overflow: hidden;
      min-height: 190px;
      display: flex;
      flex-direction: column;
      transition: border-color .3s;
    }

    .vc-card.streaming {
      border-color: rgba(255, 255, 255, .32);
    }

    .vc-card.done {
      border-color: rgba(255, 255, 255, .22);
    }

    .vc-card-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px;
      border-bottom: 1px solid var(--lg-stroke);
      flex-shrink: 0;
    }

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

    .vc-dot.claude {
      background: #cc7c5e;
    }

    .vc-dot.gpt {
      background: #4ade80;
    }

    .vc-dot.gemini {
      background: #a78bfa;
    }

    .vc-card-name {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--text-muted);
      flex: 1;
    }

    .vc-card-status {
      font-size: 10px;
      color: var(--text-faint);
      font-weight: 600;
    }

    .vc-card-status.streaming {
      color: rgb(var(--theme-accent-rgb, 74, 222, 128));
      animation: vc-blink .8s step-end infinite;
    }

    @keyframes vc-blink {
      50% {
        opacity: .2
      }
    }

    .vc-card-body {
      flex: 1;
      overflow: auto;
      padding: 11px;
    }

    .vc-card-body::-webkit-scrollbar {
      width: 4px;
    }

    .vc-card-body::-webkit-scrollbar-thumb {
      background: var(--lg-stroke);
      border-radius: 2px;
    }

    .vc-card-body pre {
      margin: 0;
      font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
      font-size: 10.5px;
      line-height: 1.6;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .vc-review {
      display: none;
    }

    .vc-review.on {
      display: block;
    }

    .vc-review-hd {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 13px;
      border-radius: 12px;
      background: var(--lg-fill);
      border: 1px solid var(--lg-stroke);
      backdrop-filter: var(--lg-blur);
      margin-bottom: 6px;
      cursor: pointer;
      user-select: none;
    }

    .vc-review-hd:hover {
      background: var(--lg-fill-hover);
    }

    .vc-review-lbl {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--text-muted);
      flex: 1;
    }

    .vc-review-chev {
      font-size: 10px;
      color: var(--text-faint);
      transition: transform .2s;
    }

    .vc-review.open .vc-review-chev {
      transform: rotate(180deg);
    }

    .vc-review-body {
      display: none;
      padding: 11px 13px;
      border-radius: 12px;
      background: var(--lg-fill);
      border: 1px solid var(--lg-stroke);
      font-size: 11.5px;
      color: var(--text-muted);
      line-height: 1.65;
      white-space: pre-wrap;
      margin-bottom: 10px;
    }

    .vc-review.open .vc-review-body {
      display: block;
    }

    /* ── Flow B: The Council — debate panel ─────────────────────────────── */
    .vc-debate {
      border-radius: 14px;
      border: 1px solid rgba(255, 160, 30, .28);
      background: var(--lg-fill);
      backdrop-filter: var(--lg-blur);
      -webkit-backdrop-filter: var(--lg-blur);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      max-height: 480px;
    }

    .vc-debate[hidden] { display: none; }

    .vc-debate-hd {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: rgba(255, 160, 30, .08);
      border-bottom: 1px solid rgba(255, 160, 30, .18);
    }

    .vc-debate-ico { font-size: 13px; }

    .vc-debate-title {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      opacity: .85;
    }

    .vc-debate-round {
      margin-left: auto;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      opacity: .5;
      background: rgba(255, 160, 30, .15);
      border-radius: 20px;
      padding: 2px 8px;
    }

    .vc-debate-thread {
      overflow-y: auto;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
    }

    /* Individual debate messages */
    .vc-dbm {
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(255,255,255,.03);
      overflow: hidden;
    }

    .vc-dbm--claude { border-color: rgba(200, 160, 255, .2); }
    .vc-dbm--gpt    { border-color: rgba(100, 210, 140, .2); }
    .vc-dbm--gemini { border-color: rgba(100, 180, 255, .2); }

    .vc-dbm-who {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      opacity: .6;
      padding: 6px 10px 4px;
    }

    .vc-dbm--claude .vc-dbm-who { color: rgba(200, 160, 255, .9); }
    .vc-dbm--gpt    .vc-dbm-who { color: rgba(100, 210, 140, .9); }
    .vc-dbm--gemini .vc-dbm-who { color: rgba(100, 180, 255, .9); }

    .vc-dbm-body {
      font-size: 11.5px;
      line-height: 1.65;
      padding: 4px 10px 10px;
      white-space: pre-wrap;
      word-break: break-word;
      opacity: .88;
    }

    /* Verdict panel */
    .vc-verdict {
      border-radius: 14px;
      border: 1px solid rgba(100, 180, 255, .28);
      background: var(--lg-fill);
      backdrop-filter: var(--lg-blur);
      -webkit-backdrop-filter: var(--lg-blur);
      overflow: hidden;
    }

    .vc-verdict[hidden] { display: none; }

    .vc-verdict-hd {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: rgba(100, 180, 255, .07);
      border-bottom: 1px solid rgba(100, 180, 255, .15);
    }

    .vc-verdict-ico { font-size: 14px; opacity: .7; }

    .vc-verdict-title {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      opacity: .8;
    }

    .vc-verdict-body {
      font-size: 12px;
      line-height: 1.7;
      padding: 12px 14px;
      white-space: pre-wrap;
      opacity: .85;
    }

    /* What Changed panel — inside the verdict card */
    .vc-changes {
      border-top: 1px solid rgba(100, 180, 255, .12);
      padding: 10px 14px 14px;
    }

    .vc-changes[hidden] { display: none; }

    .vc-changes-hd {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(100, 210, 140, .85);
      margin-bottom: 8px;
    }

    .vc-changes-body {
      font-size: 12px;
      line-height: 1.75;
      white-space: pre-wrap;
      opacity: .85;
    }

    /* Flow B card diagram extras */
    .vc-fp-chain--debate { flex-wrap: wrap; gap: 4px; }
    .vc-fp-arr--debate { color: rgba(255, 160, 30, .9); font-size: 14px; }

    /* ── Simulation mode banner ────────────────────────────────────────── */
    .vc-sim-banner {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 14px 0;
      padding: 10px 16px;
      background: rgba(255, 140, 0, .12);
      border: 1px solid rgba(255, 160, 30, .45);
      border-radius: 10px;
      color: #ffb347;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .vc-sim-banner[hidden] { display: none; }
    .vc-sim-ico { font-size: 16px; flex-shrink: 0; }

    /* ── End Flow B styles ─────────────────────────────────────────────── */

    /* ── Studio layout — visual finishing ─────────────────────────────── */
    /* Three independent floating panels. Border + blur only — no dark fills.
       The orbs must bleed through each panel freely. */

    /* Studio container: clip inspector shadow bleed, clear breathing room */
    .vc-done.studio.on {
      gap: 12px !important;
      overflow: hidden !important;
    }

    /* ── STUDIO MODE LAYOUT ──────────────────────────────────────────────
       When a project is open the studio should own the full screen.
       • Hide the build prompt bar (Solo/CoWork/BUILD) — user uses the
         chat bar inside the studio to iterate; a ✕ Close button returns
         them to the welcome screen.
       • Switch .vc-body to overflow:hidden — WebKit creates a dark
         compositor layer for backdrop-filter children inside overflow:auto
         scroll containers; hiding scroll in studio mode kills the artifact.
       • Tighten stage padding so panels sit close to screen edges. */
    .vc-stage:has(.vc-done.studio.on) > .vc-inputbar {
      display: none !important;
    }
    .vc-stage:has(.vc-done.studio.on) > .vc-body {
      overflow: hidden !important;
    }
    .vc-stage:has(.vc-done.studio.on) {
      padding: 8px !important;
      gap: 0 !important;
    }
    /* #vcDone fills the full body height when inputbar is hidden */
    .vc-stage:has(.vc-done.studio.on) > .vc-body > .vc-done.studio.on {
      height: 100% !important;
      padding-bottom: 0 !important;
    }

    /* ── Full-screen studio: hide site header, fill entire viewport ───────
       .vc-project-open is toggled by showView() whenever the studio is open.
       --header-h drives #vibeCodeEngine's top offset; zeroing it makes the
       engine fill from the very top of the viewport. */
    body.vc-project-open header.header {
      display: none !important;
    }
    body.vc-project-open {
      --header-h: 0px !important;
    }

    /* ── Desktop preview: glass until content loads ───────────────────────
       The iframe is hidden (opacity 0) while no srcdoc has been set — the
       glass background of the pane shows through. Once JS marks the pane
       [data-loaded], the iframe fades in over the top. */
    .vc-preview-pane[data-device="desktop"]:not([data-loaded]) .vc-preview-iframe {
      opacity: 0 !important;
      pointer-events: none;
    }
    .vc-preview-pane[data-device="desktop"][data-loaded] .vc-preview-iframe {
      opacity: 1;
      transition: opacity .3s ease;
    }

    /* ── Design System modal: studio panels vanish, orbs run behind the glass box.
       IMPORTANT: the modals live inside .vc-done alongside the toolbar + split,
       so we cannot set opacity on .vc-stage/.vc-done — that would kill the modal
       too (opacity is inherited; position:fixed doesn't escape it).
       Target only the specific visual panels, leaving the modal siblings visible. */
    body.vc-ds-open .vc-studio-toolbar,
    body.vc-ds-open .vc-studio-split,
    body.vc-ds-open #vcWholeBuildBar,
    body.vc-ds-open .vc-studio-prompt,
    body.vc-ds-open #vibeCodeEngine .vc-inputbar {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity .18s ease;
    }
    /* When DS modal is open, give the empty canvas a living orb gradient
       so it doesn't look like an accidental black void. */
    body.vc-ds-open #vibeCodeEngine {
      background:
        radial-gradient(ellipse 60% 50% at 20% 35%, rgba(120, 80, 220, .22), transparent 70%),
        radial-gradient(ellipse 55% 45% at 78% 65%, rgba(60, 160, 255, .18), transparent 70%),
        radial-gradient(ellipse 40% 60% at 55% 15%, rgba(220, 100, 180, .14), transparent 70%),
        rgba(6, 8, 18, .96) !important;
    }

    /* Close button — visually distinct from action buttons */
    .vc-studio-close-btn {
      background: rgba(255, 60, 60, .10) !important;
      border-color: rgba(255, 100, 100, .30) !important;
      color: rgba(255, 180, 180, .90) !important;
    }
    .vc-studio-close-btn:hover {
      background: rgba(255, 60, 60, .20) !important;
      border-color: rgba(255, 100, 100, .55) !important;
      color: #fff !important;
    }

    /* Toolbar: stronger border + top inset glow only — no outward shadow */
    .vc-studio-toolbar {
      border: 1px solid rgba(255, 255, 255, .22) !important;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset !important;
    }

    /* Studio split: glass treatment so corners diffuse instead of showing raw
       dark page background. Transparent + no backdrop = raw dark at corners. */
    .vc-studio-split {
      background: rgba(255, 255, 255, .04) !important;
      -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
      backdrop-filter: blur(28px) saturate(1.4) !important;
      border: 1px solid rgba(255, 255, 255, .18) !important;
      box-shadow: none !important;
    }

    /* Panes inside the split: zero border-radius + remove inward borders so the
       split container's overflow:hidden + border-radius:16px clips cleanly.
       No corner crescent artifacts; the split container owns the glass shape. */
    .vc-studio-split .vc-code-pane,
    .vc-studio-split .vc-preview-pane {
      border-radius: 0 !important;
      border-top: 0 !important;
      border-bottom: 0 !important;
    }
    .vc-studio-split .vc-code-pane {
      border-left: 0 !important;
    }
    .vc-studio-split .vc-preview-pane {
      border-right: 0 !important;
    }
    /* Desktop: liquid glass — orbs bleed through when no build is loaded yet.
       The iframe content will fill the pane once a build completes. */
    .vc-studio-split .vc-preview-pane[data-device="desktop"] {
      background: rgba(255, 255, 255, .04) !important;
      -webkit-backdrop-filter: blur(28px) saturate(1.35) !important;
      backdrop-filter: blur(28px) saturate(1.35) !important;
    }
    /* Tablet/Mobile: liquid glass — lets orbs bleed through so the device
       frame floats on the same animated background as the rest of the studio. */
    .vc-studio-split .vc-preview-pane[data-device="tablet"],
    .vc-studio-split .vc-preview-pane[data-device="mobile"] {
      background: rgba(255, 255, 255, .04) !important;
      -webkit-backdrop-filter: blur(28px) saturate(1.35) !important;
      backdrop-filter: blur(28px) saturate(1.35) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 24px !important;
    }
    /* Mobile: tighten max-width so the iPhone reads as a phone, not a tablet.
       b.916 owns aspect-ratio / border-radius / bezel chrome — don't override those. */
    .vc-studio-split .vc-preview-pane[data-device="mobile"] .vc-preview-iframe {
      max-width: 260px !important;
    }
    /* Tablet in studio split: portrait constrained by pane height, landscape by width */
    .vc-studio-split .vc-preview-pane[data-device="tablet"]:not([data-orient="landscape"]) .vc-preview-iframe {
      max-height: calc(100% - 40px) !important;
    }
    .vc-studio-split .vc-preview-pane[data-device="tablet"][data-orient="landscape"] .vc-preview-iframe {
      max-width: calc(100% - 40px) !important;
    }

    /* FINAL CODE pane header — stronger divider line only */
    .vc-pane-hd {
      border-bottom: 1px solid rgba(255, 255, 255, .20) !important;
      padding: 10px 14px !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }

    .vc-pane-title {
      color: rgba(255, 255, 255, .70) !important;
      letter-spacing: .10em !important;
      flex: 1 !important;
    }

    /* ── Orientation toggle: inside preview pane header, right-aligned ──── */
    /* Hidden by default; CSS reveals it when pane is in tablet mode */
    .vc-orient-toggle {
      display: none;
      align-items: center;
      gap: 3px;
      margin-left: auto;
    }
    .vc-preview-pane[data-device="tablet"] .vc-orient-toggle {
      display: flex;
    }
    .vc-orient-btn {
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.55);
      font-family: var(--font-display, inherit);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .04em;
      cursor: pointer;
      transition: all .14s ease;
      white-space: nowrap;
    }
    .vc-orient-btn:hover {
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.28);
      color: rgba(255,255,255,.85);
    }
    .vc-orient-btn.on {
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.38);
      color: #fff;
      box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
    }

    /* Action buttons — slightly more visible */
    .vc-act-btn {
      background: rgba(255, 255, 255, .08) !important;
      border-color: rgba(255, 255, 255, .20) !important;
      color: rgba(255, 255, 255, .78) !important;
      font-size: 10.5px !important;
      padding: 5px 12px !important;
    }
    .vc-act-btn:hover {
      background: rgba(255, 255, 255, .16) !important;
      border-color: rgba(255, 255, 255, .34) !important;
      color: #fff !important;
    }

    /* Chat bar: glass panel floating at the bottom — border only, no shadow */
    #vcWholeBuildBar {
      background: rgba(255, 255, 255, .05) !important;
      -webkit-backdrop-filter: blur(32px) saturate(1.6) !important;
      backdrop-filter: blur(32px) saturate(1.6) !important;
      border: 1px solid rgba(255, 255, 255, .20) !important;
      border-radius: 16px !important;
      padding: 11px 14px !important;
      gap: 10px !important;
      box-shadow: none !important;
    }

    /* Chat input */
    #vcWholeBuildInput {
      background: rgba(255, 255, 255, .06) !important;
      border: 1px solid rgba(255, 255, 255, .16) !important;
      border-radius: 12px !important;
      padding: 9px 14px !important;
      font-size: 13px !important;
      color: rgba(255, 255, 255, .88) !important;
    }
    #vcWholeBuildInput::placeholder {
      color: rgba(255, 255, 255, .35) !important;
    }
    #vcWholeBuildInput:focus {
      border-color: rgba(255, 255, 255, .36) !important;
      outline: none !important;
    }

    /* Apply button */
    #vcWholeBuildBtn {
      background: rgba(255, 255, 255, .10) !important;
      border: 1px solid rgba(255, 255, 255, .26) !important;
      border-radius: 12px !important;
      padding: 8px 16px !important;
      font-size: 12.5px !important;
      font-weight: 700 !important;
      color: rgba(255, 255, 255, .92) !important;
    }
    #vcWholeBuildBtn:hover {
      background: rgba(255, 255, 255, .18) !important;
      border-color: rgba(255, 255, 255, .40) !important;
      color: #fff !important;
    }
    /* ── End studio layout finishing ───────────────────────────────────── */

    .vc-arch {
      border-radius: 14px;
      border: 1px solid rgba(var(--theme-accent-rgb, 74, 222, 128), .28);
      background: var(--lg-fill);
      backdrop-filter: var(--lg-blur);
      -webkit-backdrop-filter: var(--lg-blur);
      overflow: hidden;
      display: none;
      flex-direction: column;
      min-height: 220px;
    }

    .vc-arch.on {
      display: flex;
    }

    .vc-arch-hd {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 11px 15px;
      border-bottom: 1px solid rgba(var(--theme-accent-rgb, 74, 222, 128), .15);
    }

    .vc-arch-ico {
      font-size: 15px;
    }

    .vc-arch-title {
      font-family: var(--font-display, 'Space Grotesk', sans-serif);
      font-size: 13px;
      font-weight: 800;
      color: var(--text);
      flex: 1;
      letter-spacing: -.01em;
    }

    .vc-arch-badge {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      background: rgba(var(--theme-accent-rgb, 74, 222, 128), .12);
      border: 1px solid rgba(var(--theme-accent-rgb, 74, 222, 128), .28);
      color: rgb(var(--theme-accent-rgb, 74, 222, 128));
      padding: 2px 8px;
      border-radius: 20px;
    }

    .vc-arch-body {
      flex: 1;
      overflow: auto;
      padding: 13px 15px;
    }

    .vc-arch-body::-webkit-scrollbar {
      width: 4px;
    }

    .vc-arch-body::-webkit-scrollbar-thumb {
      background: var(--lg-stroke);
      border-radius: 2px;
    }

    .vc-arch-body pre {
      margin: 0;
      font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
      font-size: 11.5px;
      line-height: 1.65;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .vc-arch-report {
      font-size: 11.5px;
      color: rgba(var(--theme-accent-rgb, 74, 222, 128), .7);
      line-height: 1.6;
      padding: 9px 15px;
      font-style: italic;
      border-top: 1px solid rgba(var(--theme-accent-rgb, 74, 222, 128), .1);
    }

    .vc-done {
      display: none;
      gap: 10px;
      padding-bottom: 16px;
      height: calc(100% - 16px);
    }

    .vc-done.on {
      display: flex;
    }

    .vc-code-pane,
    .vc-preview-pane {
      flex: 1;
      min-width: 0;
      border-radius: 14px;
      border: 1px solid var(--lg-stroke);
      background: var(--lg-fill);
      backdrop-filter: var(--lg-blur);
      -webkit-backdrop-filter: var(--lg-blur);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .vc-pane-hd {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px;
      border-bottom: 1px solid var(--lg-stroke);
      flex-shrink: 0;
    }

    .vc-pane-title {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--text-muted);
      flex: 1;
    }

    .vc-pane-actions {
      display: flex;
      gap: 5px;
    }

    .vc-act-btn {
      padding: 4px 11px;
      border-radius: 8px;
      border: 1px solid var(--lg-stroke);
      background: var(--lg-fill);
      color: var(--text-muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .04em;
      cursor: pointer;
      transition: all .2s;
      font-family: inherit;
    }

    .vc-act-btn:hover {
      background: var(--lg-fill-hover);
      color: var(--text);
    }

    .vc-code-scroll {
      flex: 1;
      overflow: auto;
      padding: 13px;
    }

    .vc-code-scroll::-webkit-scrollbar {
      width: 5px;
    }

    .vc-code-scroll::-webkit-scrollbar-thumb {
      background: var(--lg-stroke);
      border-radius: 3px;
    }

    .vc-code-scroll pre {
      margin: 0;
      font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
      font-size: 11.5px;
      line-height: 1.65;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .vc-preview-iframe {
      flex: 1;
      border: none;
      width: 100%;
      background: #fff;
      border-radius: 0 0 14px 14px;
    }

    /* INPUT BAR -- identical recipe to .ce-inputbar */
    .vc-inputbar {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      background: transparent;
    }

    .vc-input-meta {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      padding: 0 4px;
      font-family: var(--font-ui);
      font-size: 11.5px;
      color: var(--text-faint);
      flex-wrap: wrap;
    }

    .vc-mode-selector {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .22);
      backdrop-filter: blur(22px) saturate(1.30) brightness(1.04);
      -webkit-backdrop-filter: blur(22px) saturate(1.30) brightness(1.04);
      border-radius: 999px;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset;
    }

    .vc-mode-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 14px;
      border-radius: 999px;
      background: transparent;
      border: 0;
      font-family: var(--font-ui, inherit);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .01em;
      color: var(--text-muted);
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
    }

    .vc-mode-btn:hover {
      color: var(--text);
      background: var(--lg-fill-hover);
    }

    .vc-mode-btn.on {
      color: var(--text);
      background: var(--lg-fill-hover);
      border: 1.5px solid rgba(255, 255, 255, .55);
      backdrop-filter: var(--lg-blur);
      -webkit-backdrop-filter: var(--lg-blur);
      box-shadow: none;
      padding: 4.5px 12.5px;
    }

    .vc-tier {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .18);
      -webkit-backdrop-filter: blur(40px) saturate(1.7);
      backdrop-filter: blur(40px) saturate(1.7);
      border-radius: 999px;
      box-shadow: 0 28px 64px -18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .10);
    }

    .vc-tier-btn {
      display: inline-flex;
      align-items: center;
      padding: 6px 14px;
      border-radius: 999px;
      background: transparent;
      border: 0;
      font-family: var(--font-ui, inherit);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .01em;
      color: var(--text-muted);
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
    }

    .vc-tier-btn.on {
      color: var(--text);
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .55);
      -webkit-backdrop-filter: blur(40px) saturate(1.7);
      backdrop-filter: blur(40px) saturate(1.7);
      border-radius: 999px;
      padding: 4.5px 12.5px;
      box-shadow: 0 28px 64px -18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .10), 0 0 0 3px rgba(255, 255, 255, .08);
    }

    .vc-tier-btn[data-tier="pro"].on {
      padding: 4.5px 12.5px;
    }

    .vc-model-pills {
      display: flex;
      gap: 4px;
    }

    .vc-mpill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 11px;
      border-radius: 999px;
      border: 1px solid var(--lg-stroke);
      background: var(--lg-fill);
      backdrop-filter: var(--lg-blur);
      -webkit-backdrop-filter: var(--lg-blur);
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      font-family: inherit;
    }

    .vc-mpill.on {
      background: var(--lg-fill-hover);
      color: var(--text);
      border-color: rgba(255, 255, 255, .40);
    }

    .vc-pdot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .vc-mpill[data-m="claude"] .vc-pdot {
      background: #a78bfa;
    }

    .vc-mpill[data-m="gpt"] .vc-pdot {
      background: #4ade80;
    }

    .vc-mpill[data-m="gemini"] .vc-pdot {
      background: #60a5fa;
    }

    /* b.751 — Centre the row contents vertically (was flex-end, which
       slammed the textarea + BUILD pill to the bottom and made the
       placeholder sit low-of-centre). Right padding pulled in from
       10 → 4px so the BUILD pill tucks against the inner edge of the
       bar instead of floating with a visible gap. */
    .vc-input-row {
      display: flex;
      align-items: center;
      gap: 10px;
      /* b.823 — Pulled left padding 14px → 4px (matching the right side)
         per user feedback: placeholder/text was sitting too far in from
         the bar's left edge. Total text-to-edge inset is now 4px (row) +
         4px (textarea own padding) = 8px, vs the old 18px. */
      padding: 3px 4px;
      background: var(--lg-fill);
      border: 1.5px solid var(--lg-stroke);
      -webkit-backdrop-filter: var(--lg-blur);
      backdrop-filter: var(--lg-blur);
      border-radius: 24px;
      box-shadow: var(--lg-shadow);
    }

    .vc-input-row:focus-within {
      border-color: rgba(255, 255, 255, .40);
      box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 24px 60px -22px rgba(0, 0, 0, .65);
    }

    /* b.751 — Padding-y added so the single-row state sits cleanly on
       the row's vertical centerline alongside the 48px BUILD pill.
       b.825 — Kill all native textarea chrome (Safari was painting a
       subtle inset shadow/border around the field that read as a
       "double layer" inside the frosted glass bar). The field is now
       100% transparent — the visible bar is just .vc-input-row. */
    .vc-textarea {
      flex: 1;
      font-family: var(--font-body, inherit);
      font-size: 15px;
      line-height: 1.55;
      color: var(--text);
      background: transparent;
      background-color: transparent !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      -webkit-appearance: none !important;
      appearance: none !important;
      resize: none;
      min-height: 24px;
      max-height: 180px;
      padding: 11px 4px;
    }

    .vc-textarea:focus,
    .vc-textarea:focus-visible {
      outline: 0 !important;
      box-shadow: none !important;
      border: 0 !important;
    }

    /* b.826 — Beat the global `[data-theme] textarea` rule (line ~1313)
       that paints every textarea on the page with frosted-glass fill +
       border + radius. That global rule was painting the inner pill the
       user saw inside the .vc-input-row. We need a selector specificity
       higher than (0,1,1) and we use !important on every property the
       global rule touches. */
    #vibeCodeEngine .vc-textarea,
    [data-theme] #vibeCodeEngine .vc-textarea {
      background: transparent !important;
      background-color: transparent !important;
      border: 0 !important;
      border-color: transparent !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      -webkit-appearance: none !important;
      appearance: none !important;
      outline: 0 !important;
    }
    #vibeCodeEngine .vc-textarea:focus,
    #vibeCodeEngine .vc-textarea:focus-visible,
    [data-theme] #vibeCodeEngine .vc-textarea:focus,
    [data-theme] #vibeCodeEngine .vc-textarea:focus-visible {
      background: transparent !important;
      background-color: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      outline: 0 !important;
    }

    .vc-textarea::placeholder {
      color: var(--text-faint, rgba(255, 255, 255, .3));
    }

    .vc-build-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 20px;
      height: 48px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .04);
      border: 1.5px solid rgba(255, 255, 255, .30);
      -webkit-backdrop-filter: blur(22px) saturate(1.30);
      backdrop-filter: blur(22px) saturate(1.30);
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .02em;
      cursor: pointer;
      transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
      white-space: nowrap;
      overflow: hidden;
      line-height: 1;
      font-family: var(--font-display);
      box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 -1px 0 rgba(255, 255, 255, .06) inset;
    }

    .vc-build-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* b.753 — .vc-build-est removed (BUILD pill is label-only). */

    /* b.760 — Estimate button. Now sits in the meta row (above the
       input bar), same height/treatment as the My Projects pill.
       Pure liquid glass — no amber. Disabled while prompt is empty. */
    .vc-estimate-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px 0 14px;
      height: 32px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .14);
      -webkit-backdrop-filter: blur(24px) saturate(1.5);
      backdrop-filter: blur(24px) saturate(1.5);
      color: rgba(255, 255, 255, .82);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .02em;
      cursor: pointer;
      transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
      white-space: nowrap;
      line-height: 1;
      font-family: var(--font-display);
      box-shadow: 0 2px 12px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .10);
    }

    .vc-estimate-btn:hover:not(:disabled) {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .28);
      color: #fff;
      transform: translateY(-1px);
    }

    .vc-estimate-btn:active:not(:disabled) {
      transform: translateY(0);
    }

    .vc-estimate-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .vc-est-glyph {
      font-size: 11px;
      color: rgba(255, 255, 255, .65);
    }

    .vc-est-label {
      font-size: 12px;
    }

    /* b.765 — .vc-est-cost / .vc-est-coin chip CSS removed; the
       Estimate button is label-only now. */

    /* Loading state — set while the API call is in flight. */
    .vc-estimate-btn.loading .vc-est-label::after {
      content: '…';
      display: inline-block;
      margin-left: 2px;
      animation: vcEstDots 1.1s steps(3, end) infinite;
    }

    @keyframes vcEstDots {
      0%   { content: '.'; }
      33%  { content: '..'; }
      66%  { content: '...'; }
      100% { content: '.'; }
    }

    /* ═══════════════════════════════════════════════════════════════
       b.760 — ESTIMATE CONSOLE MODAL — liquid glass rebuild.
       All amber / orange retired; pure white frost only. Progressive
       disclosure: only the next-needed section is visible at any time.
       When open, the Vibe Code engine UI behind is hidden via
       `body.vc-est-modal-open` so the modal sits on the theme orbs.
       ═══════════════════════════════════════════════════════════════ */
    /* b.762 — Modal wrapper is now FULLY TRANSPARENT. The dark
       backdrop from b.761 was masking the theme orbs (so the bg
       read as plain black) AND killing the modal box's liquid glass
       (the box's backdrop-filter was blurring a dark slab instead
       of the colourful orbs). With the wrapper transparent, the
       box's own 60px backdrop-filter does the real work — milky
       frost with hints of the orbs blooming through. The wrapper
       is now purely a positioning + click-outside layer. */
    .vc-est-modal {
      position: fixed;
      inset: 0;
      z-index: 9997;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      padding: 24px;
    }

    .vc-est-modal[hidden] { display: none !important; }

    /* b.762 — Engine-hide rule, take two. EXPLICIT element selectors
       only — no `>` combinator, no :not() exemption, so there's no
       chance of mis-targeting like b.760. While the modal is open,
       the engine content is hidden via `visibility` (layout preserved,
       modal stays positioned). .vc-inputbar itself stays visible
       because the modal is its child — its OTHER children (meta-row,
       input-row, coin-gate) are listed below, so they go invisible
       while .vc-est-modal does not. */
    body.vc-est-modal-open #vibeCodeEngine .vc-body,
    body.vc-est-modal-open #vibeCodeEngine .vc-input-meta,
    body.vc-est-modal-open #vibeCodeEngine .vc-input-row,
    body.vc-est-modal-open #vibeCodeEngine .vc-pp-backdrop,
    body.vc-est-modal-open #vibeCodeEngine .vc-projects-panel {
      visibility: hidden;
    }

    /* b.762 — Liquid glass tint bumped slightly so the box reads
       with presence when floating directly on bright theme orbs
       (no more dark wrapper to lean on). Canonical recipe:
       milky white sheen gradient + heavy backdrop blur + saturate
       + slight brightness so the orbs' hues bloom through softly. */
    .vc-est-box {
      position: relative;
      background:
        linear-gradient(180deg,
          rgba(255, 255, 255, .14) 0%,
          rgba(255, 255, 255, .07) 50%,
          rgba(255, 255, 255, .045) 100%);
      border: 1px solid rgba(255, 255, 255, .26);
      -webkit-backdrop-filter: blur(60px) saturate(1.8) brightness(1.06);
      backdrop-filter: blur(60px) saturate(1.8) brightness(1.06);
      border-radius: 24px;
      padding: 30px 30px 24px;
      max-width: 520px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 18px;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, .28) inset,
        0 -1px 0 rgba(0, 0, 0, .10) inset,
        0 32px 80px -16px rgba(0, 0, 0, .55);
      animation: vcEstModalIn .28s cubic-bezier(.22, 1, .36, 1) both;
    }

    @keyframes vcEstModalIn {
      from { opacity: 0; transform: translateY(10px) scale(.98); }
      to   { opacity: 1; transform: none; }
    }

    .vc-est-x {
      position: absolute;
      top: 14px;
      right: 14px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .18);
      -webkit-backdrop-filter: blur(20px) saturate(1.5);
      backdrop-filter: blur(20px) saturate(1.5);
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: rgba(255, 255, 255, .60);
      font-size: 13px;
      line-height: 1;
      transition: background .15s, color .15s, transform .15s, border-color .15s;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 4px 12px rgba(0, 0, 0, .25);
    }

    .vc-est-x:hover {
      background: rgba(255, 255, 255, .14);
      border-color: rgba(255, 255, 255, .30);
      color: #fff;
      transform: scale(1.04);
    }

    .vc-est-hd {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-right: 36px;
    }

    .vc-est-hd-glyph {
      font-size: 16px;
      color: rgba(255, 255, 255, .55);
      line-height: 1;
    }

    .vc-est-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 600;
      letter-spacing: .005em;
      color: rgba(255, 255, 255, .95);
    }

    .vc-est-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: opacity .25s ease, max-height .35s cubic-bezier(.22, 1, .36, 1);
    }

    .vc-est-section[hidden] {
      display: none !important;
    }

    .vc-est-sec-label {
      font-family: var(--font-display);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .50);
      font-weight: 500;
    }

    .vc-est-req {
      display: none; /* b.760 — quieter UI, no shouty "REQUIRED" tags */
    }

    /* b.765 — Editable prompt field (was a static .preview div). Same
       liquid-glass look the preview had, plus a focus state, a
       placeholder, and sensible min/max heights so it grows as the
       user types without dominating the modal. */
    .vc-est-prompt-input {
      width: 100%;
      box-sizing: border-box;
      font-family: var(--font-body);
      font-size: 13.5px;
      line-height: 1.55;
      color: rgba(255, 255, 255, .92);
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .14);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      backdrop-filter: blur(20px) saturate(1.4);
      border-radius: 12px;
      padding: 12px 14px;
      min-height: 64px;
      max-height: 200px;
      resize: vertical;
      outline: 0;
      transition: background .15s ease, border-color .15s ease;
    }

    .vc-est-prompt-input:focus {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .34);
    }

    .vc-est-prompt-input::placeholder {
      color: rgba(255, 255, 255, .32);
    }

    .vc-est-route-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .vc-est-route-grid-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }

    /* b.760 — Progressive elegance. When a section is in 'picked'
       state, the unselected option fades + shrinks slightly while
       remaining clickable (so users can change their mind). The
       selected option holds its full presence. Pure white frost
       throughout — no amber. */
    .vc-est-route-opt {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .12);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      backdrop-filter: blur(20px) saturate(1.4);
      border-radius: 14px;
      cursor: pointer;
      transition: all .25s cubic-bezier(.22, 1, .36, 1);
      color: rgba(255, 255, 255, .75);
      text-align: left;
      font-family: inherit;
    }

    .vc-est-route-opt:hover:not(.on) {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(255, 255, 255, .22);
      color: #fff;
    }

    .vc-est-route-opt.on {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
      border-color: rgba(255, 255, 255, .42);
      color: #fff;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, .25) inset,
        0 -1px 0 rgba(0, 0, 0, .10) inset,
        0 6px 20px -8px rgba(0, 0, 0, .45);
    }

    /* When ANY option in the grid has .on, the siblings fade to a
       quiet "you didn't pick this" state — still clickable to switch. */
    .vc-est-route-grid:has(.on) .vc-est-route-opt:not(.on) {
      opacity: .28;
      transform: scale(.97);
    }
    .vc-est-route-grid:has(.on) .vc-est-route-opt:not(.on):hover {
      opacity: .55;
      transform: scale(.985);
    }

    .vc-est-route-name {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .005em;
    }

    .vc-est-route-desc {
      font-size: 11px;
      color: rgba(255, 255, 255, .50);
      letter-spacing: .005em;
    }

    .vc-est-route-opt.on .vc-est-route-desc {
      color: rgba(255, 255, 255, .68);
    }

    /* Footer (cost lines + actions). Hidden by default — revealed by
       JS once every required selection is locked in. */
    .vc-est-footer-section {
      gap: 12px;
      margin-top: 4px;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, .07);
    }

    .vc-est-cost-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .vc-est-cost-label {
      font-size: 12px;
      color: rgba(255, 255, 255, .50);
    }

    .vc-est-cost-value {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, .92);
      font-variant-numeric: tabular-nums;
    }

    .vc-est-cost-glyph {
      color: rgba(255, 255, 255, .65);
      margin-right: 4px;
    }

    .vc-est-cost-inr {
      color: rgba(255, 255, 255, .42);
      font-weight: 500;
      margin-left: 4px;
    }

    .vc-est-actions {
      display: flex;
      gap: 10px;
      margin-top: 6px;
    }

    .vc-est-cancel,
    .vc-est-go {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px 16px;
      border-radius: 999px;
      cursor: pointer;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .01em;
      transition: all .2s cubic-bezier(.22, 1, .36, 1);
      line-height: 1;
    }

    .vc-est-cancel {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .14);
      color: rgba(255, 255, 255, .65);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      backdrop-filter: blur(20px) saturate(1.4);
    }

    .vc-est-cancel:hover {
      background: rgba(255, 255, 255, .06);
      border-color: rgba(255, 255, 255, .26);
      color: #fff;
    }

    .vc-est-go {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
      border: 1px solid rgba(255, 255, 255, .42);
      color: #fff;
      -webkit-backdrop-filter: blur(20px) saturate(1.5);
      backdrop-filter: blur(20px) saturate(1.5);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, .30) inset,
        0 -1px 0 rgba(0, 0, 0, .12) inset,
        0 6px 20px -6px rgba(0, 0, 0, .40);
    }

    .vc-est-go:hover:not(:disabled) {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .10));
      border-color: rgba(255, 255, 255, .55);
      transform: translateY(-1px);
    }

    .vc-est-go:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .vc-est-go-glyph {
      font-size: 11px;
      color: rgba(255, 255, 255, .85);
    }

    .vc-est-err {
      font-size: 12px;
      color: #ff8080;
      background: rgba(255, 80, 80, .06);
      border: 1px solid rgba(255, 80, 80, .20);
      border-radius: 10px;
      padding: 8px 12px;
      line-height: 1.5;
    }

    /* Result stage */
    .vc-est-range-pill {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 18px 14px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
      border: 1px solid rgba(255, 255, 255, .14);
      -webkit-backdrop-filter: blur(20px) saturate(1.5);
      backdrop-filter: blur(20px) saturate(1.5);
      border-radius: 18px;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 4px 18px rgba(0, 0, 0, .25);
    }

    .vc-est-range-label {
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .50);
      font-weight: 500;
    }

    .vc-est-range-coins {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      letter-spacing: .005em;
      font-variant-numeric: tabular-nums;
    }

    .vc-est-coin-glyph {
      color: rgba(255, 255, 255, .80);
      font-size: 22px;
      margin-right: 4px;
    }

    .vc-est-range-inr {
      font-size: 12px;
      color: rgba(255, 255, 255, .50);
      font-variant-numeric: tabular-nums;
    }

    .vc-est-confidence {
      margin-top: 6px;
      font-size: 11px;
      color: rgba(255, 255, 255, .55);
      letter-spacing: .02em;
    }

    .vc-est-confidence strong {
      color: rgba(255, 255, 255, .92);
      font-weight: 600;
      letter-spacing: .01em;
      margin-left: 4px;
      text-transform: capitalize;
    }

    .vc-est-confidence.low strong    { color: #ff9080; }
    .vc-est-confidence.medium strong { color: rgba(255, 255, 255, .85); }
    .vc-est-confidence.high strong   { color: #a8e8b8; }

    .vc-est-scope,
    .vc-est-verdict {
      font-family: var(--font-body);
      font-size: 13px;
      line-height: 1.55;
      color: rgba(255, 255, 255, .80);
    }

    .vc-est-verdict.good   { color: #a8e8b8; }
    .vc-est-verdict.warn   { color: rgba(255, 255, 255, .85); }
    .vc-est-verdict.danger { color: #ff9080; }

    .vc-est-details {
      background: rgba(0, 0, 0, .12);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 12px;
      padding: 10px 14px;
    }

    .vc-est-details summary {
      cursor: pointer;
      font-size: 11px;
      letter-spacing: .06em;
      color: rgba(255, 255, 255, .55);
      font-family: var(--font-display);
      font-weight: 500;
      text-transform: uppercase;
    }

    .vc-est-details[open] summary {
      margin-bottom: 10px;
      color: rgba(255, 255, 255, .78);
    }

    .vc-est-breakdown {
      font-family: var(--font-mono, monospace);
      font-size: 11.5px;
      line-height: 1.6;
      color: rgba(255, 255, 255, .65);
      white-space: pre;
      overflow-x: auto;
    }

    /* b.766 — Honest-estimate disclaimer. Quiet styling so it reads
       as a footnote, not a warning. */
    .vc-est-disclaimer {
      font-family: var(--font-body);
      font-size: 11.5px;
      line-height: 1.5;
      color: rgba(255, 255, 255, .45);
      padding: 8px 12px;
      background: rgba(255, 255, 255, .025);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 10px;
      font-style: italic;
    }

    /* ═════════════════════════════════════════════════════════════
       b.772 — VIBE CODE STUDIO (canvas + inspector + prompt-edit +
       design system + mobile cleanup). Activates when a build
       completes. Toolbar atop the existing .vc-done block; resizable
       split; inspector slides in from the right; prompt-edit bar
       floats at the bottom of the preview.
       ═════════════════════════════════════════════════════════════ */
    /* b.790 CLICK-BLOCK FIX. Was `.vc-done.studio { display: flex !important }` — the `.studio` class is only ever ADDED, never removed, so once a user ran BUILD once, .vc-done.studio's !important display overrode `.vc-done { display: none }` forever. The toolbar/inspector/prompt-bar then rendered invisibly over the welcome chrome and intercepted clicks. Now requires BOTH .on AND .studio: welcome view (no .on) keeps .vc-done hidden regardless of .studio. */
    .vc-done.studio.on { display: flex !important; flex-direction: column; gap: 12px; height: 100%; min-height: 0; position: relative; }
    .vc-done.studio:not(.on) { display: none !important; }
    /* b.790 — belt-and-braces: ensure every interactive welcome / meta-row element is always clickable, regardless of cascading rules from other surfaces. */
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-welcome,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-welcome *,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-chip,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-chips,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-inputbar,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-inputbar *,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-input-meta,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-input-meta *,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-input-row,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-input-row *,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-estimate-btn,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-myproj-btn,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-build-btn,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-textarea,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-mode-btn,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-tier-btn,
    body[data-active-tab="vibe"] #vibeCodeEngine .vc-mpill {
      pointer-events: auto !important;
    }
    .vc-studio-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); border-radius: 16px; flex-shrink: 0; flex-wrap: wrap; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset; }
    .vc-tg-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.10); border-radius: 999px; }
    .vc-tg-btn { padding: 5px 11px; border-radius: 999px; background: transparent; border: 0; color: rgba(255,255,255,.55); font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
    .vc-tg-btn:hover { color: rgba(255,255,255,.85); }
    .vc-tg-btn.on { background: rgba(255,255,255,.14); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.20) inset; }
    .vc-tg-sep { width: 1px; height: 18px; background: rgba(255,255,255,.10); margin: 0 4px; }
    .vc-tg-spacer { flex: 1; }
    .vc-tg-action { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); color: rgba(255,255,255,.80); font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: all .18s ease; }
    .vc-tg-action:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
    .vc-tg-coin { font-size: 10px; padding: 1px 6px; background: rgba(255,255,255,.10); border-radius: 999px; color: rgba(255,255,255,.65); }
    .vc-studio-split { display: flex; flex: 1; min-height: 0; gap: 0; background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; overflow: hidden; }
    .vc-studio-split[data-mode="split"] .vc-code-pane { flex: 0 0 var(--vc-split, 42%); }
    .vc-studio-split[data-mode="split"] .vc-preview-pane { flex: 1; }
    .vc-studio-split[data-mode="code"] .vc-code-pane { flex: 1; }
    .vc-studio-split[data-mode="code"] .vc-preview-pane { display: none; }
    .vc-studio-split[data-mode="code"] .vc-studio-divider { display: none; }
    .vc-studio-split[data-mode="preview"] .vc-code-pane { display: none; }
    .vc-studio-split[data-mode="preview"] .vc-studio-divider { display: none; }
    .vc-studio-split[data-mode="preview"] .vc-preview-pane { flex: 1; }
    .vc-studio-divider { width: 6px; cursor: col-resize; background: rgba(255,255,255,.04); border-left: 1px solid rgba(255,255,255,.08); border-right: 1px solid rgba(255,255,255,.08); transition: background .15s ease; flex-shrink: 0; position: relative; }
    .vc-studio-divider::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 36px; border-radius: 2px; background: rgba(255,255,255,.22); }
    .vc-studio-divider:hover { background: rgba(255,255,255,.08); }
    .vc-preview-pane[data-device="tablet"] .vc-preview-iframe { max-width: 820px; margin: 0 auto; display: block; }
    .vc-preview-pane[data-device="mobile"] .vc-preview-iframe { max-width: 390px; margin: 0 auto; display: block; }
    .vc-preview-pane[data-device="tablet"], .vc-preview-pane[data-device="mobile"] { background: rgba(0,0,0,.25); padding: 16px; }
    body.vc-studio-fullscreen #vibeCodeEngine { position: fixed !important; inset: 0 !important; z-index: 9990; width: 100vw; height: 100vh; max-width: none; }
    body.vc-studio-fullscreen #vibeCodeEngine .vc-stage { padding: 12px; }
    body.vc-studio-fullscreen #vibeCodeEngine .vc-done { height: calc(100vh - 24px); }
    .vc-studio-inspector { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; max-width: 90vw; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04) 50%, rgba(255,255,255,.025)); border-left: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(48px) saturate(1.7) brightness(1.04); backdrop-filter: blur(48px) saturate(1.7) brightness(1.04); transform: translateX(100%); transition: transform .28s cubic-bezier(.22, 1, .36, 1); display: flex; flex-direction: column; z-index: 8; box-shadow: -16px 0 48px -12px rgba(0,0,0,.55); }
    .vc-studio-inspector.open { transform: translateX(0); }
    .vc-insp-hd { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
    .vc-insp-tag { font-family: var(--font-mono, monospace); font-size: 11px; padding: 2px 8px; background: rgba(255,255,255,.08); border-radius: 6px; color: #fce7b8; letter-spacing: .05em; }
    .vc-insp-title { flex: 1; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); }
    .vc-insp-close { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; color: rgba(255,255,255,.60); cursor: pointer; font-size: 10px; transition: all .15s ease; }
    .vc-insp-close:hover { background: rgba(255,255,255,.14); color: #fff; }
    .vc-insp-tabs { display: flex; gap: 2px; padding: 10px 12px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
    .vc-insp-tab { flex: 1; padding: 6px 8px; border-radius: 8px; border: 0; background: transparent; color: rgba(255,255,255,.55); font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .03em; cursor: pointer; text-transform: uppercase; transition: all .15s ease; }
    .vc-insp-tab.on { background: rgba(255,255,255,.08); color: #fff; }
    .vc-insp-body { flex: 1; overflow-y: auto; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
    .vc-insp-section { display: flex; flex-direction: column; gap: 6px; }
    .vc-insp-section[hidden] { display: none !important; }
    .vc-insp-label { font-family: var(--font-display); font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.45); font-weight: 600; }
    .vc-insp-row { display: grid; grid-template-columns: 80px 1fr; gap: 8px; align-items: center; }
    .vc-insp-row > label { font-size: 11px; color: rgba(255,255,255,.60); }
    .vc-insp-input, .vc-insp-select, .vc-insp-color { width: 100%; padding: 6px 9px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.10); border-radius: 8px; color: rgba(255,255,255,.92); font-family: var(--font-mono, monospace); font-size: 11.5px; outline: 0; transition: border-color .15s ease; }
    .vc-insp-input:focus, .vc-insp-select:focus { border-color: rgba(255,255,255,.35); }
    .vc-insp-color { padding: 4px; height: 28px; cursor: pointer; }
    .vc-insp-textarea { width: 100%; min-height: 60px; max-height: 160px; padding: 8px 10px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; color: rgba(255,255,255,.92); font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; resize: vertical; outline: 0; }
    .vc-studio-prompt { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.04); backdrop-filter: blur(40px) saturate(1.8) brightness(1.04); border-radius: 999px; box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 14px 32px -10px rgba(0,0,0,.55); z-index: 7; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1); }
    .vc-studio-prompt.shown { opacity: 1; transform: none; pointer-events: all; }
    .vc-studio-inspector.open ~ .vc-studio-prompt { right: 336px; }
    .vc-studio-prompt-tag { flex-shrink: 0; font-family: var(--font-mono, monospace); font-size: 11px; padding: 4px 10px; background: rgba(255,255,255,.10); border-radius: 999px; color: #fce7b8; letter-spacing: .04em; }
    .vc-studio-prompt input { flex: 1; background: transparent; border: 0; outline: 0; color: rgba(255,255,255,.92); font-family: var(--font-body); font-size: 13px; }
    .vc-studio-prompt input::placeholder { color: rgba(255,255,255,.35); }
    .vc-studio-prompt button { flex-shrink: 0; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); color: #fff; font-family: var(--font-display); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
    .vc-studio-prompt button:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.38); }
    .vc-studio-prompt button:disabled { opacity: .4; cursor: not-allowed; }
    /* Modal overlay: transparent — the animated orbs keep running behind.
       Only the box itself has glass treatment. */
    .vc-ds-modal, .vc-asset-picker, .vc-mc-confirm { position: fixed; inset: 0; z-index: 9996; display: flex; align-items: center; justify-content: center; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 24px; }
    .vc-ds-modal[hidden], .vc-asset-picker[hidden], .vc-mc-confirm[hidden] { display: none !important; }
    .vc-ds-box, .vc-ap-box, .vc-mc-box { background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(60px) saturate(1.8) brightness(1.06); backdrop-filter: blur(60px) saturate(1.8) brightness(1.06); border-radius: 22px; padding: 24px 26px; width: 100%; max-height: 86vh; overflow-y: auto; box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 32px 80px -16px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 14px; }
    .vc-ds-box { max-width: 680px; }
    .vc-ap-box { max-width: 460px; }
    .vc-mc-box { max-width: 420px; }
    /* Header: title left, X button right */
    .vc-ds-hd { display: flex; align-items: center; justify-content: space-between; }
    .vc-ds-title, .vc-ap-title, .vc-mc-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #fff; }
    /* X close button — top-right of the header */
    .vc-ds-close-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.65); font-size: 12px; cursor: pointer; transition: all .15s ease; flex-shrink: 0; }
    .vc-ds-close-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; }
    .vc-ds-projname { width: 100%; padding: 7px 12px; background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #fff; font-size: 13px; outline: 0; }
    .vc-ds-sec-lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.50); font-family: var(--font-display); font-weight: 600; }
    .vc-ds-section { display: flex; flex-direction: column; gap: 8px; }
    .vc-ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .vc-ds-grid label { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 9px; font-size: 11px; color: rgba(255,255,255,.65); }
    .vc-ds-grid label > span { flex: 1; min-width: 0; }
    .vc-ds-grid input[type="color"] { width: 26px; height: 20px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; background: transparent; cursor: pointer; flex-shrink: 0; }
    .vc-ds-grid input[type="text"] { flex: 1.4; min-width: 0; padding: 4px 7px; background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.09); border-radius: 5px; color: #fff; font-family: var(--font-mono, monospace); font-size: 10.5px; outline: 0; }
    .vc-ds-grid select.vc-ds-select { flex: 1.4; min-width: 0; padding: 4px 7px; background: rgba(0,0,0,.30); border: 1px solid rgba(255,255,255,.12); border-radius: 5px; color: rgba(255,255,255,.85); font-size: 10.5px; outline: 0; cursor: pointer; appearance: none; }
    .vc-ds-actions, .vc-ap-actions { display: flex; gap: 8px; margin-top: 2px; }

    /* ── AI Design Vision area ──────────────────────────────────────────────── */
    .vc-ds-ai-area { display: flex; flex-direction: column; gap: 8px; }
    .vc-ds-ai-prompt { width: 100%; padding: 10px 12px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #fff; font-family: var(--font-body); font-size: 13px; resize: vertical; outline: 0; min-height: 72px; line-height: 1.5; }
    .vc-ds-ai-prompt::placeholder { color: rgba(255,255,255,.35); }
    .vc-ds-ai-row { display: flex; gap: 8px; align-items: center; }
    /* Generate button — primary, prominent */
    .vc-ds-gen-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.38); background: linear-gradient(135deg, rgba(120,80,220,.40), rgba(60,160,255,.30)); color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s ease; }
    .vc-ds-gen-btn:hover { background: linear-gradient(135deg, rgba(140,100,240,.55), rgba(80,180,255,.45)); border-color: rgba(255,255,255,.55); box-shadow: 0 0 20px rgba(120,80,220,.30); }
    .vc-ds-gen-btn:disabled { opacity: .55; cursor: wait; }
    .vc-ds-gen-coin { font-size: 11px; font-weight: 500; color: rgba(255,220,100,.85); background: rgba(255,200,60,.12); border: 1px solid rgba(255,200,60,.25); border-radius: 999px; padding: 2px 7px; }
    /* Import tokens label — secondary pill */
    .vc-ds-import-btn { display: flex; align-items: center; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: rgba(255,255,255,.65); font-family: var(--font-display); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
    .vc-ds-import-btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.30); color: #fff; }
    /* Generation status / error message */
    .vc-ds-gen-status { font-size: 12px; color: rgba(255,255,255,.65); padding: 8px 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 8px; line-height: 1.4; }

    .vc-ds-btn, .vc-ap-actions button { flex: 1; padding: 9px 14px; border-radius: 999px; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s ease; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: rgba(255,255,255,.75); }
    .vc-ds-btn:hover, .vc-ap-actions button:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
    .vc-ds-btn.primary, .vc-ap-go { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)) !important; border-color: rgba(255,255,255,.42) !important; color: #fff !important; }
    .vc-ap-prompt { width: 100%; min-height: 60px; padding: 10px 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #fff; font-family: var(--font-body); font-size: 13px; resize: vertical; outline: 0; }
    .vc-ap-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .vc-ap-opt { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.14); cursor: pointer; transition: all .15s ease; text-align: left; color: rgba(255,255,255,.78); font-family: var(--font-display); }
    .vc-ap-opt:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.30); color: #fff; }
    .vc-ap-opt.on { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border-color: rgba(255,255,255,.42); color: #fff; }
    .vc-ap-opt-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
    .vc-ap-opt-desc { font-size: 11px; color: rgba(255,255,255,.55); }
    .vc-ap-err, .vc-mc-err { font-size: 12px; color: #ff8080; background: rgba(255,80,80,.06); border: 1px solid rgba(255,80,80,.20); border-radius: 10px; padding: 8px 12px; }
    .vc-ap-err[hidden], .vc-mc-err[hidden] { display: none !important; }
    .vc-mc-cost { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #fff; text-align: center; padding: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; }
    .vc-mc-body { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.80); }

    .vc-build-btn:hover:not(:disabled) {
      background: rgba(255, 255, 255, .10);
      border-color: rgba(255, 255, 255, .45);
    }

    .vc-build-btn:hover {
      transform: translateY(-1px)
    }

    .vc-build-btn:disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    /* vc-cost removed */
    .vc-flow {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .vc-flow[hidden] {
      display: none !important;
    }

    .vc-tier[hidden] {
      display: none !important;
    }

    .vc-flow-popup[hidden] {
      display: none !important;
    }

    .vc-flow-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .22);
      -webkit-backdrop-filter: blur(22px) saturate(1.30) brightness(1.04);
      backdrop-filter: blur(22px) saturate(1.30) brightness(1.04);
      font-family: var(--font-ui, inherit);
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset;
    }

    .vc-flow-btn:hover {
      background: var(--lg-fill-hover);
      border-color: rgba(255, 255, 255, .40);
    }

    .vc-flow-icon {
      font-size: 8px;
      opacity: .6;
      display: inline-block;
      transition: transform .2s;
    }

    .vc-flow-btn.open .vc-flow-icon {
      transform: rotate(180deg);
    }

    .vc-flow-popup {
      position: fixed;
      width: min(640px, calc(100vw - 32px));
      max-width: calc(100vw - 32px);
      overflow: visible;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .18);
      -webkit-backdrop-filter: blur(40px) saturate(1.7);
      backdrop-filter: blur(40px) saturate(1.7);
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 28px 64px -18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .10);
      z-index: 200;
    }

    .vc-fp-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 14px;
      text-align: center;
    }

    .vc-fp-cards {
      display: flex;
      gap: 8px;
      width: 100%;
    }

    .vc-fp-card {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      background: rgba(255, 255, 255, .04);
      border: 1.5px solid rgba(255, 255, 255, .10);
      border-radius: 14px;
      padding: 14px 12px;
      cursor: pointer;
      transition: all .2s;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .vc-fp-card:hover {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .28);
    }

    .vc-fp-card.on {
      background: rgba(255, 255, 255, .10);
      border-color: rgba(255, 255, 255, .45);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
    }

    .vc-fp-head {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .vc-fp-badge { display: none; } /* Letters hidden — flows shown by name only */

    .vc-fp-name {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
    }

    .vc-fp-dia {
      background: rgba(0, 0, 0, .25);
      border-radius: 10px;
      padding: 10px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-height: 80px;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
    }

    .vc-fp-row {
      display: flex;
      gap: 4px;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .vc-fp-center {
      justify-content: center;
    }

    .vc-fp-chain {
      display: flex;
      align-items: center;
      gap: 3px;
      justify-content: center;
      width: 100%;
    }

    .vc-fp-node {
      padding: 3px 7px;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 700;
      white-space: nowrap;
    }

    .vc-fp-cl {
      background: rgba(167, 139, 250, .22);
      border: 1px solid rgba(167, 139, 250, .45);
      color: #c4b5fd;
    }

    .vc-fp-gp {
      background: rgba(74, 222, 128, .18);
      border: 1px solid rgba(74, 222, 128, .40);
      color: #86efac;
    }

    .vc-fp-gm {
      background: rgba(96, 165, 250, .18);
      border: 1px solid rgba(96, 165, 250, .40);
      color: #93c5fd;
    }

    .vc-fp-result {
      background: rgba(251, 191, 36, .18);
      border: 1px solid rgba(251, 191, 36, .40);
      color: #fde68a;
    }

    .vc-fp-arr {
      font-size: 13px;
      color: rgba(255, 255, 255, .35);
      line-height: 1;
    }

    .vc-fp-merge-arrow {
      width: 70%;
      height: 18px;
      position: relative;
      margin: 2px 0;
    }

    .vc-fp-merge-arrow::before,
    .vc-fp-merge-arrow::after {
      content: "";
      position: absolute;
      bottom: 0;
      width: 42%;
      height: 1px;
      background: rgba(255, 255, 255, .22);
    }

    .vc-fp-merge-arrow::before {
      left: 0;
      transform-origin: right bottom;
      transform: rotate(-18deg);
    }

    .vc-fp-merge-arrow::after {
      right: 0;
      transform-origin: left bottom;
      transform: rotate(18deg);
    }

    .vc-fp-mc {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 12px;
      background: rgba(255, 255, 255, .22);
    }

    .vc-fp-pipeline-labels {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 4px;
      font-size: 9px;
      font-weight: 600;
      color: rgba(255, 255, 255, .35);
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: 0 6px;
    }

    .vc-fp-desc {
      font-size: 10.5px;
      color: var(--text-muted);
      line-height: 1.45;
    }

    .vc-fp-step-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .vc-fp-step-lbl {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .38);
    }

    .vc-fp-assign {
      cursor: pointer;
      transition: filter .15s, transform .12s;
      user-select: none;
    }

    .vc-fp-assign:hover {
      filter: brightness(1.35);
      transform: scale(1.06);
    }

    .vc-tier {
      position: relative;
    }

    /* vc-mode: tier always visible; flow cowork-only; model pills removed */
    #vcTier {
      display: inline-flex !important;
    }

    #vibeCodeEngine:not([data-vc-mode="cowork"]) #vcFlow {
      display: none !important;
    }

    #vibeCodeEngine[data-vc-mode="cowork"] #vcFlow {
      display: inline-flex !important;
    }

    .vc-model-pills {
      display: none !important;
    }

    .vc-inputbar,
    .vc-inputbar *,
    .vc-mode-btn,
    .vc-tier-btn {
      pointer-events: auto !important;
    }

    .vc-tier-popup {
      position: fixed;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .18);
      -webkit-backdrop-filter: blur(40px) saturate(1.7);
      backdrop-filter: blur(40px) saturate(1.7);
      border-radius: 20px;
      padding: 14px 16px;
      min-width: 200px;
      box-shadow: 0 28px 64px -18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .10);
      z-index: 9999;
      pointer-events: none;
      animation: vc-tp-in .18s ease both;
    }

    @keyframes vc-tp-in {
      from {
        opacity: 0;
        transform: translateY(5px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .vc-tier-popup[hidden] {
      display: none;
    }

    .vc-tp-title {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 9px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .vc-tp-row {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 3.5px 0;
      font-size: 12px;
      color: var(--text);
      font-family: var(--font-ui, inherit);
    }

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

    @media(max-width:900px) {
      .vc-stage {
        padding: 12px 14px 18px;
        gap: 12px;
      }

      .vc-model-pills {
        display: none;
      }
    }

    @media(max-width:640px) {
      .vc-model-row {
        grid-template-columns: 1fr;
      }

      .vc-done {
        flex-direction: column;
      }
    }

    /* ════════════════════════════════════════════════════════════════════
       b.916 — REAL DEVICE FRAMES
       Replaces the width-clamp-only toggle with actual device chrome:
       iPhone (notch + speaker + home indicator), iPad (rounded bezel +
       camera dot + home button), Desktop (no frame, full bleed).
       Frame is purely visual — the iframe still sandboxes the AI build.
       All values keyed to liquid-glass tokens to match the rest of the
       Vibe Code surface.
       ════════════════════════════════════════════════════════════════════ */
    .vc-preview-pane { position: relative; }

    /* DESKTOP — no frame, the iframe fills the pane (current default). */
    .vc-preview-pane[data-device="desktop"] .vc-preview-iframe {
      width: 100%;
      height: 100%;
      max-width: none;
      margin: 0;
      border-radius: 0;
      box-shadow: none;
    }

    /* ════════════════════════════════════════════════════════════════════
       TABLET — 12" iPad Pro frame (1024×1366 portrait / 1366×1024 landscape).
       Default = portrait. data-orient="landscape" flips dimensions + chrome.
       ════════════════════════════════════════════════════════════════════ */
    .vc-preview-pane[data-device="tablet"] {
      background:
        radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.06), transparent 60%),
        rgba(0,0,0,.30);
      padding: 28px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: auto;
    }

    /* ── Portrait (default) ─────────────────────────────────────── */
    .vc-preview-pane[data-device="tablet"]:not([data-orient="landscape"]) .vc-preview-iframe {
      width: auto;
      max-width: none;
      height: 100%;
      max-height: calc(100% - 48px);
      aspect-ratio: 3 / 4;          /* 12" iPad Pro portrait: 1024×1366 */
      margin: 0 auto;
      display: block;
      background: #08060f;
      border-radius: 22px;
      padding: 42px 20px;           /* top/bottom bezel thicker than sides */
      box-sizing: border-box;
      border: 1.5px solid rgba(255,255,255,.18);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 28px 72px -16px rgba(0,0,0,.72),
        0 8px 24px -8px rgba(0,0,0,.5);
    }

    /* ── Landscape ──────────────────────────────────────────────── */
    .vc-preview-pane[data-device="tablet"][data-orient="landscape"] .vc-preview-iframe {
      width: 100%;
      max-width: calc(100% - 48px);
      height: auto;
      aspect-ratio: 4 / 3;          /* 12" iPad Pro landscape: 1366×1024 */
      margin: auto;
      display: block;
      background: #08060f;
      border-radius: 22px;
      padding: 20px 42px;           /* side bezels thicker in landscape */
      box-sizing: border-box;
      border: 1.5px solid rgba(255,255,255,.18);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 28px 72px -16px rgba(0,0,0,.72),
        0 8px 24px -8px rgba(0,0,0,.5);
    }

    /* ── iPad chrome decorations ────────────────────────────────── */
    .vc-preview-pane[data-device="tablet"]::before,
    .vc-preview-pane[data-device="tablet"]::after {
      content: '';
      position: absolute;
      pointer-events: none;
      z-index: 4;
    }

    /* PORTRAIT: camera dot top-center, home button bottom-center */
    .vc-preview-pane[data-device="tablet"]:not([data-orient="landscape"])::before {
      top: calc(50% - min(44vh, 380px) + 18px);
      left: 50%; transform: translateX(-50%);
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(255,255,255,.22);
      box-shadow: 0 0 0 2px rgba(0,0,0,.45);
      border: 1px solid rgba(255,255,255,.15);
    }
    .vc-preview-pane[data-device="tablet"]:not([data-orient="landscape"])::after {
      bottom: calc(50% - min(44vh, 380px) + 15px);
      left: 50%; transform: translateX(-50%);
      width: 24px; height: 24px; border-radius: 50%;
      background: transparent;
      border: 1.5px solid rgba(255,255,255,.26);
    }

    /* LANDSCAPE: camera dot right-center, home button left-center */
    .vc-preview-pane[data-device="tablet"][data-orient="landscape"]::before {
      right: calc(50% - min(48vw, 440px) + 18px);
      top: 50%; transform: translateY(-50%);
      left: auto;
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(255,255,255,.22);
      box-shadow: 0 0 0 2px rgba(0,0,0,.45);
      border: 1px solid rgba(255,255,255,.15);
    }
    .vc-preview-pane[data-device="tablet"][data-orient="landscape"]::after {
      left: calc(50% - min(48vw, 440px) + 15px);
      top: 50%; transform: translateY(-50%);
      right: auto; bottom: auto;
      width: 24px; height: 24px; border-radius: 50%;
      background: transparent;
      border: 1.5px solid rgba(255,255,255,.26);
    }

    /* MOBILE — iPhone frame. */
    .vc-preview-pane[data-device="mobile"] {
      background:
        radial-gradient(140% 80% at 50% 0%, rgba(255,255,255,.04), transparent 60%),
        rgba(0,0,0,.32);
      padding: 28px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: auto;
    }
    .vc-preview-pane[data-device="mobile"] .vc-preview-iframe {
      width: 100%;
      max-width: 390px;
      aspect-ratio: 9 / 19.5;
      max-height: calc(100% - 56px);
      height: auto;
      margin: 0 auto;
      display: block;
      background: #08060f;
      border-radius: 44px;
      padding: 14px 8px;                                /* slim bezel */
      box-sizing: border-box;
      border: 1.5px solid rgba(255,255,255,.20);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.05) inset,
        0 32px 80px -18px rgba(0,0,0,.75),
        0 12px 28px -10px rgba(0,0,0,.55);
    }
    /* iPhone Dynamic-Island-style notch */
    .vc-preview-pane[data-device="mobile"]::before {
      content: '';
      position: absolute;
      top: calc(50% - min(50vh, calc(100vh - 120px)) / 2 + 22px);
      left: 50%;
      transform: translateX(-50%);
      width: 96px;
      height: 22px;
      border-radius: 999px;
      background: #000;
      border: 1px solid rgba(255,255,255,.10);
      pointer-events: none;
      z-index: 4;
    }
    /* iPhone home indicator (bottom bar) */
    .vc-preview-pane[data-device="mobile"]::after {
      content: '';
      position: absolute;
      bottom: calc(50% - min(50vh, calc(100vh - 120px)) / 2 + 8px);
      left: 50%;
      transform: translateX(-50%);
      width: 110px;
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,.32);
      pointer-events: none;
      z-index: 4;
    }

    /* Device label pill rendered above the framed preview */
    .vc-device-label {
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      padding: 3px 11px;
      border-radius: 999px;
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.65);
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      backdrop-filter: blur(20px) saturate(1.4);
      pointer-events: none;
      z-index: 5;
      opacity: 0;
      transition: opacity .2s ease;
    }
    /* Device label pill suppressed — device is clear from the toolbar buttons */
    .vc-preview-pane[data-device="tablet"] .vc-device-label,
    .vc-preview-pane[data-device="mobile"] .vc-device-label { opacity: 0; display: none; }

    /* On small viewports, dial back the bezel size so the framed preview
       doesn't get squeezed unreadable */
    @media (max-width: 900px) {
      .vc-preview-pane[data-device="tablet"]  .vc-preview-iframe { padding: 28px 12px; border-radius: 16px; }
      .vc-preview-pane[data-device="mobile"]  .vc-preview-iframe { padding: 10px 6px;  border-radius: 32px; }
      .vc-preview-pane[data-device="mobile"]::before { width: 72px; height: 18px; }
    }

    /* ════════════════════════════════════════════════════════════════════
       b.916 — EXPORT / PUBLISH / COMPARE MODALS
       Three liquid-glass dialogs reusing the same modal primitive shape as
       vc-ds-modal / vc-mc-confirm. Centred fixed overlay, frosted box,
       no fixed brand colour (amber retired). All vc-* scoped.
       ════════════════════════════════════════════════════════════════════ */
    .vc-export-modal,
    .vc-publish-modal,
    .vc-compare-modal {
      position: fixed; inset: 0; z-index: 9996;
      display: flex; align-items: center; justify-content: center;
      background: rgba(8,10,18,.72);
      -webkit-backdrop-filter: blur(60px) saturate(1.4);
      backdrop-filter: blur(60px) saturate(1.4);
      padding: 24px;
    }
    .vc-export-modal[hidden],
    .vc-publish-modal[hidden],
    .vc-compare-modal[hidden] { display: none !important; }

    .vc-export-box,
    .vc-publish-box,
    .vc-compare-box {
      background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
      border: 1px solid rgba(255,255,255,.22);
      -webkit-backdrop-filter: blur(60px) saturate(1.8) brightness(1.06);
      backdrop-filter: blur(60px) saturate(1.8) brightness(1.06);
      border-radius: 22px;
      padding: 22px 24px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow:
        0 1px 0 rgba(255,255,255,.28) inset,
        0 32px 80px -16px rgba(0,0,0,.55);
      display: flex; flex-direction: column; gap: 14px;
    }
    .vc-export-box   { max-width: 780px; }
    .vc-publish-box  { max-width: 540px; }
    .vc-compare-box  { max-width: 1180px; }

    .vc-export-hd, .vc-publish-hd, .vc-compare-hd {
      display: flex; align-items: center; gap: 10px;
    }
    .vc-export-title, .vc-publish-title, .vc-compare-title {
      flex: 1;
      font-family: var(--font-display);
      font-size: 17px; font-weight: 600;
      color: #fff;
      letter-spacing: -.005em;
    }
    .vc-export-sub, .vc-publish-sub, .vc-compare-sub {
      font-size: 13px;
      line-height: 1.55;
      color: rgba(255,255,255,.72);
    }
    .vc-export-sub code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; padding: 1px 6px; background: rgba(255,255,255,.08); border-radius: 4px; }

    /* ── EXPORT — 3 cards ───────────────────────────────────────────── */
    .vc-export-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .vc-export-card {
      display: flex; flex-direction: column; gap: 8px;
      padding: 18px 16px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.14);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      backdrop-filter: blur(20px) saturate(1.4);
      border-radius: 16px;
      cursor: pointer;
      text-align: left;
      color: inherit;
      transition: all .18s ease;
      position: relative;
    }
    .vc-export-card:hover {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.30);
      transform: translateY(-1px);
      box-shadow: 0 12px 32px -10px rgba(0,0,0,.55);
    }
    .vc-export-card:focus-visible {
      outline: 2px solid rgba(255,255,255,.55);
      outline-offset: 2px;
    }
    .vc-export-icon {
      font-size: 22px;
      font-family: var(--font-display);
      color: #fff;
      opacity: .85;
      width: 36px; height: 36px;
      border-radius: 10px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      display: grid; place-items: center;
    }
    .vc-export-name {
      font-family: var(--font-display);
      font-size: 14px; font-weight: 600;
      color: #fff;
    }
    .vc-export-desc {
      font-size: 12px;
      line-height: 1.5;
      color: rgba(255,255,255,.65);
    }
    .vc-export-tag {
      margin-top: auto;
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
    }
    .vc-export-err {
      font-size: 12px;
      color: #ff8a8a;
      background: rgba(255,80,80,.08);
      border: 1px solid rgba(255,80,80,.22);
      border-radius: 10px;
      padding: 8px 12px;
    }
    .vc-export-err[hidden] { display: none !important; }
    .vc-export-foot {
      display: flex; align-items: center; justify-content: center;
      padding-top: 4px;
    }
    .vc-export-hint {
      font-size: 11px;
      color: rgba(255,255,255,.45);
      letter-spacing: .02em;
    }

    /* ── PUBLISH ────────────────────────────────────────────────────── */
    .vc-publish-step { display: flex; flex-direction: column; gap: 12px; }
    .vc-publish-step[hidden] { display: none !important; }
    .vc-publish-label {
      font-family: var(--font-display);
      font-size: 10.5px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.55);
      font-weight: 600;
    }
    .vc-publish-input {
      width: 100%;
      padding: 10px 14px;
      background: rgba(0,0,0,.22);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 12px;
      color: #fff;
      font-size: 13.5px;
      outline: 0;
      transition: border-color .15s ease;
    }
    .vc-publish-input:focus { border-color: rgba(255,255,255,.40); }
    .vc-publish-row { display: flex; align-items: center; gap: 10px; }
    .vc-publish-check {
      display: flex; align-items: center; gap: 9px;
      font-size: 12.5px;
      color: rgba(255,255,255,.78);
      cursor: pointer;
    }
    .vc-publish-check input { accent-color: rgba(255,255,255,.85); width: 14px; height: 14px; }
    .vc-publish-err {
      font-size: 12px;
      color: #ff8a8a;
      background: rgba(255,80,80,.08);
      border: 1px solid rgba(255,80,80,.22);
      border-radius: 10px;
      padding: 8px 12px;
    }
    .vc-publish-err[hidden] { display: none !important; }
    .vc-publish-spinner {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 2.5px solid rgba(255,255,255,.10);
      border-top-color: rgba(255,255,255,.75);
      animation: vcSpin 0.9s linear infinite;
      margin: 8px auto;
    }
    @keyframes vcSpin { to { transform: rotate(360deg); } }
    .vc-publish-status {
      text-align: center;
      font-size: 13px;
      color: rgba(255,255,255,.78);
    }
    .vc-publish-urlrow {
      display: flex; gap: 8px;
      padding: 6px;
      background: rgba(0,0,0,.30);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px;
    }
    .vc-publish-url {
      flex: 1;
      padding: 10px 14px;
      background: transparent;
      border: 0;
      color: #fff;
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: 12.5px;
      outline: 0;
      letter-spacing: .01em;
    }
    .vc-publish-share-row {
      display: flex; gap: 8px;
      flex-wrap: wrap;
    }
    .vc-publish-share {
      flex: 1;
      min-width: 120px;
      padding: 9px 12px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      color: rgba(255,255,255,.85);
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s ease;
    }
    .vc-publish-share:hover {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.30);
      color: #fff;
    }

    /* ── COMPARE ────────────────────────────────────────────────────── */
    .vc-compare-step { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
    .vc-compare-step[hidden] { display: none !important; }
    .vc-compare-cost {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 700;
      color: #fff;
      text-align: center;
      padding: 14px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px;
    }
    .vc-compare-err {
      font-size: 12px;
      color: #ff8a8a;
      background: rgba(255,80,80,.08);
      border: 1px solid rgba(255,80,80,.22);
      border-radius: 10px;
      padding: 8px 12px;
    }
    .vc-compare-err[hidden] { display: none !important; }

    .vc-compare-tabs {
      display: inline-flex; align-self: flex-start;
      gap: 2px;
      padding: 3px;
      background: rgba(0,0,0,.22);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
    }
    .vc-compare-tab {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px;
      border-radius: 999px;
      background: transparent;
      border: 0;
      color: rgba(255,255,255,.62);
      font-family: var(--font-display);
      font-size: 12px; font-weight: 600;
      letter-spacing: .04em;
      cursor: pointer;
      transition: all .15s ease;
    }
    .vc-compare-tab:hover { color: rgba(255,255,255,.95); }
    .vc-compare-tab.on {
      background: rgba(255,255,255,.14);
      color: #fff;
      box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
    }
    .vc-compare-tab .vc-dot { width: 8px; height: 8px; border-radius: 50%; }
    .vc-compare-tab .vc-dot.claude { background: linear-gradient(135deg, #c79bff, #8b6bff); }
    .vc-compare-tab .vc-dot.gpt    { background: linear-gradient(135deg, #6effc6, #00c08a); }
    .vc-compare-tab .vc-dot.gemini { background: linear-gradient(135deg, #ffd56b, #ff8fb8); }

    .vc-compare-stage {
      position: relative;
      min-height: 460px;
      flex: 1;
      background: rgba(0,0,0,.30);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 16px;
      overflow: hidden;
    }
    .vc-compare-pane {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
    }
    .vc-compare-pane[hidden] { display: none !important; }
    .vc-compare-status {
      flex-shrink: 0;
      padding: 8px 14px;
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: 11.5px;
      letter-spacing: .04em;
      color: rgba(255,255,255,.62);
      background: rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .vc-compare-status.streaming { color: #ffd56b; }
    .vc-compare-status.done      { color: #6effc6; }
    .vc-compare-status.error     { color: #ff8a8a; }
    .vc-compare-frame {
      flex: 1;
      width: 100%;
      border: 0;
      background: #08060f;
    }
    .vc-compare-actions {
      display: flex; gap: 10px; justify-content: flex-end;
    }

    @media (max-width: 720px) {
      .vc-export-grid { grid-template-columns: 1fr; }
      .vc-compare-stage { min-height: 360px; }
    }
