:root {
      --bg: #0b1a0f;
      --surface: #122719;
      --surface-2: #183520;
      --surface-3: rgba(255,255,255,.04);
      --border: rgba(34,197,94,.10);
      --border-bright: rgba(34,197,94,.22);
      --green: #22c55e;
      --green-dim: rgba(34,197,94,.65);
      --green-glow: rgba(34,197,94,.07);
      --text: #f0fdf4;
      --muted: rgba(240,253,244,.48);
      --muted-2: rgba(240,253,244,.26);
      --gold: #fbbf24;
      --red: #ef4444;
      /* compat aliases used by JS-injected HTML */
      --brand: #22c55e;
      --brand-2: #22c55e;
      --brand-soft: rgba(34,197,94,.12);
      --line: rgba(34,197,94,.10);
      --ink: #f0fdf4;
      --panel: #122719;
    }
    *, *::before, *::after { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }
    body.is-booting { overflow: hidden; }
    body.is-booting .app-shell { visibility: hidden; }
    h1, h2, h3 { margin: 0 0 12px; }
    p { margin: 0; line-height: 1.55; }
    label {
      display: block; margin: 12px 0 6px;
      font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
      color: var(--muted);
    }
    input, textarea, select {
      width: 100%; border: 1px solid var(--border); border-radius: 12px;
      padding: 12px 14px; font: inherit;
      background: var(--surface-2); color: var(--text);
    }
    input::placeholder, textarea::placeholder { color: var(--muted-2); }
    select option { background: var(--surface-2); }
    input:focus, textarea:focus, select:focus {
      outline: none; border-color: var(--border-bright);
      box-shadow: 0 0 0 3px var(--green-glow);
    }
    textarea { min-height: 130px; resize: vertical; }
    button {
      border: 0; border-radius: 999px; padding: 12px 20px; cursor: pointer;
      color: #0b1a0f; background: var(--green);
      font: inherit; font-weight: 600; letter-spacing: .01em;
      transition: background .15s, transform .1s;
    }
    button:hover { background: #16a34a; }
    button:active { transform: scale(.97); }
    button.alt {
      background: var(--surface-2); color: var(--text);
      border: 1px solid var(--border-bright);
    }
    button.alt:hover { background: rgba(34,197,94,.08); }
    button.gray {
      background: rgba(255,255,255,.06); color: var(--muted);
      border: 1px solid var(--border);
    }
    button.gray:hover { background: rgba(255,255,255,.10); }
    .hidden { display: none !important; }
    audio { width: 100%; margin-top: 8px; }
    .muted { color: var(--muted); font-size: 14px; }

    /* ── Layout ─────────────────────────────────── */
    .wrap { /* full-width root */ }
    .frame { max-width: 960px; margin: 0 auto; padding: 0 20px; }

    /* ── Boot overlay ────────────────────────────── */
    .boot-overlay {
      position: fixed; inset: 0; z-index: 50;
      display: flex; align-items: center; justify-content: center; padding: 24px;
      background: var(--bg);
      transition: opacity .28s ease, visibility .28s ease;
    }
    .boot-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
    .boot-panel {
      width: min(480px,100%); padding: 36px 28px; border-radius: 24px;
      border: 1px solid var(--border-bright); background: var(--surface);
      box-shadow: 0 24px 70px rgba(0,0,0,.55); text-align: center;
    }
    .boot-panel h2 { margin: 16px 0 10px; font-size: 24px; }
    .boot-panel p { color: var(--muted); }
    .orb-loader { position: relative; width: 72px; height: 72px; margin: 0 auto; }
    .orb-loader span {
      position: absolute; inset: 0; border-radius: 999px;
      border: 2px solid transparent;
      border-top-color: var(--green); border-left-color: rgba(34,197,94,.35);
      animation: orbit 1.25s linear infinite;
    }
    .orb-loader span:nth-child(2) { inset:10px; animation-duration:1.8s; animation-direction:reverse; opacity:.7; }
    .orb-loader span:nth-child(3) { inset:22px; animation-duration:.95s; border-top-color:var(--gold); border-left-color:rgba(251,191,36,.3); }
    @keyframes orbit { to { transform: rotate(360deg); } }

    /* ── Stage overlay ───────────────────────────── */
    .stage-overlay {
      position: fixed; inset: 0; z-index: 60;
      display: flex; align-items: center; justify-content: center; padding: 24px;
      background: rgba(11,26,15,.97); backdrop-filter: blur(14px);
      transition: opacity .35s ease, visibility .35s ease;
    }
    .stage-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
    .stage-panel {
      width: min(580px,100%); padding: 44px 36px 38px;
      border-radius: 28px; border: 1px solid var(--border-bright);
      background: var(--surface); box-shadow: 0 40px 90px rgba(0,0,0,.65);
      text-align: center;
    }
    .book-anim { position:relative; width:80px; height:96px; margin:0 auto 24px; perspective:600px; }
    .book-anim .cover {
      position:absolute; inset:0; border-radius:4px 12px 12px 4px;
      background: linear-gradient(135deg, var(--green), #16a34a);
      box-shadow: -3px 4px 14px rgba(34,197,94,.25);
      transform-origin: left center; animation: bookFlip 2.4s ease-in-out infinite;
    }
    .book-anim .pages { position:absolute; inset:4px 6px 4px 4px; border-radius:2px 8px 8px 2px; background: repeating-linear-gradient(180deg,rgba(255,255,255,.9) 0px,rgba(255,255,255,.9) 3px,rgba(255,255,255,.35) 3px,rgba(255,255,255,.35) 4px); }
    .book-anim .spine { position:absolute; left:0; top:4px; bottom:4px; width:7px; background:linear-gradient(90deg,#15803d,var(--green)); border-radius:3px 0 0 3px; }
    @keyframes bookFlip { 0%,100%{transform:rotateY(0deg);} 50%{transform:rotateY(-28deg);} }
    .stage-panel h2 { margin:0 0 8px; font-size:24px; }
    .stage-panel .quote { font-style:italic; color:var(--muted); font-size:15px; min-height:44px; line-height:1.55; transition:opacity .4s ease; }
    .stage-panel .elapsed { color:var(--muted-2); font-size:13px; margin-top:10px; }
    .stage-panel .next-step { margin-top:18px; padding:12px 16px; border-radius:14px; font-size:13.5px; background:var(--green-glow); border:1px solid var(--border); color:var(--green-dim); text-align:left; line-height:1.5; }
    .stage-panel .next-step strong { display:block; margin-bottom:2px; color:var(--text); }
    .progress-bar { height:4px; border-radius:99px; background:var(--surface-2); margin-top:18px; overflow:hidden; }
    .progress-bar .fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),#86efac); transition:width .6s ease; }
    .stage-overlay.stage-overlay--library {
      position: static; inset: auto; z-index: auto; min-height: 520px;
      padding: 18px; border-radius: 8px; border: 1px solid var(--border);
      background: rgba(5,14,7,.78); backdrop-filter: none;
    }
    .stage-overlay.stage-overlay--library .stage-panel {
      width: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: center;
      border-radius: 8px; box-shadow: none; padding: 34px 28px;
    }

    /* ── Hero section (dark mockup) ──────────────── */
    #expressHero {
      min-height: auto;
      display: flex; flex-direction: column;
      background: var(--bg); position: relative; overflow: hidden;
    }
    #expressHero::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      display: none;
    }
    .hero-nav {
      position: relative; z-index: 50;
      display: flex; align-items: center; justify-content: space-between;
      gap: 18px; padding: 18px 32px 12px;
    }
    .hero-logo-brand {
      font-size: 21px; font-weight: 800; color: var(--green); letter-spacing: -.01em;
    }
    .hero-nav-links {
      display: flex; align-items: center; justify-content: center; gap: 18px;
      flex: 1; min-width: 0;
    }
    .hero-nav-btn {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 34px; padding: 7px 13px; border-radius: 999px;
      border: 1px solid transparent; background: transparent;
      color: rgba(240,253,244,.66); cursor: pointer; font: inherit;
      font-size: 13px; font-weight: 700; text-decoration: none;
      transition: color .15s, background .15s, border-color .15s;
    }
    .hero-nav-btn:hover {
      color: var(--text); background: rgba(34,197,94,.08);
      border-color: rgba(34,197,94,.20);
    }
    .hero-nav-btn:focus-visible {
      outline: none; color: var(--text); border-color: var(--border-bright);
      box-shadow: 0 0 0 3px var(--green-glow);
    }
    .hero-body {
      position: relative; z-index: 1; flex: 0 0 auto; width: 100%;
      display: flex; flex-direction: column; align-items: center;
      justify-content: flex-start; padding: 0 24px 24px; text-align: center;
    }
    .hero-pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 24px; }
    .hero-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px; border-radius: 999px;
      border: 1px solid var(--border-bright); background: var(--surface);
      font-size: 13px; color: var(--text); font-weight: 600;
    }
    .hero-pill del { color: var(--muted); text-decoration: line-through; font-weight: 400; }
    .hero-pill strong { color: var(--green); }
    .hero-headline {
      display: flex; align-items: flex-end; justify-content: center; gap: .18em; flex-wrap: nowrap;
      font-size: clamp(34px, 5.4vw, 60px); font-weight: 800;
      line-height: 1.02; letter-spacing: 0; color: var(--text); margin: 0 0 10px;
    }
    .hero-headline em { color: var(--green); font-style: normal; }
    .flap {
      position: relative;
      display: inline-block;
      vertical-align: bottom;
      min-width: 5.35em;
      height: 1em;
      font-size: 1.2em;
      line-height: 1;
      perspective: 800px;
      color: var(--green);
      cursor: default;
    }
    .flap::after {
      content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
      background: rgba(0,0,0,.78); transform: translateY(-50%);
      z-index: 5; pointer-events: none;
    }
    .flap-half, .flap-flap {
      position: absolute; left: 0; right: 0;
      height: 50%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      background: rgba(10,10,10,.82);
    }
    .flap-half--top, .flap-flap--top {
      top: 0;
      align-items: flex-end;
      border-radius: 6px 6px 0 0;
      border-bottom: 2px solid rgba(0,0,0,.76);
    }
    .flap-half--bot, .flap-flap--bot {
      bottom: 0;
      align-items: flex-start;
      border-radius: 0 0 6px 6px;
    }
    .flap-word {
      display: block;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-weight: 500;
      line-height: 1;
      white-space: nowrap;
      padding: 0 .18em;
      color: var(--green);
      text-shadow: 0 0 24px rgba(34,197,94,.42);
    }
    .flap-half--top .flap-word, .flap-flap--top .flap-word { transform: translateY(50%); }
    .flap-half--bot .flap-word, .flap-flap--bot .flap-word { transform: translateY(-50%); }
    .flap-flap {
      z-index: 2;
      backface-visibility: hidden;
      will-change: transform;
    }
    .flap-flap--top { transform-origin: bottom center; transform: rotateX(0deg); }
    .flap-flap--bot { transform-origin: top center; transform: rotateX(-90deg); }
    .hero-sub { max-width: 560px; color: var(--muted); line-height: 1.45; margin: 0 auto 8px; }
    .hero-sub__main { display: block; font-size: 21px; color: var(--text); font-weight: 700; }
    .hero-sub__secondary { display: block; font-size: 15px; margin-top: 2px; }
    /* mic stage: badges flanking the microphone */
    .hero-mic-stage {
      position: relative; isolation: isolate;
      display: flex; align-items: flex-end; justify-content: center;
      width: min(760px, 100%);
      gap: clamp(14px, 4vw, 42px); margin-bottom: 0px;
      pointer-events: none;
    }
    .hero-mic-stage::before {
      content: ""; position: absolute; z-index: -2;
      left: 50%; top: 50%; transform: translate(-50%,-44%);
      width: min(900px, 118vw); height: min(440px, 58vw);
      background: radial-gradient(ellipse at center,
        rgba(134,239,172,.62) 0%,
        rgba(34,197,94,.36) 28%,
        rgba(34,197,94,.17) 52%,
        rgba(34,197,94,.05) 72%,
        transparent 100%);
      filter: blur(10px); opacity: .95;
    }
    .hero-badge {
      display: flex; flex-direction: column; align-items: center;
      align-self: center;
      padding: 14px 18px; border-radius: 14px;
      border: 1px solid rgba(134,239,172,.20);
      background: linear-gradient(180deg, rgba(13,35,21,.90), rgba(4,18,10,.92));
      box-shadow: 0 18px 46px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07), 0 0 24px rgba(34,197,94,.12);
      min-width: 96px; text-align: center; gap: 2px;
    }
    .hero-badge__del { font-size: 13px; color: var(--muted); text-decoration: line-through; line-height: 1.2; }
    .hero-badge__big { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
    .hero-badge--price .hero-badge__big { color: var(--green); }
    .hero-badge--spec .hero-badge__big { color: var(--text); }
    .hero-badge__sub { font-size: 11px; color: var(--muted); letter-spacing: .04em; line-height: 1.3; }
    .hero-mic {
      position: relative; width: clamp(280px, 30vw, 360px); height: auto;
      flex-shrink: 0; overflow: hidden; z-index: 1;
      background: transparent;
    }
    .hero-mic svg,
    .hero-mic .hero-mic__img {
      width: 100%; height: auto;
      filter: none;
      transform: translateY(0);
      transform-origin: center bottom;
    }
    .hero-mic .hero-mic__img {
      display: block;
      object-fit: contain; object-position: bottom center;
      background: transparent;
      clip-path: none;
    }
    /* platform logos strip */
    .hero-logos {
      position: relative; z-index: 2;
      width: 100vw; margin: 0 calc(50% - 50vw);
      display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 54px); flex-wrap: wrap;
      padding: 20px 24px 12px;
      background: #020604;
    }
    .hero-logos__caption {
      width: 100vw;
      margin: 0 calc(50% - 50vw);
      padding: 0 24px 18px;
      background: #020604;
      text-align: center;
    }
    .hero-logo-item {
      opacity: .76; color: var(--text);
      display: flex; align-items: center; gap: 6px;
      font-size: 14.4px; font-weight: 700; letter-spacing: 0;
      transition: opacity .15s;
    }
    .hero-logo-item:hover { opacity: .95; }
    .hero-logo-item svg { width: 24px; height: 24px; flex-shrink: 0; }
    .hero-form {
      position: relative; z-index: 3;
      width: 100vw; max-width: none; margin: 0 calc(50% - 50vw);
      padding: 12px 24px 24px;
      background: #020604;
    }
    .hero-form-row {
      display: grid; grid-template-columns: 1fr 1fr;
      align-items: end; gap: 10px; width: min(645px, 100%); margin: 0 auto;
    }
    .hero-form label {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .hero-form input {
      display: block; min-height: 42px; padding: 10px 8px 9px;
      border: 0; border-bottom: 2px solid rgba(34,197,94,.82);
      border-radius: 0; font-size: 15px; background: transparent; color: var(--text);
      cursor: text; position: relative; z-index: 2;
      pointer-events: auto;
    }
    .hero-form input::placeholder { color: rgba(240,253,244,.50); }
    .hero-form input:focus {
      border-color: #22c55e;
      box-shadow: 0 10px 15px -8px rgba(34,197,94,.9);
    }

    @keyframes pulse-glow {
      0% { box-shadow: 0 4px 10px -6px rgba(34,197,94, 0.4); border-bottom-color: rgba(34,197,94, 0.6); }
      50% { box-shadow: 0 8px 16px -4px rgba(34,197,94, 0.8); border-bottom-color: rgba(34,197,94, 1); }
      100% { box-shadow: 0 4px 10px -6px rgba(34,197,94, 0.4); border-bottom-color: rgba(34,197,94, 0.6); }
    }

    .express-title-field input { 
      width: 100%; 
      padding-right: 86px;
      animation: pulse-glow 3s infinite ease-in-out;
    }
    .express-title-field input:focus {
      animation: none; /* stop pulse when focused, replace with solid focus style */
    }
    .hero-cta {
      width: 100%; padding: 16px; border-radius: 14px;
      font-size: 16px; font-weight: 700; letter-spacing: .01em;
      background: var(--green); color: #0b1a0f; border: 0; cursor: pointer;
      transition: background .15s, transform .1s;
    }
    .hero-form .hero-cta {
      width: auto; min-width: 190px; height: 42px; padding: 0 18px; border-radius: 8px;
      white-space: nowrap; font-size: 14px;
    }
    .hero-secondary-actions { display: flex; justify-content: flex-end; width: min(860px, 100%); margin: 8px auto 0; }
    .hero-secondary-actions .hero-nav-btn { color: var(--green-dim); min-width: 190px; text-align: center; }
    .hero-cta:hover { background: #16a34a; }
    .hero-cta:active { transform: scale(.98); }
    @media (max-width: 760px) {
      .hero-nav { align-items: flex-start; flex-wrap: wrap; padding: 16px 18px 10px; }
      .hero-nav-links { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 14px; overflow-x: auto; padding-bottom: 2px; }
      .hero-nav-btn { white-space: nowrap; }
      .hero-form-row { grid-template-columns: 1fr; }
      .hero-form .hero-cta { width: 100%; }
    }
    .express-title-field { position: relative; }
    .language-detect-badge {
      position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
      display: inline-flex; align-items: center; gap: 5px;
      height: 26px; padding: 0 9px; border-radius: 999px;
      border: 1px solid var(--border-bright); background: var(--surface);
      color: var(--green); font-size: 11px; font-weight: 700;
      pointer-events: none; white-space: nowrap;
    }
    .language-detect-badge.hidden { display: none; }
    .express-hero__hint { margin-top: 8px; font-size: 12px; color: var(--muted-2); text-align: center; }
    .hero-form .express-hero__hint { display: none; }
    .email-launch-note { margin: 7px 0 0; font-size: 12px; color: var(--muted-2); line-height: 1.45; }
    .hero-resume { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; margin-bottom: 0; }
    .hero-resume button { padding: 8px 14px; font-size: 13px; }
    .status {
      position: relative; overflow: hidden;
      margin-top: 12px; border: 1px solid var(--border); background: var(--surface);
      border-radius: 12px; padding: 10px 12px; white-space: pre-wrap; font-size: 14px; color: var(--muted);
    }
    .status.is-progress, .status.is-success {
      min-height: 48px; display: flex; align-items: center; gap: 12px;
      padding: 13px 15px; border-color: rgba(34,197,94,.24);
      background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(5,14,7,.92));
      color: #dfffe8; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 34px rgba(0,0,0,.20);
    }
    .status.is-progress::before {
      content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 999px;
      border: 2px solid rgba(134,239,172,.24); border-top-color: #22c55e;
      animation: spin .78s linear infinite;
    }
    .status.is-progress::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(100deg, transparent 0%, rgba(134,239,172,.08) 42%, rgba(34,197,94,.16) 50%, transparent 62%);
      transform: translateX(-120%); animation: statusShimmer 1.35s ease-in-out infinite;
      pointer-events: none;
    }
    .status.is-success::before {
      content: "✓"; flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
      border-radius: 999px; background: rgba(34,197,94,.18); color: #86efac; font-weight: 900;
    }
    .status.error {
      border-color: rgba(248,113,113,.42); background: rgba(127,29,29,.22); color: #fecaca;
    }
    @keyframes statusShimmer { to { transform: translateX(120%); } }

    /* ── Express timeline page ───────────────────── */
    #expressTimelineCard {
      min-height: 100dvh; min-height: 100vh;
      display: flex; flex-direction: column;
      background: var(--bg); border: none; border-radius: 0; padding: 0; margin-bottom: 0;
    }
    .express-timeline-inner {
      flex: 1; max-width: 680px; margin: 0 auto;
      padding: 40px 24px 80px; width: 100%;
    }
    #expressTimelineCard h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
    .express-timeline { display: grid; gap: 10px; margin-top: 22px; }
    .express-step {
      display: grid; grid-template-columns: auto 1fr auto;
      gap: 14px; align-items: center; padding: 16px 18px;
      border-radius: 18px; border: 1px solid var(--border); background: var(--surface);
      transition: border-color .2s, background .2s;
    }
    .express-step.is-running { border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.04); }
    .express-step.is-done { border-color: rgba(34,197,94,.16); }
    .express-step.is-error { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.04); }
    .express-step__dot {
      width: 12px; height: 12px; border-radius: 999px;
      background: var(--surface-2); border: 1px solid var(--border-bright);
    }
    .express-step.is-running .express-step__dot { background: var(--green); border-color: transparent; animation: previewPulse 1.2s ease-in-out infinite; }
    .express-step.is-done .express-step__dot { background: var(--green); border-color: transparent; }
    .express-step.is-error .express-step__dot { background: var(--red); border-color: transparent; }
    .express-step strong { display: block; font-size: 15px; color: var(--text); }
    .express-step span { color: var(--muted); font-size: 13px; }
    .express-step__state { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); }
    .express-step.is-running .express-step__state { color: var(--green); }
    .express-step.is-done .express-step__state { color: var(--green-dim); }
    .express-step.is-error .express-step__state { color: var(--red); }
    .express-text-progress-slot { display: none; margin: 2px 0; }
    .express-text-progress-slot.is-visible { display: block; }
    .express-text-progress-slot .production-stage { margin: 0; }
    .express-context { margin-top: 18px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
    .express-context strong { display: block; margin-bottom: 4px; color: var(--text); }
    .express-reassurance {
      position: relative;
      display: grid;
      justify-items: center;
      gap: 12px;
      margin-top: 18px;
      padding: 22px 24px;
      border-radius: 18px;
      border: 1px solid rgba(34,197,94,.42);
      background:
        linear-gradient(110deg, rgba(34,197,94,.08), rgba(34,197,94,.035) 45%, rgba(255,255,255,.05) 52%, rgba(34,197,94,.04) 60%, rgba(34,197,94,.075)),
        var(--surface);
      color: var(--green);
      font-size: 18px;
      line-height: 1.45;
      font-weight: 700;
      text-align: center;
      overflow: hidden;
      box-shadow: 0 0 0 1px rgba(34,197,94,.06), 0 16px 44px rgba(0,0,0,.22);
      animation: reassuranceShimmer 2.8s linear infinite;
      background-size: 220% 100%;
    }
    .express-reassurance.hidden { display: none; }
    .express-reassurance::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
      transform: translateX(-120%);
      animation: reassuranceSweep 2.4s ease-in-out infinite;
    }
    .express-reassurance__loader { position: relative; z-index: 1; display: inline-flex; align-items: flex-end; justify-content: center; gap: 6px; min-height: 30px; }
    .express-reassurance__loader span { width: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 12px rgba(34,197,94,.34); animation: reassurancePulse 1.05s ease-in-out infinite; }
    .express-reassurance__loader span:nth-child(1){height:14px;animation-delay:0s}.express-reassurance__loader span:nth-child(2){height:26px;animation-delay:.12s}.express-reassurance__loader span:nth-child(3){height:18px;animation-delay:.24s}.express-reassurance__loader span:nth-child(4){height:30px;animation-delay:.36s}.express-reassurance__loader span:nth-child(5){height:16px;animation-delay:.48s}
    .express-reassurance__text { position: relative; z-index: 1; max-width: 760px; }
    @keyframes reassurancePulse { 0%,100%{transform:scaleY(.72);opacity:.55} 50%{transform:scaleY(1.12);opacity:1} }
    @keyframes reassuranceShimmer { 0%{background-position:0% 50%} 100%{background-position:220% 50%} }
    @keyframes reassuranceSweep { 0%{transform:translateX(-120%)} 55%,100%{transform:translateX(120%)} }
    .express-delivery { margin-top: 20px; padding: 20px; border-radius: 20px; border: 1px solid rgba(34,197,94,.22); background: linear-gradient(135deg,rgba(34,197,94,.07),rgba(34,197,94,.03)); }
    .express-delivery h2 { font-size: 22px; }
    .express-delivery p { color: var(--muted); margin-top: 4px; }
    .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
    .actions.actions-split { justify-content: space-between; align-items: center; }
    .actions .right-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

    /* ── Mode topbar ─────────────────────────────── */
    .mode-topbar { display: flex; justify-content: flex-end; padding: 16px 24px 0; }
    .mode-link { border: 0; background: transparent; color: var(--green-dim); padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }

    /* ── Advanced cards ──────────────────────────── */
    .advanced-wrap { max-width: 960px; margin: 0 auto; padding: 24px 20px 80px; }
    .hero { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 24px; margin-bottom: 18px; }
    .card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; margin-bottom: 16px; }
    .card.is-collapsed { padding-bottom: 16px; opacity: .82; }
    .card.is-collapsed .section-body { display: none; }
    .section-state { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
    .card.is-locked input, .card.is-locked textarea, .card.is-locked select, .card.is-locked button { opacity: .5; }

    /* ── Live loader ─────────────────────────────── */
    .live-loader { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border-bright); background: var(--surface); }
    .live-loader__spinner { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--border-bright); border-top-color: var(--green); animation: orbit .8s linear infinite; flex: 0 0 auto; }
    .live-loader strong { display: block; margin-bottom: 2px; color: var(--text); }

    /* ── Plan table ──────────────────────────────── */
    .plan-table-wrap { margin-top: 16px; overflow-x: auto; }
    .plan-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
    .plan-table th { background: rgba(34,197,94,.10); color: var(--green-dim); padding: 8px 12px; text-align: left; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: 11px; }
    .plan-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
    .plan-table tr:last-child td { border-bottom: none; }
    .plan-table tr:nth-child(even) td { background: rgba(34,197,94,.02); }
    .plan-table .col-chapter { font-weight: 700; color: var(--green-dim); width: 26%; }
    .plan-table .col-subchap { font-style: italic; color: var(--muted); width: 34%; }
    .plan-table .col-subpart { color: var(--text); width: 36%; }
    .plan-table .col-knowledge-action { width: 42px; text-align: right; }
    .plan-table .row-sep td { border-top: 2px solid var(--border-bright); }
    .plan-cell-input, .plan-cell-hidden, .plan-cell-ghost { width: 100%; border: 1px solid transparent; background: rgba(255,255,255,.04); border-radius: 8px; padding: 8px 9px; font: inherit; color: inherit; min-height: 40px; line-height: 1.25; }
    .plan-cell-input { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .plan-cell-input:focus, .plan-cell-hidden:focus { outline: none; border-color: var(--border-bright); background: var(--surface-2); box-shadow: 0 0 0 3px var(--green-glow); }
    .plan-cell-hidden { display: none; }
    .plan-cell-ghost { display: flex; align-items: center; justify-content: center; color: transparent; background: rgba(255,255,255,.02); border-style: dashed; }
    .plan-knowledge-toggle { width: 30px; min-width: 30px; height: 30px; padding: 0; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--green-dim); font-size: 18px; font-weight: 800; line-height: 1; }
    .plan-knowledge-toggle:hover, .plan-knowledge-toggle.is-active { background: var(--green-glow); border-color: var(--border-bright); color: var(--green); }
    .plan-knowledge-row td { padding-top: 0; background: rgba(34,197,94,.025); }
    .plan-knowledge-panel { display: grid; gap: 6px; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.03); }
    .plan-knowledge-panel label { margin: 0; }
    .plan-knowledge-panel textarea { min-height: 86px; border-radius: 10px; font-size: 13px; line-height: 1.45; }
    .plan-knowledge-help { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
    .plan-knowledge-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
    .plan-knowledge-validate { min-height: 32px; padding: 7px 12px; border-radius: 8px; font-size: 12px; }
    .plan-mobile-label { display: none; }
    @media (max-width: 760px) {
      .plan-table-wrap { overflow-x: visible; }
      .plan-table, .plan-table tbody, .plan-table tr, .plan-table td { display: block; width: 100%; }
      .plan-table thead, .plan-table .col-knowledge-action, .plan-knowledge-row { display: none !important; }
      .plan-table tr { margin-bottom: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
      .plan-table tr:nth-child(even) td { background: transparent; }
      .plan-table .row-sep td { border-top: 0; }
      .plan-table td { padding: 6px 0; border-bottom: 0; }
      .plan-mobile-label { display: block; margin: 0 0 5px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
      .plan-cell-input { min-height: 42px; white-space: normal; overflow: visible; text-overflow: clip; }
      .plan-cell-ghost { display: none; }
      .plan-cell-hidden { display: block; background: rgba(255,255,255,.03); border: 1px solid transparent; color: var(--muted); }
      .plan-table .col-chapter, .plan-table .col-subchap, .plan-table .col-subpart { width: 100%; }
    }

    /* ── Production panels ───────────────────────── */
    .production-stage { margin-top: 16px; padding: 18px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); }
    .production-stage.hidden { display: none; }
    .production-stage__hero { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
    .production-stage__orb { width: 40px; height: 40px; border-radius: 999px; background: radial-gradient(circle at 35% 35%, rgba(34,197,94,.18), rgba(34,197,94,.04)); border: 1px solid var(--border-bright); position: relative; }
    .production-stage__orb::before, .production-stage__orb::after { content: ""; position: absolute; inset: -7px; border-radius: 999px; border: 1px solid rgba(34,197,94,.12); animation: orbit 1.8s linear infinite; }
    .production-stage__orb::after { inset: -13px; animation-direction: reverse; animation-duration: 2.4s; }
    .production-stage__copy strong { display: block; font-size: 15px; margin-bottom: 4px; color: var(--text); }
    .production-stage__copy p { color: var(--muted); font-size: 14px; }
    .production-metrics { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .production-metric { padding: 7px 12px; border-radius: 999px; background: var(--green-glow); border: 1px solid var(--border); color: var(--green-dim); font-size: 12px; }
    .production-scroller { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
    .production-row { display: grid; grid-template-columns: minmax(110px,1.1fr) minmax(130px,1.2fr) minmax(0,2fr) auto; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
    .production-row.ready { border-color: rgba(34,197,94,.18); background: rgba(34,197,94,.04); }
    .production-row.ready { cursor: pointer; }
    .production-row.is-selected { border-color: rgba(34,197,94,.42); box-shadow: 0 0 0 1px rgba(34,197,94,.14); }
    .production-row.is-expanded { grid-template-columns: minmax(0,1fr) auto; align-items: start; }
    .production-row.is-expanded .production-row__meta,
    .production-row.is-expanded .production-row__part,
    .production-row.is-expanded .production-row__text { grid-column: 1 / -1; }
    .production-row__text { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .production-row__text em { flex: 1; }
    .production-row.is-expanded .production-row__text { align-items: flex-start; width: 100%; }
    .production-row.is-expanded .production-row__text em { white-space: normal; line-height: 1.55; }
    .production-row__expand { width: 26px; height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 999px; border: 1px solid rgba(34,197,94,.22); background: rgba(34,197,94,.08); color: var(--green-dim); font-size: 12px; font-weight: 800; cursor: pointer; }
    .production-row__expand:hover { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.14); }
    .production-row strong { display: block; color: var(--green-dim); font-size: 13px; }
    .production-row span { display: block; color: var(--muted); font-size: 13px; }
    .production-row em { color: var(--muted); font-size: 13px; font-style: normal; }
    .production-row__state { min-width: 80px; text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
    .production-row__state.ready { color: var(--green-dim); }
    .production-row__state.pending { color: rgba(251,191,36,.7); }
    .production-row__loader { display: inline-flex; align-items: center; gap: 3px; min-height: 20px; }
    .production-row__loader span { width: 5px; border-radius: 999px; background: var(--green); animation: previewPulse 1.1s ease-in-out infinite; opacity: .7; }
    .production-row__loader span:nth-child(1){height:10px;animation-delay:0s}.production-row__loader span:nth-child(2){height:18px;animation-delay:.12s}.production-row__loader span:nth-child(3){height:13px;animation-delay:.24s}.production-row__loader span:nth-child(4){height:20px;animation-delay:.36s}.production-row__loader span:nth-child(5){height:12px;animation-delay:.48s}
    .inline-resolve-loader { display: inline-flex; align-items: center; gap: 3px; min-height: 14px; }
    .inline-resolve-loader span { width: 4px; height: 4px; border-radius: 999px; background: var(--green-dim); animation: previewPulse 1s ease-in-out infinite; opacity: .6; }
    .inline-resolve-loader span:nth-child(2){animation-delay:.14s}.inline-resolve-loader span:nth-child(3){animation-delay:.28s}
    .production-sentences { display: grid; gap: 8px; margin-top: 14px; }
    .production-sentence { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 14px; line-height: 1.5; }
    .audio-files { display: grid; gap: 10px; max-height: 120px; overflow-y: auto; padding-right: 4px; }
    .audio-init-state { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-2); }
    .audio-init-state strong { display: block; color: var(--text); }
    .audio-init-loader { display: inline-flex; align-items: flex-end; gap: 5px; min-height: 26px; }
    .audio-init-loader span { width: 7px; border-radius: 999px; background: var(--green); animation: previewPulse 1.15s ease-in-out infinite; }
    .audio-init-loader span:nth-child(1){height:10px;animation-delay:0s}.audio-init-loader span:nth-child(2){height:20px;animation-delay:.08s}.audio-init-loader span:nth-child(3){height:13px;animation-delay:.16s}.audio-init-loader span:nth-child(4){height:24px;animation-delay:.24s}.audio-init-loader span:nth-child(5){height:16px;animation-delay:.32s}.audio-init-loader span:nth-child(6){height:22px;animation-delay:.40s}
    .audio-file { padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
    .audio-file__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
    .audio-file__meta strong { font-size: 14px; color: var(--text); }
    .audio-file__meta span { color: var(--muted); font-size: 12px; }

    /* ── Misc components ─────────────────────────── */
    .preview-item { margin-top: 12px; }
    .plan-sync-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--green-glow); color: var(--green-dim); font-size: 12px; }
    .plan-sync-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
    .preview-loader { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
    .preview-loader__visual { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
    .preview-loader__visual span { width: 5px; border-radius: 999px; background: var(--green); animation: previewPulse 1.1s ease-in-out infinite; }
    .preview-loader__visual span:nth-child(1){height:14px;animation-delay:0s}.preview-loader__visual span:nth-child(2){height:30px;animation-delay:.12s}.preview-loader__visual span:nth-child(3){height:20px;animation-delay:.24s}.preview-loader__visual span:nth-child(4){height:36px;animation-delay:.36s}.preview-loader__visual span:nth-child(5){height:16px;animation-delay:.48s}
    .preview-loader__copy strong { display: block; margin-bottom: 4px; color: var(--text); }
    .preview-loader__copy p { color: var(--muted); font-size: 14px; }
    @keyframes previewPulse { 0%,100%{transform:scaleY(.72);opacity:.55} 50%{transform:scaleY(1.14);opacity:1} }
    .voice-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border-bright); background: var(--green-glow); color: var(--green-dim); font-size: 12px; cursor: pointer; }
    .voice-chip strong { color: var(--text); }
    .fresh-focus { animation: freshFocusGlow 1.2s ease-out; }
    @keyframes freshFocusGlow { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.35);transform:translateY(2px)} 100%{box-shadow:0 0 0 14px rgba(34,197,94,0);transform:translateY(0)} }

    /* ── Modals ──────────────────────────────────── */
    .modal-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.78); backdrop-filter: blur(12px); }
    .modal-overlay.hidden { display: none; }
    .modal-overlay.is-library-embedded { position: static; inset: auto; z-index: auto; display: block; padding: 0; background: transparent; backdrop-filter: none; }
    .modal-overlay.is-library-embedded.hidden { display: none; }
    .modal-card { width: min(680px,100%); max-height: min(90vh,860px); overflow: auto; padding: 24px; border-radius: 24px; border: 1px solid var(--border-bright); background: var(--surface); box-shadow: 0 30px 90px rgba(0,0,0,.7); }
    .modal-overlay.is-library-embedded .modal-card { width: 100% !important; max-height: none; box-shadow: none; border-radius: 18px; }
    .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
    .modal-header p { color: var(--muted); margin-top: 4px; }
    .modal-close { background: var(--surface-2); color: var(--text); padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; }
    .support-form { display: grid; gap: 12px; }
    .support-form label { margin-top: 0; }
    .support-form textarea { min-height: 150px; }
    .findaway-title-wrap { display:flex; align-items:flex-start; gap: 14px; min-width: 0; }
    .findaway-cover-thumb { width:150px; height:150px; object-fit:cover; border-radius:8px; border:1px solid var(--border-bright); background:var(--surface-2); flex:0 0 150px; cursor:pointer; }
    .recording-prompt { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); line-height: 1.65; }
    .recording-stage { margin-top: 16px; padding: 18px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface-2); }
    .recording-wave { display: block; width: 100%; height: 120px; border-radius: 14px; background: linear-gradient(180deg,rgba(34,197,94,.06),rgba(34,197,94,.02)); border: 1px solid var(--border); }
    .recording-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: 14px; }
    .recording-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: var(--red); margin-right: 8px; animation: recPulse 1.2s ease-in-out infinite; }
    .recording-dot.hidden { display: none; }
    @keyframes recPulse { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.45);} 70%{box-shadow:0 0 0 8px rgba(239,68,68,0);} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0);} }
    .voice-sample-player { margin-top: 14px; padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
    .findaway-grid { display: grid; gap: 12px; margin-top: 16px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
    .findaway-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(34,197,94,.045); color: var(--muted); font-size: 13px; }
    .findaway-summary strong { color: var(--text); }
    .findaway-summary__status { color: var(--green-dim); font-weight: 700; }
    .findaway-item { padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); }
    .findaway-item strong { display: block; margin-bottom: 4px; color: var(--text); }
    .findaway-item.is-clickable, .library-package-item.is-clickable, .library-completed-cover-btn { cursor: pointer; }
    .findaway-item.is-clickable:hover, .library-package-item.is-clickable:hover, .library-completed-cover-btn:hover { border-color: var(--green); }
    .findaway-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; justify-content: flex-end; }
    .worker-error-notice { display:grid; gap:8px; margin: 10px 0 0; padding: 14px; border-radius: 8px; border: 1px solid rgba(248,113,113,.38); background: rgba(127,29,29,.22); color: #fecaca; }
    .worker-error-notice strong { color: #fff; }
    .worker-error-notice code { color: #fee2e2; word-break: break-word; white-space: pre-wrap; }
    .worker-error-notice a { color: #fef2f2; font-weight: 800; }
    .asset-preview-image { display:block; width:min(100%, 680px); max-height:72vh; object-fit:contain; margin:0 auto; border-radius:8px; border:1px solid var(--border-bright); background:var(--surface-2); }
    .asset-preview-text { white-space:pre-wrap; overflow:auto; max-height:70vh; padding:16px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font:13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
    .download-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-bright); background: var(--surface); color: var(--text); text-decoration: none; border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
    .download-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

    /* ── Timing strip ─────────────────────────────── */
    .timing-strip { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; gap: 0; padding: 0 20px; height: 48px; background: rgba(9,9,18,.95); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.06); box-shadow: 0 -6px 32px rgba(0,0,0,.5); }
    .timing-strip__chip { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 66px; padding: 0 12px; border-right: 1px solid rgba(255,255,255,.06); gap: 1px; }
    .timing-strip__chip:last-of-type { border-right: none; }
    .timing-strip__label { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.34); line-height: 1; }
    .timing-strip__val { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.35; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
    .timing-strip__chip--active .timing-strip__label { color: #a78bfa; }
    .timing-strip__chip--active .timing-strip__val { animation: t-pulse 1.1s ease-in-out infinite; }
    .timing-strip__chip--total .timing-strip__label { color: rgba(255,255,255,.5); }
    .timing-strip__chip--total .timing-strip__val { color: #38bdf8; }
    .timing-strip__gpu { display: flex; align-items: center; gap: 7px; min-width: 54px; padding: 0 12px; border-left: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.34); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; cursor:pointer; user-select:none; border-radius:999px; }
    .timing-strip__gpu:hover { background:rgba(255,255,255,.04); color:rgba(255,255,255,.62); }
    .timing-strip__gpu-led { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background .25s, box-shadow .25s, opacity .25s; opacity: .55; }
    .timing-strip__gpu-modal { display:none; align-items:center; justify-content:center; min-width:13px; height:13px; padding:0 4px; border-radius:999px; border:1px solid rgba(251,146,60,.32); color:rgba(253,186,116,.86); background:rgba(251,146,60,.10); font-size:8px; font-weight:900; letter-spacing:0; }
    .timing-strip__gpu.is-modal-available .timing-strip__gpu-modal,
    .timing-strip__gpu.is-modal-forced .timing-strip__gpu-modal { display:inline-flex; }
    .timing-strip__gpu.is-connected { color: rgba(134,239,172,.62); }
    .timing-strip__gpu.is-connected .timing-strip__gpu-led { background: #22c55e; box-shadow: 0 0 9px rgba(34,197,94,.42), 0 0 18px rgba(34,197,94,.16); opacity: .82; }
    .timing-strip__gpu.is-modal-forced { color:rgba(253,186,116,.88); background:rgba(251,146,60,.08); }
    .timing-strip__gpu.is-modal-forced .timing-strip__gpu-led { background:#f97316; box-shadow:0 0 9px rgba(249,115,22,.50), 0 0 18px rgba(249,115,22,.18); opacity:.9; }
    .timing-strip__logs { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 54px; margin-left: 12px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(34,197,94,.24); background: rgba(34,197,94,.08); color: rgba(187,247,208,.82); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
    .timing-strip__logs:disabled { cursor: default; opacity: .35; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: rgba(255,255,255,.42); }
    .timing-strip__bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,.06); border-radius: 3px; margin-left: 12px; overflow: hidden; }
    .timing-strip__bar { height: 100%; width: 0%; background: linear-gradient(90deg,#6366f1,#a78bfa 55%,#38bdf8); border-radius: 3px; transition: width 2s cubic-bezier(.4,0,.2,1); }
    @keyframes t-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
    /* ── Proof Section ──────────────────────────── */
    .proof-carousel { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) 42px; align-items:center; gap:12px; }
    .proof-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 1fr); gap:18px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 0 12px; scrollbar-width:none; }
    .proof-track::-webkit-scrollbar { display:none; }
    .proof-nav { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(34,197,94,.24); background:rgba(34,197,94,.08); color:#dfffe8; font-size:24px; font-weight:800; cursor:pointer; animation:proofArrowPulse 2.2s ease-in-out infinite; }
    .proof-nav:hover { border-color:rgba(34,197,94,.48); background:rgba(34,197,94,.16); }
    .proof-nav--left { --proof-nudge:-3px; }
    .proof-nav--right { --proof-nudge:3px; }
    .proof-card { background:#050e07; border:1px solid rgba(34,197,94,.16); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; transition: border-color .2s, box-shadow .2s; }
    .proof-card:hover { border-color:rgba(34,197,94,.36); box-shadow:0 0 22px rgba(34,197,94,.08); }
    .proof-track .proof-card { scroll-snap-align:start; min-width:0; }
    .proof-cover-wrap { position:relative; overflow:hidden; cursor:pointer; aspect-ratio:1/1; background:#020a04; }
    .proof-cover { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease, filter .35s ease; filter:brightness(.92); }
    .proof-card:hover .proof-cover { transform:scale(1.03); filter:brightness(1); }
    .proof-play-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:34px; color:#fff; opacity:0; background:rgba(0,0,0,.38); backdrop-filter:blur(2px); transition:opacity .25s; pointer-events:none; line-height:1; padding-left:4px; }
    .proof-cover-wrap:hover .proof-play-icon { opacity:1; }
    .proof-meta { padding:14px 16px 12px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; flex:1; cursor:pointer; }
    .proof-meta:hover .proof-triangle { color:#22c55e; }
    .proof-copy { min-width:0; display:grid; gap:4px; }
    .proof-title { font-size:13.5px; font-weight:800; color:#f0fdf4; line-height:1.35; }
    .proof-detail { font-size:12px; font-style:italic; color:rgba(187,247,208,.68); line-height:1.25; }
    .proof-flag { font-style:normal; font-size:14px; line-height:1; vertical-align:-1px; }
    .proof-triangle { flex-shrink:0; font-size:11px; color:#86efac; opacity:.7; transition:transform .22s ease, color .18s, opacity .18s; line-height:1; padding:4px 2px; }
    .proof-card.is-playing .proof-triangle { transform:rotate(90deg); opacity:1; color:#22c55e; }
    .proof-player { padding:10px 12px 14px; border-top:1px solid rgba(34,197,94,.1); background:#020a04; animation:proofPlayerIn .22s ease; }
    .proof-player audio { accent-color:#22c55e; }
    @keyframes proofArrowPulse { 0%,100%{ transform:translateX(0); opacity:.72; } 50%{ transform:translateX(var(--proof-nudge,3px)); opacity:1; } }
    @keyframes proofPlayerIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
    @media(max-width:640px) {
      .proof-carousel { grid-template-columns:1fr; }
      .proof-nav { display:none; }
      .proof-track { grid-auto-columns:minmax(230px, 82vw); }
    }

    /* ── Client Library ─────────────────────────── */

    .nav-user-wrap { position: relative; display: inline-flex; align-items: center; }
    .nav-user-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; min-width: 190px; padding: 8px; border-radius: 12px; border: 1px solid var(--border-bright); background: var(--surface); box-shadow: 0 18px 45px rgba(0,0,0,.45); }
    .nav-user-menu button { width: 100%; display: flex; justify-content: flex-start; padding: 9px 10px; border-radius: 8px; background: transparent; color: var(--text); font-size: 13px; font-weight: 600; }
    .nav-user-menu button:hover { background: rgba(34,197,94,.08); }
    .library-view { min-height: 100dvh; background: var(--bg); padding: 22px; }
    .library-shell { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 18px; max-width: 1220px; margin: 0 auto; }
    .library-sidebar, .library-main { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; }
    .library-sidebar { display: flex; flex-direction: column; min-height: calc(100dvh - 44px); overflow: hidden; }
    .library-head, .library-main-head { padding: 18px; border-bottom: 1px solid var(--border); }
    .library-head h1, .library-main-head h2 { font-size: 20px; margin: 0 0 4px; }
    .library-quota { margin-top: 14px; padding: 12px; border-radius: 8px; background: var(--green-glow); border: 1px solid var(--border); }
    .library-quota__row { display:flex; justify-content:space-between; gap: 10px; font-size: 13px; color: var(--muted); }
    .library-quota__bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.08); overflow:hidden; margin-top: 10px; }
    .library-quota__fill { height:100%; width:0%; background: var(--green); border-radius: 99px; }
    .library-credits { margin-top: 10px; padding: 12px; border-radius: 8px; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.22); display:none; }
    .library-credits__row { display:flex; align-items:center; justify-content:space-between; gap: 10px; color: var(--gold); font-size: 13px; font-weight: 800; }
    .library-credits__row button { padding: 4px 8px; min-width: 30px; border-radius: 8px; background: rgba(251,191,36,.12); color: var(--gold); border: 1px solid rgba(251,191,36,.28); }
    .library-credits-panel { display:none; margin-top:10px; color: var(--muted); font-size: 12px; }
    .library-credits.is-open .library-credits-panel { display:grid; gap:6px; }
    .library-credit-line { display:grid; grid-template-columns: 38px minmax(0,1fr); gap:8px; padding-top:6px; border-top:1px solid rgba(251,191,36,.12); }
    .library-credit-line strong { color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .library-jobs { flex: 1; overflow-y: auto; padding: 8px; display: grid; gap: 6px; align-content: start; }
    .library-job-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: stretch; border-radius: 8px; border: 1px solid transparent; }
    .library-job-row:hover, .library-job-row.is-active { background: rgba(34,197,94,.07); border-color: var(--border-bright); }
    .library-job-row.is-deleting { overflow:hidden; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); pointer-events:none; }
    .library-job-row.is-deleting::after { content:""; position:absolute; inset:0; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.10) 38%, rgba(34,197,94,.18) 50%, transparent 68%); transform: translateX(-120%); animation: library-delete-shimmer 1.05s infinite; }
    @keyframes library-delete-shimmer { to { transform: translateX(120%); } }
    .library-job { width: 100%; text-align: left; border-radius: 8px; border: 0; background: transparent; color: var(--text); padding: 9px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items:center; gap: 9px; min-width: 0; }
    .library-job--no-cover { grid-template-columns: minmax(0, 1fr); padding: 11px 10px; }
    .library-job__cover { width:63px; height:63px; border-radius:8px; object-fit:cover; border:1px solid var(--border); background:var(--surface-2); }
    .library-job__content { display:grid; gap:5px; min-width:0; }
    .library-job-delete { width: 30px; min-width: 30px; height: auto; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; opacity: .35; }
    .library-job-row:hover .library-job-delete, .library-job-delete:focus { opacity: 1; color: var(--red); background: rgba(248,113,113,.08); }
    .library-job-delete .mini-spinner { width: 14px; height: 14px; display:inline-block; border-radius: 999px; border: 2px solid rgba(134,239,172,.22); border-top-color: var(--green); animation: spin .75s linear infinite; vertical-align: middle; }
    .library-job__title { font-weight: 700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .library-job__meta { display:flex; align-items:center; gap: 7px; color: var(--muted); font-size: 12px; }
    .library-badge { display:inline-flex; align-items:center; height: 20px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--border); font-size: 11px; font-weight: 800; }
    .library-badge--premium { color: var(--gold); border-color: rgba(251,191,36,.4); }
    .library-badge--free { color: var(--green-dim); }
    .library-sidebar-footer { padding: 14px; border-top: 1px solid var(--border); display:grid; gap: 8px; }
    .library-sidebar-footer button { width:100%; }
    .library-main { min-height: calc(100dvh - 44px); overflow: hidden; }
    .library-main-head { display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
    .library-main-title { min-width: 0; }
    .library-main-title h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .library-main-body { padding: 18px; display:grid; gap: 14px; }
    .library-inline-workflow { display:grid; gap: 14px; }
    .library-inline-workflow .advanced-wrap { margin: 0; max-width: none; padding: 0; }
    .library-inline-workflow #advancedModeBar { margin: 0; }
    .library-card { border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px; padding: 16px; }
    .delete-confirm-card { width:min(520px,100%); border-radius:18px; }
    .delete-confirm-title { margin:0; font-size:22px; }
    .delete-confirm-copy { color:var(--muted); line-height:1.5; margin:8px 0 0; }
    .delete-confirm-book { margin:18px 0; padding:14px; border-radius:8px; border:1px solid rgba(248,113,113,.24); background:rgba(248,113,113,.07); display:grid; gap:5px; }
    .delete-confirm-book strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .delete-confirm-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:18px; flex-wrap:wrap; }
    .delete-confirm-loader { margin-top:16px; padding:14px; border-radius:8px; border:1px solid rgba(34,197,94,.22); background:rgba(34,197,94,.06); }
    .delete-confirm-loader__bar { height:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); }
    .delete-confirm-loader__bar span { display:block; height:100%; width:38%; border-radius:999px; background:linear-gradient(90deg, rgba(34,197,94,.35), #22c55e, rgba(134,239,172,.62)); animation: delete-loader-slide 1.1s ease-in-out infinite; }
    .delete-confirm-loader p { margin:10px 0 0; color:var(--muted); font-size:13px; }
    @keyframes delete-loader-slide { 0% { transform:translateX(-105%); } 100% { transform:translateX(270%); } }
    .library-completed-card { display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:16px; align-items:start; }
    .library-completed-hero { display:flex; align-items:flex-start; gap:16px; min-width:0; }
    .library-completed-cover { width:200px; height:200px; object-fit:cover; border-radius:8px; background:var(--surface); display:block; }
    .library-completed-cover-btn { padding:0; border-radius:8px; border:1px solid var(--border-bright); background:transparent; flex:0 0 200px; overflow:hidden; }
    .library-completed-main { min-width:0; }
    .library-completed-actions { align-self:start; justify-self:end; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
    .library-completed-actions .library-actions { margin-top:0; justify-content:flex-end; }
    @media (max-width: 780px) {
      .library-completed-card { grid-template-columns:1fr; }
      .library-completed-actions { justify-self:stretch; justify-content:flex-start; }
      .library-completed-cover { width:150px; height:150px; flex-basis:150px; }
    }
    .library-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
    .library-actions button.is-loading {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border-color: rgba(34,197,94,.38);
      color: var(--green-dim);
      background: rgba(34,197,94,.10);
      overflow: hidden;
      opacity: 1;
    }
    .library-actions button.is-loading::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.08) 42%, rgba(34,197,94,.20) 50%, rgba(255,255,255,.08) 58%, transparent 100%);
      transform: translateX(-100%);
      animation: audioShimmer 1.45s ease-in-out infinite;
    }
    .library-button-loader {
      width: 15px;
      height: 15px;
      border-radius: 999px;
      border: 2px solid rgba(187,247,208,.28);
      border-top-color: var(--green);
      animation: audioSpin .75s linear infinite;
      flex: 0 0 auto;
    }
    .library-package-list { display:grid; gap:8px; margin-top:14px; }
    .library-package-item { display:grid; gap:4px; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--surface); }
    .library-package-item__row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .library-package-item strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
    .library-package-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .library-package-player { display:block; width:100%; height:40px !important; max-height:50px; margin:2px 0 0; align-self:start; overflow:hidden; }
    .library-package-section { margin:10px 0 2px; padding:8px 2px 4px; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; border-top:1px solid var(--border); }
    .library-package-section:first-child { margin-top:0; border-top:0; }
    .audio-edit { display:grid; gap:12px; }
    .audio-edit-loading { position:relative; overflow:hidden; min-height:360px; display:flex; align-items:center; justify-content:center; padding:30px; border-radius:8px; border:1px solid rgba(34,197,94,.24); background:radial-gradient(circle at 50% 0%, rgba(34,197,94,.12), transparent 42%), var(--surface); }
    .audio-edit-loading::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 0%, rgba(134,239,172,.08) 42%, rgba(34,197,94,.16) 50%, transparent 62%); transform:translateX(-120%); animation: audioShimmer 1.45s ease-in-out infinite; pointer-events:none; }
    .audio-edit-loading__inner { position:relative; z-index:1; width:min(520px,100%); display:grid; gap:18px; text-align:center; }
    .audio-edit-loading__icon { width:62px; height:62px; margin:0 auto; display:inline-flex; align-items:center; justify-content:center; border-radius:18px; border:1px solid rgba(134,239,172,.28); background:rgba(34,197,94,.10); color:#dfffe8; font-size:25px; box-shadow:0 18px 42px rgba(0,0,0,.26); }
    .audio-edit-loading__bars { display:flex; align-items:flex-end; justify-content:center; gap:5px; height:42px; }
    .audio-edit-loading__bars span { width:6px; border-radius:999px; background:var(--green); animation: previewPulse 1.05s ease-in-out infinite; opacity:.66; }
    .audio-edit-loading__bars span:nth-child(1){height:14px;animation-delay:0s}.audio-edit-loading__bars span:nth-child(2){height:24px;animation-delay:.08s}.audio-edit-loading__bars span:nth-child(3){height:18px;animation-delay:.16s}.audio-edit-loading__bars span:nth-child(4){height:36px;animation-delay:.24s}.audio-edit-loading__bars span:nth-child(5){height:22px;animation-delay:.32s}.audio-edit-loading__bars span:nth-child(6){height:30px;animation-delay:.40s}.audio-edit-loading__bars span:nth-child(7){height:16px;animation-delay:.48s}.audio-edit-loading__bars span:nth-child(8){height:34px;animation-delay:.56s}.audio-edit-loading__bars span:nth-child(9){height:20px;animation-delay:.64s}.audio-edit-loading__bars span:nth-child(10){height:28px;animation-delay:.72s}.audio-edit-loading__bars span:nth-child(11){height:15px;animation-delay:.80s}
    .audio-edit-loading__bar { height:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(134,239,172,.12); }
    .audio-edit-loading__bar span { display:block; width:38%; height:100%; border-radius:999px; background:linear-gradient(90deg, rgba(34,197,94,.35), #22c55e, rgba(134,239,172,.76)); animation: delete-loader-slide 1.15s ease-in-out infinite; }
    .audio-edit__header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
    .audio-edit__meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px; }
    .audio-edit__status { padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--muted); }
    .audio-edit details { border:1px solid var(--border); border-radius:8px; background:var(--surface); overflow:hidden; }
    .audio-edit summary { cursor:pointer; padding:9px 12px; font-weight:800; }
    .audio-edit__row { position:relative; display:grid; grid-template-columns:24px 72px minmax(0,1fr) 210px 150px; gap:8px; align-items:start; padding:8px; min-height:58px; border-top:1px solid var(--border); overflow:visible; }
    .audio-edit__row > * { position:relative; z-index:1; min-width:0; }
    .audio-edit__row audio { width:100%; height:36px; }
    .audio-edit__text { width:100%; color:var(--text); background:transparent; font:inherit; font-size:12px; line-height:1.35; min-height:42px; overflow:hidden; padding:5px 7px; border-radius:7px; border:1px solid transparent; outline:none; cursor:text; white-space:pre-wrap; resize:vertical; }
    .audio-edit__text:hover, .audio-edit__text:focus { border-color:rgba(34,197,94,.36); background:rgba(255,255,255,.035); }
    .audio-edit__text.is-edited { border-color:rgba(34,197,94,.58); background:rgba(34,197,94,.08); }
    .audio-edit__idx, .audio-edit__badge { color:var(--muted); font-size:12px; }
    .audio-edit__idx, .audio-edit__badge, .audio-edit__row audio { margin-top:6px; }
    .audio-edit__row--selected, .audio-edit__row--modified { background:rgba(34,197,94,.06); }
    .audio-edit__badge { display:grid; gap:1px; }
    .audio-edit__badge strong { color:var(--text); font-size:12px; }
    .audio-edit__badge small { color:var(--muted); font-size:11px; line-height:1.25; }
    .audio-edit__loader { width:13px; height:13px; border-radius:999px; border:2px solid rgba(255,255,255,.16); border-top-color:var(--green); display:inline-block; margin-right:6px; vertical-align:-2px; animation: audioSpin .85s linear infinite; }
    .audio-edit__row--queued_for_regen, .audio-edit__row--regenerating_tts, .audio-edit__row--refreshing { border-top-color:rgba(34,197,94,.45); box-shadow: inset 0 0 0 1px rgba(34,197,94,.38), 0 0 0 1px rgba(34,197,94,.08); background:rgba(34,197,94,.075); }
    .audio-edit__row--queued_for_regen::before, .audio-edit__row--regenerating_tts::before, .audio-edit__row--refreshing::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.08) 42%, rgba(34,197,94,.18) 50%, rgba(255,255,255,.08) 58%, transparent 100%); transform:translateX(-100%); animation: audioShimmer 1.65s ease-in-out infinite; }
    .audio-edit__row--regenerated { background:rgba(34,197,94,.12); }
    .audio-edit__row--failed, .audio-edit__row--missing_audio { background:rgba(239,68,68,.08); }
    @keyframes audioShimmer { 100% { transform:translateX(100%); } }
    @keyframes audioSpin { to { transform:rotate(360deg); } }
    @media (max-width: 980px) {
      .audio-edit__row { grid-template-columns:28px minmax(0,1fr); }
      .audio-edit__idx, .audio-edit__badge, .audio-edit__row audio { grid-column:2; }
    }
    .library-empty { min-height: 320px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap: 12px; }
    .library-mobile-toggle { display:none; margin-bottom: 12px; width:100%; }
    @media (max-width: 820px) {
      .library-view { padding: 12px; }
      .library-shell { grid-template-columns: 1fr; }
      .library-sidebar { min-height: auto; max-height: 60dvh; }
      .library-sidebar.is-collapsed .library-jobs,
      .library-sidebar.is-collapsed .library-sidebar-footer,
      .library-sidebar.is-collapsed .library-quota { display:none; }
      .library-mobile-toggle { display:block; }
      .library-main-head { align-items:stretch; flex-direction:column; }
      .library-main-title h2 { white-space:normal; }
      .library-main { min-height: 50dvh; }
    }