/* ===== Auth pages (login / register) — blue split card ===== */
/* Auth screen fits the viewport exactly (flex column: header + auth area), no page scrollbar. */
html { height:100%; }
body { height:100%; display:flex; flex-direction:column; overflow:hidden; }
body > footer { display:none; }   /* no page footer on auth screens */
body main { flex:1 1 auto; min-height:0; max-width:none; margin:0; padding:0; display:flex; }
.auth-wrap { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; align-items:stretch;
    justify-content:center; padding:20px; box-sizing:border-box; }
.auth-card { width:100%; max-width:920px; display:grid; grid-template-columns:1fr 1fr; background:#fff; border:1px solid #e6ecf5;
    border-radius:22px; overflow:hidden; box-shadow:0 24px 55px rgba(20,50,110,.16); }

/* left brand panel — auth.png scene with a blue overlay for text legibility */
.auth-brand { position:relative; overflow:hidden; color:#fff; padding:38px 34px; display:flex; flex-direction:column; gap:16px;
    background:linear-gradient(180deg, rgba(30,58,138,.74) 0%, rgba(30,64,175,.20) 32%, rgba(30,64,175,.28) 56%, rgba(23,42,115,.90) 100%),
               url("/img/auth.png") center top / cover no-repeat; }
.auth-brand > * { position:relative; z-index:1; }
.auth-brand .logo, .auth-brand h2, .auth-brand p.tag, .auth-brand li { text-shadow:0 1px 6px rgba(15,23,42,.35); }
.auth-brand .logo { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:800; letter-spacing:-.5px; z-index:1; }
.auth-brand .logo .dot { width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.2);
    display:flex; align-items:center; justify-content:center; font-size:16px; }
.auth-brand h2 { font-size:26px; line-height:1.2; margin:auto 0 6px; z-index:1; letter-spacing:-.4px; }
.auth-brand p.tag { margin:0 0 6px; opacity:.9; font-size:14px; z-index:1; }
.auth-brand ul { list-style:none; padding:0; margin:0; z-index:1; }
.auth-brand li { display:flex; gap:10px; align-items:center; margin-bottom:11px; font-size:14px; font-weight:600; }
.auth-brand li svg { width:20px; height:20px; flex:0 0 20px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* right form panel */
.auth-form { padding:40px 40px; display:flex; flex-direction:column; justify-content:center; }
.auth-form h1 { font-size:26px; margin:0 0 4px; color:var(--text); }
.auth-form .sub { color:var(--muted); font-size:14px; margin:0 0 22px; }
.auth-form label { display:block; font-size:13px; font-weight:600; margin:14px 0 5px; color:var(--muted); }
.auth-form input, .auth-form select { width:100%; padding:12px 14px; border:1px solid #d9e2f0; border-radius:11px; font-size:15px; color:var(--text); background:#fff; }
.auth-form input:focus, .auth-form select:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.auth-form .btn { width:100%; margin-top:20px; padding:13px; font-size:15px; }
.auth-form .forgot { display:block; text-align:right; font-size:13px; margin-top:8px; }
.auth-form .alt { text-align:center; margin:18px 0 0; font-size:14px; color:var(--muted); }
.auth-form .alt a { font-weight:700; }
.auth-form .msg { margin-bottom:8px; }

@media (max-width:720px) {
    .auth-card { grid-template-columns:1fr; }
    .auth-brand { padding:26px 28px; gap:12px; }
    .auth-brand h2 { margin:6px 0; font-size:22px; }
    .auth-brand ul { display:none; }
    .auth-form { padding:30px 26px; }
}