:root{--nav:#111d33;--nav2:#16243d;--blue:#2459e8;--blue2:#3f79ee;--text:#172238;--muted:#68758a;--line:#e7ebf2;--bg:#f5f7fb;--green:#16a56a;--red:#e6474d}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:linear-gradient(135deg,var(--nav),var(--nav2))}
.auth-card{width:100%;max-width:420px;background:#fff;border-radius:14px;padding:30px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;margin-bottom:6px}
.brand i{width:34px;height:34px;border-radius:9px;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal}
h1{font-size:19px;margin:14px 0 4px}p.sub{color:var(--muted);font-size:13px;margin:0 0 18px}
label{display:block;font-size:12px;font-weight:600;margin:12px 0 5px}
input,select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px}
input:focus{outline:2px solid var(--blue2);border-color:transparent}
.btn{display:inline-block;width:100%;margin-top:18px;padding:11px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-weight:700;font-size:14px;cursor:pointer;text-align:center;text-decoration:none}
.btn.ghost{background:#eef2fb;color:var(--blue)}
.err{background:#fdecec;color:var(--red);border-radius:8px;padding:9px 12px;font-size:13px;margin-top:12px}
.ok{background:#e8f7f0;color:var(--green);border-radius:8px;padding:9px 12px;font-size:13px;margin-top:12px}
.links{margin-top:16px;font-size:13px;text-align:center}.links a{color:var(--blue)}
code{display:block;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:13px;word-break:break-all;margin-top:6px}
.qr{display:block;margin:4px auto 8px;border:1px solid var(--line);border-radius:10px}
.field-validation-error{color:var(--red);font-size:12px}