:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #10161d; color: #f3eee5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #263443, #10161d 65%); }
.auth-shell { width: min(100% - 2rem, 38rem); margin: 5vh auto; padding: 2rem; background: #18222d; border: 1px solid #475768; border-radius: 1rem; box-shadow: 0 1rem 3rem #0006; }
.brand { color: #d8ad75; font-size: .8rem; font-weight: 800; letter-spacing: .2em; text-decoration: none; }
h1 { font-size: 2rem; margin: .7rem 0 1.3rem; }
h2 { font-size: 1.15rem; margin: 0 0 1rem; }
p { line-height: 1.5; color: #c6d0d6; }
form, section { margin: 1.5rem 0; padding-top: 1.2rem; border-top: 1px solid #3a4956; }
label { display: block; margin: 1rem 0; font-size: .9rem; font-weight: 650; }
input { width: 100%; display: block; margin-top: .35rem; padding: .8rem; background: #0d161e; border: 1px solid #697987; border-radius: .4rem; color: #fff; font: inherit; }
button { padding: .75rem 1rem; border: 0; border-radius: .4rem; background: #d8ad75; color: #192026; font: inherit; font-weight: 750; cursor: pointer; }
button:hover { background: #f2cb95; }
a { color: #e1b87f; }
.error { color: #ffc9c9; }
.notice { padding: .9rem; background: #223b36; border-radius: .4rem; overflow-wrap: anywhere; }
.note { font-size: .85rem; }
li { margin: .7rem 0; }
form.inline { display: inline; margin: 0 0 0 .5rem; padding: 0; border: 0; }
form.inline button { padding: .3rem .5rem; font-size: .8rem; }
@media (max-width: 500px) { .auth-shell { margin: 1rem auto; padding: 1.2rem; } }