:root{--bg:#0B1220;--panel:#111A2E;--line:rgba(255,255,255,.09);--text:#E6ECF5;--muted:#8A98B3;--amber:#DF8F24;--blue:#2B97CB;--bad:#E5484D}
@media (prefers-color-scheme:light){:root{--bg:#EEF2F8;--panel:#fff;--line:rgba(13,27,51,.12);--text:#0D1B33;--muted:#5A6B87}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font:15px/1.5 Barlow,system-ui,sans-serif}
.wrap{min-height:100%;display:grid;place-items:center;padding:24px 16px;position:relative;overflow:hidden}
.hero{position:absolute;inset:auto 0 0 0;height:45%;pointer-events:none;opacity:.55}
.wave,.wave svg{width:100%;height:100%}
.wave path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.w1{stroke:#E5484D}.w2{stroke:#E8B10C}.w3{stroke:var(--blue)}
.card{position:relative;width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 26px 20px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.brand .t{font:700 24px/1 "Barlow Condensed",sans-serif;letter-spacing:.3px}
.brand .s{color:var(--muted);font-size:13px;margin-top:3px}
label{display:block;font-size:13px;color:var(--muted);margin:0 0 14px}
input{display:block;width:100%;margin-top:6px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-size:16px}
input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
button{width:100%;margin-top:6px;padding:12px;border:0;border-radius:10px;background:var(--amber);color:#1a1205;font:600 16px Barlow,sans-serif;cursor:pointer}
button:hover{filter:brightness(1.07)}
.err{background:rgba(229,72,77,.12);color:var(--bad);border:1px solid rgba(229,72,77,.35);padding:9px 12px;border-radius:10px;font-size:14px;margin:0 0 14px}
.foot{color:var(--muted);font-size:12px;text-align:center;margin:16px 0 0}