:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
body { display:grid; min-height:100vh; margin:0; place-items:center; background:#fbfaf8; color:#171717; }
main { width:min(100% - 40px, 390px); padding:32px; border:1px solid #ded8cf; border-radius:18px; background:#fff; box-shadow:0 18px 55px #17171714; text-align:center; }
.brand { display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:26px; font-size:18px; font-weight:760; }
.brand img { width:28px; height:28px; }
.muted { color:#77736d; }
h1 { margin:0; font-size:27px; letter-spacing:-.04em; }
p { margin:10px 0 24px; line-height:1.5; }
a { display:flex; min-height:44px; align-items:center; justify-content:center; gap:10px; border:1px solid #ded8cf; border-radius:11px; color:#171717; font-weight:680; text-decoration:none; }
a:hover { border-color:#77736d; }
.user-switcher { display:grid; gap:10px; text-align:left; }
.user-switcher label { color:#77736d; font-size:12px; font-weight:680; }
.user-switcher select, .user-switcher button { width:100%; min-height:44px; padding:0 12px; border:1px solid #ded8cf; border-radius:11px; background:#fff; color:#171717; font:inherit; }
.user-switcher button { background:#171717; color:#fff; font-weight:680; cursor:pointer; }
.user-switcher select:focus, .user-switcher button:focus-visible { outline:2px solid #1954ed; outline-offset:2px; }
.error { padding:10px; border-radius:9px; background:#fdecea; color:#b83224; font-size:13px; }
@media (prefers-color-scheme: dark) { body { background:#11100f; color:#f2efe9; } main { border-color:#3a3631; background:#181716; } .muted, .user-switcher label { color:#aaa39a; } a { border-color:#3a3631; color:#f2efe9; } .user-switcher select { border-color:#3a3631; background:#181716; color:#f2efe9; } .user-switcher button { border-color:#f2efe9; background:#f2efe9; color:#11100f; } }