* { box-sizing: border-box; }
:root { --bg:#0b1025; --card:#111827; --muted:#9ca3af; --fg:#f8fafc; --accent:#22c55e; }
body{margin:0;background:linear-gradient(180deg,#0b1025,#0f172a);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;min-height:100vh;display:grid;place-items:center;}
.card{width:min(760px,92vw);background:var(--card);border-radius:20px;padding:28px;box-shadow:0 10px 30px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06)}
h1{margin:0 0 8px;font-size:1.35rem}
p{margin:.25rem 0 1.25rem;color:var(--muted)}
label{display:block;margin:18px 0 .4rem;color:#cbd5e1}
input[type="text"], select {width:100%;padding:10px 12px;border-radius:10px;border:1px solid #334155;background:#0b1220;color:var(--fg);outline:none}
input[type="file"]{width:100%;padding:10px;border:1px dashed #334155;border-radius:10px;background:#0b1220;color:#cbd5e1}
.row{display:grid;gap:12px;grid-template-columns:1fr auto;align-items:end;margin-top:14px}
button{appearance:none;border:0;border-radius:12px;margin-top:20px;padding:12px 16px;background:var(--accent);color:#052e14;font-weight:700;cursor:pointer}
button[disabled]{opacity:.6;cursor:progress}
.result{margin-top:16px;padding:12px;border-radius:10px;background:#0b1220;border:1px solid #1f2937}
.error{color:#fecaca}
.hidden{display:none !important;}
.spinner{width:18px;height:18px;border:3px solid rgba(0,0,0,.1);border-top-color:#052e14;border-radius:50%;display:inline-block;animation:spin .9s linear infinite;vertical-align:middle;margin-left:8px}
@keyframes spin{to{transform:rotate(360deg)}}
a.download{color:#a7f3d0;text-decoration:underline}
small.hint{color:#94a3b8}