/* VO Handoff: reference-led neutral surfaces and precise, quiet controls. */
:root {
  color-scheme: light;
  --bg: #eeeef1; --paper: #fff; --ink: #1b1b20; --muted: #696971;
  --line: #e7e7ec; --accent: #1b1b20; --dark: #07070a; --rail: #f0eef4;
  --soft: #e2f3eb; --success: #28634c; --amber: #805915; --warn: #fff2d6;
  --danger: #a83d47; --danger-soft: #fbe8eb; --violet: #65558a; --violet-soft: #eeebf8;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display:flex; align-items:stretch; justify-content:center; padding:20px; background:var(--bg); color:var(--ink); font:14px/1.55 'Segoe UI','Microsoft Yahei',sans-serif; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; }
.app-shell { display:flex; flex-direction:column; flex:1; max-width:1720px; min-width:0; min-height:0; background:white; border:1px solid #dfdfe5; border-radius:22px; overflow:hidden; box-shadow:0 6px 32px #17171d06,0 1px 2px #17171d04; }
button,input,textarea,select { font:inherit; }
button,a,label { touch-action:manipulation; }
button { cursor:pointer; color:inherit; }
button,input,select,textarea,a,summary { -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.42; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
a { color:var(--ink); text-decoration:none; }
svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
[hidden] { display:none!important; }
h1,h2,h3,p { margin:0; }
h2 { font-size:14px; font-weight:600; letter-spacing:-.15px; }
h3 { font-size:15px; font-weight:600; }
.muted,.quiet { color:var(--muted); }
.eyebrow { font-size:12px; font-weight:500; color:var(--muted); }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.title-with-icon,.card-label,.summary-label { display:inline-flex; align-items:center; gap:8px; }
.title-with-icon svg { width:17px; height:17px; color:#575761; }
.counter { border:1px solid #e1e0e8; border-radius:7px; padding:1px 7px; background:#ffffffa6; color:#66666e; font-size:12px; font-weight:500; white-space:nowrap; }

/* Shared controls. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:8px 14px; border:1px solid transparent; border-radius:10px; background:transparent; font-size:13px; font-weight:500; white-space:nowrap; transition:background .15s,border-color .15s,box-shadow .15s; }
.btn.primary { background:var(--ink); color:white; border-color:var(--ink); border-radius:999px; padding-inline:18px; box-shadow:0 2px 3px #1111180d; }
.btn.primary:hover:not(:disabled) { background:#33333b; border-color:#33333b; }
.btn.secondary { background:white; border-color:#dfdfe6; box-shadow:0 1px 2px #18181e03; }
.btn.secondary:hover:not(:disabled) { background:#f5f5f8; border-color:#c7c7d0; }
.btn.ghost { color:#55555e; }
label.btn { cursor:pointer; }
label.btn:focus-within { outline:2px solid var(--violet); outline-offset:3px; }
.btn.ghost:hover:not(:disabled) { background:#f2f2f5; color:var(--ink); }
.btn.small { min-height:33px; padding:5px 10px; font-size:12px; }
.btn:not(:disabled):active,.icon-btn:not(:disabled):active { transform:translateY(1px); }
.full { width:100%; }
.text-btn { border:0; background:none; color:#4a4a55; font-size:13px; font-weight:500; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:5px 0; }
.text-btn:hover:not(:disabled) { color:var(--ink); }
.text-btn.small { font-size:12px; }
.text-btn.quiet { color:var(--muted); }
.text-btn svg { width:15px; height:15px; }
.icon-btn { display:grid; place-items:center; width:34px; height:34px; background:white; border:1px solid #e2e2e9; border-radius:9px; flex-shrink:0; }
.icon-btn:hover:not(:disabled) { background:#f1f1f5; border-color:#cacad4; }

/* Frame and delivery overview. */
.app-header { display:flex; align-items:center; gap:22px; height:76px; min-height:76px; padding:0 24px; background:white; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; background:var(--ink); color:white; border-radius:11px; }
.brand-mark svg { width:22px; height:22px; stroke-width:1.8; }
.brand strong { display:block; font-size:17px; font-weight:600; letter-spacing:-.5px; line-height:1.3; }
.brand span:not(.brand-mark) { display:block; margin-top:3px; font-size:11px; color:var(--muted); }
.header-divider { height:28px; width:1px; background:var(--line); flex-shrink:0; }
.project-heading { min-width:0; max-width:330px; }
.project-heading strong { display:block; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-heading .eyebrow { display:block; margin-bottom:2px; font-size:11px; }
.header-actions { display:flex; align-items:center; gap:7px; margin-left:auto; }
.batch-bar { display:grid; grid-template-columns:minmax(160px,1fr) 220px auto minmax(150px,auto); align-items:center; gap:24px; padding:18px 24px; min-height:88px; border-bottom:1px solid var(--line); background:#fdfdfe; }
.batch-title { min-width:0; }
.batch-title .eyebrow { display:block; font-size:11px; }
.batch-title .text-btn { font-size:14px; color:var(--ink); gap:8px; max-width:100%; padding-bottom:0; }
#batch-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.batch-title .text-btn svg { color:var(--muted); width:13px; }
.progress-block { min-width:0; }
.progress-label { display:flex; justify-content:space-between; gap:8px; font-size:12px; margin-bottom:9px; }
#review-progress { min-width:0; overflow-wrap:anywhere; }
#review-percent { flex-shrink:0; }
.progress-label .muted { color:#696973; }
.progress-track { height:5px; background:#e9e9ee; border-radius:99px; overflow:hidden; }
#progress-fill { height:100%; width:0; background:#25252b; border-radius:inherit; transition:width .2s; }
.batch-outcomes { display:flex; align-items:center; gap:7px; }
.outcome { display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:6px 9px; border-radius:8px; white-space:nowrap; color:#575762; background:#f0f0f5; }
.outcome b { font-weight:600; }
.outcome-adopted { color:var(--success); background:var(--soft); }
.outcome-followup { color:var(--amber); background:var(--warn); }
.system-status { display:flex; align-items:flex-end; flex-direction:column; gap:5px; }
.connection { display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:#57575f; font-size:12px; padding:0; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#9b9ba6; }
.status-dot.online { background:#4b9473; }
.save-state { font-size:11px; color:var(--muted); }
.save-state.error { color:var(--danger); }

/* Queue. */
.workbench { display:grid; grid-template-columns:264px minmax(0,1fr); flex:1; min-height:0; }
.queue-panel { display:flex; flex-direction:column; min-height:0; background:var(--rail); border-right:1px solid #e5e2eb; }
.queue-tools { padding:23px 18px 14px; }
.search-box { display:flex; align-items:center; gap:8px; padding:10px 11px; min-height:40px; border:1px solid #e1dee8; background:#ffffffb3; border-radius:10px; }
.search-box:focus-within { border-color:#aca4bf; box-shadow:0 0 0 3px #77708e12; background:white; }
.search-box svg { width:15px; height:15px; color:#7a7584; }
.search-box input { width:100%; min-width:0; border:0; background:none; font-size:12px; padding:0; color:var(--ink); }
.search-box input:focus { outline:0; }
.search-box input::placeholder { color:#73707d; }
kbd { font:11px/1.5 'Segoe UI',sans-serif; border:1px solid #dfdce6; background:#faf9fc; border-radius:4px; padding:0 5px; color:#716d7b; }
.queue-tools>select { margin-top:10px; background-color:#ffffff73; border-color:#e1dee8; font-size:12px; min-height:38px; }
.queue-filters { display:flex; flex-wrap:wrap; gap:4px; margin-top:13px; }
.queue-filters button { border:1px solid transparent; border-radius:99px; background:transparent; color:#66616f; font-size:12px; min-height:30px; padding:3px 9px; transition:background .15s; }
.queue-filters button:hover { background:#e6e2ed; }
.queue-filters button.active { background:var(--ink); color:white; border-color:var(--ink); font-weight:500; box-shadow:0 2px 3px #16161c0a; }
.line-list { min-height:0; flex:1; overflow:auto; padding:0 12px 18px; scrollbar-width:thin; scrollbar-color:#c9c4d3 transparent; }
.line-item { display:block; width:100%; position:relative; text-align:left; border:1px solid transparent; background:transparent; border-radius:13px; padding:14px 13px; margin-bottom:7px; transition:background .15s,border-color .15s; }
.line-item:hover { background:#e9e5f0; }
.line-item.active { background:white; border-color:#ded9e7; box-shadow:0 2px 5px #37303f07; }
.line-item.active::before { content:''; width:3px; position:absolute; top:18px; bottom:18px; left:-1px; background:var(--ink); border-radius:0 3px 3px 0; }
.line-item-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.line-item strong { font:11px/1.55 'Cascadia Code','Consolas',monospace; color:#67616f; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.line-item .role { font-size:12px; color:#706978; max-width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.line-excerpt { font-size:13px; color:#2c2932; margin:8px 0 9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.line-state { display:flex; align-items:center; gap:6px; font-size:11px; color:#716a7c; line-height:1.6; }
.line-state::before { content:''; width:5px; height:5px; border-radius:50%; background:#9991a7; flex-shrink:0; }
.line-state.success { color:var(--success); }
.line-state.success::before { background:#4b9473; }
.line-state.warning { color:var(--amber); }
.line-state.warning::before { background:#b58b3e; }
.line-state.danger { color:var(--danger); }
.line-state.danger::before { background:#ba5660; }
.line-state[data-state=changed],.line-state[data-state=returned] { color:var(--violet); }
.line-state[data-state=changed]::before,.line-state[data-state=returned]::before { background:#8e7cad; }
.list-empty { padding:28px 12px; color:var(--muted); font-size:13px; line-height:1.8; text-align:center; }
.queue-footer { padding:16px 18px; border-top:1px solid #e2dfea; background:#eeebf2; }
.queue-footer .btn { min-height:38px; background:#ffffffc9; }
.queue-footer .text-btn { margin-top:9px; font-size:12px; justify-content:flex-start; padding:4px 8px; }
.queue-footer .text-btn.full:hover { background:#e5e1ed; border-radius:7px; }
.queue-footer .counter { margin-left:auto; background:white; }

/* Review workspace. */
.review-stage { display:flex; flex-direction:column; min-width:0; min-height:0; background:white; }
.review-top { display:flex; justify-content:space-between; align-items:center; gap:18px; min-height:94px; padding:20px 27px; border-bottom:1px solid var(--line); }
.review-top>div:first-child { min-width:0; flex:1; }
.review-breadcrumb { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); min-width:0; }
.review-breadcrumb>span:first-child,.crumb-divider { flex-shrink:0; }
#review-scene { min-width:0; overflow-wrap:anywhere; }
.review-breadcrumb>span:first-child { color:#46464f; }
.crumb-divider { color:#b4b4bc; }
.line-heading { display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap; min-width:0; }
#review-id { min-width:0; overflow-wrap:anywhere; }
h1 { font-size:23px; font-weight:600; letter-spacing:-.6px; line-height:1.3; }
.speaker { color:#5e5e68; background:#f7f7fa; border:1px solid #e7e7ed; font-size:12px; padding:2px 9px; border-radius:7px; max-width:100%; overflow-wrap:anywhere; }
.review-top-right { display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:5px 10px; border-radius:99px; background:#f0f0f4; color:#64646e; line-height:1.6; }
.badge::before { content:''; width:5px; height:5px; background:currentColor; border-radius:50%; flex-shrink:0; }
.badge.success { background:var(--soft); color:var(--success); }
.badge.warning { background:var(--warn); color:var(--amber); }
.badge.danger { background:var(--danger-soft); color:var(--danger); }
.badge[data-state=changed],.badge[data-state=returned] { background:var(--violet-soft); color:var(--violet); }
.review-body { display:grid; grid-template-columns:minmax(0,1fr) 316px; flex:1; min-height:0; }
.comparison-panel { min-width:0; overflow:auto; padding:24px 27px; scrollbar-width:thin; scrollbar-color:#ccccd5 transparent; }
.audio-panel { min-width:0; overflow:auto; background:#fafafd; border-left:1px solid var(--line); padding:24px 21px; scrollbar-width:thin; scrollbar-color:#ccccd5 transparent; }
.script-card,.transcript-card { padding:19px 20px; margin-bottom:17px; border:1px solid var(--line); border-radius:15px; background:white; }
.script-card { border-color:#e4dfee; background:#f4f1fa; }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:15px; }
.card-heading .eyebrow { color:#46414e; font-size:13px; font-weight:500; }
.card-label svg { width:17px; height:17px; color:#726687; }
.transcript-card .card-label svg { color:#73737e; }
.card-heading .text-btn { color:#666071; border-radius:6px; padding:3px 5px; }
.card-heading .text-btn:hover:not(:disabled) { background:#e9e4f2; }
.transcript-card .card-heading .text-btn:hover:not(:disabled) { background:#f0f0f5; }
.dialogue-text { font-size:22px; font-weight:500; line-height:1.8; color:#282332; overflow-wrap:anywhere; }
.change-indicator { display:inline-flex; align-items:center; background:#e7e0f3; border-radius:7px; padding:4px 8px; font-size:12px; color:#635076; margin-top:15px; line-height:1.65; }
.change-indicator:empty { display:none; }
.transcript-input { width:100%; min-height:94px; padding:0; border:0; background:none; font-size:19px; line-height:1.8; color:var(--ink); resize:vertical; border-radius:2px; }
.transcript-input:focus { outline:0; box-shadow:0 2px 0 #bbb1ce; }
.transcript-input:focus-visible { outline:2px solid var(--violet); outline-offset:5px; }
.transcript-input:disabled { display:none; }
.transcript-input::placeholder { color:#86828e; font-size:16px; }
.transcript-empty { font-size:14px; color:#77717f; min-height:85px; padding-top:5px; line-height:1.8; }
.meta-note { color:var(--muted); font-size:12px; line-height:1.7; margin-top:9px; overflow-wrap:anywhere; }
#transcript-origin { font-size:11px; }
.diff-panel:not(:empty) { border-top:1px solid var(--line); margin-top:17px; padding-top:14px; }
.diff-head { display:flex; align-items:flex-start; gap:7px; color:var(--amber); font-size:12px; margin-bottom:10px; line-height:1.7; }
.diff-head.match { color:var(--success); }
.diff-row { display:grid; grid-template-columns:45px 1fr; gap:10px; margin:8px 0; font-size:14px; line-height:1.85; }
.diff-row small { font-size:11px; color:var(--muted); padding-top:3px; }
.diff-row span { overflow-wrap:anywhere; }
mark { color:#785619; background:#fff0cb; padding:1px 2px; border-radius:3px; }
.comparison-hint { display:flex; align-items:flex-start; gap:7px; font-size:12px; color:#72717b; line-height:1.75; margin:2px 0 23px; }
.hint-dot { background:#b2a9c2; width:5px; height:5px; border-radius:50%; margin-top:8px; flex-shrink:0; }
.detail-card { border:1px solid var(--line); border-radius:12px; background:white; padding:0 15px; margin-top:10px; font-size:13px; }
.detail-card summary { display:flex; align-items:center; gap:8px; padding:13px 0; cursor:pointer; list-style:none; color:#54525e; }
.detail-card summary::-webkit-details-marker { display:none; }
.detail-card summary::after { content:''; width:6px; height:6px; border-right:1.5px solid #888490; border-bottom:1.5px solid #888490; transform:rotate(45deg); margin:-4px 1px 0 4px; flex-shrink:0; }
.detail-card[open] summary::after { transform:rotate(225deg); margin-top:2px; }
.detail-card summary>span[id] { font-size:11px; color:#797380; margin-left:auto; }
.summary-label svg { width:16px; height:16px; color:#7f7888; }
.detail-content { border-top:1px solid var(--line); padding:15px 0; }
.history-text { color:#494450; font-size:15px; line-height:1.85; margin-top:10px; overflow-wrap:anywhere; }
.context-line { font-size:12px; color:#736e7a; padding:10px 0; border-bottom:1px solid #efedf3; line-height:1.8; }
.context-line b { color:#504758; font-weight:500; margin-right:10px; }
.evidence { display:block; width:100%; max-width:480px; margin-top:18px; border:1px solid #e6e2ec; border-radius:11px; }
.event { padding:10px 0; border-bottom:1px solid #efedf3; color:#5c5667; font-size:12px; }
.event:last-child { border-bottom:0; }
.event small { display:block; font-size:11px; color:#7d7786; margin-top:4px; }
.ticket-banner { padding:14px 16px; border:1px solid #f0e0b7; border-radius:12px; background:var(--warn); color:#7c5d20; font-size:12px; line-height:1.8; margin-bottom:18px; }
.ticket-banner strong { display:block; font-size:13px; font-weight:600; margin-bottom:4px; }
.task-progress { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; font-size:12px; border:1px solid #e0d9ed; border-radius:10px; background:#f2eef9; color:#5d4f77; box-shadow:0 -3px 12px #fff; }

/* Audio and decision controls. */
select,input[type=text] { width:100%; min-height:40px; border:1px solid #dfdfe7; border-radius:9px; padding:9px 12px; background-color:white; color:var(--ink); font-size:13px; }
select { appearance:none; padding-right:31px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; text-overflow:ellipsis; }
select:disabled,input:disabled,textarea:disabled { opacity:.55; cursor:not-allowed; }
textarea:not(.transcript-input) { width:100%; padding:11px 12px; border:1px solid #dfdfe7; border-radius:10px; color:var(--ink); background:white; font-size:13px; line-height:1.75; resize:vertical; }
textarea::placeholder,input::placeholder { color:#797580; }
.field-label { display:block; font-size:12px; font-weight:500; color:#5c5966; margin:17px 0 7px; }
.audio-panel>select { font-size:12px; }
#take-hint { font-size:11px; }
#player-wrap { background:white; border:1px solid var(--line); border-radius:13px; margin-top:14px; padding:13px 12px; }
.player-caption { display:flex; align-items:center; gap:7px; color:#57515f; font-size:12px; }
.player-caption svg { width:16px; height:16px; color:#8a7f99; }
.file-label { color:#77717f; font-size:11px; overflow-wrap:anywhere; line-height:1.7; margin:7px 0 10px; }
audio { display:block; width:100%; height:40px; border-radius:99px; margin:12px 0; }
.playback-tools { display:flex; align-items:center; gap:10px; }
.playback-tools .text-btn { font-size:12px; }
.rate-label { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:11px; margin-left:auto; }
.rate-label select { width:61px; min-height:29px; padding:3px 19px 3px 6px; font-size:11px; background-position:right 4px center; background-size:12px; border-color:#e6e3eb; border-radius:7px; }
#recording-origin { border-top:1px solid #f0edf4; padding-top:9px; font-size:11px; }
#unlink-recording { font-size:11px; color:#756c81; }
.audio-empty { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:11px; padding:26px 15px; min-height:198px; border:1px dashed #d9d4e3; border-radius:14px; background:#f3f0f7; text-align:center; }
.audio-empty>svg { width:35px; height:35px; color:#9485a5; padding:6px; border:1px solid #e3ddec; border-radius:11px; background:#ffffff9c; }
.audio-empty strong { color:#51475f; font-size:13px; font-weight:500; }
.audio-empty>span { font-size:12px; color:#776b87; line-height:1.8; }
.audio-empty .btn { margin-top:1px; }
.decision-section { margin-top:24px; border-top:1px solid #e7e3ec; padding-top:22px; }
.decision-section .panel-title { margin-bottom:15px; }
#draft-state { font-size:11px; margin-top:0; }
.action-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.action-options button { display:flex; align-items:center; gap:8px; min-height:40px; padding:9px 10px; border:1px solid #e0dce8; border-radius:10px; background:white; text-align:left; font-size:12px; font-weight:500; transition:background .15s,border-color .15s; }
.action-options button svg { width:16px; height:16px; color:#807489; }
.action-options button:hover { background:#f1edf7; border-color:#c9bfd8; }
.action-options button.active { color:white; background:var(--ink); border-color:var(--ink); box-shadow:0 2px 3px #1a172307; }
.action-options button.active svg { color:#f0edf6; }
.listen-check { display:flex; align-items:flex-start; gap:9px; font-size:12px; color:#5e5768; line-height:1.8; margin-top:16px; cursor:pointer; }
input[type=checkbox] { width:15px; height:15px; margin:3px 0 0; accent-color:var(--ink); flex-shrink:0; }
.inline-error { padding:10px 12px; border:1px solid #f0d3d8; border-radius:9px; background:var(--danger-soft); color:var(--danger); font-size:12px; line-height:1.7; margin-top:13px; }
#decision-summary { font-size:12px; }

/* Footer and confirmations. */
.review-footer { display:flex; justify-content:space-between; align-items:center; gap:14px; height:76px; min-height:76px; padding:0 27px; border-top:1px solid var(--line); background:white; }
.navigation { display:flex; align-items:center; gap:9px; }
#line-position { font-size:12px; min-width:40px; text-align:center; color:#5b5663; }
.shortcut-hint { margin-left:7px; font-size:11px; color:#7b7485; }
.shortcut-hint kbd { background:#f7f5fa; }
.footer-actions { display:flex; gap:8px; }
.footer-actions .btn { min-height:40px; }
.toast { position:fixed; z-index:20; bottom:109px; left:50%; transform:translateX(-50%); max-width:min(650px,90vw); padding:13px 18px; border:1px solid #41414a; background:#25252d; color:white; border-radius:12px; font-size:13px; line-height:1.7; box-shadow:0 10px 35px #18181f18; }
.toast.error { background:#78323e; border-color:#964352; }

/* Secondary views. */
.modal { padding:0; border:1px solid #dedce6; border-radius:20px; box-shadow:0 25px 90px #23212b2b; width:min(600px,92vw); max-height:88dvh; background:white; color:var(--ink); overflow:auto; scrollbar-width:thin; }
.modal.wide { width:min(840px,94vw); }
.modal::backdrop { background:#27232e38; backdrop-filter:blur(4px); }
.modal[open] { animation:modal-in .16s ease-out; }
@keyframes modal-in { from { opacity:0; translate:0 5px; } to { opacity:1; translate:0 0; } }
.modal-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 28px 22px; border-bottom:1px solid var(--line); background:white; position:sticky; top:0; z-index:2; }
.modal-heading h2 { font-size:21px; font-weight:600; letter-spacing:-.4px; }
.modal-heading .eyebrow { display:block; margin-bottom:5px; }
.modal-heading .icon-btn { background:#f6f4f9; border-color:#eeebf3; }
.modal-body { padding:25px 28px; }
.modal-note { color:var(--muted); font-size:13px; line-height:1.85; margin-bottom:20px; }
.modal-footer { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; position:sticky; bottom:0; padding:18px 28px; border-top:1px solid var(--line); background:#fcfbfe; }
.import-step { display:grid; grid-template-columns:32px 1fr; gap:15px; padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--line); }
.import-step:last-child { padding-bottom:0; margin-bottom:0; border:0; }
.step-number { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#eeebf6; border:1px solid #e6e0f0; color:#706181; font-size:12px; }
.import-step h3 { margin:3px 0 8px; }
.import-step p { font-size:13px; color:var(--muted); margin-bottom:14px; line-height:1.85; }
.inline-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.upload-zone { display:flex; flex-direction:column; align-items:center; gap:9px; border:1px dashed #d8d1e4; border-radius:13px; background:#f5f2fa; padding:22px; cursor:pointer; }
.upload-zone svg { width:24px; height:24px; color:#81708f; }
.upload-zone strong { font-size:13px; font-weight:500; }
.upload-zone>span { color:#746b80; font-size:12px; }
.upload-zone:hover { background:#eee8f7; border-color:#bfb2d4; }
.upload-zone:focus-within { outline:2px solid var(--violet); outline-offset:3px; }
.import-result { white-space:pre-line; color:#64606d; font-size:12px; line-height:1.8; margin:13px 0; }
.import-result.error { color:var(--danger); }
.import-preview { margin-top:16px; padding:14px; border:1px solid #e7e2f0; border-radius:10px; background:#f5f1fb; color:#655871; font-size:12px; line-height:1.8; }
.import-preview strong { display:block; color:#4b4158; font-size:13px; margin-bottom:4px; }
.batch-lines { border:1px solid var(--line); border-radius:10px; max-height:210px; overflow:auto; margin:12px 0; }
.batch-line { display:flex; align-items:flex-start; gap:9px; padding:10px 12px; border-bottom:1px solid #efedf3; font-size:13px; }
.batch-line:last-child { border:0; }
.batch-line:hover { background:#faf8fd; }
.batch-line small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
.batch-line b { font-weight:500; }
.file-row { padding:16px; border:1px solid var(--line); border-radius:13px; background:#fdfcfe; margin-bottom:13px; }
.file-row-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; font-size:13px; }
.file-row-head strong { font-weight:500; overflow-wrap:anywhere; }
.file-row-head span { color:var(--muted); font-size:12px; flex-shrink:0; }
.file-row audio { max-width:470px; }
.file-row-controls { display:flex; align-items:center; flex-wrap:wrap; gap:11px; }
.file-row-controls select { flex:1; min-width:220px; font-size:12px; }
.file-transcript { color:#665b72; font-size:13px; margin-top:12px; line-height:1.8; }
.delivery-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:25px; }
.delivery-stat { min-width:0; padding:15px; border:1px solid #e9e5ef; border-radius:12px; background:#f8f6fb; }
.delivery-stat:nth-child(2) { background:#edf8f2; border-color:#dfeee5; }
.delivery-stat:nth-child(3) { background:#fff7e5; border-color:#f2e8d0; }
.delivery-stat b { display:block; color:#302a39; font-size:28px; font-weight:500; line-height:1.2; margin-bottom:6px; }
.delivery-stat span { color:#72697f; font-size:12px; }
.delivery-group { margin:23px 0; }
.delivery-group h3 { display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:8px; }
.delivery-row { display:grid; grid-template-columns:94px 1fr; gap:13px; padding:13px 0; border-bottom:1px solid var(--line); font-size:13px; }
.delivery-row>strong { color:#6d627c; font:12px/1.8 'Cascadia Code','Consolas',monospace; padding-top:2px; min-width:0; overflow-wrap:anywhere; }
.delivery-row p { font-size:14px; line-height:1.8; margin-bottom:4px; overflow-wrap:anywhere; }
.delivery-row small { color:var(--muted); font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.source-content h3 { font-size:15px; line-height:1.8; margin-bottom:10px; }
.source-content p { color:#696372; font-size:13px; line-height:1.95; margin-bottom:24px; }

/* Responsive task surface. */
@media(min-width:1700px) {
  body { padding:28px; }
  .workbench { grid-template-columns:284px minmax(0,1fr); }
  .review-body { grid-template-columns:minmax(0,1fr) 344px; }
  .comparison-panel { padding:30px 36px; }
  .audio-panel { padding:30px 25px; }
  .dialogue-text { font-size:24px; }
}
@media(max-width:1250px) {
  body { padding:12px; }
  .app-shell { border-radius:18px; }
  .app-header { padding:0 19px; gap:16px; }
  .project-heading { max-width:205px; }
  .header-actions { gap:4px; }
  .header-actions .btn { padding-inline:11px; }
  .batch-bar { padding:16px 19px; gap:16px; grid-template-columns:minmax(145px,1fr) 205px auto minmax(135px,auto); }
  .outcome { padding:5px 7px; }
  .workbench { grid-template-columns:242px minmax(0,1fr); }
  .queue-tools,.queue-footer { padding-inline:15px; }
  .review-body { grid-template-columns:minmax(0,1fr) 288px; }
  .review-top,.comparison-panel,.review-footer { padding-inline:21px; }
  .audio-panel { padding-inline:17px; }
  .shortcut-hint { display:none; }
}
@media(max-width:1050px) {
  .project-heading { max-width:170px; }
  .brand span:not(.brand-mark) { display:none; }
  .batch-bar { grid-template-columns:minmax(145px,1fr) 205px auto; gap:6px 20px; min-height:103px; }
  .batch-outcomes { grid-column:1; grid-row:2; }
  .system-status { grid-column:3; grid-row:1/3; }
  .progress-block { grid-column:2; grid-row:1/3; }
}
@media(max-width:980px) {
  .app-header { height:auto; min-height:70px; flex-wrap:wrap; padding-block:13px; gap:13px; }
  .header-divider { display:none; }
  .project-heading { flex:1; max-width:220px; }
  .header-actions { margin-left:auto; }
  .header-actions .btn { min-height:34px; font-size:12px; }
  .workbench { grid-template-columns:228px minmax(0,1fr); }
  .review-body { display:block; overflow:auto; }
  .comparison-panel { overflow:visible; }
  .audio-panel { overflow:visible; border-left:0; border-top:1px solid var(--line); padding:23px 21px; }
  .review-top { padding:18px 21px; flex-wrap:wrap; min-height:99px; gap:12px; }
  .review-top-right { justify-content:flex-start; }
  .audio-panel>select,#player-wrap { max-width:100%; }
  .action-options { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .action-options button { gap:6px; padding-inline:8px; }
  .dialogue-text { font-size:21px; }
  .review-footer { padding-inline:17px; gap:10px; }
  .footer-actions .btn { padding-inline:12px; font-size:12px; }
  .navigation { gap:6px; }
}
@media(max-width:780px) {
  .header-actions { width:100%; margin-left:0; justify-content:flex-end; }
  .brand span:not(.brand-mark) { display:block; }
  .project-heading { margin-left:auto; max-width:210px; text-align:right; }
  .batch-bar { grid-template-columns:minmax(0,1fr) minmax(140px,175px); gap:14px; }
  .progress-block { grid-column:2; grid-row:1; }
  .batch-outcomes { grid-column:1; grid-row:2; }
  .system-status { grid-column:2; grid-row:2; }
  .workbench { grid-template-columns:215px minmax(0,1fr); }
  .queue-tools { padding-inline:12px; }
  .queue-filters button { padding-inline:7px; }
  .line-list { padding-inline:9px; }
  .line-item { padding-inline:11px; }
  .comparison-panel,.audio-panel,.review-top { padding-inline:16px; }
  .script-card,.transcript-card { padding:16px; }
  .card-heading { flex-wrap:wrap; gap:7px; }
  .action-options { grid-template-columns:1fr 1fr; }
  .review-footer { height:auto; min-height:92px; align-items:center; flex-wrap:wrap; padding:12px 16px; }
  .footer-actions { margin-left:auto; }
}
@media(max-width:700px) {
  html,body { height:auto; min-height:100%; }
  body { padding:8px; display:block; }
  .app-shell { overflow:visible; border-radius:16px; min-height:calc(100dvh - 16px); }
  .app-header { border-radius:16px 16px 0 0; padding:16px; gap:12px; }
  .brand strong { font-size:16px; }
  .brand span:not(.brand-mark) { font-size:11px; }
  .project-heading { max-width:40%; }
  .project-heading strong { font-size:12px; }
  .project-heading .eyebrow { font-size:11px; }
  .header-actions { justify-content:space-between; gap:4px; }
  .header-actions .btn { padding:7px 8px; min-height:36px; }
  .header-actions svg { width:15px; height:15px; }
  .batch-bar { padding:16px; column-gap:14px; }
  .batch-title .text-btn { font-size:13px; }
  .progress-label { font-size:11px; }
  .outcome { font-size:11px; padding:5px 7px; }
  .batch-outcomes { gap:5px; flex-wrap:wrap; }
  .connection { font-size:11px; }
  .save-state { font-size:10px; }
  .workbench { display:block; }
  .queue-panel { border-right:0; border-bottom:1px solid #e3deed; }
  .queue-tools { padding:18px 16px 10px; }
  .queue-tools .panel-title { margin-bottom:12px; }
  .queue-tools>select { margin-top:9px; }
  .queue-filters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-top:11px; }
  .queue-filters button { flex-shrink:0; padding-inline:10px; min-height:32px; }
  .line-list { display:flex; flex:none; gap:8px; padding:6px 13px 15px; overflow-x:auto; }
  .line-item { min-width:215px; width:215px; margin:0; padding:12px; }
  .queue-footer { display:flex; flex-wrap:wrap; align-items:center; gap:7px 15px; padding:11px 16px; }
  .queue-footer .btn { width:auto; min-height:34px; font-size:12px; }
  .queue-footer .text-btn { width:auto; margin-top:0; padding:4px 0; }
  .review-stage { border-radius:0 0 16px 16px; }
  .review-body { overflow:visible; }
  .review-top { padding:22px 18px; }
  .review-top-right { width:100%; justify-content:space-between; }
  .comparison-panel { padding:20px 18px; }
  .audio-panel { padding:22px 18px; }
  .dialogue-text { font-size:20px; }
  .transcript-input { font-size:18px; }
  .action-options { grid-template-columns:1fr 1fr; }
  .review-footer { position:sticky; bottom:0; z-index:3; min-height:73px; height:auto; flex-wrap:nowrap; padding:14px 12px; border-radius:0 0 15px 15px; box-shadow:0 -4px 15px #18181e05; }
  .navigation { gap:4px; }
  .navigation .icon-btn { width:29px; height:32px; }
  #line-position { min-width:37px; font-size:11px; }
  .footer-actions { gap:5px; }
  .footer-actions .btn { padding-inline:10px; font-size:12px; }
  .footer-actions svg { width:15px; height:15px; }
  .modal { max-height:90dvh; border-radius:17px; }
  .modal-heading,.modal-body { padding:20px; }
  .modal-heading h2 { font-size:19px; }
  .modal-footer { padding:15px 20px; }
  .import-step { grid-template-columns:26px 1fr; gap:11px; }
  .step-number { width:26px; height:26px; }
  .file-row-head { flex-wrap:wrap; }
  .file-row-controls select { min-width:170px; }
  .delivery-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .delivery-row { grid-template-columns:82px minmax(0,1fr); }
  .toast { bottom:88px; width:max-content; max-width:90vw; font-size:12px; }
}
@media(max-width:420px) {
  .batch-bar { grid-template-columns:minmax(0,1fr) minmax(125px,145px); padding-inline:13px; gap:12px; }
  .batch-outcomes { gap:4px; }
  .outcome { font-size:10px; padding:5px; }
  .header-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .header-actions .btn { font-size:12px; padding-inline:10px; width:100%; }
  .header-actions .btn.primary { padding-inline:10px; }
  .brand-mark { width:31px; height:31px; }
  .brand strong { font-size:15px; }
  .project-heading { max-width:35%; }
  .footer-actions .btn { padding-inline:8px; font-size:11px; }
  .footer-actions .btn.primary { gap:5px; }
}
@media(max-width:360px) {
  .review-footer { flex-wrap:wrap; gap:10px; }
  .footer-actions { width:100%; justify-content:flex-end; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(forced-colors:active) {
  .btn.primary,.queue-filters button.active,.action-options button.active { background:Highlight; color:HighlightText; border-color:Highlight; }
  .line-item.active { border:2px solid Highlight; }
  .badge,.outcome { border:1px solid CanvasText; }
}