:root { color-scheme: dark; --canvas:#101716; --surface:#18221f; --surface-raised:#202d27; --text:#e6eeea; --muted:#9baea5; --accent:#80d1b1; --border:#2d4037; }
html { scroll-behavior:smooth; scrollbar-color:#40584c var(--canvas); }
body { background:var(--canvas)!important; color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-variant-numeric:tabular-nums; min-height:100dvh; -webkit-font-smoothing:antialiased; }
*,*::before,*::after { box-sizing:border-box; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,input,select,textarea { font:inherit; }
button,a { touch-action:manipulation; }
button { cursor:pointer; transition:background-color .18s,border-color .18s,color .18s,transform .18s; }
button:active:not(:disabled) { transform:translateY(1px); }
button:disabled { cursor:wait; opacity:.55; }
:where(button,a,input,select,textarea):focus-visible { outline:2px solid var(--accent)!important; outline-offset:4px; }
input:not([type="checkbox"]):not([type="hidden"]),select,textarea { min-height:44px; }
input,select,textarea { color:var(--text); accent-color:var(--accent); }
input::placeholder,textarea::placeholder { color:#82988d; }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
::selection { background:#355b48; color:#f5fff8; }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; transform:translateY(-160%); padding:12px 18px; background:var(--accent); color:var(--canvas); border-radius:8px; }
.skip-link:focus { transform:translateY(0); }
.glass-panel,.glass-card { background:var(--surface)!important; border-color:var(--border)!important; backdrop-filter:none!important; }
.text-slate-400,.text-slate-500 { color:var(--muted)!important; }
.text-indigo-200,.text-indigo-300,.text-indigo-400 { color:var(--accent)!important; }
.bg-indigo-600 { background:#89d5b7!important; color:#102119!important; box-shadow:none!important; }
.bg-indigo-600:hover,.hover\:bg-indigo-500:hover { background:#aae6cb!important; color:#102119!important; }
.focus\:ring-indigo-500:focus { --tw-ring-color:var(--accent)!important; }
[role="dialog"] { overflow-y:auto; overscroll-behavior:contain; align-items:safe center; }
[role="dialog"] > :first-child { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
[data-dialog-close] { min-width:40px; min-height:40px; border-radius:8px; }
[role="dialog"] input:not([type="checkbox"]):not([type="hidden"]),[role="dialog"] select { font-size:16px; }
[role="dialog"] form button { min-height:44px; }
body.dialog-open { overflow:hidden!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.login-page { margin:0; display:flex; flex-direction:column; }
.login-header { width:min(1200px,100%); padding:28px 32px; margin:0 auto; display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; }
.brand-mark { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color:var(--accent); background:#263c31; font-weight:650; letter-spacing:-.08em; }
.login-main { width:min(1000px,100%); flex:1; margin:0 auto; display:grid; grid-template-columns:1fr 420px; align-items:center; gap:76px; padding:28px 32px 80px; }
.login-kicker { margin:0 0 20px; color:var(--accent); font-size:13px; font-weight:600; letter-spacing:.06em; }
.login-intro h1 { font-size:clamp(32px,4vw,48px); font-weight:600; line-height:1.25; letter-spacing:-.035em; margin:0 0 22px; }
.login-intro > p { font-size:15px; color:var(--muted); line-height:1.8; max-width:30em; margin:0; }
.login-routes { display:flex; align-items:center; gap:12px; color:#c3d4cb; font-size:13px; margin-top:36px; }
.route-divider { width:36px; height:1px; background:#42634f; }
.login-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:34px; box-shadow:0 20px 60px #07100b35; }
.login-card h2 { font-size:23px; font-weight:600; margin:0 0 9px; letter-spacing:-.025em; }
.login-subtitle { color:var(--muted); font-size:14px; line-height:1.65; margin:0 0 28px; }
.login-card label { display:block; font-weight:500; font-size:14px; margin-bottom:10px; }
.password-field { position:relative; }
.password-field input { background:var(--canvas); border:1px solid #415549; border-radius:10px; color:var(--text); width:100%; font-size:16px; padding:14px 64px 14px 14px; min-height:52px; }
.password-reveal { position:absolute; right:5px; top:5px; bottom:5px; border:0; border-radius:7px; background:transparent; color:var(--muted); padding:0 12px; font-size:13px; }
.password-reveal:hover { color:var(--accent); background:#26382e; }
.field-help { color:var(--muted); font-size:12px; line-height:1.6; margin:10px 0 0; }
.login-submit { display:flex; justify-content:space-between; align-items:center; width:100%; padding:14px 18px; min-height:52px; margin-top:24px; border:0; border-radius:10px; color:#0c2518; background:var(--accent); font-weight:600; font-size:15px; }
.login-submit:hover { background:#a2e2c5; }
.login-note { border-top:1px solid var(--border); margin:26px 0 0; padding-top:20px; color:var(--muted); line-height:1.75; font-size:12px; }
.login-note strong { color:#c3d4cb; font-weight:500; }
.login-error { background:#422927; border:1px solid #70413b; border-radius:9px; padding:12px 14px; color:#ffbcb0; font-size:14px; line-height:1.6; margin:0 0 20px; }
.login-footer { padding:22px 24px; color:#82988d; text-align:center; font-size:12px; }
@media(max-width:720px) {
 .login-header { padding:22px 24px; }
 .login-main { grid-template-columns:1fr; gap:28px; padding:24px 24px 40px; align-content:center; }
 .login-intro h1 { font-size:31px; margin-bottom:12px; }
 .login-kicker { display:none; }
 .login-intro > p { font-size:14px; }
 .login-routes { margin-top:18px; }
 .login-card { padding:26px 24px; }
 .login-subtitle { margin-bottom:22px; }
 .login-footer { padding-top:4px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
