/* Default theme also applies to absent/unknown data-theme values.
   Add future :root[data-theme="..."] overrides after this block.
   Components consume semantic tokens; video content does not use this theme. */
:root {
  color-scheme: dark;
  /* Reference palette */
  --palette-graphite-950: #101218;
  --palette-graphite-900: #1b1f28;
  --palette-graphite-800: #252a36;
  --palette-graphite-700: #363d4d;
  --palette-graphite-500: #8490a6;
  --palette-graphite-300: #a8b0c2;
  --palette-white: #f3f4fa;
  --palette-violet-300: #c4b5fd;
  --palette-violet-400: #a78bfa;
  --palette-violet-500: #8b5cf6;
  --palette-violet-600: #7c3aed;
  --palette-violet-700: #6d28d9;
  --palette-cyan-400: #22d3ee;
  --palette-green-300: #86efac;
  --palette-amber-300: #fcd34d;
  --palette-red-300: #fda4af;
  /* Semantic colors; every action defines its foreground and states. */
  --color-background: var(--palette-graphite-950);
  --color-surface: var(--palette-graphite-900);
  --color-surface-raised: var(--palette-graphite-800);
  --color-field: var(--color-background);
  --color-border: var(--palette-graphite-700);
  --color-control-border: var(--palette-graphite-500);
  --color-text: var(--palette-white);
  --color-text-muted: var(--palette-graphite-300);
  --color-action-primary: var(--palette-violet-600);
  --color-action-primary-hover: #8045eb;
  --color-action-primary-pressed: var(--palette-violet-700);
  --color-on-primary: var(--palette-white);
  --color-action-text: var(--palette-violet-300);
  --color-action-soft: #29213e;
  --color-action-soft-hover: #372b50;
  --color-action-soft-pressed: #45325f;
  --color-action-border: var(--palette-violet-400);
  --color-selection: var(--palette-violet-400);
  --color-selection-surface: var(--color-action-soft);
  --color-selection-text: var(--color-action-text);
  --color-selection-overlay: #a78bfa30;
  --color-selection-halo: #a78bfa20;
  --color-focus: var(--palette-cyan-400);
  --color-progress: var(--palette-cyan-400);
  --color-success: var(--palette-green-300);
  --color-success-surface: #172e27;
  --color-warning: var(--palette-amber-300);
  --color-warning-surface: #332c19;
  --color-error: var(--palette-red-300);
  --color-error-surface: #352129;
  --color-info: var(--palette-cyan-400);
  --color-info-surface: #11252b;
  --color-scrollbar: var(--color-control-border);
  --color-shadow: #0008;
  /* Component colors */
  --color-brand-start: var(--palette-violet-600);
  --color-brand-end: var(--palette-violet-700);
  --color-import-start: #222034;
  --color-import-end: var(--color-surface);
  --color-player-background: #090909;
  --color-player-border: var(--color-control-border);
  --color-timeline-background: var(--color-background);
  --color-timeline-speech: #203e49;
  --color-timeline-speech-text: #a5f3fc;
  --color-timeline-title: var(--color-warning-surface);
  --color-timeline-title-text: var(--color-warning);
  --color-timeline-zoom: var(--color-action-soft);
  --color-timeline-zoom-text: var(--color-action-text);
  --color-timeline-cut: #472b32;
  --color-timeline-cut-stripe: #302127;
  --color-timeline-cut-text: var(--color-error);
  --color-waveform: var(--color-progress);
  --color-waveform-cut: #fda4af33;
  --color-timeline-cursor: var(--color-text);
  --color-caption-demo-background: var(--color-player-background);
  /* Geometry stays identical to the existing controls. */
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-7: 7px;
  --radius-8: 8px;
  --radius-9: 9px;
  --radius-10: 10px;
  --radius-11: 11px;
  --radius-12: 12px;
  --radius-15: 15px;
  --radius-17: 17px;
  --radius-round: 50%;
  --shadow-floating: 0 8px 32px var(--color-shadow);
  --shadow-notice: 0 8px 28px var(--color-shadow);
  --shadow-toast: 0 8px 40px var(--color-shadow);
  --motion-duration: 150ms;
  --motion-easing: ease;
  /* Compatibility aliases for existing styles. */
  --bg: var(--color-background);
  --panel: var(--color-surface);
  --raised: var(--color-surface-raised);
  --line: var(--color-border);
  --border: var(--color-border);
  --muted: var(--color-text-muted);
  --text: var(--color-text);
  --accent: var(--color-action-text);
  --warning: var(--color-warning);
  --radius: var(--radius-15);
  /* Bundled in static/fonts (SIL OFL); the interface uses no system fonts. */
  --font-ui: Inter, sans-serif;
  font-family: var(--font-ui);
  font-synthesis: none;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-size:14px}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a,input,select,textarea{transition:background-color var(--motion-duration) var(--motion-easing),color var(--motion-duration) var(--motion-easing),border-color var(--motion-duration) var(--motion-easing),box-shadow var(--motion-duration) var(--motion-easing)}
button{cursor:pointer}
button:disabled{opacity:.38;cursor:not-allowed}
select:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h2{font-size:17px;font-weight:600}
h3{font-size:14px}
small{font-size:12px;line-height:1.6}
[hidden]{display:none!important}
.app-header{height:80px;border-bottom:1px solid var(--line);padding:0 42px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;font-size:23px;letter-spacing:-1px;font-weight:700}
.brand-light{font-weight:350}
.brand-icon{background:linear-gradient(135deg,var(--color-brand-start),var(--color-brand-end));color:var(--color-on-primary);display:grid;place-items:center;width:32px;height:34px;border-radius:var(--radius-9);margin-right:10px;font-size:28px;line-height:1}
.local-badge{margin-left:15px;font-size:9px;letter-spacing:1.7px;border:1px solid var(--color-control-border);padding:4px 6px;border-radius:var(--radius-4);color:var(--muted);font-weight:500}
.header-right{display:flex;gap:24px;align-items:center}
.privacy{font-size:12px;color:var(--muted)}
.privacy i{display:inline-block;width:6px;height:6px;background:var(--color-success);border-radius:var(--radius-round);margin-right:7px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:38px;padding:9px 16px;font-weight:600;font-size:12px;letter-spacing:.1px;border:1px solid transparent;border-radius:var(--radius-8);white-space:nowrap}
.button.primary{color:var(--color-on-primary);background:var(--color-action-primary);border-color:var(--color-action-border)}
.button.primary:hover:not(:disabled){background:var(--color-action-primary-hover)}
.button.primary:active:not(:disabled){background:var(--color-action-primary-pressed)}
.button.quiet{background:transparent;border-color:var(--color-control-border);color:var(--text)}
.button.quiet:hover:not(:disabled){background:var(--raised)}
.button.quiet:active:not(:disabled){background:var(--color-action-soft-pressed)}
.button.secondary{background:var(--color-action-soft);color:var(--accent);border-color:var(--color-action-border)}
.button.secondary:hover:not(:disabled){background:var(--color-action-soft-hover)}
.button.secondary:active:not(:disabled){background:var(--color-action-soft-pressed)}
.button.large{padding:15px 24px;font-size:14px;margin:22px 0 18px}
.text-button{background:none;border:0;color:var(--accent);font-size:12px;padding:4px 0;text-decoration:underline;text-underline-offset:4px}
.eyebrow{color:var(--accent);font-size:10px;font-weight:600;letter-spacing:2.1px}
.home{max-width:1120px;margin:auto;padding:60px 30px}
.home>h1{font-size:54px;letter-spacing:-2.5px;line-height:1.2;font-weight:500;margin:16px 0}
.home>h1>span{color:var(--accent)}
.lead{color:var(--muted);font-size:16px;line-height:1.7}
.import-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;margin-top:35px}
.card{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius)}
.drop-zone{background:linear-gradient(150deg,var(--color-import-start),var(--color-import-end));border:1px dashed var(--color-control-border);border-radius:var(--radius);min-height:354px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px;text-align:center}
.drop-zone.dragging{border-color:var(--accent);background:var(--color-selection-surface)}
.remote-import{padding:34px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.remote-import h2{font-size:22px;letter-spacing:-.6px;margin-bottom:10px}
.remote-import p,.remote-import small{color:var(--muted)}
.remote-import form{display:grid;gap:12px;margin:20px 0}
.remote-import input,.remote-retry input{width:100%;min-width:0;min-height:44px;background:var(--color-field);border:1px solid var(--color-control-border);border-radius:var(--radius-7);padding:10px 12px;color:var(--text)}
.remote-import input:focus-visible,.remote-retry input:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.remote-import .upload-symbol{align-self:center}
.remote-import form .button{margin:0}
.remote-import .button{width:100%;justify-content:center}
.remote-import #remote-error{color:var(--color-error);overflow-wrap:anywhere;margin:0}
.remote-retry{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 20px}
.remote-retry input{flex:1 1 240px}.remote-retry[hidden]{display:none}
#remote-origin{overflow-wrap:anywhere}
#deepcut-messages #remote-origin{margin:0;padding:4px 18px;font-size:11px}
#deepcut-messages .remote-retry{margin:0;padding:10px 18px}
.drop-zone h2{font-size:22px;letter-spacing:-.6px;margin-bottom:10px}
.drop-zone p,.drop-zone small{color:var(--muted)}
.upload-symbol{font-size:28px;display:grid;place-items:center;background:var(--color-action-soft);border:1px solid var(--color-control-border);color:var(--accent);width:60px;height:60px;border-radius:var(--radius-17);margin-bottom:24px}
.import-settings{padding:27px}
.import-settings h2{margin:10px 0 23px}
.import-settings label{margin-top:14px}
.mini-feature{display:flex;gap:15px;align-items:center;margin-top:18px}
.mini-feature>span{font-size:11px;color:var(--accent);border:1px solid var(--color-control-border);padding:6px;border-radius:var(--radius-7)}
.mini-feature strong{font-size:12px;font-weight:500}
.mini-feature small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.model-note{font-size:11px;color:var(--muted);line-height:1.6;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
label{display:block;font-size:12px;color:var(--color-text);font-weight:500}
select,textarea,input[type=number]{width:100%;background:var(--color-field);border:1px solid var(--color-control-border);color:var(--text);border-radius:var(--radius-7);padding:9px 10px;margin-top:8px}
select{font-size:12px}
textarea{resize:vertical;line-height:1.55;min-height:68px}
input[type=range]{width:100%;accent-color:var(--color-selection);height:4px;margin:15px 0 7px;cursor:pointer}
input[type=checkbox]{accent-color:var(--color-selection);width:15px;height:15px;cursor:pointer;flex-shrink:0}
output{float:right;color:var(--accent);font-size:11px;font-variant-numeric:tabular-nums}
.recent{margin-top:40px}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.section-title>span{font-size:12px;color:var(--muted)}
.project-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.project-tile{text-align:left;color:var(--text);background:var(--panel);padding:17px;border:1px solid var(--line);border-radius:var(--radius-10);overflow:hidden}
.project-tile:hover{border-color:var(--color-action-border)}
.project-tile strong{font-size:12px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-tile small{display:block;color:var(--muted);margin-top:7px}
.muted{color:var(--muted);font-size:12px}
.editor{padding:26px 30px 32px;max-width:1920px;margin:auto}
.project-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:24px}
.project-heading h1{font-size:23px;font-weight:500;letter-spacing:-.6px;margin-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50vw}
.heading-actions{display:flex;align-items:center;gap:12px}
.workspace{display:grid;grid-template-columns:265px minmax(320px,1fr) 350px;gap:20px;align-items:start}
.settings-panel{padding:22px 19px}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:5px}
.panel-title h2{font-size:14px}
.pill{font-size:8px;font-weight:600;letter-spacing:1px;color:var(--accent);background:var(--color-action-soft);padding:5px 6px;border-radius:var(--radius-4)}
fieldset{border:0;padding:0;margin:0;min-width:0}
fieldset:disabled{opacity:.5}
.setting-section{padding:21px 0;border-bottom:1px solid var(--line)}
.setting-section h3{font-weight:500;margin-bottom:18px}
.setting-section h3 span{font-size:10px;color:var(--muted);margin-right:8px}
.setting-section label{margin-top:17px;font-size:11px}
.setting-section.last{border:0;padding-bottom:0}
.preset-row{display:flex;background:var(--color-field);border:1px solid var(--color-control-border);border-radius:var(--radius-7);padding:3px;gap:2px}
.preset{background:none;color:var(--muted);border:0;font-size:10px;border-radius:var(--radius-4);padding:8px 4px;flex:1}
.preset.active{background:var(--color-action-soft);color:var(--accent)}
.help{display:block;color:var(--color-text-muted);font-size:10px;line-height:1.55;margin-top:8px}
.switch-line{display:flex;align-items:center;justify-content:space-between}
.preview-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
.segmented{display:inline-flex;gap:2px;border:1px solid var(--line);padding:3px;border-radius:var(--radius-8)}
.segmented button{background:none;border:0;color:var(--muted);padding:7px 12px;font-size:11px;border-radius:var(--radius-5)}
.segmented button.active{background:var(--color-action-soft);color:var(--text)}
.video-stage{height:480px;min-height:300px;background:var(--color-player-background);border:1px solid var(--color-player-border);border-radius:var(--radius-12);display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}
.video-stage video{height:100%;width:100%;object-fit:contain}
.preview-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0}
.preview-footer>span{font-size:11px;color:var(--muted);max-width:220px;line-height:1.5}
.statistics{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;margin:3px 0 22px}
.statistics>div{flex:1;padding:0 17px;border-left:1px solid var(--line)}
.statistics>div:first-child{padding-left:0;border:0}
.statistics small{display:block;color:var(--muted);font-size:10px}
.statistics strong{display:block;font-size:22px;font-weight:400;letter-spacing:-.6px;margin-top:5px}
.accent{color:var(--accent)}
.timeline-heading{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);letter-spacing:1px;margin-bottom:11px}
.timeline-heading>span:last-child{letter-spacing:0}
.legend-cut{display:inline-block;background:var(--color-timeline-cut);width:7px;height:7px;margin-right:5px}
.timeline-card canvas{display:block;width:100%;height:90px;cursor:crosshair;background:var(--color-timeline-background);border-radius:var(--radius-6)}
.timeline-labels{display:flex;justify-content:space-between;color:var(--color-text-muted);font-size:10px;margin-top:7px}
.review-panel{overflow:hidden}
.review-panel>.panel-title{padding:22px 18px}
.tabs{display:flex;padding:0 17px;gap:20px;border-bottom:1px solid var(--line)}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:0 2px 12px;color:var(--muted);font-size:12px}
.tabs button.active{border-bottom-color:var(--accent);color:var(--accent)}
.review-hint{font-size:11px;line-height:1.6;color:var(--muted);padding:16px 18px 12px}
.review-items{max-height:715px;overflow-y:auto;padding:0 12px 12px;scrollbar-width:thin;scrollbar-color:var(--color-scrollbar) transparent}
.caption-row,.pause-row,.zoom-row{border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-9);padding:12px;margin-bottom:9px}
.caption-row.excluded{opacity:.45;background:var(--color-error-surface);border-color:var(--color-error)}
.row-top{display:flex;gap:7px;align-items:center}
.time-button{font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.2px;color:var(--accent);border:0;background:transparent;padding:3px 0}
.row-number{font-size:10px;color:var(--color-text-muted);margin-left:auto}
.caption-row textarea{font-size:12px;margin-top:8px;background:var(--color-field);border-color:var(--color-control-border);min-height:59px;padding:7px 9px}
.row-bottom{display:flex;gap:10px;align-items:center;margin-top:7px}
.row-bottom label{color:var(--muted);font-size:10px;flex:1}
.row-bottom select{padding:5px 4px;margin:0;font-size:10px;min-width:135px}
.time-edit{margin-top:7px;color:var(--muted);font-size:10px}
.time-edit summary{cursor:pointer}
.time-inputs{display:flex;gap:10px;margin-top:6px}
.time-inputs label{flex:1;font-size:10px}
.time-inputs input{font-size:11px;padding:5px}
.pause-row>label{display:flex;align-items:center;gap:8px}
.pause-row p,.zoom-row p{font-size:12px;line-height:1.5;color:var(--color-text);margin:8px 0}
.pause-row small,.zoom-row small{font-size:10px;color:var(--muted)}
.zoom-row .zoom-tag{color:var(--accent);font-size:10px}
.empty-review{text-align:center;padding:55px 12px;color:var(--muted)}
.empty-review>span{font-size:28px;color:var(--accent)}
.empty-review h3{color:var(--text);font-weight:500;margin:18px 0 10px}
.empty-review p{font-size:12px;line-height:1.7}
.job-panel{background:var(--color-action-soft);border:1px solid var(--color-progress);border-radius:var(--radius-12);padding:15px 20px;margin-bottom:20px}
.job-copy{display:flex;justify-content:space-between;gap:16px;font-size:13px}
.job-copy strong{color:var(--color-progress)}
progress{width:100%;height:5px;accent-color:var(--color-progress);margin:12px 0}
.job-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px}
.job-bottom small{color:var(--muted);font-size:11px}
.job-panel.error{border-color:var(--color-error);background:var(--color-error-surface)}
.job-panel.error .job-copy,.job-panel.error .job-copy strong{color:var(--color-error)}
.downloads{display:flex;align-items:center;flex-wrap:wrap;gap:13px;background:var(--color-success-surface);border:1px solid var(--color-success);padding:17px;border-radius:var(--radius-10);margin-top:20px}
.downloads>div{width:100%;margin-bottom:3px}
.downloads strong{font-weight:500;font-size:14px}
.downloads small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);border:1px solid var(--color-action-border);border-radius:var(--radius-10);box-shadow:var(--shadow-toast);padding:15px 23px;background:var(--color-action-soft);color:var(--text);z-index:100;max-width:min(600px,90vw);font-size:13px;line-height:1.5}
#toast.error{background:var(--color-error-surface);border-color:var(--color-error)}
.dirty{color:var(--warning)!important}
@media(min-width:1550px){.workspace{grid-template-columns:290px minmax(420px,1fr) 390px;gap:26px}
.video-stage{height:570px}
.review-items{max-height:800px}
}
@media(max-width:1120px){.workspace{grid-template-columns:235px minmax(280px,1fr);gap:16px}
.review-panel{grid-column:1/-1}
.review-items{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-height:460px}
.caption-row,.pause-row,.zoom-row{margin:0}
.editor{padding:24px 20px}
.privacy{display:none}
.heading-actions{gap:7px}
.video-stage{height:500px}
}
@media(max-width:700px){.app-header{padding:0 20px;height:66px}
.local-badge{display:none}
.brand{font-size:21px}
.home{padding:38px 20px}
.home>h1{font-size:39px;letter-spacing:-1.5px}
.lead{font-size:14px}
.import-layout{grid-template-columns:1fr}
.project-list{grid-template-columns:1fr}
.workspace{display:flex;flex-direction:column}
.settings-panel,.review-panel,.preview-panel{width:100%}
.settings-panel{order:2}
.review-panel{order:3}
.preview-panel{order:1}
.project-heading{flex-wrap:wrap;margin-bottom:18px;gap:16px}
.project-heading h1{max-width:85vw;font-size:19px}
.heading-actions{width:100%;justify-content:space-between}
.review-items{display:block;max-height:540px}
.caption-row,.pause-row,.zoom-row{margin-bottom:10px}
.video-stage{height:450px}
.editor{padding:21px 16px}
.settings-panel fieldset{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.setting-section{border:0}
.job-panel{padding:13px}
.job-copy{line-height:1.5}
.preview-footer>span{max-width:180px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}
}
.app-help{padding:20px 24px 32px;text-align:center}.app-help a{color:var(--text-secondary,#a8b0c2);text-underline-offset:4px}.app-help a:focus-visible{outline:2px solid var(--accent,#a78bfa);outline-offset:5px}