body { font-family: system-ui, sans-serif; max-width: 960px; margin: 2rem auto; padding: 0 1rem; }
.error { color: #c0392b; }
.login-form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 320px; }
.login-form label { display: flex; flex-direction: column; gap: 0.25rem; }
.logout-form { display: inline; margin-left: 1rem; }
.logout-form button { font-size: 0.8rem; }
.badge { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 0.5rem; margin-left: 0.5rem; }
.badge.done { background: #2ecc71; color: white; }
.badge.in-progress { background: #f39c12; color: white; }
.job-list { list-style: none; padding: 0; }
.job-list li { padding: 0.5rem 0; border-bottom: 1px solid #ddd; }
.tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.tabs button { padding: 0.5rem 1rem; border: 1px solid #ccc; background: #f5f5f5; cursor: pointer; }
.tabs button.active { background: #333; color: white; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
#source-preview { width: 100%; max-height: 360px; background: black; margin-bottom: 0.5rem; }
#waveform { border: 1px solid #ccc; width: 100%; cursor: crosshair; }
.hint { color: #666; font-size: 0.875rem; }
.clip-row, .narration-block { border: 1px solid #ddd; padding: 0.75rem; margin-bottom: 0.5rem; border-radius: 0.25rem; }
.narration-block textarea { width: 100%; min-height: 4rem; }
.duration-estimate { color: #666; font-size: 0.8rem; }
#pipeline-log, #generate-log { background: #111; color: #0f0; padding: 0.5rem; max-height: 200px; overflow-y: auto; font-size: 0.8rem; }
#result-video { width: 100%; margin-top: 1rem; }