:root { color-scheme: dark; font-family: Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #071426; color: #f7f3e8; direction: rtl; }
.auth-card { width: min(92vw, 430px); padding: 2rem; border: 1px solid #315071; border-radius: 18px; background: #0b1f3a; box-shadow: 0 20px 50px #0008; }
h1 { margin-top: 0; color: #d4af37; font-size: 1.75rem; }
p { line-height: 1.55; color: #dce5ee; }
label { display: grid; gap: .45rem; margin: 1rem 0; font-weight: 700; }
input, select, button { width: 100%; min-height: 46px; padding: .7rem .8rem; border-radius: 9px; font: inherit; }
input, select { border: 1px solid #6283a5; background: #fff; color: #071426; }
button { border: 0; background: #d4af37; color: #071426; font-weight: 800; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
[data-status] { padding: .8rem; border-radius: 8px; background: #5d1d26; color: #fff; }
[data-status][data-kind="success"] { background: #174e36; }
.links { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
a { color: #f3d978; }
#totp-qr { display: block; width: min(250px, 100%); margin: 1rem auto; background: #fff; padding: .5rem; }