:root { color-scheme: dark; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; background: #0b0d0c; color: #f6f7f5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 10%, rgba(199,101,58,.2), transparent 35%), radial-gradient(circle at 85% 80%, rgba(79,120,150,.15), transparent 35%), #0b0d0c; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(100%, 430px); padding: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 28px; background: rgba(23,27,25,.82); box-shadow: 0 28px 90px rgba(0,0,0,.42); backdrop-filter: blur(28px); }
.auth-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: #c7653a; color: white; font-weight: 850; letter-spacing: -.04em; margin-bottom: 28px; }
.auth-card > span { color: #d88a65; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
h1 { margin: 8px 0; font-size: clamp(34px, 8vw, 48px); letter-spacing: -.055em; }
p { margin: 0 0 30px; color: #aeb5b0; line-height: 1.55; }
form { display: grid; gap: 18px; }
label { display: grid; gap: 8px; color: #cbd0cc; font-size: 13px; font-weight: 700; }
input { width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.06); color: white; padding: 14px 15px; font: inherit; outline: none; }
input:focus { border-color: #c7653a; box-shadow: 0 0 0 3px rgba(199,101,58,.16); }
input[readonly] { color: #d9ddda; background: rgba(255,255,255,.035); cursor: default; }
button { border: 0; border-radius: 14px; padding: 14px 16px; background: #c7653a; color: white; font: inherit; font-weight: 800; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.auth-button-secondary { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #f1f3f1; }
.auth-button-secondary:hover { background: rgba(255,255,255,.1); }
.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: #747b76; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: rgba(255,255,255,.1); }
output { min-height: 20px; color: #aeb5b0; font-size: 13px; line-height: 1.5; }
output[data-kind="error"] { color: #ff9b8f; }
@media (max-width: 520px) { .auth-card { padding: 28px 22px; border-radius: 22px; } }