:root { color-scheme: dark; --canvas:#171715; --panel:#222220; --panel-soft:#2b2a27; --text:#f2f1ed; --soft:#b3b0a9; --faint:#817e78; --border:rgba(255,255,255,.11); --accent:#9b8cff; --accent-strong:#b2a7ff; --accent-soft:#332e58; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(circle at 50% 20%, #242220 0, var(--canvas) 46%); color: var(--text); font: 14px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.login-shell { display: grid; min-height: 100dvh; place-items: center; padding: 28px 16px; }
.login-card { width: min(440px, 100%); padding: 34px; border: 1px solid var(--border); border-radius: 24px; background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: 0 28px 80px rgba(0,0,0,.42); backdrop-filter: blur(18px); }
.login-mark { display: grid; width: 64px; height: 64px; place-items: center; margin-bottom: 22px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 21px; background: radial-gradient(circle at 32% 25%, #3f3864, var(--accent-soft)); color: var(--accent-strong); font-weight: 800; box-shadow: 0 16px 42px rgba(113,90,220,.15); transform: rotate(-3deg); }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: 10px; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 0; font-size: 28px; letter-spacing: -.04em; }
.intro { margin: 11px 0 24px; color: var(--soft); }
.login-form, label { display: grid; gap: 7px; }
.login-form { gap: 15px; }
label { color: var(--soft); font-size: 11px; font-weight: 620; }
input { width: 100%; min-height: 45px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel-soft); color: var(--text); font: inherit; }
input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
button { width: 100%; min-height: 45px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 11px; background: var(--accent); color: #fff; font: 650 13px inherit; cursor: pointer; }
button:hover { background: var(--accent-strong); }
.demo-button { border-color: var(--border); background: var(--panel-soft); color: var(--text); }
.demo-button:hover { border-color: var(--accent); background: var(--accent-soft); }
.divider { display: flex; align-items: center; gap: 10px; margin: 19px 0; color: var(--faint); font-size: 10px; text-transform: uppercase; }
.divider::before, .divider::after { height: 1px; flex: 1; background: var(--border); content: ""; }
.demo-note { margin: 11px 0 0; color: var(--faint); font-size: 10.5px; text-align: center; }
.login-alert { margin-bottom: 16px; padding: 10px 12px; border: 1px solid #7c383d; border-radius: 10px; background: #4a2528; color: #ffc2c5; }
@media (max-width: 520px) { .login-card { padding: 26px 20px; border-radius: 20px; } }