*, *::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: 0 1rem 2rem; }

.tab-nav { background: #0d0d14; border-bottom: 1px solid #1e1e30; padding: 0.5rem 1rem 0; margin-bottom: 2rem; position: sticky; top: 0; z-index: 10; }
.tab-nav-inner { max-width: 780px; margin: 0 auto; display: flex; gap: 0; }
.tab-btn { background: transparent; border: none; border-bottom: 2px solid transparent; color: #6b6b8f; padding: 0.65rem 1.2rem; font-size: 0.92rem; cursor: pointer; transition: color 0.15s, border-color 0.15s; display: flex; align-items: center; gap: 0.4rem; }
.tab-btn:hover { color: #aaaacc; }
.tab-btn.active { color: #fff; border-bottom-color: #5555d8; font-weight: 600; }
.tab-nav.hidden { display: none; }

.jobs-count-badge { background: #5555d8; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 10px; min-width: 1.3rem; text-align: center; }
.jobs-view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.jobs-view-header h1 { margin-bottom: 0; }
.jobs-empty { color: #6b6b8f; padding: 2rem; text-align: center; background: #181826; border-radius: 10px; }

.jobs-usage-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.85rem; background: #181826; border: 1px solid #2a2a3e; }
.jobs-usage-bar.limit-ok  { border-color: #2a4a2a; }
.jobs-usage-bar.limit-high { border-color: #4a3a10; }
.jobs-usage-bar.limit-hit  { border-color: #4a1a1a; }
.jobs-usage-icon { font-size: 1rem; flex-shrink: 0; }
.jobs-usage-text { flex: 1; color: #ccc; }
.jobs-usage-weekly { color: #6b6b8f; font-size: 0.78rem; margin-left: 0.4rem; }
.jobs-usage-fill-wrap { width: 90px; height: 6px; background: #2a2a3e; border-radius: 3px; flex-shrink: 0; overflow: hidden; }
.jobs-usage-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.jobs-usage-stale { font-size: 0.72rem; color: #6b6b8f; background: #2a2a3e; padding: 0.1rem 0.35rem; border-radius: 4px; margin-left: 0.35rem; }

.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; }
.error-box { color: #e06060; padding: 0.7rem 1rem; background: #200e0e; border-radius: 8px; font-size: 0.85rem; }
.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; display: flex; flex-direction: column; gap: 0.5rem; }

.rjob-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border-radius: 10px; background: #181826; border: 1px solid #26263a; transition: border-color 0.1s; cursor: default; }
.rjob-row:hover { border-color: #3a3a60; }
.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-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex-shrink: 0; }
.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-montage-badge { font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 4px; }
.montage-ready    { background: #0a2510; color: #50d070; border: 1px solid #1a5020; }
.montage-rendering { background: #1a1040; color: #8070e0; border: 1px solid #3a2080; }
.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; }
.btn-prioritize { background: #0f1a0f; border: 1px solid #2a5a2a; color: #5ab05a; padding: 0.3rem 0.7rem; border-radius: 5px; font-size: 0.82rem; cursor: pointer; font-weight: 600; }
.btn-prioritize:hover { background: #1a2e1a; border-color: #4a9a4a; }
.btn-prioritize-active { background: #1a3a1a; border-color: #4aaa4a; color: #7ada7a; cursor: default; }
.rjob-queue-badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.rjob-queue-running { background: #0e2a0e; color: #4ade80; border: 1px solid #2a6a2a; }
.rjob-queue-waiting { background: #1a1a0a; color: #a0a050; border: 1px solid #4a4a10; }
.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; }

/* Montage card */
.montage-card { margin-top: 1.5rem; background: #13131f; border: 1px solid #26263a; border-radius: 12px; padding: 1.2rem 1.4rem; }
.montage-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.montage-icon { font-size: 1.2rem; }
.montage-title { font-weight: 600; font-size: 1rem; color: #dde0ef; flex: 1; }
.montage-bar { height: 5px; background: #26263a; border-radius: 3px; margin-bottom: 0.9rem; overflow: hidden; }
.montage-bar-fill { height: 100%; background: linear-gradient(90deg, #5555d8, #8888ff); border-radius: 3px; width: 0; transition: width 0.5s; }
.montage-file-row { display: flex; align-items: center; gap: 0.5rem; background: #0d0d18; border: 1px solid #1e1e30; border-radius: 8px; padding: 0.5rem 0.8rem; margin-bottom: 0.8rem; }
.montage-file-label { font-size: 1rem; flex-shrink: 0; }
.montage-file-path { font-size: 0.78rem; color: #8888aa; font-family: monospace; flex: 1; word-break: break-all; }
.btn-copy-path { background: #1e1e35; border: 1px solid #3a3a60; color: #9090cc; padding: 0.2rem 0.6rem; border-radius: 5px; font-size: 0.78rem; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
.btn-copy-path:hover { background: #28283f; color: #b0b0ee; }
.montage-actions { display: flex; gap: 0.75rem; margin-top: 0.9rem; }
.montage-actions .btn-primary, .montage-actions .btn-secondary { flex: 1; }

/* Gemini usage panel */
.usage-panel { background:#15151f; border:1px solid #26263a; border-radius:10px; padding:0.8rem 1rem; margin-bottom:1rem; }
.usage-row { display:flex; justify-content:space-between; align-items:center; }
.usage-label { font-size:0.85rem; color:#cfcfe0; font-weight:600; }
.usage-pct { font-size:0.9rem; font-weight:700; color:#fff; }
.usage-bar { height:6px; background:#26263a; border-radius:3px; margin:0.5rem 0; overflow:hidden; }
.usage-fill { height:100%; background:linear-gradient(90deg,#6060d0,#a060d0); border-radius:3px; width:0; transition:width .5s; }
.usage-fill.high { background:linear-gradient(90deg,#d08020,#e0506050); }
.usage-fill.full { background:linear-gradient(90deg,#e05060,#e05060); }
.usage-sub { font-size:0.75rem; color:#9090a8; margin-top:0.15rem; }
.usage-wait { margin-top:0.5rem; padding:0.5rem 0.7rem; background:#201a0e; border:1px solid #5a4520; border-radius:8px; color:#f0c060; font-size:0.82rem; }

/* Mode selector */
.field-label { display:block; font-size:0.85rem; font-weight:600; color:#aab; margin-bottom:0.4rem; }
.select-input { width:100%; background:#181826; border:1px solid #26263a; border-radius:8px; padding:0.7rem 1rem; color:#dde0ef; font-size:0.95rem; font-family:inherit; cursor:pointer; }
.select-input:focus { outline:none; border-color:#6060e0; }