:root { --bg:#08060f; --panel:rgba(26,19,42,.7); --border:rgba(212,175,55,.35); --royal:#7b5fc0; --gold:#d4af37; --text:#f3edde; --dim:#a99e86; --err:#f87171; }
* { margin:0; padding:0; box-sizing:border-box; }
body { min-height:100vh; display:grid; place-items:center; padding:24px 16px; color:var(--text);
  background:radial-gradient(900px 500px at 50% -10%, rgba(123,95,192,.28), transparent 70%), var(--bg);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
.card { width:100%; max-width:400px; padding:32px 28px; border-radius:18px; background:var(--panel);
  border:1px solid var(--border); box-shadow:0 24px 60px rgba(0,0,0,.5); backdrop-filter:blur(8px); text-align:center; }
.mark { margin-bottom:10px; }
h1 { font-size:1.35rem; letter-spacing:4px; font-weight:600; }
h1 em { font-style:normal; color:var(--gold); }
.sub { color:var(--dim); font-size:.9rem; margin:4px 0 24px; letter-spacing:1px; text-transform:uppercase; }
form { text-align:left; display:flex; flex-direction:column; gap:6px; }
label { font-size:.82rem; color:var(--dim); margin-top:8px; }
input { width:100%; font:inherit; color:var(--text); background:rgba(8,6,15,.85); border:1px solid var(--border);
  border-radius:10px; padding:11px 13px; }
input:focus-visible { outline:2px solid var(--gold); outline-offset:1px; }
.pw { display:flex; gap:8px; }
button { font:inherit; cursor:pointer; border:none; border-radius:10px; padding:11px 14px; font-weight:600; color:#08060f;
  background:linear-gradient(120deg,var(--royal),var(--gold)); }
button.ghost { background:none; color:var(--dim); border:1px solid var(--border); font-weight:400; }
button:disabled { opacity:.55; cursor:default; }
#submit { margin-top:16px; }
.error { color:var(--err); background:rgba(248,113,113,.1); border-radius:8px; padding:9px 12px; font-size:.9rem; margin-top:10px; }
.intro { color:var(--text); font-size:.92rem; margin-bottom:8px; line-height:1.5; }
.hint { color:var(--dim); font-size:.78rem; margin:2px 0 0; line-height:1.45; }
#setupForm { text-align:left; display:flex; flex-direction:column; gap:6px; }
#setupSubmit { margin-top:16px; }
.foot { margin-top:22px; text-align:center; font-size:.85rem; }
.foot a { color:var(--dim); text-decoration:none; }
.foot a:hover { color:var(--gold); }

/* Anything marked hidden must really be hidden, whatever display the element is given above. */
[hidden] { display:none !important; }