/* nav.css adds `body { padding-bottom: 80px; }` on mobile widths to keep
   page content clear of the fixed bottom tab bar (.app-bottom-tabbar) —
   but login.php never includes shared/left.php/foot.php, so it has no
   bottom tab bar at all. That rule still applied here (it targets any
   `body`, not a page-specific class), leaving 80px of dead scrollable
   space below the login card on phones — reported 2026-09-13 as "login
   page scroll ho raha hai". Cancelled only on this page. */
@media (max-width: 640px) {
    body:has(.login-page) {
        padding-bottom: 0;
    }
}

/* body also carries Tailwind's min-h-screen (min-height:100vh) — same
   real-viewport-height override as .login-page below, for the same
   MIUI/real-device reason. Without this, body's own 100vh could still
   be taller than the actually-visible screen even with .login-page
   itself correctly sized, producing a scrollable sliver below it. */
body:has(.login-page) {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    min-height: var(--real-vh, 100dvh) !important;
}

.login-page {
    background: linear-gradient(180deg, #fcf9f8 0%, #f6f3f2 100%);
    /* Tailwind's min-h-screen class is min-height:100vh, which on some
       browsers/devices (reported 2026-09-12 on a tablet-width view in
       Chrome DevTools device emulation) is measured against the full
       device height rather than the actually-visible viewport — the
       centered card then renders below the visible area, looking like
       the page loaded scrolled far down. 100dvh helped there, but a
       second round of real-device testing (2026-09-13/14, multiple
       Xiaomi/MIUI phones) still showed heavy scrolling on the login
       page specifically — MIUI's browser/WebView is known to miscalculate
       both vh and dvh against its own gesture-bar/status-bar chrome, and
       this could not be reproduced in any desktop/emulated test, only on
       those real devices. --real-vh (set in login.php via
       window.innerHeight, which is always correct because it's the
       browser's own live measurement, not a CSS approximation of it)
       takes priority over both when the browser has run that script.
       !important because the Tailwind CDN script injects its generated
       <style> tag via JS at an unpredictable point in <head> — it can
       land after this stylesheet's <link>, which would otherwise let
       min-h-screen's min-height:100vh win on source order alone despite
       matching specificity. */
    min-height: 100vh !important;
    min-height: 100dvh !important;
    min-height: var(--real-vh, 100dvh) !important;
}

.login-card {
    animation: login-card-in 0.25s ease-out;
}

@keyframes login-card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-page .app-brand-text {
    max-width: none;
    white-space: normal;
    text-align: center;
}

.login-brand-band {
    background: linear-gradient(135deg, #9c6d1f 0%, #6b4a0d 100%);
}

.login-brand-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12) 0, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(255,255,255,0.10) 0, transparent 40%);
    pointer-events: none;
}

.login-brand-name {
    letter-spacing: 0.2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    color: #fff;
    position: relative;
}

.login-brand-name-accent {
    color: #2a1a04;
    text-shadow: none;
}

.login-brand-name-dim {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 700;
    text-shadow: none;
}

.login-brand-tagline {
    position: relative;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    letter-spacing: 0.1px;
}

.login-brand-lang-toggle {
    padding: 0;
    width: 34px;
    height: 34px;
    justify-content: center;
}

@media (max-width: 400px) {
    .login-brand-mark-icon {
        width: 34px;
        height: 34px;
        padding: 8px;
    }

    .login-brand-name {
        font-size: 20px;
    }

    .login-brand-tagline {
        font-size: 12px;
    }
}