:root {
  --bg: #f4f5f2;
  --surface: #ffffff;
  --surface-muted: #eef0ed;
  --line: #d6dad5;
  --line-strong: #aeb5ae;
  --text: #202522;
  --muted: #667069;
  --quiet: #8a938c;
  --teal: #12746b;
  --teal-soft: #d9efeb;
  --coral: #ba4d3c;
  --coral-soft: #f7e2dd;
  --gold: #9a6a08;
  --gold-soft: #f6eccf;
  --focus: #176cc1;
  --header-height: 56px;
  --radius: 6px;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  min-width: 320px;
  background: var(--bg);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
}

button, select, input, textarea { font: inherit; letter-spacing: 0; }

button, a, select, summary { -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: 4px;
  background: #fff;
  color: #075c54;
  box-shadow: 0 2px 8px rgb(0 0 0 / 24%);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.app-header {
  height: var(--header-height);
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  border-bottom: 1px solid #1d211f;
  background: #252a27;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
}

.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #75bcb5;
  border-radius: 4px;
  color: #9bd6d0;
  font-size: 11px;
}

.primary-nav { display: flex; height: 100%; gap: 24px; }
.primary-nav[hidden], .primary-nav a[hidden], .account-reset[hidden] { display: none; }

.primary-nav a {
  display: grid;
  place-items: center;
  color: #cdd2ce;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding: 0 2px;
}

.primary-nav a.active { color: #fff; border-bottom-color: #72c4bc; }
.nav-more { position: relative; align-self: center; }
.nav-more[hidden] { display: none; }
.nav-more summary { padding: 12px 4px; cursor: pointer; color: #cdd2ce; }
.nav-more > div { position: fixed; top: var(--header-height); background: #252a27; padding: 8px; border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px #0002; }
.nav-more > div a { padding: 12px 22px; justify-content: start; }
.books-page { max-width: 1120px; }
.books-work { margin-top: 32px; }
.book-analysis-list { display: grid; gap: 14px; }
.book-analysis-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; background: var(--surface); padding: 22px 24px; border: 1px solid var(--line); border-radius: 10px; }
.book-analysis-card h2 { margin: 5px 0; font-size: 19px; }
.book-stage { color: var(--muted); font-size: 12px; }
.book-analysis-card .book-status { margin: 14px 0 4px; color: var(--teal); font-weight: 600; }
.book-analysis-card .project-meta { margin: 4px 0; }
.book-analysis-card > .btn { text-decoration: none; padding: 11px 18px; }
.book-analysis-info { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 10px; color: var(--muted); font-size: 13px; }
.book-analysis-info summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.book-analysis-info summary::before { content: "+"; margin-right: 8px; }
.book-analysis-info[open] summary::before { content: "−"; }
.book-analysis-info dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 14px; }
.book-analysis-info dd { margin: 0; overflow-wrap: anywhere; color: var(--text); }
@media (max-width: 640px) {
  .book-analysis-card { padding: 18px; gap: 14px; }
  .book-analysis-card > .btn { grid-column: 1 / -1; text-align: center; }
  .book-analysis-main { grid-column: 1 / -1; }
  .book-analysis-info summary { min-height: 44px; }
}

.header-status {
  color: #bdc6c0;
  font-size: 12px;
  text-transform: uppercase;
}

.loading-track {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  z-index: 60;
}

.loading-track span {
  display: block;
  width: 35%;
  height: 100%;
  background: var(--teal);
  animation: loading 1s infinite ease-in-out;
}

@keyframes loading {
  from { transform: translateX(-110%); }
  to { transform: translateX(320%); }
}

#app { min-height: calc(100vh - var(--header-height)); }

.page {
  width: min(1360px, 100%);
  margin: 0 auto;
  padding: 28px 32px 48px;
}

.page-heading, .project-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.page-actions { display: flex; gap: 8px; }

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 25px; line-height: 1.2; margin-bottom: 6px; }
h2 { font-size: 17px; line-height: 1.25; }
h3 { font-size: 13px; line-height: 1.3; text-transform: uppercase; color: var(--muted); }

.subtitle { margin: 0; color: var(--muted); }

.btn {
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  padding: 6px 12px;
  cursor: pointer;
}

.btn:hover { border-color: var(--teal); color: var(--teal); }
.btn.primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn.small { min-height: 28px; padding: 3px 9px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }

[aria-disabled="true"], button:disabled { pointer-events: none; }

.project-table {
  margin-top: 24px;
  border-top: 1px solid var(--line-strong);
  background: var(--surface);
}

.import-panel {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.import-panel-head { display: flex; justify-content: space-between; gap: 16px; }
.import-panel-head h2 { margin-bottom: 4px; }
.import-panel-head p { margin: 0; color: var(--muted); font-size: 12px; }
.import-grid { display: grid; grid-template-columns: 1fr 1fr 110px 110px; gap: 10px; margin-top: 16px; }
.import-grid label, .draft-model { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.import-grid label.wide { grid-column: 1 / -1; }
.import-grid input, .draft-model select, .draft-model-id {
  min-width: 0;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}
.import-actions { display: flex; gap: 8px; margin-top: 14px; }
.import-preview { margin-top: 14px; }
.import-preview pre { max-height: 240px; margin: 8px 0 0; padding: 12px; overflow: auto; white-space: pre-wrap; border: 1px solid var(--line); background: #f8f9f7; font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.preview-metrics { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 11px; }
.preview-metrics strong { color: var(--text); }
.draft-section { margin-top: 24px; }
.draft-section h2 { margin-bottom: 8px; }
.draft-list { border-top: 1px solid var(--line-strong); background: var(--surface); }
.draft-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(120px, 180px) minmax(130px, 220px) auto; align-items: end; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.draft-row > .status-badge { align-self: center; }

.project-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(250px, 1.3fr) 130px 120px;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.project-row:hover { background: #f8faf8; }
.project-name { font-size: 16px; font-weight: 650; margin-bottom: 3px; }
.project-meta, .project-updated { color: var(--muted); font-size: 12px; }
.count-block strong { display: block; font-size: 18px; }
.count-block span { color: var(--muted); font-size: 11px; text-transform: uppercase; }

.phase-list, .pipeline-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.phase-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--muted);
  background: var(--surface);
  font-size: 11px;
}
.phase-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--quiet); }
.phase-chip.completed::before { background: var(--teal); }
.phase-chip.failed::before { background: var(--coral); }

.empty-state {
  padding: 64px 24px;
  text-align: center;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.project-head {
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.back-link { color: var(--teal); text-decoration: none; font-size: 12px; display: inline-block; margin-bottom: 10px; }
.project-title-row h1 { margin-bottom: 4px; }
.project-title-row .subtitle { font-size: 12px; }
.pipeline-strip { margin-top: 15px; }
.production-overview, .quality-panel, .cast-panel, .soundstage-panel { padding: 14px 28px 18px; border-bottom: 1px solid var(--line-strong); background: #f8f9f7; }
.production-overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.production-overview-head h2 { margin-bottom: 3px; }
.production-overview-head p { margin: 0; color: var(--muted); font-size: 11px; }
.production-matrix-wrap { margin-top: 12px; overflow-x: auto; }
.production-matrix { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.production-matrix th, .production-matrix td { padding: 6px; border-bottom: 1px solid var(--line); text-align: center; }
.production-matrix thead th { color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.production-matrix thead th:first-child { width: 170px; text-align: left; }
.production-matrix tbody th { text-align: left; }
.production-matrix tbody th button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-weight: 650; }
.production-matrix tbody th span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 400; }
.production-matrix tr.selected { background: var(--teal-soft); }
.matrix-status { width: 100%; min-height: 28px; border: 0; border-radius: 3px; background: var(--surface-muted); color: var(--muted); cursor: pointer; font-size: 10px; text-transform: uppercase; }
.matrix-status.ready, .matrix-status.completed { background: var(--teal-soft); color: #075c54; }
.matrix-status.pending, .matrix-status.stale { background: var(--gold-soft); color: #765109; }
.matrix-status.failed, .matrix-status.blocked { background: var(--coral-soft); color: #8b392d; }
.production-error { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--coral); background: var(--coral-soft); color: #7d3026; font-size: 11px; }
.ribbon-details { margin-top: 12px; }
.ribbon-detail-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: 11px; }
.ribbon-detail-head span { color: var(--muted); }
.soundstage-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.soundstage-arc { display: flex; align-items: end; gap: 3px; min-height: 94px; margin-top: 12px; padding: 8px; overflow-x: auto; border: 1px solid var(--line-strong); background: var(--surface); }
.soundstage-arc-scene { flex: 1 0 64px; min-width: 64px; min-height: 72px; display: grid; grid-template-rows: auto 1fr; align-items: end; gap: 4px; padding: 4px; border: 0; border-bottom: 3px solid var(--teal); background: transparent; color: var(--muted); cursor: pointer; font-size: 9px; }
.soundstage-arc-scene i { display: block; height: calc(14px + var(--pace) * 44px); background: linear-gradient(180deg, #75bcb5, var(--teal)); border-radius: 3px 3px 0 0; }
.soundstage-arc-scene.review { border-bottom-color: var(--gold); }
.soundstage-arc-scene.review i { background: linear-gradient(180deg, #e7c86e, var(--gold)); }
.soundstage-list { display: grid; gap: 12px; margin-top: 12px; }
.soundstage-card { scroll-margin-top: calc(var(--header-height) + 16px); padding: 13px; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius); background: var(--surface); }
.soundstage-card.review { border-left-color: var(--gold); }
.soundstage-card > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.soundstage-card h3 { margin: 2px 0 0; overflow-wrap: anywhere; color: var(--text); font-size: 12px; text-transform: none; }
.soundstage-card h4 { margin: 0 0 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.soundstage-card .eyebrow { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.soundstage-facts { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 10px; color: var(--muted); font-size: 10px; }
.soundstage-facts strong { color: var(--text); font-size: 12px; }
.soundstage-summary-text { margin: 10px 0; color: var(--text); font-size: 11px; line-height: 1.5; }
.soundstage-columns { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 10px; }
.soundstage-columns section { min-width: 0; padding: 9px; border: 1px solid var(--line); background: #fafbf9; }
.soundstage-columns p { margin: 0 0 5px; color: var(--muted); font-size: 10px; }
.soundstage-columns code { display: block; overflow-wrap: anywhere; color: var(--muted); font-size: 9px; }
.soundstage-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.soundstage-chips span { padding: 3px 6px; border-radius: 999px; background: var(--teal-soft); color: #075c54; font-size: 9px; }
.soundstage-chips small { opacity: .72; }
.soundstage-evidence, .soundstage-phases { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.soundstage-evidence summary, .soundstage-phases summary { color: var(--teal); cursor: pointer; font-size: 10px; font-weight: 650; }
.soundstage-evidence > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.soundstage-evidence button { min-height: 54px; display: grid; gap: 2px; padding: 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.soundstage-evidence button:hover { border-color: var(--teal); }
.soundstage-evidence button strong, .soundstage-evidence button span, .soundstage-evidence button small { display: block; }
.soundstage-evidence button strong { color: var(--teal); font-size: 9px; }
.soundstage-evidence button span { font-size: 10px; }
.soundstage-evidence button small { color: var(--muted); font-size: 8px; }
.soundstage-phases article { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 10px; }
.soundstage-phases p { margin: 3px 0 0; color: var(--muted); }
.soundstage-edit { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.soundstage-edit form { display: flex; align-items: end; flex-wrap: wrap; gap: 7px; }
.soundstage-edit label { display: grid; gap: 3px; color: var(--muted); font-size: 9px; }
.soundstage-edit select { min-height: 30px; max-width: 320px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--text); padding: 4px 6px; }
.chapter-output-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 7px; }
.chapter-output-row audio { width: min(360px, 100%); height: 32px; }
.chapter-output-row .btn { margin: 0; }
.source-ribbon { display: flex; min-height: 46px; border: 1px solid var(--line-strong); background: var(--surface); overflow-x: auto; }
.ribbon-event { flex: var(--ribbon-weight) 1 34px; min-width: 34px; padding: 4px; overflow: hidden; border: 0; border-right: 1px solid rgb(255 255 255 / 75%); background: var(--teal-soft); color: #075c54; cursor: pointer; text-align: left; }
.ribbon-event.sfx { background: var(--coral-soft); color: #8b392d; }
.ribbon-event.marker { background: var(--surface-muted); color: var(--muted); }
.ribbon-event.missing { background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgb(154 106 8 / 16%) 5px, rgb(154 106 8 / 16%) 9px); box-shadow: inset 0 -3px 0 var(--gold); }
.ribbon-event span { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ribbon-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; color: var(--muted); font-size: 10px; }
.ribbon-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-mark { width: 12px; height: 8px; background: var(--teal-soft); }
.legend-mark.sfx { background: var(--coral-soft); }
.legend-mark.missing { background: var(--gold-soft); box-shadow: inset 0 -2px 0 var(--gold); }
.legend-mark.quality-ready { background: var(--teal); }
.legend-mark.quality-warning { background: var(--gold); }
.legend-mark.quality-error { background: var(--coral); }
.cast-coverage { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.cast-coverage-wrap { overflow-x: auto; }
.cast-coverage-table { width: 100%; min-width: 780px; border-collapse: collapse; background: var(--surface); }
.cast-coverage-table th, .cast-coverage-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: 10px; }
.cast-coverage-table thead th { color: var(--muted); font-weight: 600; text-transform: uppercase; }
.cast-coverage-table tbody th button { display: block; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; font-weight: 650; text-align: left; }
.cast-coverage-table tbody th span { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; }
.cast-coverage-table .matrix-status { display: inline-grid; width: auto; min-height: 22px; place-items: center; padding: 2px 6px; cursor: default; }
.matrix-status.unassigned, .matrix-status.missing_sample { background: var(--gold-soft); color: #765109; }
.matrix-status.needs_approval, .matrix-status.approval_mismatch, .matrix-status.approval_stale { background: var(--gold-soft); color: #765109; }
.matrix-status.approved { background: var(--teal-soft); color: #075c54; }
.cast-summary { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 8px; margin-top: 12px; }
.cast-summary div { padding: 10px; border: 1px solid var(--line); background: var(--surface); }
.cast-summary strong, .cast-summary span { display: block; }
.cast-summary strong { font-size: 17px; }
.cast-summary span { margin-top: 2px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.cast-unresolved, .cast-complete { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--gold); background: var(--gold-soft); color: #6f4d08; font-size: 11px; }
.cast-complete { border-left-color: var(--teal); background: var(--teal-soft); color: #075c54; }
.cast-package-tools { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: center; gap: 14px; margin-top: 10px; padding: 10px; border: 1px solid var(--line); background: var(--surface); }
.cast-package-tools p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.cast-package-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cast-package-picker { position: relative; overflow: hidden; }
.cast-package-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cast-package-status { grid-column: 1 / -1; }
.cast-card-list { display: grid; gap: 10px; margin-top: 12px; }
.cast-card { padding: 12px; border: 1px solid var(--line); border-left: 4px solid var(--gold); background: var(--surface); }
.cast-card.approved { border-left-color: var(--teal); }
.cast-card.approval_mismatch { border-left-color: var(--coral); }
.cast-card.approval_stale { border-left-color: var(--gold); }
.cast-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cast-card > header h3 { margin: 0; font-size: 14px; }
.cast-card > header p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.cast-card > header .matrix-status { width: auto; min-width: 96px; padding: 3px 7px; cursor: default; }
.cast-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; color: var(--quiet); font-size: 9px; text-transform: uppercase; }
.cast-assignment-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: end; gap: 8px; margin-top: 10px; }
.cast-assignment-row label, .cast-approval-fields label { display: grid; gap: 3px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.cast-assignment-row select, .cast-approval-fields select, .cast-approval-fields input { width: 100%; min-height: 36px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--text); padding: 6px 8px; font-size: 11px; }
.cast-assignment-row .btn { min-height: 36px; margin: 0; }
.cast-approval-fields { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)) minmax(180px, 2fr); gap: 8px; margin-top: 9px; }
.cast-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cast-auditions { margin-top: 11px; padding-top: 8px; border-top: 1px solid var(--line); }
.cast-auditions summary { color: var(--muted); cursor: pointer; font-size: 10px; }
.cast-auditions article { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.cast-auditions article strong, .cast-auditions article span { display: block; }
.cast-auditions article strong { font-size: 10px; }
.cast-auditions article span, .cast-auditions article code { color: var(--quiet); font-size: 9px; }
.quality-stale { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--gold); background: var(--gold-soft); color: #6f4d08; font-size: 11px; }
.quality-summary { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 8px; margin-top: 12px; }
.quality-summary div { padding: 10px; border: 1px solid var(--line); background: var(--surface); }
.quality-summary strong, .quality-summary span { display: block; }
.quality-summary strong { font-size: 16px; text-transform: capitalize; }
.quality-summary span { margin-top: 2px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.quality-heatmap-section, .quality-findings { margin-top: 16px; }
.quality-heatmap { display: flex; flex-wrap: wrap; gap: 3px; min-height: 42px; padding: 7px; border: 1px solid var(--line-strong); background: var(--surface); }
.quality-cell { flex: 1 1 42px; min-width: 38px; max-width: 110px; min-height: 34px; overflow: hidden; border: 0; border-radius: 2px; background: var(--surface-muted); color: var(--muted); cursor: pointer; }
.quality-cell.ready { background: var(--teal-soft); color: #075c54; }
.quality-cell.warning { background: var(--gold-soft); color: #765109; }
.quality-cell.error { background: var(--coral-soft); color: #8b392d; }
.quality-cell span { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.quality-finding-list { display: grid; gap: 5px; }
.quality-finding { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 9px 10px; border-left: 3px solid var(--line-strong); background: var(--surface); }
.quality-finding.error { border-left-color: var(--coral); }
.quality-finding.warning { border-left-color: var(--gold); }
.quality-finding.info { border-left-color: var(--teal); }
.quality-finding strong { display: block; font-size: 11px; text-transform: capitalize; }
.quality-finding p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.quality-generated { margin: 12px 0 0; color: var(--quiet); font-size: 9px; }
.quality-no-report { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px; border: 1px dashed var(--line-strong); background: var(--surface); }
.quality-no-report p { margin: 0; color: var(--muted); font-size: 11px; }
.project-head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; }

.mobile-pane-tabs {
  display: none;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  gap: 4px;
}

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow: hidden;
}

.segmented button {
  min-height: 30px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.segmented button:last-child { border-right: 0; }
.segmented button.active { background: var(--teal-soft); color: #075c54; font-weight: 650; }

.project-workspace {
  height: calc(100vh - var(--header-height) - 180px);
  min-height: 520px;
  display: grid;
  grid-template-columns: 260px minmax(360px, 1fr) 330px;
  background: var(--surface);
}

.workspace-pane { min-width: 0; overflow: auto; }
.navigator-pane { border-right: 1px solid var(--line); background: #f8f9f7; }
.stream-pane { border-right: 1px solid var(--line); }
.inspector-pane { background: #fafbf9; }

.pane-head {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 52px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: inherit;
}

.pane-head h2 { margin: 5px 0 0; font-size: 14px; }
.navigator-pane .segmented { width: 100%; }
.nav-list { padding: 6px 0 18px; }
.nav-item {
  width: 100%;
  display: block;
  padding: 10px 14px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.nav-item:hover { background: var(--surface-muted); }
.nav-item.active { border-left-color: var(--teal); background: var(--teal-soft); }
.nav-item strong { display: block; font-size: 13px; font-weight: 650; }
.nav-item span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }

.stream-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stream-toolbar select {
  min-height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  padding: 4px 28px 4px 8px;
}
.stream-count { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }

.scene-divider {
  position: sticky;
  top: 52px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 14px;
  border-bottom: 1px solid #c8d9d4;
  background: #edf6f3;
  color: #205e58;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}

.event-row {
  position: relative;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 76px;
  gap: 12px;
  min-height: 76px;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.event-row:hover { background: #f8faf8; }
.event-row.selected { box-shadow: inset 3px 0 0 var(--teal); background: #f4faf8; }
.event-row.sfx { background: #fff9f7; }
.event-row.sfx.selected { box-shadow: inset 3px 0 0 var(--coral); }
.event-speaker { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.event-speaker strong { display: block; color: var(--text); font-size: 12px; }
.event-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.event-row.sfx .event-text { color: #8b392d; font-style: italic; }
.event-meta { color: var(--muted); font-size: 10px; text-align: right; }
.atom-label { display: block; margin-bottom: 5px; color: var(--teal); }
.confidence-track { height: 3px; background: #dde1dd; margin-top: 7px; }
.confidence-track span { display: block; height: 100%; background: var(--teal); }
.confidence-track.low span { background: var(--gold); }

.stream-sentinel { min-height: 44px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.event-row.playing { box-shadow: inset 4px 0 0 var(--gold); background: #fffaf0; }
.event-row.marker-pulse { animation: marker-pulse .7s ease-out; }

@keyframes marker-pulse {
  0% { background: var(--coral-soft); }
  100% { background: #fff9f7; }
}

.inspector-content { padding: 16px 18px 40px; }
.inspector-placeholder { color: var(--muted); padding-top: 24px; }
.inspector-placeholder.compact { padding: 4px 0; margin: 0; font-size: 12px; }
.inspector-section { padding: 14px 0; border-bottom: 1px solid var(--line); }
.inspector-section:first-child { padding-top: 0; }
.inspector-section h3 { margin-bottom: 8px; }
.inspector-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; }
.kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 7px 10px; font-size: 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.status-badge {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 6px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
}
.status-badge.sfx { background: var(--coral-soft); color: #8b392d; }
.status-badge.warning { background: var(--gold-soft); color: #765109; }

.edit-controls label {
  display: grid;
  gap: 4px;
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 11px;
}
.edit-controls input, .edit-controls select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  padding: 5px 7px;
}
.edit-controls .btn { margin-bottom: 5px; }
.edit-row.two-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.take-summary { margin: 0 0 10px; color: var(--muted); font-size: 11px; }
.take-list { display: grid; gap: 9px; }
.take-card {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}
.take-card.selected { border-color: #6eb3aa; box-shadow: inset 3px 0 0 var(--teal); }
.take-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.take-card-head strong { font-size: 12px; }
.take-meta { margin: 0; color: var(--muted); font-size: 10px; }
.take-id { display: block; overflow: hidden; color: var(--quiet); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.take-card audio { width: 100%; height: 32px; }
.take-card .btn { justify-self: start; margin: 0; }
.take-listening-review { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.take-listening-review label { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.take-listening-review textarea { width: 100%; min-height: 60px; }
.take-listening-review .btn { min-height: 44px; }
.qwen-audition-dialog { box-sizing: border-box; color: var(--text); background: var(--surface, white); border: 1px solid var(--line); }
.qwen-audition-dialog > label, .qwen-audition-dialog section > label { display: grid; gap: 6px; margin: 14px 0; }
.qwen-audition-dialog select, .qwen-audition-dialog input, .qwen-audition-dialog textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.qwen-audition-dialog .btn { min-height: 44px; margin: 4px 4px 4px 0; }
.qwen-audition-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.take-error { margin: 0; color: var(--coral); font-size: 11px; overflow-wrap: anywhere; }
.take-import { margin-top: 11px; border-top: 1px solid var(--line); padding-top: 9px; }
.take-import summary { color: var(--teal); cursor: pointer; font-size: 11px; font-weight: 650; }
.take-import form { display: grid; gap: 7px; margin-top: 9px; }
.take-import label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.take-import input[type="file"], .take-import input:not([type]) { width: 100%; min-height: 30px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--text); padding: 4px 6px; }
.take-import .take-consent { display: flex; grid-auto-flow: column; justify-content: start; align-items: center; }
.take-import p { margin: 0; color: var(--muted); font-size: 10px; }
.take-import .btn { justify-self: start; }
.take-overlay { margin-top: 11px; border-top: 1px solid var(--line); padding-top: 9px; }
.take-overlay summary { color: var(--teal); cursor: pointer; font-size: 11px; font-weight: 650; }
.take-overlay form { display: grid; gap: 8px; margin-top: 9px; }
.take-overlay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.take-overlay label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.take-overlay input[type="number"] { width: 100%; min-height: 30px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--text); padding: 4px 6px; }
.take-overlay-switches { display: flex; flex-wrap: wrap; gap: 12px; }
.take-overlay-switches label { display: flex; align-items: center; gap: 5px; min-height: 30px; }
.take-overlay-switches input { accent-color: var(--teal); }
.take-overlay p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.take-overlay .btn { justify-self: start; }
.take-direction, .take-structure { margin-top: 11px; border-top: 1px solid var(--line); padding-top: 9px; }
.take-direction summary, .take-structure summary { color: var(--teal); cursor: pointer; font-size: 11px; font-weight: 650; }
.take-direction form, .take-structure form { display: grid; gap: 8px; margin-top: 9px; }
.take-direction label, .take-structure label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.take-direction textarea, .take-structure select {
  width: 100%; min-height: 34px; padding: 6px 7px; resize: vertical;
  border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--text);
}
.take-direction p, .take-structure p { margin: 7px 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.take-structure .btn { margin: 7px 6px 0 0; }
.effects-editor { display: grid; gap: 7px; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.effects-editor-head strong, .effects-editor-head span { display: block; }
.effects-editor-head strong { color: var(--text); font-size: 11px; }
.effects-editor-head span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.effects-chain { display: grid; gap: 7px; }
.processed-preview { display: grid; gap: 4px; padding: 7px; background: var(--teal-soft); }
.processed-preview span { color: #075c54; font-size: 9px; }
.processed-preview audio { width: 100%; height: 32px; }
.effects-empty { margin: 0; padding: 7px; background: var(--surface-muted); color: var(--muted); font-size: 10px; }
.effect-row { display: grid; gap: 7px; padding: 8px; border: 1px solid var(--line); background: var(--surface); }
.effect-row.invalid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-color: var(--coral); }
.effect-row header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.effect-row header strong, .effect-row header span { display: block; }
.effect-row header strong { color: var(--text); font-size: 11px; text-transform: capitalize; }
.effect-row header span { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.effect-bypass { display: flex !important; grid-auto-flow: column; flex: 0 0 auto; align-items: center; gap: 4px !important; min-height: 24px; }
.effect-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.effect-fields input, .effect-fields select, .effects-add select { width: 100%; min-height: 28px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--text); padding: 3px 5px; }
.effect-actions, .effects-add { display: flex; flex-wrap: wrap; gap: 5px; }
.effects-add select { width: auto; min-width: 150px; }
.effects-add .btn, .effect-actions .btn { margin: 0; }
.take-history { margin-top: 11px; border-top: 1px solid var(--line); padding-top: 9px; }
.take-history summary { color: var(--teal); cursor: pointer; font-size: 11px; font-weight: 650; }
.take-history-list { display: grid; gap: 7px; margin-top: 8px; }
.take-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.take-history-row strong, .take-history-row span { display: block; }
.take-history-row strong { font-size: 11px; }
.take-history-row span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.take-history-row .btn { margin: 0; }

.model-page { width: min(1280px, 100%); }
.model-fit-wrap, .model-settings-wrap { margin-top: 20px; overflow-x: auto; }
.model-fit-table, .model-settings { width: 100%; min-width: 820px; border-collapse: collapse; background: var(--surface); }
.model-fit-table th, .model-fit-table td, .model-settings th, .model-settings td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: center; font-size: 11px; }
.model-fit-table thead th, .model-settings thead th { color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.model-fit-table tbody th { text-align: left; }
.model-fit-table tbody th button { width: 100%; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.model-fit-table tbody th strong, .model-fit-table tbody th code { display: block; }
.model-fit-table tbody th code { margin-top: 2px; color: var(--quiet); font-size: 9px; }
.model-fit-table tr.selected { background: var(--teal-soft); }
.model-feature.supported { color: #075c54; font-weight: 650; }
.model-feature.unsupported { color: var(--quiet); }
.model-detail { margin-top: 18px; padding: 18px 0; border-top: 1px solid var(--line-strong); }
.model-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.model-detail-head h2 { margin-bottom: 4px; }
.model-detail-head p { max-width: 720px; margin: 0; color: var(--muted); }
.model-facts { display: grid; grid-template-columns: 140px minmax(0, 1fr) 140px minmax(0, 1fr); gap: 7px 10px; margin: 18px 0; font-size: 11px; }
.model-facts dt { color: var(--muted); }
.model-facts dd { margin: 0; overflow-wrap: anywhere; }
.model-settings-wrap { margin-top: 8px; }
.model-settings { min-width: 620px; }
.model-settings th:first-child { text-align: left; }
.model-runtime-note { margin-top: 10px; color: var(--muted); font-size: 11px; }
.model-runtime-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 16px; }
.runtime-state { min-height: 92px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.runtime-state span, .runtime-state strong, .runtime-state small { display: block; }
.runtime-state span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.runtime-state strong { margin-top: 3px; font-size: 13px; }
.runtime-state small { margin-top: 6px; color: var(--quiet); line-height: 1.35; }
.runtime-ready { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); }
.runtime-missing { border-color: color-mix(in srgb, var(--coral) 55%, var(--line)); }
.model-download-warning { padding: 10px 12px; border-left: 3px solid var(--gold); background: var(--gold-soft); color: var(--text); font-size: 11px; }

.actions-drawer, .flow-drawer {
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 54px;
  z-index: 45;
  width: min(420px, 94vw);
  overflow: auto;
  border-left: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: -12px 0 30px rgb(0 0 0 / 12%);
}
.flow-drawer { width: min(460px, 96vw); }
.actions-drawer-head, .flow-drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.actions-drawer-head h2, .flow-drawer-head h2 { margin: 0; }
.action-row { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.action-row strong { display: block; margin-bottom: 4px; }
.action-row p { margin-bottom: 9px; color: var(--muted); font-size: 12px; }

.flow-drawer-body { padding: 14px 16px 28px; }
.flow-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.flow-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}
.flow-field input, .flow-field select {
  min-width: 0;
  min-height: 34px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}
.flow-switch, .flow-force {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}
.flow-switch input, .flow-force input { accent-color: var(--teal); }
.flow-command-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.flow-force { margin-left: auto; }
.flow-requirements { margin-top: 14px; border-top: 1px solid var(--line); }
.preflight-summary { padding: 10px 0; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.preflight-summary.ok, .preflight-summary.ready_with_unknowns { color: #276b54; }
.preflight-summary.fail { color: #9a352b; }
.requirement-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.requirement-state {
  align-self: start;
  width: 58px;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
.requirement-row.ok .requirement-state { background: #e3f1e9; color: #276b54; }
.requirement-row.fail .requirement-state { background: #f8e6e2; color: #9a352b; }
.requirement-row.unknown .requirement-state { background: var(--gold-soft); color: #765109; }
.requirement-row strong { display: block; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.requirement-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.flow-job { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.job-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; text-transform: capitalize; }
.job-head span { color: var(--muted); font-size: 11px; }
.flow-job progress { display: block; width: 100%; height: 8px; accent-color: var(--teal); }
.job-message { margin: 8px 0; color: var(--muted); font-size: 12px; }
.job-error { padding: 8px; border-left: 3px solid #b5473c; background: #f8e6e2; color: #7d3026; font-size: 12px; overflow-wrap: anywhere; }
.job-log { max-height: 170px; margin: 10px 0 0; padding: 0; overflow: auto; list-style: none; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.job-log li { padding: 4px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }

.job-center-page { width: min(1080px, 100%); }
.job-center-toolbar { align-items: end; }
.job-center-toolbar label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.job-center-toolbar select {
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  padding: 5px 28px 5px 8px;
}
.job-center-list { display: grid; gap: 10px; margin-top: 20px; }
.job-card {
  display: grid;
  gap: 9px;
  padding: 13px 15px 11px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
.job-card.running, .job-card.queued, .job-card.cancelling { border-left-color: var(--teal); }
.job-card.failed, .job-card.interrupted { border-left-color: var(--coral); }
.job-card.cancelled { border-left-color: var(--gold); }
.job-card.completed { border-left-color: #43865f; }
.job-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.job-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; text-transform: capitalize; }
.job-card-title strong { font-size: 14px; }
.job-card-project { margin-top: 3px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.job-card-project code { color: inherit; }
.job-card-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.job-status.running, .job-status.queued, .job-status.cancelling { background: var(--teal-soft); color: #175f58; }
.job-status.completed { background: #e3f1e9; color: #276b54; }
.job-status.failed, .job-status.interrupted { background: var(--coral-soft); color: #8b392d; }
.job-status.cancelled { background: var(--gold-soft); color: #765109; }
.job-progress-row { display: grid; grid-template-columns: minmax(100px, 1fr) auto; align-items: center; gap: 10px; }
.job-progress-row progress { width: 100%; height: 8px; accent-color: var(--teal); }
.job-progress-row span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.job-card .job-message { margin: 0; }
.job-waterfall {
  display: flex;
  min-height: 34px;
  gap: 2px;
  overflow-x: auto;
  border-radius: 4px;
  background: var(--surface-muted);
  padding: 3px;
}
.job-waterfall-stage {
  flex: max(1, var(--stage-weight)) 1 58px;
  min-width: 58px;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 4px 6px;
  border-radius: 3px;
  background: #dfe7e5;
  color: #38504d;
  text-transform: capitalize;
}
.job-waterfall-stage strong { overflow: hidden; font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.job-waterfall-stage small { font-size: 8px; opacity: 0.75; }
.job-waterfall-stage.stage-queued { background: #e9eceb; color: var(--muted); }
.job-waterfall-stage.stage-starting,
.job-waterfall-stage.stage-preflight,
.job-waterfall-stage.stage-loading-model { background: var(--gold-soft); color: #765109; }
.job-waterfall-stage.stage-analyzing,
.job-waterfall-stage.stage-synthesizing,
.job-waterfall-stage.stage-audio-generation { background: var(--teal-soft); color: #175f58; }
.job-waterfall-stage.stage-assembling,
.job-waterfall-stage.stage-quality-checking,
.job-waterfall-stage.stage-audio-quality-control,
.job-waterfall-stage.stage-mastering,
.job-waterfall-stage.stage-exporting { background: #e4e8f4; color: #45517d; }
.job-waterfall-stage.stage-completed { background: #e3f1e9; color: #276b54; }
.job-waterfall-stage.stage-failed,
.job-waterfall-stage.stage-interrupted { background: var(--coral-soft); color: #8b392d; }
.job-waterfall-stage.stage-cancelling,
.job-waterfall-stage.stage-cancelled { background: #f1e8d2; color: #765109; }
.job-card-meta { margin: 0; color: var(--quiet); font-size: 10px; overflow-wrap: anywhere; }
.job-details { border-top: 1px solid var(--line); padding-top: 7px; }
.job-details summary { color: var(--muted); cursor: pointer; font-size: 11px; }
.job-details summary span { color: var(--quiet); }
.job-center-log { max-height: 210px; }
.job-center-log time { display: inline-block; min-width: 145px; margin-right: 8px; color: var(--quiet); }
.job-center-muted { margin: 7px 0 0; color: var(--quiet); font-size: 11px; }
.job-id { color: var(--quiet); font-size: 9px; overflow-wrap: anywhere; }

.audio-warning {
  min-height: 30px;
  padding: 6px 16px;
  border-top: 1px solid #dfc36f;
  background: var(--gold-soft);
  color: #6f4d08;
  font-size: 12px;
}

.player-bar {
  min-height: 54px;
  display: grid;
  grid-template-columns: auto auto 98px minmax(160px, 1fr) auto auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--line-strong);
  background: #f8f9f7;
}
.player-bar audio { display: none; }
.player-time { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); white-space: nowrap; }
.player-seek { width: 100%; accent-color: var(--teal); }
.player-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.player-toggle input { accent-color: var(--teal); }

.speaker-workspace {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  min-height: 640px;
  border-top: 1px solid var(--line-strong);
  background: var(--surface);
}
.speaker-list { border-right: 1px solid var(--line); max-height: 70vh; overflow: auto; }
.speaker-list-row {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.speaker-list-row:hover, .speaker-list-row.active { background: var(--teal-soft); }
.speaker-list-row strong { display: block; }
.speaker-list-row span { color: var(--muted); font-size: 11px; }
.speaker-detail { padding: 22px 26px 40px; min-width: 0; }
.speaker-detail-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.speaker-create { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto; align-items: end; gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid var(--line); background: var(--surface); }
.speaker-create label, .reference-import-grid label { display: grid; gap: 3px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.speaker-create input, .reference-import-grid input, .reference-import-grid textarea { width: 100%; min-height: 36px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--text); padding: 6px 8px; }
.speaker-create [role="alert"], .speaker-detail [data-speaker-error] { grid-column: 1 / -1; color: #8b392d; font-size: 10px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.detail-band { padding: 18px 0; border-bottom: 1px solid var(--line); }
.detail-band h2 { margin-bottom: 12px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th, .data-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table th { color: var(--muted); font-weight: 600; }
.sample-row { display: grid; grid-template-columns: 150px minmax(180px, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sample-row.unavailable { color: var(--quiet); }
.sample-row audio { width: 100%; height: 34px; }
.cast-reference-row { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(220px, 380px); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.cast-reference-row strong, .cast-reference-row span { display: block; }
.cast-reference-row span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.cast-reference-row p { margin: 5px 0 0; color: var(--text); font-size: 10px; }
.cast-reference-row audio { width: 100%; height: 34px; }
.cast-reference-import { margin-top: 12px; }
.cast-reference-import summary { color: var(--teal); cursor: pointer; font-size: 11px; }
.cast-reference-import form { margin-top: 10px; }
.reference-import-grid { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 8px; }
.reference-import-grid label:nth-child(2) { grid-column: span 2; }
.reference-import-grid textarea { min-height: 72px; resize: vertical; }
.cast-reference-import form > p { color: var(--muted); font-size: 10px; }

.delivery-center { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.delivery-center .ribbon-detail-head > div:first-child strong,
.delivery-center .ribbon-detail-head > div:first-child span { display: block; }
.delivery-center .ribbon-detail-head > div:first-child span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.delivery-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.mastered-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-top: 12px; }
.mastered-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-left: 4px solid var(--teal); background: var(--surface); }
.mastered-card.stale { border-left-color: #a66b31; background: #fffbf4; }
.mastered-card-head, .published-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mastered-card-head strong, .mastered-card-head span, .published-row strong, .published-row span { display: block; }
.mastered-card-head span, .published-row span { margin-top: 2px; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.mastered-card audio { width: 100%; height: 36px; margin: 9px 0; }
.mastered-card > p { margin: 8px 0; color: var(--muted); font-size: 10px; }
.mastered-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mastered-metrics span { padding: 8px; border: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.mastered-metrics strong { display: block; color: var(--text); font-size: 12px; }
.published-list { margin-top: 16px; }
.published-list h3 { margin-bottom: 7px; }
.published-row { padding: 9px 0; border-top: 1px solid var(--line); }

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  max-width: min(420px, calc(100vw - 40px));
  padding: 11px 14px;
  border: 1px solid #a44234;
  border-radius: var(--radius);
  background: #fff7f5;
  color: #7d3026;
  box-shadow: 0 8px 24px rgb(24 28 25 / 12%);
}
.toast[role="status"] { border-color: var(--teal); background: var(--teal-soft); color: #075c54; }

@media (max-width: 980px) {
  .app-header { grid-template-columns: auto 1fr auto; padding: 0 16px; }
  .project-workspace { grid-template-columns: 220px minmax(340px, 1fr); }
  .inspector-pane { position: fixed; inset: var(--header-height) 0 0 auto; width: min(390px, 92vw); z-index: 30; box-shadow: -12px 0 30px rgb(0 0 0 / 12%); }
  .inspector-pane[hidden] { display: none; }
  .project-row { grid-template-columns: minmax(220px, 1.5fr) minmax(200px, 1fr) 100px; }
  .project-updated { display: none; }
}

@media (max-width: 720px) {
  .app-header { grid-template-columns: auto 1fr; gap: 8px; padding: 0 10px; }
  .brand { font-size: 15px; }
  .brand > span:last-child { display: none; }
  .header-status { display: none; }
  .primary-nav { justify-content: flex-end; gap: 10px; font-size: 12px; }
  .page { padding: 20px 14px 40px; }
  .page-heading { align-items: center; }
  .page-actions { flex-direction: column; }
  .import-grid { grid-template-columns: 1fr 1fr; }
  .import-grid label.wide { grid-column: 1 / -1; }
  .draft-row { grid-template-columns: 1fr; align-items: stretch; }
  h1 { font-size: 22px; }
  .project-row { grid-template-columns: 1fr 92px; gap: 10px; }
  .project-row .phase-list { grid-column: 1 / -1; }
  .project-head { padding: 14px; }
  .production-overview, .quality-panel, .cast-panel, .soundstage-panel { padding: 12px 14px 16px; }
  .soundstage-columns, .soundstage-evidence > div { grid-template-columns: 1fr; }
  .soundstage-edit, .soundstage-edit form { display: grid; align-items: stretch; width: 100%; }
  .soundstage-edit select, .soundstage-edit .btn { width: 100%; max-width: none; }
  .cast-summary { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
  .cast-package-tools { grid-template-columns: 1fr; }
  .cast-package-actions { justify-content: flex-start; }
  .cast-package-status { grid-column: auto; }
  .cast-assignment-row, .cast-approval-fields { grid-template-columns: 1fr; }
  .cast-assignment-row .btn { width: 100%; }
  .quality-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-finding { grid-template-columns: auto minmax(0, 1fr); }
  .quality-finding .btn { grid-column: 2; justify-self: start; }
  .project-title-row { display: block; }
  .project-title-row .count-block { margin-top: 8px; }
  .project-head-actions { flex-wrap: wrap; gap: 8px; }
  .mobile-pane-tabs { display: flex; }
  .mobile-pane-tabs .segmented { width: 100%; }
  .project-workspace { display: block; height: calc(100vh - var(--header-height) - 190px); min-height: 430px; }
  .workspace-pane { height: 100%; border-right: 0; }
  .workspace-pane:not(.mobile-active) { display: none; }
  .inspector-pane { position: static; width: auto; box-shadow: none; }
  .event-row { grid-template-columns: 80px minmax(0, 1fr); }
  .event-meta { grid-column: 2; text-align: left; }
  .speaker-workspace { display: block; min-height: 0; }
  .speaker-create, .reference-import-grid { grid-template-columns: 1fr; }
  .reference-import-grid label:nth-child(2) { grid-column: auto; }
  .speaker-list { max-height: 36vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .speaker-detail { padding: 18px 14px 40px; }
  .detail-grid { grid-template-columns: 1fr; gap: 0; }
  .sample-row { grid-template-columns: 1fr; }
  .cast-reference-row { grid-template-columns: 1fr; }
  .delivery-center .ribbon-detail-head { display: grid; gap: 10px; }
  .mastered-grid { grid-template-columns: 1fr; }
  .published-row { align-items: flex-start; }
  .player-bar { grid-template-columns: auto auto 1fr auto; gap: 7px; }
  .player-time { text-align: right; }
  .player-seek { grid-column: 1 / -1; grid-row: 2; }
  .player-toggle { display: none; }
  #player-mode { justify-self: end; }
  .actions-drawer, .flow-drawer { width: 100vw; bottom: 94px; }
  .flow-form { grid-template-columns: 1fr; }
  .job-center-page .page-heading { display: block; }
  .job-center-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: 14px; }
  .job-center-toolbar .btn { align-self: end; }
  .job-card { padding: 12px; }
  .job-card-head { display: grid; gap: 9px; }
  .job-card-actions { justify-content: flex-start; }
  .job-progress-row { grid-template-columns: 1fr; gap: 4px; }
  .job-progress-row span { white-space: normal; }
  .job-center-log time { display: block; min-width: 0; margin: 0 0 2px; }
  .model-facts { grid-template-columns: 110px minmax(0, 1fr); }
  .model-runtime-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Coarse-pointer users get dependable tap targets without inflating desktop UI. */
@media (pointer: coarse) {
  .btn,
  .segmented button,
  .matrix-status,
  .quality-cell,
  .ribbon-event,
  .primary-nav a,
  details > summary {
    min-height: 44px;
  }

  details > summary {
    display: flex;
    align-items: center;
  }

  input[type="checkbox"], input[type="radio"] {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .loading-track span {
    width: 100%;
    animation: none;
  }
}
/* Authenticated production shell */
.header-account { display: flex; align-items: center; gap: .75rem; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--surface-subtle, #f5f3ef); }
.login-card { width: min(100%, 28rem); padding: 2rem; border: 1px solid var(--border, #d8d4cc); border-radius: 1rem; background: var(--surface, #fff); box-shadow: 0 1rem 3rem rgba(35, 31, 26, .1); }
.login-brand { margin-bottom: 1.5rem; }
.login-card form { display: grid; gap: .75rem; margin-top: 1.5rem; }
.login-card input { width: 100%; min-height: 2.75rem; padding: .65rem .75rem; border: 1px solid var(--border, #b8b2a8); border-radius: .5rem; font: inherit; }
.login-card button { margin-top: .5rem; }
.login-error { color: var(--danger, #9b1c1c); margin: .25rem 0 0; }

.account-page { max-width: 940px; }
.account-card { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.account-card h2 { margin-bottom: 8px; }
.account-help { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.account-form { display: grid; gap: 10px; max-width: 420px; }
.account-form label, .account-reset label { display: grid; gap: 4px; font-weight: 600; }
.account-form input, .account-reset input { width: 100%; min-width: 0; min-height: 40px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 4px; }
.account-form .btn { justify-self: start; }
.account-user { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.account-user h3 { color: var(--text); font-size: 15px; text-transform: none; margin: 0 0 3px; overflow-wrap: anywhere; }
.account-user p { color: var(--muted); font-size: 12px; margin: 0; }
.account-user-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: start; }
.account-reset { grid-column: 1 / -1; max-width: 420px; display: grid; gap: 10px; padding: 12px; background: var(--surface-muted); }
.reviewer-activity { min-width: 0; }
.activity-heading, .activity-toolbar, .activity-event-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.activity-heading { margin-bottom: 12px; }
.activity-heading h2 { margin: 0; }
.activity-toolbar { align-items: end; margin: 18px 0 10px; }
.activity-toolbar label { display: grid; gap: 4px; font-weight: 600; min-width: 0; max-width: 100%; }
.activity-toolbar select { min-height: 44px; max-width: 100%; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); padding: 8px; }
.activity-toolbar p { margin: 0; }
.reviewer-activity h3 { margin: 22px 0 10px; }
.activity-status { min-height: 20px; color: var(--muted); font-size: 12px; }
.activity-error, .activity-unconfirmed { padding: 10px; background: var(--gold-soft); color: #73500a; border-radius: 4px; overflow-wrap: anywhere; }
.activity-error { background: var(--coral-soft); color: #7d3026; }
.activity-accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.activity-account { min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 14px; overflow-wrap: anywhere; }
.activity-account h4 { margin: 0 0 4px; font-size: 15px; }
.activity-facts { display: grid; gap: 12px; margin: 0; font-size: 12px; }
.activity-facts dt, .activity-event-facts dt { font-weight: 600; }
.activity-facts dd, .activity-event-facts dd { margin: 0; overflow-wrap: anywhere; }
.activity-events { list-style: none; padding: 0; margin: 0 0 16px; }
.activity-event { padding: 16px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.activity-event-heading { justify-content: flex-start; }
.activity-event-meta { color: var(--muted); font-size: 12px; margin: 6px 0 12px; }
.activity-event-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; font-size: 12px; margin: 0; }
.activity-outcome { padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.activity-outcome-success { background: var(--teal-soft); color: #075c54; }
.activity-outcome-pending { background: var(--gold-soft); color: #73500a; }
.activity-outcome-failed { background: var(--coral-soft); color: #7d3026; }
.activity-empty { color: var(--muted); }
.reviewer-activity .btn { min-height: 44px; }
.reviewer-activity [hidden] { display: none; }
@media (max-width: 720px) {
  .app-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .primary-nav { min-width: 0; overflow-x: auto; white-space: nowrap; }
  .account-user { grid-template-columns: 1fr; }
  .activity-accounts, .activity-event-facts { grid-template-columns: 1fr; }
}