:root{--bg:#0b1020;--panel:#111a2e;--panel2:#0d1527;--line:#24314a;--text:#eef3ff;--muted:#9aa9c3;--accent:#7c9cff;--accent2:#5ce0c0;--danger:#ff8c9b;--radius:18px}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0%,#1b2a4b 0,transparent 38%),var(--bg);color:var(--text);font-family:Tahoma,"Segoe UI",sans-serif;font-size:14px;line-height:1.7}
.topbar{height:82px;padding:0 4vw;display:flex;align-items:center;gap:13px;border-bottom:1px solid #ffffff12;background:#0a1020cc;position:sticky;top:0;z-index:5;backdrop-filter:blur(16px)}
.brandmark{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#8ca9ff,#5ce0c0);color:#091226;display:grid;place-items:center;font-size:24px;font-weight:900}
.brand h1{font-size:16px;margin:0;font-weight:800}.brand p{font-size:11px;color:var(--muted);margin:0}.offline-pill{margin-right:auto;border:1px solid #2a675d;background:#10332f;color:#8af1d7;border-radius:99px;padding:5px 12px;font-size:11px;display:flex;align-items:center;gap:7px}.offline-pill span{width:7px;height:7px;background:#5ce0c0;border-radius:50%;box-shadow:0 0 10px #5ce0c0}
.app-shell{max-width:1500px;margin:auto;padding:28px 3vw 18px}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 22px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent2);font-weight:bold}.intro h2{font-size:25px;line-height:1.4;margin:4px 0 6px}.intro p{color:var(--muted);margin:0}.spec-badge{display:flex;flex-direction:column;align-items:center;background:#172442;border:1px solid #314365;border-radius:15px;padding:12px 22px;min-width:150px}.spec-badge strong{font-size:20px;direction:ltr}.spec-badge span{color:var(--muted);font-size:11px}
.panel{background:linear-gradient(145deg,#121d33,#0f172a);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 38px #00000018}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;margin-bottom:18px;gap:18px}.toolbar-copy h3,.panel-heading h3,.progress-top h3{margin:0;font-size:15px}.toolbar-copy p,.panel-heading p,.progress-top p{margin:2px 0 0;color:var(--muted);font-size:11px}.button-row{display:flex;gap:9px;flex-wrap:wrap}.button{font-family:inherit;border:1px solid transparent;border-radius:10px;padding:10px 15px;cursor:pointer;font-weight:700;font-size:12px;transition:.18s;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}.button:disabled{opacity:.38;cursor:not-allowed}.primary{background:linear-gradient(135deg,#8ca9ff,#6d8df0);color:#081127}.secondary{background:#1d2b48;color:#e8efff;border-color:#34486d}.ghost{background:transparent;color:#bdc9df;border-color:#34415b}.full{width:100%}
.workspace{display:grid;grid-template-columns:minmax(260px, .8fr) minmax(500px,2fr);gap:18px;align-items:start}.queue-panel{display:flex;flex-direction:column;min-height:740px}.panel-heading{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #ffffff0d}.counter{min-width:30px;height:30px;display:grid;place-items:center;background:#202f4c;color:#cbd8ff;border-radius:9px;font-weight:bold}.file-list{padding:10px;display:flex;flex-direction:column;gap:6px;max-height:570px;overflow:auto}.file-item{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid transparent;border-radius:12px;cursor:pointer;min-width:0}.file-item:hover{background:#ffffff06}.file-item.active{background:#1b2b4b;border-color:#506ca5}.thumb{width:45px;height:54px;object-fit:cover;border-radius:7px;background-color:#dce3ef;background-image:linear-gradient(45deg,#ccd3e0 25%,transparent 25%),linear-gradient(-45deg,#ccd3e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccd3e0 75%),linear-gradient(-45deg,transparent 75%,#ccd3e0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.file-meta{min-width:0;flex:1}.file-meta strong{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta span{display:block;font-size:10px;color:var(--muted)}.file-state{font-size:10px;color:var(--muted)}.file-state.done{color:var(--accent2)}.empty-state{min-height:230px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--muted);text-align:center}.empty-state strong{color:#d8e2f5;font-size:12px}.empty-icon{font-size:34px;color:#7185aa}.queue-footer{margin-top:auto;padding:15px;border-top:1px solid #ffffff0d}.small-note{font-size:10px;color:var(--muted);line-height:1.8;margin:9px 0 0}
.editor-panel{min-width:0}.editor-heading{align-items:flex-start}.status{font-size:10px;color:#9fb3d9;background:#1b2944;border-radius:7px;padding:4px 8px;white-space:nowrap}.preview-wrap{padding:18px 20px 12px;border-bottom:1px solid #ffffff0d}.preview-stage{position:relative;width:min(100%,354px);aspect-ratio:354/472;margin:auto;border:1px solid #4b5d7b;border-radius:5px;overflow:hidden;background-color:#e6eaf1;background-image:linear-gradient(45deg,#c9d0dc 25%,transparent 25%),linear-gradient(-45deg,#c9d0dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c9d0dc 75%),linear-gradient(-45deg,transparent 75%,#c9d0dc 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
#previewCanvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.preview-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#65748f;pointer-events:none}.preview-placeholder strong{font-size:13px}.preview-placeholder span{font-size:10px}.placeholder-symbol{font-size:30px;margin-bottom:8px}.preview-caption{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;color:var(--muted);font-size:10px;margin-top:10px}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;padding:0 20px 18px}.control-section{padding:18px 0 4px;border-bottom:1px solid #ffffff0d}.control-section:nth-last-child(-n+2){border-bottom:0}.section-title{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:bold;margin-bottom:13px}.text-button{font:inherit;font-size:10px;color:var(--accent);border:0;background:none;cursor:pointer}.mini-tag{font-size:9px;color:#83e8d1;background:#163a37;border-radius:6px;padding:3px 7px;font-weight:normal}.mode-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:15px}.radio-card{display:flex;gap:7px;align-items:flex-start;border:1px solid #2c3b58;border-radius:10px;padding:9px;cursor:pointer;background:#0c1426}.radio-card:has(input:checked){border-color:#7898ff;background:#192745}.radio-card input{accent-color:#8ca9ff;margin-top:5px}.radio-card b{display:block;font-size:10px}.radio-card small{display:block;color:var(--muted);font-size:9px}.slider-control{margin:13px 0}.slider-control>div{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.slider-control label{font-size:11px;color:#dbe5f7}.slider-control output{font-size:10px;color:var(--accent2);direction:ltr}input[type=range]{width:100%;accent-color:#8ca9ff;cursor:pointer}.notice{background:#302719;border:1px solid #68512c;border-radius:10px;padding:10px 12px;margin-bottom:12px}.notice strong{font-size:11px;color:#ffd99a}.notice p{margin:3px 0 0;color:#d5c7a8;font-size:10px;line-height:1.8}.brush-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.brush-row label{font-size:10px;color:var(--muted)}select{display:block;width:100%;margin-top:5px;background:#0b1426;color:#eaf0fc;border:1px solid #354563;border-radius:8px;padding:8px;font:inherit;font-size:11px}.output-info{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #ffffff0b;font-size:11px}.output-info span{color:var(--muted)}.output-info strong{direction:ltr}.output-info+button{margin-top:15px}
.progress-panel{margin-top:18px;padding:18px 22px}.progress-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.progress-top>strong{font-size:17px;color:var(--accent2);direction:ltr}.progress-track{height:7px;background:#202b42;border-radius:20px;overflow:hidden}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,#7c9cff,#5ce0c0);transition:width .2s}.log{margin-top:12px;font-size:10px;color:var(--muted);min-height:18px;overflow-wrap:anywhere}footer{text-align:center;color:#65738e;font-size:10px;padding:20px}
@media(max-width:1050px){.workspace{grid-template-columns:1fr}.queue-panel{min-height:auto}.file-list{max-height:280px}.controls{grid-template-columns:1fr 1fr}.queue-footer{margin-top:0}}
@media(max-width:650px){.app-shell{padding:18px 12px}.topbar{padding:0 14px}.intro{align-items:flex-start;flex-direction:column}.spec-badge{align-items:flex-start}.toolbar{align-items:flex-start;flex-direction:column}.button-row{width:100%}.button-row>*{flex:1}.controls{grid-template-columns:1fr}.control-section:nth-last-child(-n+2){border-bottom:1px solid #ffffff0d}.panel-heading{padding:14px}.preview-wrap{padding:14px}.editor-heading{flex-direction:column}.spec-badge{min-width:0}.intro h2{font-size:22px}}


/* LIGHT THEME OVERRIDES */
:root{--bg:#f3f6fb;--panel:#fff;--panel2:#f8faff;--line:#dce4f0;--text:#17233b;--muted:#687792;--accent:#456fe5;--accent2:#0b9b7c;--danger:#c83d5b;--radius:18px}
body{background:radial-gradient(ellipse at 80% 0%,#e4edff 0,transparent 42%),var(--bg);color:var(--text)}
.topbar{border-bottom-color:#dce4f0;background:#ffffffeb}
.offline-pill{border-color:#b6e6d8;background:#e8fbf5;color:#087a63}
.offline-pill span{background:#18b994;box-shadow:0 0 10px #5ce0c080}
.spec-badge{background:#fff;border-color:#d5dfef;box-shadow:0 8px 25px #2b47700c}
.spec-badge span,.toolbar-copy p,.panel-heading p,.progress-top p,.small-note,.preview-caption,.file-meta span,.file-state,.empty-state{color:var(--muted)}
.panel{background:linear-gradient(145deg,#fff,#fbfcff);border-color:var(--line);box-shadow:0 14px 38px #253b5b0b}
.panel-heading,.preview-wrap,.queue-footer,.control-section{border-color:#e8edf5}
.counter{background:#edf2ff;color:#3e5ca8}
.file-item:hover{background:#f6f8fd}.file-item.active{background:#eef3ff;border-color:#a9bdf3}
.thumb{background-color:#e5eaf2;background-image:linear-gradient(45deg,#cbd4e1 25%,transparent 25%),linear-gradient(-45deg,#cbd4e1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cbd4e1 75%),linear-gradient(-45deg,transparent 75%,#cbd4e1 75%)}
.empty-state strong{color:#33415c}.empty-icon{color:#8a9ab5}
.status{color:#52658a;background:#eef2fa}
.preview-stage{border-color:#b8c5d9}
.text-button{color:var(--accent)}
.mini-tag{color:#087a63;background:#e7f8f2}
.radio-card{border-color:#dce4f0;background:#fff}.radio-card:has(input:checked){border-color:#7898e9;background:#f0f4ff}
.slider-control label{color:#34425b}.slider-control output{color:var(--accent2)}input[type=range]{accent-color:#5278e5}
.notice{background:#fff8e8;border-color:#f0d8a4}.notice strong{color:#895d13}.notice p{color:#725d37}
.brush-row label{color:var(--muted)}select{background:#fff;color:#25334d;border-color:#d3dceb}
.output-info{border-color:#e8edf5}.output-info span{color:var(--muted)}
.progress-track{background:#e5ebf5}.progress-top>strong{color:var(--accent2)}.log,footer{color:#7d8ba3}
.secondary{background:#edf2fc;color:#233b68;border-color:#d4def0}.ghost{background:transparent;color:#52627d;border-color:#d3dceb}