*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0d0d14; color: #dde0ef; min-height: 100vh; padding: 2rem 1rem; }

.container { max-width: 780px; margin: 0 auto; }
h1 { font-size: 1.75rem; margin-bottom: 0.3rem; color: #fff; }
.subtitle { color: #6b6b8f; margin-bottom: 2rem; }

.view { display: none; }
.view.active { display: block; }

.field { margin-bottom: 1.4rem; }
label { display: block; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8888aa; margin-bottom: 0.45rem; }
input, textarea { width: 100%; background: #181826; border: 1px solid #26263a; border-radius: 8px; padding: 0.7rem 1rem; color: #dde0ef; font-size: 1rem; font-family: inherit; transition: border-color 0.15s; }
textarea { resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: #6060e0; }

.btn-primary   { background: #5555d8; color: #fff; border: none; padding: 0.7rem 1.4rem; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background 0.15s; }
.btn-primary:hover { background: #6868e8; }
.btn-primary:disabled { background: #30304a; cursor: not-allowed; }
.btn-secondary { background: transparent; color: #8888aa; border: 1px solid #26263a; padding: 0.7rem 1.4rem; border-radius: 8px; font-size: 1rem; cursor: pointer; }

.row-actions { display: flex; gap: 1rem; margin-top: 2rem; }

.error  { color: #e06060; margin-top: 1rem; padding: 0.7rem 1rem; background: #200e0e; border-radius: 8px; }
.hidden { display: none !important; }
.session-banner { padding: 0.6rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.88rem; }
.session-banner.ok   { background: #0a2010; color: #50c070; border: 1px solid #1a4020; }
.session-banner.warn { background: #201000; color: #c09030; border: 1px solid #402010; }
.btn-login { background: #c09030; color: #000; border: none; padding: 0.25rem 0.75rem; border-radius: 5px; font-size: 0.82rem; cursor: pointer; margin-left: 0.5rem; font-weight: 600; }
.lang-toggle { display: flex; gap: 0.5rem; }
.field-hint { font-weight: 400; color: #5555a0; font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
.segment-count-row { display: flex; align-items: center; gap: 0.75rem; }
.input-segments { width: 5rem; background: #181826; border: 1px solid #26263a; border-radius: 8px; padding: 0.55rem 0.75rem; color: #dde0ef; font-size: 1rem; text-align: center; }
.input-segments:focus { outline: none; border-color: #6060e0; }
.segment-presets { display: flex; gap: 0.4rem; }
.seg-preset { background: #181826; border: 1px solid #26263a; color: #8888aa; padding: 0.35rem 0.7rem; border-radius: 5px; font-size: 0.88rem; cursor: pointer; transition: all 0.12s; }
.seg-preset:hover { background: #22223a; border-color: #5555d8; color: #aaaaee; }
.checkbox-label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; text-transform: none; letter-spacing: 0; color: #dde0ef; font-size: 0.95rem; }
.checkbox-label input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: #5555d8; cursor: pointer; flex-shrink: 0; }
.checkbox-hint { color: #6b6b8f; font-size: 0.82rem; }
.lang-btn { background: #181826; border: 1px solid #26263a; color: #8888aa; padding: 0.5rem 1.2rem; border-radius: 6px; font-size: 0.95rem; cursor: pointer; transition: all 0.15s; }
.lang-btn.active { background: #5555d8; border-color: #5555d8; color: #fff; font-weight: 600; }
.btn-login:disabled { opacity: 0.6; cursor: not-allowed; }

.seg-card { background: #181826; border: 1px solid #26263a; border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 0.65rem; }
.seg-num  { font-size: 0.78rem; font-weight: 700; color: #6060d0; text-transform: uppercase; letter-spacing: 0.05em; }
.seg-title { font-size: 1.05rem; font-weight: 600; margin: 0.2rem 0; }
.seg-idea  { font-size: 0.88rem; color: #7070a0; }
.seg-method { font-size: 0.82rem; color: #5555c0; margin-top: 0.25rem; }

.step-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.2rem; background: #181826; border: 1px solid #26263a; border-radius: 10px; margin-bottom: 0.65rem; }
.poster-row { border-color: #3a2060; background: #130d20; margin-bottom: 1.2rem; }

/* Poster panel — dedicated section above segment list */
.poster-panel { background: #130d20; border: 1px solid #3a2060; border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 1.4rem; }
.poster-panel-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.poster-panel-icon { font-size: 1.2rem; }
.poster-panel-title { font-weight: 700; font-size: 1rem; color: #c8b0f0; flex: 1; }
.poster-panel-status { font-size: 0.82rem; color: #8888aa; margin-top: 0.3rem; }
#poster-panel-preview { margin-top: 0.6rem; }
#poster-panel-preview img { width: 100%; max-width: 560px; border-radius: 8px; box-shadow: 0 4px 24px rgba(100,60,200,0.5); display: block; }
.step-circle { width: 2rem; height: 2rem; border-radius: 50%; background: #26263a; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; margin-top: 0.1rem; }
.poster-circle { background: #2a1550; font-size: 1.1rem; }
.step-info { flex: 1; }
.step-title  { font-weight: 600; font-size: 1rem; }
.step-status { margin-top: 0.3rem; }
.step-folder { font-size: 0.8rem; color: #5555c0; cursor: default; margin-top: 0.35rem; word-break: break-all; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.folder-label { cursor: pointer; }
.folder-label:hover { text-decoration: underline; }
.btn-regen-seg { background: transparent; border: 1px solid #3a3a60; color: #7070b0; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; cursor: pointer; }
.btn-regen-seg:hover { background: #1e1050; color: #9080f0; border-color: #5555d8; }
.step-error  { font-size: 0.82rem; color: #e06060; margin-top: 0.3rem; }

.badge { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.b-pending { background: #20203a; color: #6060a0; }
.b-working { background: #1e1050; color: #9080f0; }
.b-done    { background: #0a2010; color: #50c070; }
.b-error   { background: #2a0808; color: #e06060; }
.b-warn    { background: #1e1200; color: #c09030; }

.queue-banner { padding: 0.6rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.88rem; }
.queue-banner.queue-paused  { background: #201000; color: #c09030; border: 1px solid #402010; }
.queue-banner.queue-waiting { background: #0e0e28; color: #7070c0; border: 1px solid #22224a; }
.queue-banner.queue-active  { background: #0a1e10; color: #50c070; border: 1px solid #1a4020; }

.success-box { margin-top: 2rem; padding: 1.5rem; background: #0a2010; border-radius: 10px; text-align: center; color: #60d080; font-size: 1.05rem; }
.retry-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.btn-retry { background: #3a1a00; border: 1px solid #c07020; color: #f0a030; padding: 0.25rem 0.8rem; border-radius: 5px; font-size: 0.82rem; cursor: pointer; font-weight: 600; }
.btn-retry:hover { background: #5a2a00; }
.btn-retry:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-rescue { background: #001a3a; border: 1px solid #2070c0; color: #60a8f0; padding: 0.25rem 0.8rem; border-radius: 5px; font-size: 0.82rem; cursor: pointer; font-weight: 600; }
.btn-rescue:hover { background: #002a5a; }
.btn-rescue:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.88rem; }

.progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.progress-header h1 { margin-bottom: 0; }

.recent-jobs-section { margin-top: 2rem; border: 1px solid #26263a; border-radius: 10px; overflow: hidden; }
.recent-jobs-header { padding: 0.75rem 1.2rem; background: #181826; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; font-weight: 600; color: #8888cc; user-select: none; }
.recent-jobs-header:hover { background: #1e1e2e; }
#recent-jobs-list { padding: 0.5rem; }

.rjob-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.75rem; border-radius: 8px; transition: background 0.1s; cursor: pointer; }
.rjob-row:hover { background: #181826; }
.rjob-info { flex: 1; min-width: 0; }
.rjob-title { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rjob-meta  { font-size: 0.78rem; color: #6060a0; margin-top: 0.15rem; }
.rjob-progress { font-size: 0.78rem; font-weight: 700; }
.rjob-progress.all-done { color: #50c070; }
.rjob-progress.partial  { color: #f0a030; }
.rjob-progress.none     { color: #e06060; }
.rjob-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.btn-resume { background: #1e1050; border: 1px solid #5555d8; color: #9080f0; padding: 0.3rem 0.8rem; border-radius: 5px; font-size: 0.82rem; cursor: pointer; font-weight: 600; }
.btn-resume:hover { background: #2a1a60; }
.btn-delete-job { background: transparent; border: 1px solid #3a2020; color: #805050; padding: 0.3rem 0.55rem; border-radius: 5px; font-size: 0.82rem; cursor: pointer; line-height: 1; }
.btn-delete-job:hover { background: #2a0808; color: #e06060; border-color: #c03030; }
.rjob-clear-bar { padding: 0.4rem 0.75rem 0.6rem; }
.btn-clear-failed { background: transparent; border: 1px solid #3a2020; color: #805050; padding: 0.3rem 0.9rem; border-radius: 5px; font-size: 0.8rem; cursor: pointer; }
.btn-clear-failed:hover { background: #2a0808; color: #e06060; border-color: #c03030; }
.btn-stop { background: #2a0808; border: 1px solid #c03030; color: #f06060; padding: 0.5rem 1.1rem; border-radius: 8px; font-size: 0.88rem; cursor: pointer; font-weight: 700; }
.btn-stop:hover { background: #400a0a; }
.btn-stop:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-stop-all { background: #1a0505; border: 1px solid #c03030; color: #f06060; padding: 0.4rem 0.9rem; border-radius: 7px; font-size: 0.85rem; cursor: pointer; font-weight: 700; }
.btn-stop-all:hover { background: #2a0808; }
.btn-stop-all:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-restart { background: #0a1e30; border: 1px solid #2060c0; color: #60a0f0; padding: 0.5rem 1.1rem; border-radius: 8px; font-size: 0.88rem; cursor: pointer; font-weight: 700; }
.btn-restart:hover { background: #0e2a42; }
.btn-restart:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-skip-seg { background: #1a1010; border: 1px solid #804040; color: #c07070; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.78rem; cursor: pointer; font-weight: 600; }
.btn-skip-seg:hover { background: #2a1515; }