:root { --maxw: 460px; --radius: 14px; --pad: 18px; --gap: 14px; --bg: #0b1020; --card: #121a33; --muted: #95a3b8; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--bg); color: #eef3ff; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.card { width: min(100% - 32px, var(--maxw)); background: var(--card); border-radius: var(--radius); padding: calc(var(--pad) * 1.25); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
h1 { margin:0 0 6px; font-size: 1.4rem; }
.sub { margin:0 0 14px; color: var(--muted); }
form { display:flex; flex-direction: column; gap: var(--gap); }
.row { display:flex; gap: 10px; }
input, button { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; font-size: 15px; }
input { background: #0e1530; color:#eef3ff; border-color:#1e2a55; outline: none; }
input:focus { border-color:#5a7cff; box-shadow: 0 0 0 3px rgba(90,124,255,.25); }
button { background:#5a7cff; color:white; font-weight: 600; cursor:pointer; }
button:disabled { opacity:.55; cursor:not-allowed; }
.progress { background:#0e1530; border:1px solid #1e2a55; border-radius: 12px; padding:6px; margin: 10px 0 4px; }
.bar { height: 12px; background: linear-gradient(90deg, #8fb3ff, #5a7cff); border-radius: 8px; transition: width .3s ease; }
.progress-meta { display:flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.flash { background:#0e1530; border: 1px solid #3851a6; padding:10px 12px; border-radius: 10px; margin: 10px 0; }
.footer { margin-top: 8px; font-size: 12px; color: var(--muted); text-align:center; }
.closed { opacity: .8; filter: grayscale(.1); }