:root{--bg:#0f1220;--fg:#e9ecf1;--mut:#9aa3b2;--acc:#7c5cff;--acc2:#00d4ff;--card:rgba(255,255,255,.06);--br:14px}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font:16px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--fg);background:radial-gradient(1200px 600px at 80% -10%,#18294e,transparent),radial-gradient(1000px 500px at -10% 0,#341b74,transparent),var(--bg);display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px}
.hero{text-align:center;animation:fade .6s ease both}
.hero h1{margin:.2rem 0 0;font-size:clamp(28px,4vw,42px);letter-spacing:.2px}
.hero p{margin:.3rem 0 0;color:var(--mut)}
.wrap{width:min(1000px,96vw);padding:20px;border-radius:var(--br);background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:0 10px 40px rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.card{animation:float .9s ease both}
.uploader{display:grid;gap:12px}
.drop{border:2px dashed rgba(255,255,255,.25);border-radius:var(--br);padding:24px;text-align:center;color:var(--mut);transition:.25s;position:relative;overflow:hidden}
.drop::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.1),transparent);transform:translateX(-100%);animation:shine 2.6s infinite}
.drop.drag{border-color:var(--acc)}
.preview{width:100%;max-height:60vh;border-radius:12px;background:#0a0d18}
.controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.controls label{display:flex;align-items:center;gap:8px;background:var(--card);padding:8px 10px;border-radius:10px}
.chk{user-select:none}
.actions{display:flex;gap:10px;margin-top:8px}
.btn{cursor:pointer;border:none;border-radius:12px;padding:10px 16px;background:rgba(255,255,255,.08);color:var(--fg);transition:.2s;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.14)}
.btn.pri{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#0b0f1a}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.2)}
.progress{margin:12px 0}
.bar{height:10px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));width:0%}
.note{margin-top:8px;color:var(--mut);font-size:.9rem}
.result{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;margin-top:12px}
#out{width:100%;min-height:180px;background:#0a0d18;border:1px solid rgba(255,255,255,.15);border-radius:12px;color:var(--fg);padding:12px;resize:vertical}
.foot{opacity:.7;font-size:.9rem}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes float{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes shine{0%{transform:translateX(-120%)}60%{transform:translateX(120%)}100%{transform:translateX(120%)}}