:root{
  --bg:#0b0f19; --panel:#121829; --card:#151c32;
  --fg:#e7eefc; --muted:#9aa3b2; --pri:#6a9cff; --pri2:#3b82f6;
  --ok:#10b981; --err:#ef4444;
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
.wrap{ width:min(980px,92%); margin:0 auto; }
.hdr{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0 10px; }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ width:40px; height:40px; }
.title{ margin:0; font-size:28px; letter-spacing:.2px; }
.sub{ color:var(--muted); margin:.25rem 0 0; }
.drop-zone{ background:var(--card); border:2px dashed #2b3660; border-radius:16px; padding:36px; text-align:center; transition:.2s; }
.drop-zone.hover{ background:#182243; border-color: var(--pri); }
.btn{ background:#243764; border:1px solid #2e4374; color:#e6ebff; padding:10px 14px; border-radius:10px; cursor:pointer; transition:.15s; }
.btn:hover{ filter: brightness(1.05); }
.btn.primary{ background: linear-gradient(180deg, var(--pri), var(--pri2)); border:none; }
.controls{ display:flex; gap:12px; align-items:flex-end; margin:18px 0; flex-wrap:wrap; }
.field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
select{ background:#0f1633; color:var(--fg); border:1px solid #2e4374; padding:10px; border-radius:10px; }
.progress-box{ margin:12px 0 8px; }
.progress{ width:100%; height:10px; background:#0f1633; border-radius:10px; overflow:hidden; border:1px solid #223462; }
.bar{ width:0%; height:100%; background: linear-gradient(90deg, var(--pri), #8ab2ff); transition: width .2s ease; }
.status{ margin-top:6px; color:var(--muted); font-size:13px; }
.preview{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; min-height:40px; }
.thumb{ max-width:320px; max-height:220px; border-radius:10px; border:1px solid #223462; box-shadow:0 4px 24px rgba(0,0,0,.25); }
.result{ margin:24px 0 40px; }
.textout{ white-space:pre-wrap; background:#0f1633; border:1px solid #223462; border-radius:12px; padding:14px; min-height:120px; line-height:1.6; }
.code{ background:#0f1633; color:#d1d5db; border:1px solid #223462; padding:12px; border-radius:12px; overflow:auto; max-height:360px; }
.raw summary{ cursor:pointer; color:#c7d2fe; }
.foot{ padding:28px 0 40px; font-size:12px; display:flex; justify-content:flex-end; }