:root {
      --bg: #010204;
      --panel: rgba(10,12,14,.82);
      --panel-2: rgba(14,16,18,.68);
      --line: rgba(255,255,255,.12);
      --text: #f6ead6;
      --muted: #b9aa91;
      --coral: #ff7338;
      --pink: #ff2d78;
      --green: #4ade80;
      --red: #f87171;
      --gold: #d7a945;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      height: 100%;
      background:
        radial-gradient(ellipse 48% 28% at 82% 12%, rgba(255,45,120,.05), transparent 68%),
        radial-gradient(ellipse 42% 28% at 16% 10%, rgba(215,169,69,.09), transparent 68%),
        linear-gradient(180deg, #010204, #06080c 48%, #010204);
      color: var(--text);
      font-family: var(--font-body, 'Hanken Grotesk', system-ui, sans-serif);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .app {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      flex: 1;
      min-height: 0;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 54px;
      padding: 0 20px;
      border-bottom: 1px solid rgba(215,169,69,.18);
      background: linear-gradient(180deg, rgba(1,2,4,.95), rgba(1,2,4,.72));
      box-shadow: 0 18px 54px rgba(0,0,0,.32);
    }

    .brand {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .brand .accent {
      background: linear-gradient(135deg, var(--coral), var(--pink));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .topbar-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .side {
      display: grid;
      gap: 8px;
      min-height: 0;
      overflow: hidden;
      grid-template-rows: minmax(0, 1fr);
    }

    .panel {
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.024) 44%, rgba(255,255,255,.052)),
        radial-gradient(circle at 12% 0%, rgba(215,169,69,.11), transparent 38%),
        rgba(10,12,14,.82);
      box-shadow: 0 22px 64px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.07);
      overflow: hidden;
      min-height: 0;
    }

    .editor-panel {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      min-height: 0;
    }

    .preview-media {
      width: 100%;
      max-height: 240px;
      background: #050912;
      display: none;
    }

    .preview-media.visible {
      display: block;
    }

    .panel-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 16px 18px 12px;
      border-bottom: 1px solid var(--line);
    }

    .panel-title {
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--coral);
      font-weight: 700;
    }

    .panel-meta {
      font-size: 12px;
      color: var(--muted);
    }

    .dropzone {
      margin: 16px;
      border: 2px dashed rgba(255,115,56,0.35);
      border-radius: 8px;
      min-height: 0;
      display: grid;
      place-items: center;
      padding: 22px;
      text-align: center;
      cursor: pointer;
      background: rgba(255,255,255,0.025);
    }

    .dropzone.active {
      border-color: var(--coral);
      box-shadow: inset 0 0 0 1px rgba(255,115,56,0.25);
    }

    .drop-title {
      font-size: 30px;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 10px;
    }

    .drop-copy {
      max-width: 44ch;
      color: var(--muted);
      line-height: 1.5;
      margin-bottom: 18px;
    }

    .queue-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 16px 16px;
    }

    .queue-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      padding: 0 12px;
      border-radius: 8px;
      border: 1px solid var(--line);
      color: var(--text);
      background: rgba(255,255,255,0.04);
      font-size: 12px;
    }

    .queue-chip::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 8px;
      background: var(--coral);
    }

    .label {
      font-size: 11px;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
      font-weight: 700;
    }

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

    .model-btn, .segmented button {
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04);
      color: var(--text);
    }

    .btn {
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: var(--text);
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
      font-size: .6rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: border-color .18s, background .18s, color .18s;
    }

    .btn:not(:disabled):hover {
      border-color: rgba(215,169,69,.45);
      background: rgba(215,169,69,.08);
      color: #d7a945;
    }

    .model-btn {
      min-height: 84px;
      padding: 14px 16px;
      text-align: left;
      width: 100%;
    }

    /* eb-pipeline.css forces every <button> to a 999px pill; these model cards
       hold multi-line copy, so a pill clips the text into the curved ends.
       Restore a proper card radius (specificity beats the blanket !important). */
    .model-grid .model-btn {
      border-radius: 14px !important;
    }

    .model-btn.active, .segmented button.active, .btn.active {
      border-color: rgba(255,115,56,.6);
      background: rgba(255,115,56,.12);
      color: #ff7338;
    }

    .model-name {
      font-size: 14px;
      font-weight: 700;
    }

    .model-copy {
      margin-top: 8px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }

    .segmented {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .segmented button {
      min-height: 38px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 700;
    }

    .toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 38px;
      color: var(--muted);
      font-size: 13px;
    }

    .toggle input {
      width: 18px;
      height: 18px;
      accent-color: var(--coral);
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      padding: 0 16px 16px;
    }

    .stats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .stat {
      min-height: 36px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .progress {
      display: none;
      padding: 0 16px 16px;
    }

    .progress.visible { display: block; }

    .progress-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .track {
      height: 10px;
      border-radius: 8px;
      background: rgba(255,255,255,0.06);
      overflow: hidden;
    }

    .bar {
      width: 0%;
      height: 100%;
      border-radius: 8px;
      background: linear-gradient(90deg, var(--coral), var(--pink));
    }

    /* ── Tabs (Session Controls + side column) ─────────────────────── */
    .tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 12px 16px 0;
    }

    .tab {
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: var(--muted);
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
      font-size: .6rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 7px 14px;
      cursor: pointer;
      transition: border-color .18s, background .18s, color .18s;
    }

    .tab:hover { border-color: rgba(215,169,69,.45); color: #d7a945; }

    .tab.active {
      border-color: rgba(255,115,56,.6);
      background: rgba(255,115,56,.12);
      color: #ff7338;
    }

    /* Side column collapsed into one tabbed panel */
    .side-tabbed {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      min-height: 0;
    }

    /* Docked media player: always visible above the tabs so playback drives
       cue selection regardless of which side tab is active. Collapses to a
       zero-height row when no media is loaded (.preview-media stays hidden). */
    .side-tabbed > .preview-media {
      max-height: 210px;
      border-bottom: 1px solid var(--line);
      border-radius: 16px 16px 0 0;
    }

    .side-body {
      min-height: 0;
      overflow: hidden;
      display: grid;
      grid-template-rows: minmax(0, 1fr);
    }

    .side-pane { display: none; min-height: 0; }

    .side-pane.active {
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }

    .side-pane > .panel-head { flex: 0 0 auto; }

    .side-pane > .inspector,
    .side-pane > .qa-body,
    .side-pane > .queue-list { flex: 1 1 auto; min-height: 0; }

    .subtitle-list, .queue-list {
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
    }

    .subtitle-list {
      height: 100%;
      max-height: 100%;
    }

    .subtitle-list.hidden,
    .raw-editor.hidden {
      display: none;
    }

    .subtitle-list::-webkit-scrollbar,
    .queue-list::-webkit-scrollbar {
      width: 12px;
    }

    .subtitle-list::-webkit-scrollbar-track,
    .queue-list::-webkit-scrollbar-track {
      background: rgba(255,255,255,0.04);
    }

    .subtitle-list::-webkit-scrollbar-thumb,
    .queue-list::-webkit-scrollbar-thumb {
      background: rgba(255,115,56,0.45);
      border-radius: 8px;
      border: 2px solid rgba(16,29,48,0.95);
    }

    .subtitle-row, .queue-row {
      padding: 14px 18px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .subtitle-row {
      display: grid;
      grid-template-columns: 108px 100px 1fr;
      gap: 14px;
    }

    .subtitle-row.no-speaker {
      grid-template-columns: 108px 1fr;
    }

    .speaker-label {
      width: 100%;
      min-height: 34px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(0,0,0,0.18);
      color: var(--text);
      padding: 0 8px;
      font: 12px var(--font-mono, 'JetBrains Mono', monospace);
    }

    .subtitle-row.active {
      background: rgba(255,115,56,0.12);
      box-shadow: inset 3px 0 0 var(--coral);
    }

    .subtitle-row.issue {
      background: rgba(248,113,113,0.06);
    }

    .subtitle-row.match .subtitle-text {
      color: white;
      background: rgba(255,202,40,0.08);
      border-radius: 8px;
      padding: 6px 8px;
      margin: -6px -8px;
    }

    .time {
      color: var(--gold);
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 12px;
      line-height: 1.45;
    }

    .subtitle-text {
      color: var(--text);
      line-height: 1.5;
      font-size: 14px;
    }

    .subtitle-text[contenteditable="true"] {
      outline: none;
    }

    .cue-issues {
      grid-column: 1 / -1;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .issue-tag {
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      border-radius: 8px;
      border: 1px solid rgba(248,113,113,0.32);
      color: var(--red);
      padding: 0 8px;
      font-size: 11px;
      background: rgba(248,113,113,0.08);
    }

    .queue-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
    }

    .queue-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .queue-meta-copy {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .pill {
      min-height: 30px;
      padding: 0 10px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: .06em;
      color: var(--muted);
    }

    .pill.processing { background: rgba(255,115,56,0.12); color: white; border-color: rgba(255,115,56,0.4); }
    .pill.done { background: rgba(74,222,128,0.08); color: var(--green); border-color: rgba(74,222,128,0.25); }
    .pill.error { background: rgba(248,113,113,0.08); color: var(--red); border-color: rgba(248,113,113,0.25); }

    .empty {
      padding: 28px 18px;
      color: var(--muted);
      text-align: center;
      font-size: 13px;
    }

    .btn {
      min-height: 36px;
      padding: 0 16px;
      position: relative;
    }

    .btn.primary {
      background: linear-gradient(135deg, var(--coral), var(--pink));
      border-color: transparent;
      color: white;
      box-shadow: 0 4px 18px rgba(255,115,56,.28);
    }

    .btn.primary:not(:disabled):hover {
      filter: brightness(1.12);
      color: white;
      border-color: transparent;
    }

    .btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .btn.working {
      border-color: rgba(215,169,69,.55);
      box-shadow: 0 0 0 1px rgba(215,169,69,.18);
    }

    .btn.working::after {
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 8px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: white;
      display: inline-block;
      margin-left: 8px;
      vertical-align: -2px;
      animation: spin .8s linear infinite;
    }

    .btn.pressed {
      transform: translateY(1px);
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .editor-tools {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      padding: 14px 18px 18px;
      border-top: 1px solid var(--line);
    }

    .tool-group {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .editor-nav {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) auto;
      gap: 10px;
      padding: 12px 18px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.025);
    }

    .editor-search {
      width: 100%;
      min-height: 40px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(0,0,0,0.2);
      color: var(--text);
      padding: 0 12px;
      font: inherit;
    }

    .qa-body {
      min-height: 0;
      overflow: auto;
      padding: 14px 16px;
    }

    .inspector {
      padding: 14px 16px 16px;
      color: var(--muted);
      overflow: auto;
    }

    .inspector-name {
      color: var(--text);
      font-weight: 800;
      font-size: 14px;
      line-height: 1.3;
      word-break: break-word;
      margin-bottom: 10px;
    }

    .inspector-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .inspector-item {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 9px 10px;
      background: rgba(255,255,255,0.035);
      min-width: 0;
    }

    .inspector-item span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 5px;
    }

    .inspector-item strong {
      color: var(--text);
      font-size: 12px;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    .inspector-status {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .status-chip {
      min-height: 28px;
      padding: 0 9px;
      border-radius: 8px;
      border: 1px solid var(--line);
      display: inline-flex;
      align-items: center;
      color: var(--muted);
      font-size: 11px;
      background: rgba(255,255,255,0.035);
    }

    .status-chip.good { color: var(--green); border-color: rgba(74,222,128,0.25); background: rgba(74,222,128,0.08); }
    .status-chip.warn { color: var(--gold); border-color: rgba(255,202,40,0.28); background: rgba(255,202,40,0.08); }
    .status-chip.bad { color: var(--red); border-color: rgba(248,113,113,0.28); background: rgba(248,113,113,0.08); }

    .inspector-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .speaker-panel {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }

    .speaker-list {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .speaker-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: center;
    }

    .speaker-name {
      width: 100%;
      min-height: 34px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(0,0,0,0.2);
      color: var(--text);
      padding: 0 9px;
      font: 12px var(--font-mono, 'JetBrains Mono', monospace);
    }

    .speaker-count {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .qa-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .qa-stat {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: rgba(255,255,255,0.035);
    }

    .qa-stat strong {
      display: block;
      color: var(--text);
      font-size: 18px;
      line-height: 1;
      margin-bottom: 6px;
    }

    .qa-stat span {
      color: var(--muted);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .find-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 10px;
    }

    .field {
      width: 100%;
      min-height: 38px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(0,0,0,0.2);
      color: var(--text);
      padding: 0 10px;
      font: 12px var(--font-mono, 'JetBrains Mono', monospace);
    }

    .qa-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .qa-list {
      display: grid;
      gap: 8px;
    }

    .qa-item {
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      background: rgba(255,255,255,0.035);
      padding: 10px;
      text-align: left;
      color: var(--text);
    }

    .qa-item:hover {
      border-color: rgba(255,115,56,0.45);
    }

    .qa-item-title {
      color: var(--gold);
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 12px;
      margin-bottom: 6px;
    }

    .qa-item-copy {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .editor-jumps {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .burn-options {
      display: none;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 8px;
    }

    .burn-options.visible {
      display: grid;
    }

    .compact-select {
      width: 100%;
      min-height: 34px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(0,0,0,0.18);
      color: var(--text);
      padding: 0 8px;
      font: 12px var(--font-mono, 'JetBrains Mono', monospace);
    }

    .raw-editor {
      width: 100%;
      height: 100%;
      min-height: 0;
      resize: none;
      border: 0;
      outline: none;
      padding: 16px 18px;
      color: var(--text);
      background: rgba(0,0,0,0.18);
      font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
      white-space: pre;
      overflow: auto;
    }

    input[type="file"] { display: none; }

    @media (max-width: 1100px) {
      html, body { overflow: auto; }
      .app { height: auto; min-height: 100vh; }
      .topbar { padding: 10px 16px; gap: 10px; }
      .brand { font-size: 24px; }
      .topbar-actions .btn { min-height: 36px; padding: 0 10px; }
      .model-grid { grid-template-columns: 1fr; }
      .side {
        display: flex;
        flex-direction: column;
        overflow: visible;
      }
      .dropzone { min-height: 150px; }
      .editor-panel {
        min-height: 560px;
        grid-template-rows: auto auto minmax(260px, 1fr) auto;
        overflow: visible;
      }
      .subtitle-list {
        min-height: 260px;
      }
      .editor-tools {
        position: relative;
        background: #101d30;
        z-index: 1;
      }
      .editor-nav { grid-template-columns: 1fr; }
      .editor-jumps { justify-content: flex-start; }
      .side-tabbed { grid-template-rows: auto auto auto; }
      .side-body { grid-template-rows: auto; }
      .side-pane.active { min-height: 340px; }
    }

    @media (max-width: 780px) {
      .topbar { flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 16px; }
      .subtitle-row,
      .subtitle-row.no-speaker { grid-template-columns: 1fr; }
    }

    /* DVP grain + aurora */
    body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:9998;opacity:.5}
    .aurora{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
    .aurora-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.2;animation:auroraDrift 18s ease-in-out infinite alternate}
    .aurora-orb:nth-child(1){width:700px;height:700px;background:radial-gradient(circle,#ff7338,transparent 70%);top:-20%;left:-10%;animation-delay:0s}
    .aurora-orb:nth-child(2){width:600px;height:600px;background:radial-gradient(circle,#ff2d78,transparent 70%);bottom:-15%;right:-5%;animation-delay:-7s}
    .aurora-orb:nth-child(3){width:500px;height:500px;background:radial-gradient(circle,#d7a945,transparent 70%);top:30%;left:40%;animation-delay:-13s}
    @keyframes auroraDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.05)}100%{transform:translate(-20px,20px) scale(0.97)}}
    /* DVP page nav */
    .dvp-nav{border-bottom:1px solid rgba(255,255,255,.07);padding:14px 0;background:rgba(6,13,24,.92);backdrop-filter:blur(16px);position:sticky;top:0;z-index:200}
    .dvp-nav-inner{max-width:1540px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
    .dvp-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
    .dvp-brand img{height:34px;width:auto;flex-shrink:0;display:block}
    .dvp-nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
    .dvp-nav-actions a{
      min-height:34px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;
      border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.035);
      color:#dde8f8;text-decoration:none;font-family:var(--font-mono, 'JetBrains Mono', monospace);font-size:.58rem;
      letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:border-color .2s,background .2s,color .2s;
    }
    .dvp-nav-actions a:hover{border-color:rgba(255,115,56,.42);background:rgba(255,115,56,.10);color:#fff4e3}
    .dvp-nav-actions a.primary{border-color:rgba(255,115,56,.36);background:rgba(255,115,56,.12);color:#ffb18f}
    /* API key row — unified global toolbar (key controls + sessions/help) */
    .key-row{display:flex;justify-content:center;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.015)}
    .key-row-inner{width:min(1120px,100%);display:flex;align-items:center;gap:16px 18px;justify-content:space-between;flex-wrap:wrap}
    .key-row-main{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
    .key-row-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
    /* Topbar is empty in setup mode (Add media is hidden) — collapse it */
    .app[data-mode="setup"] .topbar{display:none}
    .key-row label{font-family:var(--font-mono, 'JetBrains Mono', monospace);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(185,170,145,.6);white-space:nowrap}
    .key-input{flex:1;max-width:340px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#f6ead6;font-family:var(--font-mono, 'JetBrains Mono', monospace);font-size:.72rem;padding:7px 12px;outline:none}
    .key-input:focus{border-color:rgba(255,115,56,.5)}
    .key-badge{font-family:var(--font-mono, 'JetBrains Mono', monospace);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:12px;border:1px solid rgba(57,217,138,.3);color:#39d98a;background:rgba(57,217,138,.08)}
    .key-badge.unset{border-color:rgba(255,255,255,.1);color:rgba(185,170,145,.5);background:transparent}
    .key-clear-btn{font-family:var(--font-mono, 'JetBrains Mono', monospace);font-size:.55rem;letter-spacing:.08em;padding:4px 10px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:rgba(185,170,145,.6);cursor:pointer;display:none}
    .key-clear-btn:hover{border-color:rgba(248,113,113,.4);color:#f87171}
    .key-save-btn{font-family:var(--font-mono, 'JetBrains Mono', monospace);font-size:.55rem;letter-spacing:.08em;padding:5px 14px;background:rgba(255,115,56,.12);border:1px solid rgba(255,115,56,.3);border-radius:8px;color:#ff7338;cursor:pointer}
    .key-save-btn:hover{background:rgba(255,115,56,.2)}
    /* Once a key is saved, collapse the row to a compact badge + Clear */
    .key-row.key-set .key-input,
    .key-row.key-set .key-save-btn{display:none}

    .topbar{justify-content:flex-end}
    .topbar .brand{display:none}
    .cinescribe-title-hero{
      width:min(1120px,calc(100% - 40px));
      margin:0 auto;
      padding:18px 0 14px;
      text-align:center;
      position:relative;
      z-index:1;
    }
    .cinescribe-title-hero .eyebrow{
      margin:0 0 7px;
      font-family:var(--font-mono, 'JetBrains Mono', monospace);
      font-size:.62rem;
      letter-spacing:.2em;
      text-transform:uppercase;
      color:rgba(255,115,56,.88);
    }
    .cinescribe-title-hero h1{
      margin:0;
      font-family:var(--font-display, 'Archivo', system-ui, sans-serif);
      font-size:clamp(44px,7vw,82px);
      line-height:.9;
      font-weight:700;
      letter-spacing:0;
      color:#fff4e3;
      text-shadow:0 18px 54px rgba(0,0,0,.5);
    }
    .cinescribe-title-hero h1 span{
      background:linear-gradient(135deg,var(--coral),var(--pink));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .cinescribe-title-hero p{
      max-width:720px;
      margin:12px auto 0;
      color:rgba(246,234,214,.72);
      font-size:14px;
      line-height:1.45;
    }
    @media (max-width:780px){
      .cinescribe-title-hero{width:calc(100% - 28px);padding:14px 0 12px;}
      .cinescribe-title-hero p{font-size:13px;}
    }
    /* Queue/status pill border-radius override */
    .pill{border-radius:999px}

    /* Browser: hide desktop-only features */
    #burnSection, #burnToggleRow, #burnOptions, .burn-row { display: none !important; }
    #revealBtn { display: none !important; }

    /* ============================================================
       Two-mode workspace + visual refresh (self-contained, on-brand)
       ============================================================ */
    :root{
      --radius: 16px;
      --edge: rgba(255,255,255,.10);
      --label: #c9bca6;   /* brighter than --muted for legibility */
    }

    /* --- Topbar additions --- */
    .topbar-actions{ align-items:center; }
    .howto-link{
      display:inline-flex; align-items:center; min-height:34px; padding:0 14px;
      border:1px solid rgba(255,115,56,.32); background:rgba(255,115,56,.08);
      border-radius:999px; color:var(--coral); text-decoration:none;
      font-family:var(--font-mono, 'JetBrains Mono', monospace); font-size:.56rem; letter-spacing:.1em;
      text-transform:uppercase; white-space:nowrap;
    }
    .howto-link:hover{ border-color:rgba(255,115,56,.55); background:rgba(255,115,56,.14); }
    .menu{ position:relative; }
    .menu-list{
      position:absolute; right:0; top:calc(100% + 8px);
      display:flex; flex-direction:column; gap:4px; padding:6px;
      border:1px solid var(--edge); border-radius:12px;
      background:rgba(8,10,14,.98); box-shadow:0 20px 56px rgba(0,0,0,.55);
      z-index:60; min-width:172px;
    }
    .menu-list[hidden]{ display:none; }
    .menu-item{ width:100%; justify-content:flex-start; text-align:left; }

    /* --- Mode visibility --- */
    .app[data-mode="setup"] .edit,
    .app[data-mode="setup"] .add-media-btn{ display:none; }
    .app[data-mode="edit"] .setup{ display:none; }

    /* --- SETUP MODE --- */
    .setup{ min-height:0; overflow:auto; }
    .setup-stage{
      width:min(900px,100%); margin:0 auto;
      padding:26px 22px 44px; display:flex; flex-direction:column; gap:18px;
      position:relative;
    }
    .setup-stage::before{
      content:""; position:absolute; inset:-30px 0 auto; height:300px; z-index:-1;
      background:radial-gradient(ellipse 62% 100% at 50% 0%, rgba(255,115,56,.10), transparent 70%);
      pointer-events:none;
    }
    .setup-head{ text-align:center; }
    .setup-eyebrow{
      font-family:var(--font-mono, 'JetBrains Mono', monospace); font-size:.6rem; letter-spacing:.22em;
      text-transform:uppercase; color:var(--coral); margin-bottom:8px;
    }
    .setup-sub{ margin:0 auto; max-width:60ch; color:var(--label); line-height:1.6; font-size:14px; }
    .setup .dropzone{ margin:0; min-height:190px; }
    .setup .queue-preview{ padding:0; justify-content:center; }
    .drop-actions{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
    .setup-settings{
      display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:18px;
      padding:18px; border:1px solid var(--edge); border-radius:var(--radius);
      background:var(--panel);
    }
    .setup-settings .model-grid{ grid-template-columns:repeat(2,1fr); }
    .setup-cta{ display:flex; justify-content:center; align-items:center; gap:12px; }
    .generate-btn{ min-height:52px; padding:0 40px; font-size:.72rem; }
    #stopBtn:disabled{ display:none; }
    .setup .progress{ padding:0; }
    .setup-queue-list{ max-height:260px; }
    .queue-meta-line{
      padding:0 16px 14px; color:var(--label); font-size:11px;
      font-family:var(--font-mono, 'JetBrains Mono', monospace); letter-spacing:.08em; text-transform:uppercase;
    }

    /* --- Setup stepper (Import → Configure → Generate → Edit) --- */
    .setup-stepper{
      list-style:none; margin:0 auto 2px; padding:0;
      display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
    }
    .setup-stepper .step{
      display:inline-flex; align-items:center; gap:8px;
      font-family:var(--font-mono, 'JetBrains Mono', monospace); font-size:.6rem; letter-spacing:.12em;
      text-transform:uppercase; color:var(--muted);
    }
    .setup-stepper .step:not(:last-child)::after{
      content:""; width:34px; height:1px; margin:0 14px; background:rgba(255,255,255,.14);
    }
    .setup-stepper .step-num{
      width:22px; height:22px; border-radius:50%;
      display:inline-flex; align-items:center; justify-content:center;
      border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); font-size:.62rem;
    }
    .setup-stepper .step.done .step-num{
      border-color:rgba(255,115,56,.5); background:rgba(255,115,56,.14); color:var(--coral);
    }
    .setup-stepper .step.active .step-num{
      border-color:transparent; color:#160a06;
      background:linear-gradient(135deg,var(--coral),var(--pink));
      box-shadow:0 4px 14px rgba(255,80,60,.35);
    }
    .setup-stepper .step.active .step-label{ color:var(--text); }
    .setup-stepper .step.done .step-label{ color:var(--label); }
    @media (max-width:560px){
      .setup-stepper .step-label{ display:none; }
      .setup-stepper .step:not(:last-child)::after{ width:18px; margin:0 8px; }
    }

    /* --- QA health strip --- */
    .qa-health{
      display:flex; flex-direction:column; gap:9px; margin-bottom:12px;
      padding:11px 12px; border:1px solid var(--line); border-radius:8px;
      background:rgba(255,255,255,.035);
    }
    .qa-health-bar{
      height:8px; border-radius:8px; overflow:hidden;
      background:rgba(248,113,113,.22); display:flex;
    }
    .qa-health-bar > i{ display:block; height:100%; background:linear-gradient(90deg,#4ade80,#39d98a); transition:width .25s ease; }
    .qa-health-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .qa-health-label{
      font-family:var(--font-mono, 'JetBrains Mono', monospace); font-size:.58rem; letter-spacing:.08em;
      text-transform:uppercase; color:var(--label); white-space:nowrap;
    }
    .qa-health .btn{ flex:0 0 auto; }

    /* --- EDIT MODE --- */
    .edit{
      display:grid;
      grid-template-columns:minmax(420px,1fr) minmax(300px,380px);
      grid-template-rows:minmax(0,1fr) auto;
      gap:10px; padding:12px; min-height:0; overflow:hidden;
    }
    .edit .editor-panel{ grid-column:1; grid-row:1; min-height:0; }
    .edit .side{ grid-column:2; grid-row:1; min-height:0; }
    .export-bar{
      grid-column:1 / -1; grid-row:2;
      display:flex; align-items:center; gap:14px; flex-wrap:wrap;
      padding:12px 16px; border:1px solid var(--edge); border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), var(--panel);
    }
    .export-bar-label{
      font-family:var(--font-mono, 'JetBrains Mono', monospace); font-size:.56rem; letter-spacing:.14em;
      text-transform:uppercase; color:var(--label);
    }
    .export-bar-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
    .tool-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .tool-group-label{
      font-family:var(--font-mono, 'JetBrains Mono', monospace); font-size:.52rem; letter-spacing:.14em;
      text-transform:uppercase; color:var(--muted); opacity:.8; margin-right:2px;
    }

    /* --- Visual refresh --- */
    .label{ color:var(--label); }
    .btn.primary{
      border:1px solid transparent;
      background:linear-gradient(135deg,var(--coral),var(--pink));
      color:#160a06; font-weight:800;
      box-shadow:0 10px 26px rgba(255,80,60,.26);
    }
    .btn.primary:not(:disabled):hover{ filter:brightness(1.07); color:#160a06; }
    .btn.primary:disabled{ opacity:.4; box-shadow:none; }

    /* full-editor: editor fills, hide rail + export bar */
    body.full-editor .edit{ grid-template-columns:1fr; }
    body.full-editor .edit .side, body.full-editor .export-bar{ display:none; }

    /* responsive */
    @media (max-width:1000px){
      .edit{ display:flex; flex-direction:column; overflow:auto; }
      .edit .editor-panel{ min-height:480px; }
      .setup-settings{ grid-template-columns:1fr; }
    }

  /* Aurora orbs — shared DVP background */
  .dvp-orb { position:fixed; border-radius:50%; pointer-events:none; will-change:transform; }
  .dvp-orb-1 { width:640px;height:420px;z-index:0;background:radial-gradient(ellipse,rgba(255,115,56,.22) 0%,transparent 65%);filter:blur(72px);top:-120px;left:-100px;animation:dvpO1 24s ease-in-out infinite; }
  .dvp-orb-2 { width:540px;height:540px;z-index:0;background:radial-gradient(ellipse,rgba(255,45,120,.18) 0%,transparent 65%);filter:blur(80px);top:-60px;right:-80px;animation:dvpO2 30s ease-in-out infinite; }
  .dvp-orb-3 { width:480px;height:480px;z-index:0;background:radial-gradient(ellipse,rgba(215,169,69,.13) 0%,transparent 65%);filter:blur(90px);bottom:12%;left:28%;animation:dvpO3 38s ease-in-out infinite; }
  @keyframes dvpO1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(80px,65px) scale(1.09)}66%{transform:translate(-28px,105px) scale(.94)}}
  @keyframes dvpO2{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-105px,45px) scale(1.07)}75%{transform:translate(-32px,82px) scale(.93)}}
  @keyframes dvpO3{0%,100%{transform:translate(0,0) scale(1)}35%{transform:translate(-65px,-45px) scale(1.11)}70%{transform:translate(75px,20px) scale(.95)}}
  @media (prefers-reduced-motion: reduce) { .dvp-orb { animation: none; } }