/* Reference-led work surface: lavender rail, flat white tools, visible scene. */
:root {
  --bg:#dcdce1; --paper:#ffffff; --ink:#18191d; --muted:#72737c;
  --line:#ececf0; --rail:#f1eff6; --violet-soft:#eeebf8;
  --ui-font:'Noto Sans SC','Segoe UI','Microsoft Yahei',sans-serif;
}
body { padding:18px; font-family:var(--ui-font); font-size:13px; letter-spacing:.01em; }
.app-shell { max-width:1800px; border:1px solid #f8f8fa; border-radius:22px; box-shadow:0 14px 50px #22222b08; }
.app-header { height:64px; min-height:64px; padding:0 22px; gap:20px; }
.brand { width:202px; gap:10px; }
.brand-mark { width:32px; height:32px; border-radius:9px; }
.brand-mark svg { width:21px; height:21px; }
.brand strong { font-size:16px; line-height:1.3; letter-spacing:-.4px; }
.brand span:not(.brand-mark) { font-size:10px; margin-top:3px; color:#787780; }
.header-divider { display:none; }
.project-heading { max-width:290px; }
.project-heading .eyebrow { font-size:10px; }
.project-heading strong { display:none; }
.project-heading>.sample-project { min-height:25px; padding:1px 20px 1px 0; border:0; background-color:transparent; background-position:right 0 center; font-size:12px; color:#34303d; width:245px; max-width:100%; }
.header-actions { gap:6px; }
.header-actions .btn { min-height:34px; font-size:12px; padding:7px 12px; }
.header-actions .ghost { color:#686871; }
.batch-bar { min-height:56px; padding:10px 22px; gap:22px; grid-template-columns:minmax(190px,1fr) 200px auto minmax(145px,auto); background:white; }
.batch-title .eyebrow { font-size:10px; }
.batch-title .text-btn { font-size:12px; padding:0; }
.progress-label { margin-bottom:5px; font-size:11px; }
.progress-track { height:4px; }
.outcome { padding:4px 8px; font-size:11px; border-radius:6px; }
.connection { font-size:11px; }
.save-state { font-size:10px; }
.system-status { gap:3px; }
.btn { min-height:36px; border-radius:9px; font-size:12px; padding:7px 12px; box-shadow:none!important; }
.btn.primary { background:#191a1e; padding-inline:16px; }
.btn.secondary { border-color:#e3e3e9; }
.btn.ghost:hover:not(:disabled) { background:#f4f4f7; }
.text-btn { font-size:12px; }
.icon-btn { width:32px; height:32px; border-radius:8px; border-color:#e9e9ee; }
.icon-btn svg { width:17px; height:17px; }
.counter { padding:1px 6px; border-radius:5px; font-size:10px; border-color:#e6e3ec; color:#77717e; }
.workbench { grid-template-columns:228px minmax(0,1fr); }
.queue-panel { background:var(--rail); border-right:1px solid #e8e5ee; }
.queue-tools { padding:21px 16px 12px; }
.queue-tools .panel-title { margin-bottom:14px; }
.queue-tools h2 { font-size:13px; }
.search-box { background:#ffffffbd; border:1px solid #e8e4ee; min-height:35px; padding:8px 10px; border-radius:9px; gap:7px; }
.search-box input { font-size:11px; }
.search-box kbd { font-size:10px; }
.queue-tools>select { margin-top:8px; min-height:33px; font-size:11px; border-radius:8px; background-color:#faf9fc; border-color:#e8e4ee; padding:6px 27px 6px 10px; }
.queue-filters { gap:3px; margin-top:12px; }
.queue-filters button { min-height:26px; font-size:11px; padding:3px 8px; }
.queue-filters button.active { background:#191a1e; box-shadow:none; }
.line-list { padding:0 10px 15px; }
.line-item { padding:13px 13px; margin-bottom:3px; border:1px solid transparent; border-radius:12px; }
.line-item.active { border-color:transparent; box-shadow:none; }
.line-item.active::before { display:none; }
.line-item.active .line-item-top strong { color:#28252f; }
.line-item strong { font-size:10px; font-weight:500; color:#898390; }
.line-item .role { font-size:11px; color:#5e5868; }
.line-excerpt { margin:6px 0 8px; font-size:12px; color:#332e3e; }
.line-state { font-size:10px; gap:5px; }
.queue-footer { padding:13px 16px; background:transparent; border-color:#e6e2ed; }
.queue-footer .btn { min-height:34px; font-size:11px; }
.queue-footer .text-btn { margin-top:7px; font-size:11px; padding:4px 5px; }
.review-top { min-height:60px; padding:12px 24px; gap:14px; }
.review-breadcrumb { font-size:11px; gap:6px; }
.review-breadcrumb .eyebrow { font-size:11px; }
.line-heading { margin-top:4px; gap:9px; }
.line-heading h1 { font-size:17px; font-weight:600; letter-spacing:-.3px; }
.speaker { font-size:10px; border:0; border-radius:5px; background:#f4f4f7; padding:2px 7px; }
.badge { font-size:10px; padding:4px 8px; }
.review-body { grid-template-columns:minmax(0,1fr) 290px; }
.comparison-panel { padding:18px 24px 22px; background:white; }
.audio-panel { padding:21px 18px; background:white; border-color:var(--line); }
.audio-panel>.panel-title { margin-bottom:13px; }
.audio-panel h2 { font-size:13px; }
.audio-panel>select { min-height:35px; font-size:11px; }
.scene-stage { min-width:0; margin-bottom:20px; }
.stage-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.stage-heading-copy { min-width:0; }
.stage-heading-copy .eyebrow { display:block; margin-bottom:2px; font-size:10px; color:#8a8792; }
.stage-heading h2 { font-size:13px; font-weight:500; line-height:1.5; color:#292932; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stage-heading-tools { display:flex; align-items:center; gap:7px; flex-shrink:0; }
#stage-mode { width:174px; min-height:30px; padding:5px 26px 5px 9px; border-radius:7px; font-size:10px; border-color:#e9e8ef; color:#6d6777; background-color:#faf9fc; }
.stage-heading .icon-btn { width:30px; height:30px; }
.stage-screen { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:clamp(240px,31vh,350px); overflow:hidden; background:#17181c; border-radius:12px; border:1px solid #25262c; }
.stage-image,#stage-video,#stage-online { width:100%; height:100%; display:block; object-fit:contain; border:0; }
.stage-image { background:#17181c; }
.stage-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:25px; text-align:center; color:#c7c8d1; }
.stage-empty>svg { width:32px; height:32px; color:#787985; margin-bottom:5px; }
.stage-empty>strong { font-size:13px; font-weight:500; }
.stage-empty>span { color:#91929d; font-size:11px; }
.stage-source-tag { position:absolute; top:12px; left:12px; max-width:calc(100% - 24px); padding:4px 8px; border-radius:6px; background:#111215b8; color:#eeeef4; font-size:10px; line-height:1.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }
.stage-source-tag:empty { display:none; }
.stage-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:25px; text-align:center; color:#c7c8d1; background:#17181c; font-size:12px; line-height:1.8; }
.stage-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.stage-transport,.stage-source-actions { display:flex; align-items:center; gap:10px; min-width:0; }
.stage-toolbar .icon-btn { width:27px; height:27px; border:0; background:#f3f2f6; }
.stage-toolbar .icon-btn svg { width:14px; height:14px; }
.stage-time { font:11px/1.4 'Consolas',monospace; color:#75707e; min-width:36px; }
.stage-toolbar .text-btn { font-size:10px; color:#797280; padding:3px 0; gap:5px; }
.stage-toolbar button:disabled { opacity:.32; }
.stage-toolbar .text-btn svg { width:13px; height:13px; }
.stage-file-label { cursor:pointer; }
.stage-file-label:focus-within { outline:2px solid var(--violet); outline-offset:3px; border-radius:4px; }
.stage-context { display:flex; align-items:center; gap:8px; padding-top:10px; min-width:0; }
.stage-context-dot { width:5px; height:5px; border-radius:50%; background:#a39ab8; flex-shrink:0; }
#stage-line-text { font-size:11px; color:#686170; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
#stage-context-info { font-size:10px; color:#8c8594; flex-shrink:0; }
.stage-file-name { font-size:10px; color:#89818f; overflow-wrap:anywhere; margin-top:6px; }
.stage-expanded { position:fixed; inset:28px; z-index:12; margin:0; padding:20px; background:white; border:1px solid var(--line); border-radius:18px; box-shadow:0 0 0 60px #29253060,0 20px 65px #13111a40; display:flex; flex-direction:column; }
.stage-expanded .stage-screen { height:auto; flex:1; min-height:0; }
.stage-expanded .stage-heading h2 { font-size:16px; }
.stage-expanded .stage-toolbar { padding:10px 0; }
.comparison-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 11px; }
.comparison-section-heading h2 { font-size:13px; font-weight:500; }
.comparison-section-heading>span { font-size:10px; color:#8c8693; }
.version-context { margin:0 0 12px; padding:12px 14px; border:1px solid #e9e4f0; background:#f5f2fa; border-radius:9px; }
.version-context-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; color:#62576f; }
.version-context-heading strong { font-weight:500; flex-shrink:0; }
.version-context-heading span { font-size:10px; text-align:right; }
#version-sent-text { margin:8px 0 5px; font-size:14px; line-height:1.8; color:#4a4255; overflow-wrap:anywhere; }
#version-change-note { margin:0; font-size:10px; color:#786e83; line-height:1.75; }
.take-summary { margin:10px 0 0; padding:9px 10px; border:1px solid var(--line); background:#faf9fc; border-radius:8px; }
.take-summary>div { display:flex; flex-direction:column; gap:3px; }
.take-summary>div+div { margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.take-summary span { font-size:10px; color:#78707f; }
.take-summary strong { font-size:11px; line-height:1.65; font-weight:500; color:#48404f; overflow-wrap:anywhere; }
.ticket-item+ .ticket-item { margin-top:10px; padding-top:10px; border-top:1px solid #e6ddeb; }
.ticket-item span,.ticket-item small { display:block; overflow-wrap:anywhere; line-height:1.8; }
.ticket-item small { margin-top:4px; color:#776982; font-size:10px; }
.event-detail { margin:4px 0; font-size:11px; line-height:1.75; color:#756b7f; overflow-wrap:anywhere; }
.comparison-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch; }
.script-card,.transcript-card { padding:16px; margin:0; border:1px solid #e8e6ed; border-radius:10px; background:white; min-width:0; }
.script-card { background:#faf9fc; border-color:#e8e5ef; }
.card-heading { margin-bottom:12px; gap:7px; }
.card-heading .eyebrow { font-size:11px; font-weight:500; color:#6f667b; }
.card-label { gap:6px; }
.card-label svg { width:14px; height:14px; color:#8e849b; }
.card-heading .text-btn { font-size:10px; color:#918699; padding:0; }
.dialogue-text { font-size:17px; font-weight:400; line-height:1.8; color:#34303d; }
.transcript-input { min-height:73px; font-size:17px; line-height:1.8; }
.transcript-input::placeholder { font-size:13px; color:#a49ba9; }
.transcript-empty { min-height:73px; padding:0; font-size:12px; line-height:1.85; color:#918897; }
.change-indicator { margin-top:11px; padding:3px 7px; border-radius:5px; font-size:10px; color:#7a6693; background:#eee8f6; }
#transcript-origin { font-size:10px; line-height:1.65; color:#96909c; margin-top:10px; }
.diff-panel:not(:empty) { margin-top:12px; padding-top:10px; }
.diff-head { font-size:10px; margin-bottom:6px; }
.diff-row { font-size:12px; grid-template-columns:36px 1fr; gap:7px; margin:5px 0; }
.diff-row small { font-size:10px; }
.comparison-hint { font-size:10px; margin:10px 0 16px; gap:5px; line-height:1.7; color:#928997; }
.hint-dot { width:4px; height:4px; margin-top:7px; }
.detail-card { padding:0 13px; border-radius:8px; margin-top:8px; }
.detail-card summary { padding:10px 0; font-size:11px; color:#736b7c; }
.summary-label { gap:6px; }
.summary-label svg { width:14px; height:14px; }
.detail-card summary>span[id] { font-size:10px; }
.detail-content { padding:11px 0; }
.history-text { margin-top:7px; font-size:13px; }
.context-line { font-size:11px; padding:7px 0; }
#source-image .evidence { display:none; }
.ticket-banner { font-size:11px; margin-bottom:15px; padding:10px 12px; border-radius:8px; }
.ticket-banner strong { font-size:12px; }
.audio-empty { padding:20px 12px; min-height:168px; border-radius:10px; background:#faf9fc; border-color:#e5dfea; }
.audio-empty>svg { width:32px; height:32px; }
.audio-empty strong { font-size:12px; }
.audio-empty>span { font-size:11px; }
#player-wrap { padding:12px; margin-top:12px; border-radius:10px; border-color:#e8e5ee; background:#faf9fc; }
.player-caption { font-size:11px; color:#776982; }
.file-label { font-size:10px; color:#918598; margin:7px 0 9px; }
audio { height:35px; margin:10px 0; }
.playback-tools { gap:10px; }
.playback-tools .text-btn { font-size:10px; }
#recording-origin { font-size:10px; color:#918697; border-color:#e9e4ee; }
#unlink-recording { font-size:10px; }
.decision-section { margin-top:21px; padding-top:19px; border-color:#ededf1; }
.decision-section .panel-title { margin-bottom:13px; }
#draft-state { font-size:10px; }
.action-options { gap:7px; }
.action-options button { min-height:36px; padding:8px 9px; font-size:11px; gap:6px; border-radius:8px; border-color:#e6e1eb; }
.action-options button svg { width:15px; height:15px; }
.action-options button.active { background:#1c1b21; box-shadow:none; }
.field-label { margin:14px 0 6px; font-size:11px; color:#776d80; }
select,input[type=text] { min-height:35px; padding:7px 10px; padding-right:28px; border-radius:8px; font-size:11px; border-color:#e6e2ed; }
textarea:not(.transcript-input) { padding:9px 10px; border-radius:8px; font-size:11px; border-color:#e6e2ed; }
.listen-check { font-size:11px; gap:7px; margin-top:13px; color:#807388; }
input[type=checkbox] { width:13px; height:13px; margin-top:3px; }
#decision-summary { font-size:10px; color:#8b8092; }
.review-footer { height:64px; min-height:64px; padding:0 24px; gap:12px; }
.navigation { gap:7px; }
#line-position { font-size:11px; min-width:37px; }
.shortcut-hint { font-size:10px; color:#aaa0af; }
.footer-actions .btn { min-height:36px; }
.footer-actions { gap:8px; }
.toast { bottom:96px; font-size:12px; }
@media(min-width:1700px) {
  body { padding:24px; }
  .workbench { grid-template-columns:240px minmax(0,1fr); }
  .review-body { grid-template-columns:minmax(0,1fr) 306px; }
  .comparison-panel { padding:22px 28px; }
  .audio-panel { padding:24px 22px; }
  .dialogue-text,.transcript-input { font-size:18px; }
  .stage-screen { height:clamp(280px,33vh,385px); }
}
@media(max-width:1250px) {
  body { padding:12px; }
  .app-header { padding:0 18px; gap:14px; }
  .brand { width:180px; }
  .project-heading { max-width:200px; }
  .header-actions .btn { padding-inline:9px; }
  .batch-bar { grid-template-columns:minmax(155px,1fr) 174px auto minmax(125px,auto); gap:15px; padding:10px 18px; }
  .workbench { grid-template-columns:216px minmax(0,1fr); }
  .review-body { grid-template-columns:minmax(0,1fr) 266px; }
  .review-top,.comparison-panel,.review-footer { padding-inline:19px; }
  .audio-panel { padding-inline:16px; }
  .stage-heading { align-items:flex-start; }
  .stage-heading-tools { gap:5px; }
  #stage-mode { width:150px; }
  .stage-screen { height:clamp(225px,29vh,310px); }
  .stage-source-actions { gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  .stage-toolbar { align-items:flex-start; }
  #stage-context-info { max-width:40%; white-space:normal; }
  .card-heading { flex-wrap:wrap; }
}
@media(max-width:1050px) {
  .brand { width:auto; }
  .brand span:not(.brand-mark) { display:none; }
  .batch-bar { grid-template-columns:minmax(140px,1fr) 170px auto; min-height:75px; gap:5px 14px; }
  .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; }
  .review-top { min-height:66px; }
  .comparison-pair { grid-template-columns:1fr; gap:10px; }
}
@media(max-width:980px) {
  .app-header { min-height:64px; height:auto; padding-block:11px; flex-wrap:wrap; gap:12px; }
  .workbench { grid-template-columns:214px 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:20px 19px; }
  .comparison-pair { grid-template-columns:1fr 1fr; }
  .action-options { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .review-top { flex-wrap:nowrap; min-height:66px; padding-block:12px; }
  .review-top-right { flex-wrap:wrap; }
  .stage-screen { height:clamp(220px,31vh,350px); }
  .review-footer { min-height:64px; height:64px; flex-wrap:nowrap; }
}
@media(max-width:780px) {
  .brand span:not(.brand-mark) { display:block; }
  .header-actions { width:100%; justify-content:flex-end; }
  .project-heading { max-width:220px; margin-left:auto; }
  .batch-bar { grid-template-columns:minmax(0,1fr) minmax(130px,170px); gap:10px 16px; }
  .progress-block { grid-column:2; grid-row:1; }
  .system-status { grid-column:2; grid-row:2; }
  .batch-outcomes { grid-column:1; grid-row:2; }
  .workbench { grid-template-columns:198px minmax(0,1fr); }
  .comparison-panel { padding:17px 16px; }
  .comparison-pair { grid-template-columns:1fr; }
  .stage-heading { flex-wrap:wrap; gap:8px; }
  .stage-heading-tools { margin-left:auto; }
  .stage-toolbar { flex-wrap:wrap; }
  .stage-source-actions { margin-left:auto; }
  .stage-context { align-items:flex-start; }
  #stage-context-info { flex-shrink:1; }
  .action-options { grid-template-columns:1fr 1fr; }
  .review-footer { padding-inline:14px; }
  .footer-actions .btn { font-size:11px; padding-inline:10px; }
}
@media(max-width:700px) {
  html,body { height:auto; }
  body { padding:8px; display:block; }
  .app-shell { min-height:calc(100dvh - 16px); overflow:visible; border-radius:16px; }
  .app-header { padding:14px 16px; }
  .brand { width:auto; }
  .project-heading { max-width:43%; }
  .header-actions { justify-content:space-between; gap:4px; }
  .header-actions .btn { min-height:33px; font-size:11px; padding-inline:7px; }
  .batch-bar { padding:12px 16px; }
  .workbench { display:block; }
  .queue-panel { border-right:0; border-bottom:1px solid #e9e6ef; }
  .queue-tools { padding:15px 16px 9px; }
  .queue-filters { flex-wrap:nowrap; overflow:auto; }
  .line-list { display:flex; gap:7px; overflow-x:auto; padding:4px 12px 12px; }
  .line-item { width:200px; min-width:200px; margin:0; }
  .queue-footer { padding:9px 16px; gap:7px 13px; }
  .queue-footer .text-btn { margin:0; }
  .review-body { overflow:visible; }
  .review-top { flex-wrap:wrap; gap:9px; padding:15px 16px; }
  .review-top-right { width:100%; justify-content:space-between; }
  .comparison-panel { padding:17px 16px; }
  .stage-screen { height:auto; aspect-ratio:16/9; min-height:170px; }
  .stage-context { flex-wrap:wrap; gap:5px; }
  #stage-line-text { flex:1; }
  #stage-context-info { max-width:100%; margin-left:13px; }
  .stage-expanded { inset:10px; padding:13px; }
  .stage-expanded .stage-screen { min-height:0; aspect-ratio:auto; }
  .comparison-pair { grid-template-columns:1fr 1fr; gap:9px; }
  .script-card,.transcript-card { padding:13px; }
  .dialogue-text,.transcript-input { font-size:15px; }
  .comparison-section-heading>span { display:none; }
  .audio-panel { padding:20px 16px; }
  .action-options { grid-template-columns:1fr 1fr; }
  .review-footer { position:sticky; min-height:64px; height:auto; flex-wrap:nowrap; padding:12px 10px; border-radius:0 0 15px 15px; }
  .navigation { gap:3px; }
  .footer-actions { gap:4px; }
  .footer-actions .btn { padding-inline:8px; font-size:11px; }
}
@media(max-width:420px) {
  .header-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
  .comparison-pair { grid-template-columns:1fr; }
  .stage-heading-tools { width:100%; justify-content:space-between; }
  #stage-mode { flex:1; max-width:225px; }
  .stage-toolbar { gap:7px; }
  .stage-source-actions { flex-wrap:wrap; justify-content:flex-start; margin-left:0; width:100%; gap:8px 12px; }
}
@media(max-width:360px) {
  .review-footer { flex-wrap:wrap; gap:8px; }
  .footer-actions { margin-left:auto; }
}
@media(prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }