:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --bg:#0a0d12; --panel:#121722; --line:#263043; --text:#f4f7fb; --muted:#9ba8bc; --accent:#7c9cff; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at top, #19233a 0, var(--bg) 40%); color:var(--text); }
.shell { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:28px 0; }
header { max-width:900px; margin-bottom:20px; }
.eyebrow { color:#a8baff; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:800; }
h1 { font-size:clamp(2rem, 4vw, 3.25rem); line-height:1.02; margin:8px 0 10px; }
p { color:var(--muted); line-height:1.5; margin:0; }
form { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(390px, .9fr); grid-template-areas:"dropzone settings" "files settings" "files action"; gap:16px; align-items:start; }
.dropzone, .panel { background:rgba(18,23,34,.9); border:1px solid var(--line); border-radius:22px; }
.dropzone { grid-area:dropzone; min-height:190px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:24px; text-align:center; border-style:dashed; cursor:pointer; transition:.2s; }
.dropzone:hover, .dropzone.dragging { border-color:var(--accent); transform:translateY(-2px); background:#151d2c; }
.drop-icon { width:54px; height:54px; border-radius:18px; display:grid; place-items:center; background:#233052; color:#b8c6ff; font-size:2rem; }
.dropzone span, small { color:var(--muted); }
.panel { padding:20px; }
.settings { grid-area:settings; }
#filePanel { grid-area:files; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; }
h2 { margin:0 0 18px; font-size:1rem; }
.grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
label { display:grid; gap:8px; color:#cbd4e3; font-size:.9rem; }
input, select { width:100%; border:1px solid var(--line); background:#0d121c; color:var(--text); border-radius:12px; padding:12px 14px; font:inherit; }
input:focus, select:focus { outline:2px solid rgba(124,156,255,.35); border-color:var(--accent); }
.range-field { grid-column:1/-1; }
.range-label { display:flex; align-items:center; gap:4px; white-space:nowrap; }
input[type=range] { padding:0; accent-color:var(--accent); }
.check { display:flex; grid-auto-flow:column; justify-content:start; align-items:center; margin-top:14px; }
.check input { width:auto; }
.suffix-input { position:relative; }.suffix-input span { position:absolute; right:14px; top:11px; color:var(--muted); }
.file-list { display:grid; gap:10px; }
.file-item { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px; background:#0d121c; border-radius:14px; }
.file-item img { width:46px; height:46px; border-radius:10px; object-fit:cover; }
.file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-meta { color:var(--muted); font-size:.78rem; }
.file-dimensions { color:#b8c6ff; font-size:.78rem; margin-top:4px; }
.remove { border:0; background:transparent; color:#ff9eaa; cursor:pointer; font-size:1.2rem; }
.actions { grid-area:action; display:grid; gap:10px; }
.primary { border:0; border-radius:14px; padding:16px 20px; font-weight:800; font-size:1rem; background:linear-gradient(135deg, #7895ff, #9f7cff); color:white; cursor:pointer; }
.primary:disabled { opacity:.4; cursor:not-allowed; }
.text-button { border:0; background:transparent; color:#aebfff; cursor:pointer; }
.progress-box { display:grid; gap:8px; }.progress-track { height:10px; overflow:hidden; background:#1c2535; border-radius:999px; }.progress-track div { width:0; height:100%; background:linear-gradient(90deg,#7895ff,#b27cff); transition:width .2s; }
.message { min-height:24px; margin:0; }.message.error { color:#ff9eaa; }.message.success { color:#8ce6b4; }
.hidden { display:none !important; }
@media (max-width:850px) { .shell{padding:32px 0} form{grid-template-columns:1fr;grid-template-areas:"dropzone" "files" "settings" "action"}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.range-field{grid-column:1/-1} }
@media (max-width:650px) { .shell{padding:24px 0}.grid{grid-template-columns:1fr}.range-field{grid-column:auto}.panel{padding:18px}.dropzone{min-height:190px} }