/* Login and error states use v11 tokens, not a competing application shell. */
body.login-body { min-width:0; min-height:100vh; min-height:100dvh; background:var(--bg); display:grid; place-items:center; padding:32px; }
.login-wrap { width:min(1080px,100%); display:grid; grid-template-columns:1.08fr 1fr; background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); }
.login-hero { background:linear-gradient(155deg,var(--nav),var(--nav2)); color:white; padding:54px 46px; display:flex; flex-direction:column; justify-content:center; }
.hero-mark { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,var(--primary),var(--blue)); box-shadow:0 8px 18px rgba(108,92,231,.25); font-size:18px; font-weight:850; margin-bottom:26px; }
.login-hero .eyebrow { font-size:11px; letter-spacing:.12em; color:#b3bfd9; font-weight:700; }
.login-hero h1 { font-size:38px; line-height:1.18; letter-spacing:-1px; margin:10px 0 20px; }
.login-hero > p:not(.eyebrow) { font-size:14px; line-height:1.8; color:#c0cade; margin:0; }
.security-note { margin-top:32px; padding:18px; border:1px solid #394660; background:rgba(255,255,255,.04); border-radius:12px; }
.security-note strong,.security-note span { display:block; }
.security-note strong { font-size:13px; } .security-note span { font-size:12px; line-height:1.7; color:#c0cade; margin-top:7px; }
.login-card { padding:52px 44px; display:flex; flex-direction:column; justify-content:center; }
.login-card h2 { font-size:28px; letter-spacing:-.6px; margin:0 0 12px; }
.login-card > p { color:var(--muted); font-size:14px; line-height:1.7; margin:0 0 28px; }
.login-form { display:grid; gap:20px; }
.login-form label { display:grid; gap:8px; font-size:14px; font-weight:650; }
.login-form input { width:100%; min-height:48px; padding:12px 14px; border:1px solid #bac2d3; border-radius:10px; font:inherit; font-weight:400; color:var(--text); background:var(--surface); }
.login-body .btn,.support-surface .btn { height:auto; min-height:46px; padding:12px 18px; font-size:14px; line-height:1.5; justify-content:center; text-decoration:none; white-space:normal; }
.login-form .btn { width:100%; }
.demo-users { display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:26px; padding-top:22px; }
.demo-users span { width:100%; color:var(--muted); font-size:12px; }
.demo-users button { min-height:40px; padding:8px 10px; color:var(--text); font-size:12px; font-family:inherit; border:1px solid var(--line); border-radius:8px; background:white; cursor:pointer; flex:1; }
.demo-users button:hover { border-color:var(--primary); }
.demo-password { padding:12px; border-radius:9px; font-size:12px; margin-top:14px; color:var(--muted); background:var(--surface2); overflow-wrap:anywhere; }
.login-body .flash { font-size:14px; line-height:1.6; padding:14px 16px; border-radius:10px; margin:0 0 20px; }
.login-body .flash.error { color:#8d1834; border:1px solid #f1bfcb; background:#fff3f5; }
.content:has(> .support-surface) { overflow-y:auto; overflow-x:hidden; min-height:0; }
.support-surface { width:100%; max-width:900px; margin:0 auto; padding:36px 0; }
.standalone-error { width:min(620px,100%); }
.empty-state { text-align:center; padding:52px 38px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.empty-code { display:inline-flex; align-items:center; justify-content:center; padding:10px 22px; margin-bottom:22px; border-radius:16px; font-size:36px; letter-spacing:-1px; font-weight:800; color:var(--primary); background:#f1effe; }
.empty-state h1 { margin:0 0 14px; font-size:28px; letter-spacing:-.6px; }
.empty-state p { color:var(--muted); line-height:1.8; font-size:15px; margin:0 auto 24px; max-width:58ch; overflow-wrap:anywhere; }
.standalone-error .empty-state .btn { height:auto; min-height:44px; padding:12px 18px; text-decoration:none; }
@media(max-width:900px) { .login-wrap { max-width:560px; grid-template-columns:1fr; } .login-hero { padding:28px 32px; } .login-hero h1 { font-size:28px; margin-bottom:12px; } .hero-mark { width:38px;height:38px;font-size:15px;margin-bottom:12px; } .login-hero > p:not(.eyebrow) { display:none; } .security-note { margin-top:14px; padding:12px 14px; } .security-note span { margin-top:4px; } .login-card { padding:32px; } }
@media(max-width:600px) { body.login-body { padding:16px; } .login-wrap { border-radius:18px; } .login-hero { padding:24px; } .login-hero h1 { font-size:26px; } .login-card { padding:28px 22px; } .login-form input { font-size:16px; } .demo-users button { min-height:44px; } .empty-state { padding:32px 20px; } .empty-state h1 { font-size:25px; } .support-surface { padding:12px 0; } }