:root{
  --navy:#0b1a33; --navy2:#10254a; --gold:#d4a437; --gold2:#f0c75e;
  --ink:#eaf0fa; --muted:#9fb0cc; --card:#132641; --line:#243c63;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:linear-gradient(180deg,var(--navy),#081222);color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;min-height:100vh}
.wrap{max-width:980px;margin:0 auto;padding:0 18px}
.topbar{background:rgba(8,18,34,.85);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;backdrop-filter:blur(6px)}
.topbar-in{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;gap:12px;flex-wrap:wrap}
.brand{font-size:19px;color:var(--ink)}
.brand b{color:var(--gold2)}
.brand-mark{display:inline-flex;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--gold),#a97e1c);
  color:#0b1a33;font-weight:800;align-items:center;justify-content:center;margin-right:8px}
.top-note{color:var(--muted);font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px;margin:20px 0;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.card h3{color:var(--gold2);margin-bottom:14px;font-size:16px;letter-spacing:.4px}
.hidden{display:none!important}

.dropzone{border:2px dashed var(--line);border-radius:12px;text-align:center;
  padding:52px 20px;cursor:pointer;transition:.2s;background:rgba(16,37,74,.4)}
.dropzone:hover,.dropzone.drag{border-color:var(--gold);background:rgba(212,164,55,.07)}
.dz-icon{font-size:44px;color:var(--gold);margin-bottom:10px}
.dropzone h2{font-size:20px;margin-bottom:8px}
.dropzone p{color:var(--muted);font-size:13px}

.queue{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.qthumb{width:86px;border:2px solid var(--line);border-radius:8px;overflow:hidden;
  position:relative;cursor:pointer;background:#000}
.qthumb img{width:100%;height:64px;object-fit:cover;display:block}
.qthumb.active{border-color:var(--gold)}
.qthumb.done::after{content:"\2713";position:absolute;top:4px;right:6px;color:var(--gold2);
  font-weight:800;text-shadow:0 1px 3px #000}

.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wrap-row{margin-top:16px}
.seg{display:inline-flex;background:var(--navy2);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{background:none;border:none;color:var(--muted);padding:9px 18px;cursor:pointer;font-size:14px}
.seg button.on{background:var(--gold);color:#0b1a33;font-weight:700}
.btn{border:none;border-radius:9px;padding:11px 26px;font-size:15px;cursor:pointer;font-weight:700}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#0b1a33}
.btn.gold:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.status{color:var(--muted);font-size:13px}
.progress-wrap{margin-top:14px;display:flex;align-items:center;gap:12px}
.progress{flex:1;height:10px;background:var(--navy2);border-radius:6px;overflow:hidden}
#progressBar{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .2s}
#progressText{font-size:13px;color:var(--muted);min-width:120px}

.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 22px}
.sliders label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
.sliders input[type=range]{flex:1;accent-color:var(--gold)}
.sliders span{min-width:34px;text-align:right;color:var(--muted);font-size:13px}

.compare-wrap{margin-bottom:6px;text-align:center}
.compare{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:10px;
  background:#000;border:1px solid var(--line);user-select:none;text-align:left}
#imgAfter{display:block;max-width:100%;max-height:560px;width:auto;height:auto}
#beforeClip{position:absolute;top:0;left:0;bottom:0;overflow:hidden;width:50%}
#beforeClip img{display:block;height:100%;width:auto;max-width:none;max-height:none}
#handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold2);
  pointer-events:none;box-shadow:0 0 8px rgba(240,199,94,.8)}
#compareRange{position:absolute;inset:0;width:100%;opacity:0;cursor:ew-resize;margin:0}
.compare-labels{display:flex;justify-content:space-between;color:var(--muted);
  font-size:12px;margin-top:6px;text-transform:uppercase;letter-spacing:1px}
.q{display:flex;align-items:center;gap:8px;font-size:14px}
.q input{accent-color:var(--gold)}
.hint{color:var(--muted);font-size:13px;margin-top:12px}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:26px 0 40px}
@media(max-width:600px){.top-note{display:none}.card{padding:16px}}