:root{ --bg:#0f172a; --muted:#94a3b8; --text:#e5e7eb; --accent:#22c55e; --accent-2:#60a5fa; --shadow:0 10px 30px rgba(0,0,0,.35); }
*{box-sizing:border-box}
body{ margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  background:linear-gradient(180deg,var(--bg),#080d18 60%); color:var(--text); min-height:100vh; display:grid; place-items:center; }
.wrapper{ width:min(900px,92vw); padding:32px 0; }
.header{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin-bottom:18px; }
.header .icon{ font-size:48px; color:var(--accent) }
.header h1{ margin:0; font-weight:800; letter-spacing:.2px }
.header .sub{ margin:0; color:var(--muted) }
.card{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:28px; box-shadow:var(--shadow); }
.upload-form{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:center; }
input[type="file"]{ display:none; }
.file-label{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; padding:12px 16px; border-radius:12px;
  border:1px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.03); transition:.2s ease; }
.file-label:hover{ transform:translateY(-1px); background:rgba(255,255,255,.05); }
.file-label i{ font-size:18px; color:var(--accent-2); }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border:none; border-radius:12px; cursor:pointer; font-weight:700;
  background:linear-gradient(180deg,var(--accent),#16a34a); color:#06230f; box-shadow:0 6px 18px rgba(34,197,94,.35); transition:.15s; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(34,197,94,.45); }
.messages{ margin-top:18px; display:grid; gap:12px; }
.alert{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; font-weight:600; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03); }
.alert.success{ border-color:rgba(34,197,94,.35); }
.alert.info{ border-color:rgba(96,165,250,.35); }
.alert.error{ border-color:rgba(244,63,94,.45); }
.footer{ display:flex; align-items:center; gap:10px; justify-content:center; margin-top:18px; color:var(--muted); font-size:14px; }
.footer i{ color:#84cc16; }
@media(max-width:600px){ .upload-form{flex-direction:column; align-items:stretch;} .file-label,.btn{ width:100%; justify-content:center; } }

