/* ==========================================================================
   Liquid Glass — iOS 26 inspired surface system
   Loaded AFTER app.css. Scope: login page, landing page, login success overlay.
   All motion uses transform/opacity only. Reduced-motion honoured at bottom.
   ========================================================================== */

:root {
    /* Easing — Apple system curves */
    --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-ios-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-ios-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Duration ladder */
    --lg-dur-xs: 0.18s;
    --lg-dur-sm: 0.24s;
    --lg-dur-md: 0.38s;
    --lg-dur-lg: 0.55s;
    --lg-dur-xl: 0.75s;

    /* Squircle radii */
    --lg-radius-sm: 12px;
    --lg-radius-md: 18px;
    --lg-radius-lg: 26px;
    --lg-radius-xl: 34px;
    --lg-radius-pill: 980px;

    /* Material */
    --lg-blur: 36px;
    --lg-blur-strong: 52px;
    --lg-saturate: 200%;
    --lg-blur-feature: 18px;
    --lg-blur-modal: 22px;
    --lg-surface-feature-bg:
        linear-gradient(160deg, rgba(255, 255, 255, 0.76), rgba(245, 249, 255, 0.48));
    --lg-surface-data-bg: linear-gradient(155deg, #e7edf6, #d8e2ef);
    --lg-rim-light: rgba(255, 255, 255, 0.82);
    --lg-border-feature: rgba(255, 255, 255, 0.58);
    --lg-shadow-rest:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        inset 0 -1px 0 rgba(116, 147, 190, 0.08),
        0 12px 30px -18px rgba(6, 18, 46, 0.42);
    --lg-shadow-raised:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 18px 42px -20px rgba(6, 18, 46, 0.54);

    --lg-tint: rgba(255, 255, 255, 0.16);
    --lg-tint-strong: rgba(255, 255, 255, 0.28);
    --lg-tint-sunken: rgba(255, 255, 255, 0.10);
    --lg-hairline: rgba(255, 255, 255, 0.28);
    --lg-hairline-soft: rgba(255, 255, 255, 0.14);
    --lg-specular: rgba(255, 255, 255, 0.85);

    /* Typography / ink */
    --lg-ink: #0b1220;
    --lg-ink-soft: rgba(11, 18, 32, 0.62);
    --lg-ink-faint: rgba(11, 18, 32, 0.42);
    --lg-accent: #0a84ff;
    --lg-accent-deep: #0060df;
    --lg-danger: #ff3b30;

    /* Semantic data colours (iOS system palette) */
    --lg-ok: #30d158;
    --lg-warn: #ff9f0a;
    --lg-crit: #ff453a;
    --lg-info: #64d2ff;
    --lg-violet: #bf5af0;
    --lg-teal: #40c8e0;

    /* Table */
    --lg-row-hover: rgba(10, 132, 255, 0.07);
    --lg-thead-bg: rgba(255, 255, 255, 0.55);
    --lg-divider: rgba(11, 18, 32, 0.09);

    /* Shadow ladder — ambient + key light */
    --lg-shadow-card:
        0 1px 1px rgba(6, 18, 46, 0.05),
        0 8px 24px rgba(6, 18, 46, 0.12),
        0 32px 64px -12px rgba(6, 18, 46, 0.32);
    --lg-shadow-tile:
        0 1px 1px rgba(6, 18, 46, 0.05),
        0 6px 18px rgba(6, 18, 46, 0.14),
        0 20px 44px -14px rgba(6, 18, 46, 0.28);
    --lg-shadow-lift:
        0 2px 3px rgba(6, 18, 46, 0.06),
        0 14px 34px rgba(6, 18, 46, 0.18),
        0 44px 80px -16px rgba(6, 18, 46, 0.36);

    --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Request Hub semantic theme — Notifications clarity baseline */
    --rh-page-bg: #edf3fb;
    --rh-surface-feature:
        linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(224, 231, 255, 0.78));
    --rh-surface-panel: rgba(255, 255, 255, 0.92);
    --rh-surface-solid: #ffffff;
    --rh-surface-sunken: #f8fafc;
    --rh-text-primary: #0f172a;
    --rh-text-secondary: #334155;
    --rh-text-muted: #64748b;
    --rh-border: rgba(148, 163, 184, 0.24);
    --rh-divider: rgba(15, 23, 42, 0.09);
    --rh-shadow-panel: 0 18px 55px rgba(15, 23, 42, 0.09);
    --rh-focus-ring: rgba(37, 99, 235, 0.28);
}

body.dark-mode {
    --lg-surface-feature-bg:
        linear-gradient(160deg, rgba(38, 50, 80, 0.82), rgba(18, 27, 48, 0.62));
    --lg-surface-data-bg: linear-gradient(155deg, #192238, #10172a);
    --lg-rim-light: rgba(218, 232, 255, 0.26);
    --lg-border-feature: rgba(215, 230, 255, 0.18);
    --lg-shadow-rest:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 16px 38px -20px rgba(0, 0, 0, 0.72);
    --lg-shadow-raised:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 22px 48px -22px rgba(0, 0, 0, 0.82);
    --lg-tint: rgba(120, 140, 180, 0.14);
    --lg-tint-strong: rgba(140, 160, 200, 0.20);
    --lg-tint-sunken: rgba(8, 12, 24, 0.34);
    --lg-hairline: rgba(255, 255, 255, 0.16);
    --lg-hairline-soft: rgba(255, 255, 255, 0.08);
    --lg-specular: rgba(255, 255, 255, 0.45);

    --lg-ink: #f2f5fb;
    --lg-ink-soft: rgba(242, 245, 251, 0.68);
    --lg-ink-faint: rgba(242, 245, 251, 0.44);
    --lg-accent: #4aa3ff;
    --lg-accent-deep: #1f7ae0;

    --lg-ok: #32d74b;
    --lg-warn: #ffb340;
    --lg-crit: #ff6961;
    --lg-info: #6ad3ff;
    --lg-violet: #d08bf5;
    --lg-teal: #55d6ec;

    --lg-row-hover: rgba(120, 170, 255, 0.09);
    --lg-thead-bg: rgba(20, 26, 44, 0.62);
    --lg-divider: rgba(255, 255, 255, 0.09);

    --lg-shadow-card:
        0 1px 1px rgba(0, 0, 0, 0.35),
        0 10px 30px rgba(0, 0, 0, 0.45),
        0 40px 80px -16px rgba(0, 0, 0, 0.65);
    --lg-shadow-tile:
        0 1px 1px rgba(0, 0, 0, 0.32),
        0 8px 22px rgba(0, 0, 0, 0.40),
        0 26px 54px -16px rgba(0, 0, 0, 0.55);
    --lg-shadow-lift:
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 16px 40px rgba(0, 0, 0, 0.5),
        0 52px 92px -18px rgba(0, 0, 0, 0.7);

    --rh-page-bg: #05070f;
    --rh-surface-feature:
        linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.72));
    --rh-surface-panel: rgba(15, 23, 42, 0.82);
    --rh-surface-solid: #141b2c;
    --rh-surface-sunken: #10172a;
    --rh-text-primary: #f8fafc;
    --rh-text-secondary: #cbd5e1;
    --rh-text-muted: #94a3b8;
    --rh-border: rgba(148, 163, 184, 0.18);
    --rh-divider: rgba(255, 255, 255, 0.09);
    --rh-shadow-panel: 0 22px 70px rgba(0, 0, 0, 0.28);
    --rh-focus-ring: rgba(96, 165, 250, 0.34);
}

/* --------------------------------------------------------------------------
   1. Glass surface primitive
   -------------------------------------------------------------------------- */

.lg-surface {
    position: relative;
    isolation: isolate;
    background: linear-gradient(155deg, var(--lg-tint-strong), var(--lg-tint));
    border: 1px solid var(--lg-hairline);
    border-radius: var(--lg-radius-lg);
    box-shadow: var(--lg-shadow-card);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
}

/* Specular top-edge highlight — the defining Liquid Glass cue */
.lg-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        160deg,
        var(--lg-specular) 0%,
        rgba(255, 255, 255, 0.06) 26%,
        rgba(255, 255, 255, 0) 52%,
        rgba(255, 255, 255, 0.12) 100%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* Opaque fallback where backdrop-filter is unavailable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .lg-surface {
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(238, 244, 255, 0.9));
    }

    body.dark-mode .lg-surface {
        background: linear-gradient(155deg, rgba(28, 34, 52, 0.96), rgba(16, 22, 38, 0.94));
    }
}

/* --------------------------------------------------------------------------
   2. Animated mesh background (login shell)
   -------------------------------------------------------------------------- */

/* !important required to beat Bootstrap's .bg-light on <body> */
body.page-login {
    --login-glass-blur: 24px;
    --login-glass-saturate: 170%;
    --login-glass-tint: rgba(244, 249, 255, 0.64);
    --login-glass-tint-deep: rgba(225, 238, 252, 0.54);
    --login-glass-rim: rgba(255, 255, 255, 0.88);
    --login-glass-shadow: rgba(25, 58, 104, 0.22);
    --login-light-x: 50%;
    --login-light-y: 18%;
    --login-refraction-scale: 1;
    background-color: #0a1740 !important;
    background-image: none !important;
    font-family: var(--lg-font);
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
}

body.page-login.dark-mode {
    --login-glass-tint: rgba(14, 23, 42, 0.66);
    --login-glass-tint-deep: rgba(8, 15, 31, 0.58);
    --login-glass-rim: rgba(190, 220, 255, 0.62);
    --login-glass-shadow: rgba(0, 0, 0, 0.52);
    background-color: #05070f !important;
}

body.page-landing {
    background-color: #0a1740 !important;
    background-image: none !important;
}

body.page-landing.dark-mode {
    background-color: #05070f !important;
}

.login-hero {
    position: relative;
    min-height: 100dvh;
    padding: clamp(1.5rem, 5vw, 4rem);
    padding-top: max(clamp(1.5rem, 5vw, 4rem), env(safe-area-inset-top, 0px));
    padding-right: max(clamp(1.5rem, 5vw, 4rem), env(safe-area-inset-right, 0px));
    padding-bottom: max(clamp(1.5rem, 5vw, 4rem), env(safe-area-inset-bottom, 0px));
    padding-left: max(clamp(1.5rem, 5vw, 4rem), env(safe-area-inset-left, 0px));
    isolation: isolate;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
}

/*
 * Base wash only (static). Color motion lives on independent .login-mesh__orb
 * nodes so blobs can cross — not a rigid multi-radial sheet transform.
 * Kill legacy app.css screen overlay on ::before under page-login.
 */
body.page-login .login-hero::before,
body.dark-mode.page-login .login-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    mix-blend-mode: normal;
    opacity: 1;
    animation: none !important;
    will-change: auto;
    filter: none;
    transform: none;
    background:
        radial-gradient(120% 80% at 50% 120%, rgba(12, 40, 110, 0.55) 0%, transparent 55%),
        radial-gradient(80% 60% at 50% -10%, rgba(40, 90, 180, 0.25) 0%, transparent 50%);
}

body.page-login .login-hero::after,
body.dark-mode.page-login .login-hero::after {
    content: none;
    display: none;
    animation: none !important;
}

body.dark-mode.page-login .login-hero::before {
    background:
        radial-gradient(120% 80% at 50% 120%, rgba(6, 14, 40, 0.75) 0%, transparent 55%),
        radial-gradient(80% 60% at 50% -10%, rgba(20, 40, 90, 0.35) 0%, transparent 50%);
    opacity: 1;
}

/* ---- Independent liquid-glass glow orbs ---- */
.login-mesh {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.login-mesh__orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    /* Soft edge via stops only — never animate filter */
    filter: none;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    animation-iteration-count: infinite;
}

/* Anchors + sizes: large enough to feel ambient, travel via keyframe % */
.login-mesh__orb--1 {
    width: min(72vw, 560px);
    height: min(72vw, 560px);
    top: -12%;
    left: -8%;
    background: radial-gradient(circle at 40% 40%,
        rgba(88, 190, 255, 0.92) 0%,
        rgba(88, 190, 255, 0.45) 32%,
        rgba(88, 190, 255, 0) 68%);
    animation-name: lg-orb-float-1;
    animation-duration: 18s;
}

.login-mesh__orb--2 {
    width: min(68vw, 520px);
    height: min(68vw, 520px);
    top: -8%;
    right: -10%;
    left: auto;
    background: radial-gradient(circle at 55% 40%,
        rgba(150, 120, 255, 0.85) 0%,
        rgba(150, 120, 255, 0.4) 34%,
        rgba(150, 120, 255, 0) 68%);
    animation-name: lg-orb-float-2;
    animation-duration: 24s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.login-mesh__orb--3 {
    width: min(90vw, 720px);
    height: min(90vw, 720px);
    bottom: -28%;
    left: 18%;
    top: auto;
    background: radial-gradient(circle at 50% 35%,
        rgba(20, 78, 210, 0.95) 0%,
        rgba(20, 78, 210, 0.5) 36%,
        rgba(20, 78, 210, 0) 70%);
    animation-name: lg-orb-float-3;
    animation-duration: 31s;
}

.login-mesh__orb--4 {
    width: min(58vw, 440px);
    height: min(58vw, 440px);
    bottom: 8%;
    right: -6%;
    left: auto;
    top: auto;
    background: radial-gradient(circle at 45% 45%,
        rgba(255, 122, 190, 0.72) 0%,
        rgba(255, 122, 190, 0.32) 36%,
        rgba(255, 122, 190, 0) 68%);
    animation-name: lg-orb-float-4;
    animation-duration: 38s;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
}

.login-mesh__orb--5 {
    width: min(52vw, 400px);
    height: min(52vw, 400px);
    top: 38%;
    left: -4%;
    background: radial-gradient(circle at 50% 50%,
        rgba(64, 226, 210, 0.62) 0%,
        rgba(64, 226, 210, 0.28) 38%,
        rgba(64, 226, 210, 0) 68%);
    animation-name: lg-orb-float-5;
    animation-duration: 45s;
}

/* Dark: same hues, lower chroma so glass card stays readable */
body.dark-mode.page-login .login-mesh__orb--1 {
    background: radial-gradient(circle at 40% 40%,
        rgba(58, 140, 255, 0.7) 0%,
        rgba(58, 140, 255, 0.28) 34%,
        rgba(58, 140, 255, 0) 68%);
}
body.dark-mode.page-login .login-mesh__orb--2 {
    background: radial-gradient(circle at 55% 40%,
        rgba(120, 90, 220, 0.62) 0%,
        rgba(120, 90, 220, 0.26) 36%,
        rgba(120, 90, 220, 0) 68%);
}
body.dark-mode.page-login .login-mesh__orb--3 {
    background: radial-gradient(circle at 50% 35%,
        rgba(24, 60, 150, 0.85) 0%,
        rgba(24, 60, 150, 0.4) 38%,
        rgba(24, 60, 150, 0) 70%);
}
body.dark-mode.page-login .login-mesh__orb--4 {
    background: radial-gradient(circle at 45% 45%,
        rgba(180, 70, 130, 0.5) 0%,
        rgba(180, 70, 130, 0.22) 38%,
        rgba(180, 70, 130, 0) 68%);
}
body.dark-mode.page-login .login-mesh__orb--5 {
    background: radial-gradient(circle at 50% 50%,
        rgba(40, 160, 150, 0.45) 0%,
        rgba(40, 160, 150, 0.2) 40%,
        rgba(40, 160, 150, 0) 68%);
}

/*
 * Per-orb paths — larger travel so orbs visibly cross.
 * 0% == 100% for seamless loops. Transform + opacity only.
 */
@keyframes lg-orb-float-1 {
    0%, 100% { transform: translate3d(0%, 0%, 0) scale(1) rotate(0deg); opacity: 0.95; }
    25%      { transform: translate3d(18%, 12%, 0) scale(1.14) rotate(3deg); opacity: 1; }
    50%      { transform: translate3d(8%, 22%, 0) scale(0.92) rotate(-2deg); opacity: 0.88; }
    75%      { transform: translate3d(-10%, 8%, 0) scale(1.08) rotate(2deg); opacity: 0.96; }
}

@keyframes lg-orb-float-2 {
    0%, 100% { transform: translate3d(0%, 0%, 0) scale(1.05) rotate(0deg); opacity: 0.92; }
    20%      { transform: translate3d(-16%, 14%, 0) scale(0.9) rotate(-4deg); opacity: 0.85; }
    45%      { transform: translate3d(-22%, -6%, 0) scale(1.18) rotate(2deg); opacity: 1; }
    70%      { transform: translate3d(6%, 16%, 0) scale(1.02) rotate(-1deg); opacity: 0.9; }
}

@keyframes lg-orb-float-3 {
    0%, 100% { transform: translate3d(0%, 0%, 0) scale(1) rotate(0deg); opacity: 1; }
    30%      { transform: translate3d(-14%, -12%, 0) scale(1.12) rotate(2deg); opacity: 0.95; }
    55%      { transform: translate3d(12%, -18%, 0) scale(0.94) rotate(-3deg); opacity: 0.9; }
    80%      { transform: translate3d(16%, 6%, 0) scale(1.08) rotate(1deg); opacity: 0.98; }
}

@keyframes lg-orb-float-4 {
    0%, 100% { transform: translate3d(0%, 0%, 0) scale(1.08) rotate(0deg); opacity: 0.9; }
    25%      { transform: translate3d(-18%, -14%, 0) scale(1.2) rotate(4deg); opacity: 1; }
    50%      { transform: translate3d(-8%, 12%, 0) scale(0.88) rotate(-2deg); opacity: 0.82; }
    75%      { transform: translate3d(10%, -8%, 0) scale(1.1) rotate(2deg); opacity: 0.94; }
}

@keyframes lg-orb-float-5 {
    0%, 100% { transform: translate3d(0%, 0%, 0) scale(1) rotate(0deg); opacity: 0.88; }
    22%      { transform: translate3d(20%, -16%, 0) scale(1.16) rotate(-3deg); opacity: 0.98; }
    48%      { transform: translate3d(14%, 14%, 0) scale(0.9) rotate(3deg); opacity: 0.84; }
    72%      { transform: translate3d(-12%, 10%, 0) scale(1.12) rotate(-1deg); opacity: 0.95; }
}

/* Film grain — breaks up banding; stays static (cheap) */
.login-hero__grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.dark-mode .login-hero__grain {
    opacity: 0.055;
}

/* Float the real navbar theme toggle instead of hiding the whole navbar,
   so the single #theme-checkbox stays unique and the theme JS keeps working. */
body.page-login .navbar,
body.dark-mode.page-login .navbar {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: auto;
    z-index: 20;
    padding: clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3vw, 2rem);
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

.page-login .navbar .container-fluid {
    padding: 0;
    justify-content: flex-end;
}

.page-login .navbar-brand,
.page-login .navbar .btn-outline-light {
    display: none !important;
}

.page-login .navbar .theme-toggle-wrapper {
    pointer-events: auto;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* --------------------------------------------------------------------------
   3. Login card
   -------------------------------------------------------------------------- */

.page-login .login-card {
    width: min(420px, 100%);
    padding: clamp(1.75rem, 4vw, 2.5rem);
    border-radius: var(--lg-radius-xl);
    color: var(--lg-ink);
    z-index: 1;
    overflow: hidden;
    contain: layout paint style;
    background: linear-gradient(145deg, var(--login-glass-tint), var(--login-glass-tint-deep)) !important;
    border-color: color-mix(in srgb, var(--login-glass-rim) 58%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--login-glass-rim) 78%, transparent),
        inset 0 -16px 28px rgba(16, 47, 88, 0.07),
        0 24px 58px -18px var(--login-glass-shadow);
    -webkit-backdrop-filter: blur(var(--login-glass-blur)) saturate(var(--login-glass-saturate));
    backdrop-filter: blur(var(--login-glass-blur)) saturate(var(--login-glass-saturate));
    transition:
        transform var(--lg-dur-md) var(--ease-ios-out),
        box-shadow var(--lg-dur-md) var(--ease-ios-out);
}

.lg-filter-defs {
    position: fixed;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-card__lens,
.login-card__rim {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

/* A narrow, feathered proxy bends only the pane edge; content remains crisp. */
.login-card__lens {
    z-index: 0;
    inset: -5px;
    padding: 14px;
    background:
        radial-gradient(16rem 13rem at var(--login-light-x) var(--login-light-y), rgba(255, 255, 255, 0.24), transparent 72%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(54, 116, 190, 0.08));
    -webkit-backdrop-filter: blur(8px) saturate(178%);
    backdrop-filter: blur(8px) saturate(178%);
    filter: url("#lg-edge-refraction");
    transform: scale(var(--login-refraction-scale));
    transform-origin: center;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.68;
    transition: transform 180ms var(--ease-ios-out), opacity 220ms var(--ease-ios-out);
}

.login-card__rim {
    z-index: 2;
    inset: 1px;
    box-shadow:
        inset 0 1px 1px color-mix(in srgb, var(--login-glass-rim) 88%, transparent),
        inset 1px 0 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 1px rgba(5, 18, 38, 0.2);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 32%, rgba(0, 0, 0, 0.2) 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 32%, rgba(0, 0, 0, 0.2) 72%, transparent 100%);
}

/* Cursor-tracking specular sheen */
.login-card__sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    opacity: 0.58;
    background: radial-gradient(
        18rem 15rem at var(--login-light-x) var(--login-light-y),
        rgba(255, 255, 255, 0.48) 0%,
        rgba(255, 255, 255, 0.12) 34%,
        rgba(255, 255, 255, 0) 72%
    );
    mix-blend-mode: soft-light;
    transition: opacity var(--lg-dur-md) var(--ease-ios-out);
}

.page-login .login-card:hover .login-card__sheen,
.page-login .login-card:focus-within .login-card__sheen {
    opacity: 0.9;
}

.page-login .login-card.is-pressed {
    --login-refraction-scale: 1.012;
    transform: scale(0.992);
}

.page-login .login-card.is-pressed .login-card__lens {
    opacity: 0.9;
}

.page-login .login-card > :not(.login-card__lens):not(.login-card__rim):not(.login-card__sheen) {
    position: relative;
    z-index: 3;
}

.page-login .login-card__brand {
    margin-bottom: 1.75rem;
    padding: 0;
    border-radius: 0;
    overflow: visible;
}

.page-login .login-card__brand::before {
    display: none;
}

.page-login .login-card__logo {
    width: min(380px, 100%) !important;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    filter: drop-shadow(0 10px 26px rgba(6, 18, 46, 0.28));
}

body.dark-mode .page-login .login-card__logo {
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45)) brightness(0.96) contrast(1.02);
}

.login-card__title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.022em;
    text-align: center;
    color: var(--lg-ink);
}

.login-card__subtitle {
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--lg-ink-soft);
}

/* -- Grouped inset field list (iOS Settings style) -- */

.page-login .login-form {
    gap: 1.25rem;
}

.login-form__fields {
    display: flex;
    flex-direction: column;
    border-radius: var(--lg-radius-md);
    background: var(--lg-tint-sunken);
    border: 1px solid var(--lg-hairline-soft);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(6, 18, 46, 0.08);
    transition: border-color var(--lg-dur-sm) var(--ease-ios), box-shadow var(--lg-dur-sm) var(--ease-ios);
}

.login-form__fields:focus-within {
    border-color: color-mix(in srgb, var(--lg-accent) 55%, transparent);
    box-shadow:
        inset 0 1px 2px rgba(6, 18, 46, 0.08),
        0 0 0 4px color-mix(in srgb, var(--lg-accent) 18%, transparent);
}

.page-login .login-form__group {
    position: relative;
    gap: 0;
    padding: 0;
}

.page-login .login-form__group + .login-form__group {
    border-top: 1px solid var(--lg-hairline-soft);
}

/* Floating label — top/font-size (not transform) so app.css input:focus scale can't collide */
.page-login .login-form__group > label {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 1.15rem;
    margin: 0;
    transform: none !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--lg-ink-faint);
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        top var(--lg-dur-sm) var(--ease-ios-out),
        font-size var(--lg-dur-sm) var(--ease-ios-out),
        color var(--lg-dur-sm) var(--ease-ios);
}

/* Floated when focused or when value present (placeholder=" " keeps :placeholder-shown working) */
.page-login .login-form__group:focus-within > label,
.page-login .login-form__group > input:not(:placeholder-shown) ~ label,
.page-login .login-form__group > input:focus ~ label {
    top: 0.42rem !important;
    font-size: 0.72rem !important;
    line-height: 1.1;
    color: var(--lg-accent);
}

.page-login .login-form__group > input:not(:placeholder-shown):not(:focus) ~ label {
    color: var(--lg-ink-faint);
}

.page-login .login-form input[type="text"],
.page-login .login-form input[type="password"],
.page-login .login-form .form-control {
    width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    /* Extra top pad so typed text never sits under the floated label */
    padding: 1.75rem 1rem 0.7rem !important;
    min-height: 3.65rem;
    font-size: 1rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--lg-ink);
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    /* Kill global .form-control:focus { transform: scale(...) } which causes label/text clash */
    transform: none !important;
}

.page-login .login-form input:focus,
.page-login .login-form input:focus-visible,
.page-login .login-form .form-control:focus,
.page-login .login-form .form-control:focus-visible {
    outline: none;
    box-shadow: none !important;
    background: transparent;
    transform: none !important;
}

.page-login .login-form input:-webkit-autofill {
    -webkit-text-fill-color: var(--lg-ink);
    transition: background-color 100000s ease-in-out 0s;
}

/* -- Submit button -- */

.page-login .login-card__submit {
    position: relative;
    width: 100%;
    padding: 0.95rem 1.25rem;
    border-radius: var(--lg-radius-sm);
    border: none;
    font-family: var(--lg-font);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
    background: linear-gradient(180deg, var(--lg-accent), var(--lg-accent-deep));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 6px 18px color-mix(in srgb, var(--lg-accent) 38%, transparent);
    overflow: hidden;
    transition:
        transform var(--lg-dur-sm) var(--ease-ios-spring),
        box-shadow var(--lg-dur-sm) var(--ease-ios),
        filter var(--lg-dur-xs) var(--ease-ios);
}

.page-login .login-card__submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 10px 26px color-mix(in srgb, var(--lg-accent) 46%, transparent);
}

.page-login .login-card__submit:active {
    transform: scale(0.97);
    filter: brightness(0.94);
    transition-duration: 0.08s;
}

.page-login .login-card__submit:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--lg-accent) 55%, transparent);
    outline-offset: 3px;
}

.login-card__submit[data-loading="true"] {
    pointer-events: none;
    color: transparent;
}

.login-card__submit[data-loading="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: lg-spin 0.7s linear infinite;
}

@keyframes lg-spin {
    to { transform: rotate(360deg); }
}

/* -- Footer + errors -- */

.page-login .login-card__footer {
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    letter-spacing: -0.005em;
    color: var(--lg-ink-faint);
}

.page-login .alert {
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--lg-radius-sm);
    border: 1px solid color-mix(in srgb, var(--lg-danger) 40%, transparent);
    background: color-mix(in srgb, var(--lg-danger) 14%, transparent);
    color: color-mix(in srgb, var(--lg-danger) 80%, var(--lg-ink));
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
}

.page-login .invalid-feedback {
    padding: 0 1rem 0.6rem;
    font-size: 0.8125rem;
    color: var(--lg-danger);
}

.login-card--shake {
    animation: lg-shake 0.5s var(--ease-ios);
}

@keyframes lg-shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-9px); }
    30%      { transform: translateX(8px); }
    45%      { transform: translateX(-6px); }
    60%      { transform: translateX(4px); }
    80%      { transform: translateX(-2px); }
}

/* -- Entrance (CSS baseline; Motion One enhances when available) -- */

.lg-enter {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
}

.lg-enter-ready .lg-enter {
    animation: lg-rise var(--lg-dur-lg) var(--ease-ios-out) forwards;
    animation-delay: var(--lg-delay, 0s);
}

@keyframes lg-rise {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Card itself gets a slightly richer arrival */
.lg-enter-ready .login-card.lg-enter {
    animation-name: lg-card-arrive;
    animation-duration: var(--lg-dur-xl);
}

@keyframes lg-card-arrive {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.lg-enter-ready .login-card.lg-enter .login-card__sheen {
    animation: lg-glass-condense 0.8s var(--ease-ios-out) both;
}

@keyframes lg-glass-condense {
    0% { opacity: 0; filter: blur(8px); transform: scale(1.025); }
    100% { filter: blur(0); transform: scale(1); }
}

/* --------------------------------------------------------------------------
   3b. Light- and dark-mode overrides
   app.css ships legacy login rules for the default dark surface. These explicit
   theme overrides keep the form readable in both modes without clobbering the
   rest of the app.
   -------------------------------------------------------------------------- */

body.page-login:not(.dark-mode) {
    background-color: #edf3fb !important;
    background-image:
        radial-gradient(circle at 14% 12%, rgba(63, 131, 248, 0.12), transparent 26%),
        radial-gradient(circle at 86% 18%, rgba(76, 157, 255, 0.09), transparent 28%),
        linear-gradient(180deg, #f9fbff 0%, #edf3fb 100%) !important;
    color: #0f172a;
}

body.page-login:not(.dark-mode) .login-card {
    background: linear-gradient(145deg, var(--login-glass-tint), var(--login-glass-tint-deep)) !important;
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -16px 28px rgba(16, 47, 88, 0.07), 0 24px 58px -18px var(--login-glass-shadow);
    color: #0f172a;
}

body.page-login:not(.dark-mode) .login-card__title,
body.page-login:not(.dark-mode) .login-card__subtitle,
body.page-login:not(.dark-mode) .login-card__helper,
body.page-login:not(.dark-mode) .login-card__brand-subtitle,
body.page-login:not(.dark-mode) .login-card__footer,
body.page-login:not(.dark-mode) .login-form label,
body.page-login:not(.dark-mode) .login-form__account,
body.page-login:not(.dark-mode) .login-form__account strong,
body.page-login:not(.dark-mode) .login-form__account code {
    color: #0f172a;
}

body.page-login:not(.dark-mode) .login-form__fields {
    background: rgba(255, 255, 255, 0.48);
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

body.page-login:not(.dark-mode) .login-form__group + .login-form__group {
    border-top-color: rgba(148, 163, 184, 0.3);
}

body.page-login:not(.dark-mode) .login-form__group > label {
    color: rgba(15, 23, 42, 0.62);
}

body.page-login:not(.dark-mode) .login-form__group:focus-within > label,
body.page-login:not(.dark-mode) .login-form__group > input:not(:placeholder-shown) ~ label,
body.page-login:not(.dark-mode) .login-form__group > input:focus ~ label {
    color: #1768d1;
}

body.page-login:not(.dark-mode) .login-form__group > input:not(:placeholder-shown):not(:focus) ~ label {
    color: rgba(15, 23, 42, 0.62);
}

body.page-login:not(.dark-mode) .login-form input[type="text"],
body.page-login:not(.dark-mode) .login-form input[type="password"],
body.page-login:not(.dark-mode) .login-form .form-control,
body.page-login:not(.dark-mode) .login-form .form-control:focus {
    background-color: transparent;
    background: transparent;
    border: none;
    box-shadow: none !important;
    color: #0f172a;
    transform: none !important;
}

body.page-login:not(.dark-mode) .login-form input:-webkit-autofill {
    -webkit-text-fill-color: #0f172a;
}

body.page-login:not(.dark-mode) .login-card__footer {
    color: rgba(15, 23, 42, 0.72);
}

body.page-login:not(.dark-mode) .login-card__submit {
    box-shadow: 0 10px 24px rgba(23, 104, 209, 0.26);
}

body.dark-mode.page-login .login-card {
    background: linear-gradient(145deg, var(--login-glass-tint), var(--login-glass-tint-deep)) !important;
    border: 1px solid rgba(190, 220, 255, 0.24);
    box-shadow: inset 0 1px 0 rgba(205, 229, 255, 0.42), inset 0 -18px 30px rgba(0, 0, 0, 0.18), 0 28px 64px -18px var(--login-glass-shadow);
    color: var(--lg-ink);
}

body.dark-mode.page-login .login-card__title {
    color: var(--lg-ink);
}

body.dark-mode.page-login .login-card__subtitle {
    color: var(--lg-ink-soft);
}

body.dark-mode.page-login .login-form__group > label {
    color: var(--lg-ink-faint);
}

body.dark-mode.page-login .login-form__group:focus-within > label,
body.dark-mode.page-login .login-form__group > input:not(:placeholder-shown) ~ label,
body.dark-mode.page-login .login-form__group > input:focus ~ label {
    color: var(--lg-accent);
}

body.dark-mode.page-login .login-form__group > input:not(:placeholder-shown):not(:focus) ~ label {
    color: var(--lg-ink-faint);
}

body.dark-mode.page-login .login-form input[type="text"],
body.dark-mode.page-login .login-form input[type="password"],
body.dark-mode.page-login .login-form .form-control,
body.dark-mode.page-login .login-form .form-control:focus {
    background-color: transparent;
    background: transparent;
    border: none;
    box-shadow: none !important;
    color: var(--lg-ink);
    transform: none !important;
}

body.dark-mode.page-login .login-form input:-webkit-autofill {
    -webkit-text-fill-color: var(--lg-ink);
}

body.dark-mode.page-login .login-card__footer {
    color: var(--lg-ink-faint);
}

body.dark-mode.page-login .page-login .alert,
body.dark-mode.page-login .alert {
    background: color-mix(in srgb, var(--lg-danger) 18%, transparent);
    border-color: color-mix(in srgb, var(--lg-danger) 45%, transparent);
    color: #ff8a80;
}

body.dark-mode.page-login .login-hero::before {
    opacity: 1;
}

body.dark-mode.page-login img.login-card__logo {
    background-color: transparent;
    padding: 0;
    border-radius: 20px;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45)) brightness(0.96) contrast(1.02);
}

/* --------------------------------------------------------------------------
   4. Landing page — glass role tiles
   -------------------------------------------------------------------------- */

.page-landing {
    font-family: var(--lg-font);
}

.lg-landing__hero {
    padding: clamp(2rem, 5vw, 3.25rem);
    border-radius: var(--lg-radius-xl);
    text-align: center;
    color: var(--lg-ink);
}

.lg-landing__title {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.lg-landing__lead {
    margin: 0;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    color: var(--lg-ink-soft);
}

.lg-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem;
    border-radius: var(--lg-radius-lg);
    color: var(--lg-ink);
    overflow: hidden;
    transition:
        transform var(--lg-dur-md) var(--ease-ios-out),
        box-shadow var(--lg-dur-md) var(--ease-ios-out);
}

.lg-tile::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-18deg);
    opacity: 0;
    transition: none;
}

.lg-tile:hover,
.lg-tile:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--lg-shadow-lift);
}

.lg-tile:hover::after {
    animation: lg-sheen-sweep var(--lg-dur-xl) var(--ease-ios) forwards;
}

@keyframes lg-sheen-sweep {
    0%   { left: -60%; opacity: 0; }
    18%  { opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

.lg-tile > * {
    position: relative;
    z-index: 2;
}

.lg-tile__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.lg-tile__desc {
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    color: var(--lg-ink-soft);
}

.lg-tile__hint {
    margin: 0 0 1.25rem;
    font-size: 0.8125rem;
    color: var(--lg-ink-faint);
}

.lg-tile__hint code {
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    background: var(--lg-tint-sunken);
    color: var(--lg-ink-soft);
}

.lg-tile__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 1.1rem;
    border-radius: var(--lg-radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(180deg, var(--lg-accent), var(--lg-accent-deep));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
    transition: transform var(--lg-dur-sm) var(--ease-ios-spring), filter var(--lg-dur-xs) var(--ease-ios);
}

.lg-tile__cta:hover {
    color: #fff;
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.lg-tile__cta:active {
    transform: scale(0.97);
    transition-duration: 0.08s;
}

.lg-landing__footer {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--lg-ink-faint);
}

/* --------------------------------------------------------------------------
   5. Login success overlay
   -------------------------------------------------------------------------- */

.login-success-overlay {
    background: color-mix(in srgb, #050b1c 55%, transparent);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    transition: opacity var(--lg-dur-md) var(--ease-ios);
}

.login-success-overlay .login-success-card {
    width: min(360px, 88vw);
    padding: 2.25rem 2rem 2rem;
    border-radius: var(--lg-radius-xl);
    background: linear-gradient(155deg, var(--lg-tint-strong), var(--lg-tint));
    border: 1px solid var(--lg-hairline);
    box-shadow: var(--lg-shadow-card);
    -webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-saturate));
    color: #fff;
    font-family: var(--lg-font);
    animation: lg-card-arrive var(--lg-dur-lg) var(--ease-ios-out) forwards;
}

.login-success-overlay--fade .login-success-card {
    animation: lg-success-exit var(--lg-dur-md) var(--ease-ios) forwards;
}

@keyframes lg-success-exit {
    to {
        opacity: 0;
        transform: scale(1.04);
        filter: blur(8px);
    }
}

.login-success-card__ring {
    width: 96px;
    height: 96px;
    margin: 0 auto 1.25rem;
    border: none;
    overflow: visible;
}

.login-success-card__ring::before {
    border: 3px solid rgba(52, 199, 89, 0.7);
    animation: lg-success-ring var(--lg-dur-xl) var(--ease-ios-out) forwards;
}

@keyframes lg-success-ring {
    0%   { transform: scale(0.7); opacity: 0.9; }
    100% { transform: scale(1.35); opacity: 0; }
}

.login-success-card__icon {
    width: 76px;
    height: 76px;
    background: linear-gradient(180deg, #40d267, #2aa74d);
    box-shadow: 0 10px 26px rgba(28, 140, 62, 0.4);
    animation: lg-success-pop var(--lg-dur-lg) var(--ease-ios-spring) forwards;
}

@keyframes lg-success-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.login-success-card__check {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: lg-check-draw var(--lg-dur-lg) var(--ease-ios-out) 0.18s forwards;
}

@keyframes lg-check-draw {
    to { stroke-dashoffset: 0; }
}

.login-success-card__title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.022em;
}

.login-success-card__subtitle {
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    opacity: 0.82;
}

.login-success-card__progress {
    width: 140px;
    height: 3px;
    background: rgba(255, 255, 255, 0.22);
}

.login-success-card__progress-bar {
    background: #fff;
    animation-duration: var(--lg-progress-duration, 1.8s);
    animation-timing-function: linear;
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .page-login .login-card {
        padding: 1.75rem 1.375rem 1.5rem;
        border-radius: var(--lg-radius-lg);
    }

    .login-hero {
        padding: 4.5rem 1.25rem 1.5rem;
        padding-top: max(4.5rem, calc(env(safe-area-inset-top, 0px) + 3.5rem));
        padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
        padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
        align-items: flex-start;
        overflow-y: auto;
    }

    .lg-landing__hero {
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
        padding-top: max(clamp(2rem, 5vw, 3.25rem), env(safe-area-inset-top, 0px));
    }

    .page-login .navbar {
        padding: 0.75rem 1rem;
    }

    .page-login .login-card__logo {
        width: 100% !important;
        border-radius: 16px;
    }

    .page-login .login-card__brand {
        margin-bottom: 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   7. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .login-hero::before,
    .login-hero::after,
    .login-mesh__orb,
    .lg-tile::after,
    .login-success-card,
    .login-success-card__ring::before,
    .login-success-card__icon,
    .login-success-card__check,
    .lg-enter-ready .lg-enter,
    .login-card--shake {
        animation: none !important;
        will-change: auto !important;
    }

    .login-hero::before,
    .login-hero::after {
        inset: 0;
        transform: none !important;
    }

    .login-mesh__orb {
        transform: none !important;
        opacity: 0.9 !important;
    }

    .lg-enter,
    .lg-enter-ready .lg-enter {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .login-success-card__check {
        stroke-dashoffset: 0;
    }

    .login-card__lens,
    .login-card__sheen {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .login-card__sheen {
        opacity: 0.42;
    }

    .lg-tile:hover,
    .lg-tile:focus-within,
    .page-login .login-card__submit:hover,
    .lg-tile__cta:hover {
        transform: none;
    }
}

@media (pointer: coarse) {
    .login-card__sheen { opacity: 0.48; }
}

@supports not (filter: url("#lg-edge-refraction")) {
    .login-card__lens { filter: none; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .page-login .login-card {
        background: rgba(242, 247, 253, 0.96) !important;
    }

    body.dark-mode.page-login .login-card {
        background: rgba(13, 21, 38, 0.96) !important;
    }

    .login-card__lens { display: none; }
}

body.pref-reduce-effects.page-login .login-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(242, 247, 253, 0.96) !important;
}

body.pref-reduce-effects.page-login .login-card__lens {
    display: none;
}

body.pref-reduce-effects.page-login .login-card__sheen {
    opacity: 0.25;
}

body.dark-mode.pref-reduce-effects.page-login .login-card {
    background: rgba(13, 21, 38, 0.96) !important;
}