:root { --bg:#0b1020; --panel:#121832; --text:#e8ecff; --muted:#99a3ff; --accent:#7aa2ff; }
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#0b1020,#0b1020 40%,#0e1530);font:16px/1.55 system-ui,Segoe UI,Roboto,Arial;color:var(--text)}
header{padding:28px 20px;text-align:center}
h1{font-size:26px;margin:0 0 8px}
.sub{margin:0;color:var(--muted)}
.wrap{max-width:980px;margin:18px auto 48px;padding:0 18px}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.45);padding:18px}
label{display:block;font-weight:600;margin:6px 0}
input[type=file],select,button,input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0f1530;color:var(--text)}
button.primary{background:var(--accent);color:#06122c;border:0;cursor:pointer;font-weight:700}
button.ghost{background:transparent;border:1px dashed rgba(255,255,255,.28);color:var(--muted)}
.badge{display:inline-flex;gap:6px;align-items:center;background:#0b1230;border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:999px;color:var(--muted);font-size:12px}
.badge.ok{color:#8ef4b3}
.badge.warn{color:#ffd28a}
.row{display:flex;gap:12px;flex-wrap:wrap}
.drop{margin-top:10px;border:2px dashed rgba(255,255,255,.25);padding:22px;border-radius:14px;text-align:center;color:var(--muted)}
.drop.drag{background:#0a0f25;color:#e8ecff}
.preview{margin-top:12px}
pre{margin:0;background:#0a0f25;border-radius:14px;padding:14px;overflow:auto;max-height:520px}
.foot{opacity:.7;text-align:center;margin-top:-24px}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}