:root { --gold:#ffd166; --cyan:#5ad1ff; --ink:#0f0f28; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color:#fff; background:#bfd9f0; }
canvas#bg { position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; }
.page { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:24px 16px 48px; }
.panel { background:rgba(10,10,30,.78); border-radius:18px; padding:26px 32px; box-shadow:0 12px 40px rgba(0,0,30,.35); backdrop-filter: blur(3px); }
h1.logo { font-size:clamp(34px,7vw,64px); margin:0; color:var(--gold); text-shadow:0 3px 0 #b8860b, 0 8px 18px rgba(0,0,0,.45); letter-spacing:1px; }
h1.logo span { color:var(--cyan); }
.lead { font-size:clamp(16px,2.6vw,20px); line-height:1.45; margin:10px 0 0; }
input[type=text], input[type=password] { width:100%; font:700 20px system-ui; padding:12px 14px; border-radius:12px; border:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12); color:#fff; outline:none; }
input::placeholder { color:rgba(255,255,255,.5); }
input:focus { border-color:var(--gold); }
.btn { display:inline-block; font:800 20px system-ui; padding:12px 26px; border-radius:12px; border:0; cursor:pointer; background:var(--gold); color:#1a1a2e; text-decoration:none; transition:transform .12s, filter .12s; }
.btn:hover { transform:translateY(-2px); filter:brightness(1.07); }
.btn:disabled { opacity:.5; cursor:default; transform:none; }
.btn.ghost { background:rgba(255,255,255,.14); color:#fff; border:2px solid rgba(255,255,255,.35); font-size:15px; padding:7px 14px; }
.err { color:#ff8a8a; font-weight:700; min-height:24px; margin:10px 0 0; }
.topbar { width:100%; max-width:1000px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.pill { background:rgba(15,15,40,.72); border-radius:12px; padding:8px 14px; font-weight:700; }