/* ==========================================================================
   SEAMS Auth Pages — "Horizon" Theme
   Light mode (default) + Dark mode toggle
   ========================================================================== */

/* === Shared (non-theme) variables — HAA marketing brand tokens === */
:root {
    --haa-primary: #3f4145;
    --haa-primary-900: #2a2c2f;
    --haa-primary-soft: #f3d0d3;
    --accent: #7f2027;
    --accent-hover: #a32a33;
    --accent-bright: #a32a33;
    --accent-dark: #661a1f;
    --text-on-accent: #ffffff;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    --fast: 150ms ease;
    --normal: 250ms ease;
    --slow: 400ms ease;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    --header-h: 76px;
    --font-display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* === LIGHT THEME (default) === */
:root {
    --bg-deep: #f0f2f5;
    --bg-primary: #f5f6f8;
    --bg-secondary: #eaedf1;
    --bg-card: #ffffff;
    --bg-input: #f8f9fb;

    --border-subtle: rgba(0, 0, 0, 0.07);
    --border-input: rgba(0, 0, 0, 0.13);
    --border-input-hover: rgba(0, 0, 0, 0.24);

    --accent-soft: rgba(127, 32, 39, 0.1);
    --accent-glow: rgba(127, 32, 39, 0.14);
    --gold: #96792f;
    --gold-soft: rgba(150, 121, 47, 0.08);

    --text-primary: #3f4145;
    --text-secondary: #6b6d71;
    --text-muted: #85878b;

    --success: #2f7d4a;
    --success-bg: rgba(47, 125, 74, 0.08);
    --error: #b42318;
    --error-bg: rgba(180, 35, 24, 0.06);
    --info: #2563eb;
    --info-bg: rgba(37, 99, 235, 0.06);

    --shadow-card: 0 8px 28px rgba(63, 65, 69, 0.08);
    --shadow-input: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-btn: 0 4px 18px rgba(127, 32, 39, 0.18);
    --shadow-btn-hover: 0 8px 24px rgba(127, 32, 39, 0.28);

    /* Component-level tokens */
    --nav-bg: rgba(255, 255, 255, 0.82);
    --nav-link-hover-bg: rgba(0, 0, 0, 0.04);
    --mobile-nav-bg: rgba(63, 65, 69, 0.98);
    --bg-gradient-accent: rgba(127, 32, 39, 0.06);
    --bg-gradient-blue: rgba(63, 65, 69, 0.04);
    --grid-line-color: rgba(63, 65, 69, 0.04);
    --globe-opacity: 0.06;
    --globe-blend: multiply;
    --logo-filter: none;
    --logo-brand-filter: none;
    --hero-glow: rgba(127, 32, 39, 0.04);
    --input-focus-bg: #ffffff;
    --footer-bg: #3f4145;
    --social-bg: rgba(255, 255, 255, 0.06);
    --social-hover-bg: rgba(127, 32, 39, 0.35);
    --ghost-btn-hover-bg: rgba(0, 0, 0, 0.03);
    --outline-btn-border: rgba(0, 0, 0, 0.15);
    --outline-btn-hover-border: rgba(0, 0, 0, 0.3);
    --outline-btn-hover-bg: rgba(0, 0, 0, 0.03);
}

/* === DARK THEME === */
[data-theme="dark"] {
    --bg-deep: #080e19;
    --bg-primary: #0c1220;
    --bg-secondary: #131d2e;
    --bg-card: rgba(16, 24, 40, 0.88);
    --bg-input: rgba(8, 14, 25, 0.6);

    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-input: rgba(255, 255, 255, 0.1);
    --border-input-hover: rgba(255, 255, 255, 0.18);

    --accent-soft: rgba(127, 32, 39, 0.18);
    --accent-glow: rgba(163, 42, 51, 0.28);
    --gold: #c9a85c;
    --gold-soft: rgba(201, 168, 92, 0.12);

    --text-primary: #f1f5f9;
    --text-secondary: #a0a2a5;
    --text-muted: #6b6d71;

    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.1);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.1);
    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.1);

    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-input: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-btn: 0 2px 12px rgba(127, 32, 39, 0.35);
    --shadow-btn-hover: 0 4px 20px rgba(127, 32, 39, 0.5);

    --nav-bg: rgba(8, 14, 25, 0.6);
    --nav-link-hover-bg: rgba(255, 255, 255, 0.05);
    --mobile-nav-bg: rgba(42, 44, 47, 0.98);
    --bg-gradient-accent: rgba(127, 32, 39, 0.1);
    --bg-gradient-blue: rgba(63, 65, 69, 0.18);
    --grid-line-color: rgba(255, 255, 255, 0.018);
    --globe-opacity: 0.03;
    --globe-blend: screen;
    --logo-filter: brightness(0) invert(1) brightness(0.85);
    --logo-brand-filter: brightness(0) invert(1) brightness(0.75);
    --hero-glow: rgba(127, 32, 39, 0.08);
    --input-focus-bg: rgba(8, 14, 25, 0.8);
    --footer-bg: #2a2c2f;
    --social-bg: rgba(255, 255, 255, 0.05);
    --social-hover-bg: rgba(127, 32, 39, 0.45);
    --ghost-btn-hover-bg: rgba(255, 255, 255, 0.03);
    --outline-btn-border: rgba(255, 255, 255, 0.15);
    --outline-btn-hover-border: rgba(255, 255, 255, 0.3);
    --outline-btn-hover-bg: rgba(255, 255, 255, 0.05);
}


/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body.auth-body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--bg-deep);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   ATMOSPHERIC BACKGROUND
   ========================================================================== */

.auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.auth-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, var(--bg-gradient-accent) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 100%, var(--bg-gradient-blue) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-primary) 40%, var(--bg-secondary) 100%);
}

.auth-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--grid-line-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black, transparent);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black, transparent);
}

.auth-bg-globe {
    position: absolute;
    inset: 0;
    background: url('/auth/images/bannertop01.jpg') center 30% / cover no-repeat;
    opacity: var(--globe-opacity);
    mix-blend-mode: var(--globe-blend);
}


/* ==========================================================================
   NAVIGATION
   Solid dark charcoal bar (#3F4145) with white brand/nav chrome.
   Maroon CTAs (Careers / open-roles badge / Advertise) stay accent-coloured.
   ========================================================================== */

/* ==========================================================================
   HEADER — mirrors HAA marketing site (draft: honiball-aviation-auditing)
   ========================================================================== */

.auth-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    min-height: var(--header-h);
    background: rgba(63, 65, 69, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.auth-nav.is-scrolled {
    background: rgba(63, 65, 69, 0.98);
    box-shadow: 0 8px 28px rgba(63, 65, 69, 0.2);
}

.auth-nav-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.25rem;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.auth-nav-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
}

.auth-nav-brand:hover {
    opacity: 0.92;
    color: #fff;
}

.auth-nav-logo {
    display: block;
    height: 46px;
    width: auto;
    max-width: min(280px, 52vw);
    object-fit: contain;
    filter: none;
}

.auth-nav-desktop {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.auth-nav-link {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    font-size: 0.92rem;
    font-weight: 600;
    transition: color 0.2s, background 0.2s;
    text-decoration: none;
}

.auth-nav-link:hover,
.auth-nav-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.auth-nav-link.is-active {
    color: var(--haa-primary-soft);
    background: rgba(255, 255, 255, 0.08);
}

.auth-nav-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.auth-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

/* Utility links: Careers @HAA · Advertise here (text, not pills) */
.auth-nav-utility {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.25rem;
}

.auth-nav-utility-link {
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s;
}

.auth-nav-utility-link:hover,
.auth-nav-utility-link:focus-visible {
    color: var(--haa-primary-soft);
}

.auth-nav-utility-sep {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
}

.auth-nav-utility-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

/* Primary Enquire CTA — glass burgundy like marketing site */
.auth-nav-enquire {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid rgba(243, 208, 211, 0.35);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    color: #fff;
    background: rgba(127, 32, 39, 0.42);
    box-shadow: 0 4px 18px rgba(127, 32, 39, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
                background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.auth-nav-enquire:hover,
.auth-nav-enquire:focus-visible {
    color: #fff;
    background: rgba(127, 32, 39, 0.62);
    border-color: rgba(243, 208, 211, 0.55);
    box-shadow: 0 8px 24px rgba(127, 32, 39, 0.28);
    transform: translateY(-1px);
}

.auth-nav-enquire--block {
    width: 100%;
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
}

/* Theme Toggle — white icon chrome on charcoal bar */
.auth-theme-toggle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--fast);
    flex-shrink: 0;
}

.auth-theme-toggle:hover,
.auth-theme-toggle:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
}

.auth-theme-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.auth-theme-toggle .icon-sun  { display: none; }
.auth-theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .auth-theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .auth-theme-toggle .icon-moon { display: none; }

/* Mobile menu toggle (hamburger / close) */
.auth-nav-toggle {
    width: 2.5rem;
    height: 2.5rem;
    color: #fff;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    display: none;
    flex-shrink: 0;
    padding: 0;
}

.auth-nav-toggle .icon-close,
.auth-nav-toggle[aria-expanded="true"] .icon-menu {
    display: none;
}

.auth-nav-toggle[aria-expanded="true"] .icon-close {
    display: block;
}

.auth-nav-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

/* Mobile drawer */
.auth-mobile-nav {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(63, 65, 69, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.25rem 1.5rem;
}

.auth-mobile-nav[hidden] {
    display: none;
}

.auth-mobile-link {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.85rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: block;
    text-decoration: none;
}

.auth-mobile-link.is-active,
.auth-mobile-link:hover,
.auth-mobile-link:focus-visible {
    color: var(--haa-primary-soft);
}

.auth-mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

@media (max-width: 1100px) {
    .auth-nav-utility {
        display: none;
    }
}

@media (max-width: 980px) {
    .auth-nav-desktop {
        display: none;
    }

    .auth-nav-toggle {
        display: flex;
    }
}

@media (max-width: 480px) {
    .auth-nav-logo {
        height: 36px;
    }

    .auth-nav-enquire:not(.auth-nav-enquire--block) {
        display: none;
    }
}


/* ==========================================================================
   MAIN CONTENT AREA
   ========================================================================== */

.auth-main {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--header-h) + 24px) 24px 48px;
}


/* ==========================================================================
   AUTH HERO
   ========================================================================== */

.auth-hero {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    animation: cardReveal 0.6s ease-out;
}

/* Subtle glow behind card */
.auth-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--hero-glow) 0%, transparent 70%);
    pointer-events: none;
}

/* ==========================================================================
   SERVICES BAND — merged with the header in the old leaderboard space.
   Service buttons flank the live stats: services | stats | services.
   ========================================================================== */

/* Double-height band — this is the old Ad1 leaderboard space put to work,
   so services + stats read as a full second storey of the header. */
.auth-utility-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    min-height: 120px;
    padding: 20px 24px;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
}

.auth-utility-services {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.auth-utility-services::-webkit-scrollbar {
    display: none;
}

.auth-service-btn {
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid var(--border-input);
    background: var(--bg-card);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--fast), background var(--fast), border-color var(--fast);
}

.auth-service-btn:hover,
.auth-service-btn:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.auth-service-btn.is-accent {
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 700;
}

.auth-promo-link--sm {
    padding: 6px 12px;
    font-size: 0.75rem;
}


/* ==========================================================================
   LOGIN STAGE — full-width zero-gap board (7 ad slots)
   Login stays center-stage; ad columns flex to fill desktop viewport
   ========================================================================== */

/* Top padding equals the fixed nav height so the services band merges
   seamlessly with the header. */
.auth-main:has(.auth-stage) {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    padding: var(--header-h) 0 32px;
    width: 100%;
    max-width: none;
}

.auth-stage {
    width: 100%;
    max-width: none;
    margin: 0;
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0;
    border: 0;
    border-block: 1px solid var(--border-subtle);
    background: var(--border-subtle);
    box-shadow: none;
    overflow: hidden;
}

.auth-stage--login-only {
    max-width: 440px;
    margin: 0 auto;
    background: transparent;
    border: none;
    grid-template-columns: 1fr;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.auth-stage--login-only .auth-stage-cell--login {
    border-radius: var(--radius-md);
}

.auth-stage-cell {
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
    background: var(--bg-card);
    border: 0;
    outline: 1px solid var(--border-subtle);
    outline-offset: -1px;
}

/*
  Desktop: 4 columns — tall side panels flank the login column (rows 1-2),
  the large rectangle sits under the sign-in card, and the billboard band
  holds an ad-standard height (~180px). The old top leaderboard row is gone —
  that space belongs to the services band in the header.
  Columns 2+3 together equal the old login column (360–480px).
*/
.auth-stage--with-ads {
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(180px, 240px)
        minmax(180px, 240px)
        minmax(180px, 1fr);
    grid-template-rows:
        minmax(460px, auto)
        auto
        clamp(140px, 18vh, 190px);
    grid-template-areas:
        "left login login right"
        "left rect  rect  right"
        "bot  bot   bot   bot";
}

.auth-stage--with-ads .auth-stage-region--left { grid-area: left; }
.auth-stage--with-ads .auth-stage-cell--login { grid-area: login; }
.auth-stage--with-ads .auth-stage-region--right { grid-area: right; }
.auth-stage--with-ads .auth-ad-unit[data-ad="5"] { grid-area: rect; }
.auth-stage--with-ads .auth-stage-region--bottom { grid-area: bot; }

/* Split regions: two half slots inside one grid area (1/2 and 3/4
   stack vertically beside the login card; 6/7 share the bottom band). */
.auth-stage-region {
    display: flex;
    min-width: 0;
    min-height: 0;
}

.auth-stage-region--left,
.auth-stage-region--right {
    flex-direction: column;
}

.auth-stage-region--bottom {
    flex-direction: row;
}

.auth-stage-region .auth-ad-unit {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    min-width: 0;
}

/* Large rectangle: ~600×250-class shape (12/5) spanning the full width
   under the sign-in card. The generic .auth-ad-unit height:100% would
   defeat aspect-ratio, so this cell uses intrinsic height instead. */
.auth-stage--with-ads .auth-ad-unit[data-ad="5"] {
    height: auto;
    aspect-ratio: 12 / 5;
    min-height: 150px;
}

/* LOGIN cell — keeps full grid footprint; inset + border frame the form so
   it reads smaller and stays clearly separated from the surrounding ads. */
.auth-stage-cell--login {
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: var(--bg-deep);
    outline: none;
    z-index: 4;
    /* Gutter between ads and the login card (does not shrink the grid cell) */
    padding: 12px;
    box-shadow: none;
    position: relative;
}

.auth-card--stage {
    width: 100%;
    max-width: none;
    /* Clear frame so the sign-in panel stands out from ad creatives */
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 1px rgba(109, 27, 33, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.12);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 32px;
    background: var(--bg-card);
    box-sizing: border-box;
}

/* Ad units — fill cell completely; fluid on all breakpoints */
.auth-ad-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 10px 8px;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 5px,
            rgba(109, 27, 33, 0.035) 5px,
            rgba(109, 27, 33, 0.035) 10px
        ),
        var(--bg-input);
    color: var(--text-muted);
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Services dropdown in the top nav */
.auth-nav-dropdown {
    position: relative;
}

.auth-nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    /* mirror .auth-nav-link */
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}

.auth-nav-dropdown-toggle:hover,
.auth-nav-dropdown-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.auth-nav-dropdown-toggle.is-active {
    color: var(--haa-primary-soft);
    background: rgba(255, 255, 255, 0.08);
}

.auth-nav-dropdown-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.auth-nav-dropdown.is-open .auth-nav-dropdown-toggle {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.auth-nav-dropdown-toggle svg {
    color: currentColor;
    stroke: currentColor;
    transition: transform var(--fast);
}

.auth-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: 8px;
    list-style: none;
    /* Light panel over content so long service lists stay highly readable */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
    z-index: 60;
}

[data-theme="dark"] .auth-nav-dropdown-menu {
    background: #2a2c30;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.auth-nav-dropdown.is-open .auth-nav-dropdown-menu,
.auth-nav-dropdown:hover .auth-nav-dropdown-menu,
.auth-nav-dropdown:focus-within .auth-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.auth-nav-dropdown.is-open .auth-nav-dropdown-toggle svg,
.auth-nav-dropdown:hover .auth-nav-dropdown-toggle svg {
    transform: rotate(180deg);
}

.auth-nav-dropdown-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 500;
    color: #3f4145;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    transition: background var(--fast), color var(--fast);
}

[data-theme="dark"] .auth-nav-dropdown-menu a {
    color: #f1f5f9;
}

.auth-nav-dropdown-menu a:hover,
.auth-nav-dropdown-menu a:focus-visible {
    background: var(--accent-soft);
    color: var(--accent);
}

.auth-nav-dropdown-menu a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.auth-nav-dropdown-all {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .auth-nav-dropdown-all {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.auth-nav-dropdown-all a {
    color: var(--accent);
    font-weight: 600;
}

/* Mobile drawer: services dropdown expands in-flow */
.auth-nav-dropdown--mobile {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-nav-dropdown--mobile .auth-nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.85rem 0;
    font-size: 1.1rem;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.85);
}

.auth-nav-dropdown--mobile .auth-nav-dropdown-toggle:hover,
.auth-nav-dropdown--mobile .auth-nav-dropdown-toggle.is-active {
    background: transparent;
    color: var(--haa-primary-soft);
}

.auth-nav-dropdown--mobile .auth-nav-dropdown-menu {
    position: static;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 0.75rem;
    min-width: 0;
    transition: max-height 0.25s var(--ease), opacity 0.2s, padding 0.2s;
}

.auth-nav-dropdown--mobile.is-open .auth-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    max-height: 480px;
    padding: 0 0 0.5rem 0.75rem;
}

.auth-nav-dropdown--mobile .auth-nav-dropdown-menu a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    padding: 0.55rem 0.25rem;
    text-transform: none;
    letter-spacing: 0;
}

.auth-nav-dropdown--mobile .auth-nav-dropdown-menu a:hover,
.auth-nav-dropdown--mobile .auth-nav-dropdown-menu a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--haa-primary-soft);
}

.auth-nav-dropdown--mobile .auth-nav-dropdown-all {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.auth-nav-dropdown--mobile .auth-nav-dropdown-all a {
    color: var(--haa-primary-soft);
    font-weight: 600;
}

/* Live platform stats — prominent mini-tiles dead-centre in the header.
   The services band becomes a 3-column grid (services | stats | services)
   so the stats sit in the true middle regardless of side content widths. */
@media (min-width: 1101px) {
    .auth-utility-bar:has(.auth-utility-stats) {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    /* Cap each services nav at its own grid track and let chips wrap —
       otherwise a wide nav (justify-self sizes to content) paints over the
       centre stats column. */
    .auth-utility-bar:has(.auth-utility-stats) .auth-utility-services--left,
    .auth-utility-bar:has(.auth-utility-stats) .auth-utility-services--right {
        max-width: 100%;
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .auth-utility-bar:has(.auth-utility-stats) .auth-utility-services--left {
        justify-self: start;
    }

    .auth-utility-bar:has(.auth-utility-stats) .auth-utility-services--right {
        justify-self: end;
        justify-content: flex-end;
    }
}

.auth-utility-stats {
    display: flex;
    align-items: stretch;
    justify-self: center;
}

.auth-utility-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 24px;
    white-space: nowrap;
}

.auth-utility-stat + .auth-utility-stat {
    border-left: 1px solid var(--border-subtle);
}

.auth-utility-stat strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.auth-utility-stat span {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

@media (max-width: 1100px) {
    .auth-utility-stats {
        display: none;
    }
}

/* Unsold slot: the whole placeholder links to /advertise */
.auth-ad-placeholder-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: background var(--fast);
}

.auth-ad-placeholder-link:hover,
.auth-ad-placeholder-link:focus-visible {
    background: var(--accent-soft);
}

.auth-ad-placeholder-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Sold slot: stacked creatives, one visible; rotated by seams-ads.js.
   Neutral fill sits behind the contained creative so any letterbox area
   (when the advert's aspect ratio differs from the slot) reads as an
   intentional frame rather than showing the placeholder stripes. */
.auth-ad-unit--live {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: var(--bg-card);
}

.auth-ad-creative {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.auth-ad-creative.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* contain (not cover): the whole advert always resizes to fit inside the
   slot — never cropped — regardless of viewport size or browser zoom. */
.auth-ad-creative img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.auth-ad-creative:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Open rotation seat: the advertise CTA cycles as one frame among the
   sold creatives while a rotating slot still has capacity. */
.auth-ad-creative--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 10px 8px;
    text-decoration: none;
    color: inherit;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 5px,
            rgba(109, 27, 33, 0.035) 5px,
            rgba(109, 27, 33, 0.035) 10px
        ),
        var(--bg-input);
}

.auth-ad-creative--placeholder:hover {
    background: var(--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
    .auth-ad-creative {
        transition: none;
    }
}

.auth-ad-unit-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-on-accent);
    background: var(--accent);
    opacity: 0.85;
}

/* The headline CTA line on every unsold/placeholder frame */
.auth-ad-unit-cta {
    font-family: var(--font-display);
    font-size: clamp(0.8125rem, 1.6vw, 1.0625rem);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1.2;
}

.auth-ad-unit-name {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
}

.auth-ad-unit-size {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
}

.auth-ad-unit-hint {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.auth-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--text-on-accent);
    background: var(--accent);
    text-decoration: none;
    transition: background var(--fast);
    white-space: nowrap;
}

.auth-promo-link:hover {
    background: var(--accent-hover);
    color: var(--text-on-accent);
}

.auth-promo-link--ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-input);
}

.auth-promo-link--ghost:hover {
    background: var(--ghost-btn-hover-bg);
    color: var(--text-primary);
    border-color: var(--border-input-hover);
}

/* Tablet: 2 columns, login full width first */
@media (max-width: 1024px) {
    .auth-stage--with-ads {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        grid-auto-rows: minmax(100px, auto);
        grid-template-areas:
            "login login"
            "left  right"
            "rect  rect"
            "bot   bot";
    }

    .auth-stage-cell--login {
        min-height: 420px;
    }

    .auth-stage-region--left .auth-ad-unit,
    .auth-stage-region--right .auth-ad-unit {
        min-height: 160px;
    }

    .auth-ad-unit[data-ad="5"] {
        height: auto;
        aspect-ratio: 12 / 5;
        min-height: 160px;
        max-height: 300px;
    }

    .auth-stage-region--bottom .auth-ad-unit {
        min-height: clamp(120px, 16vh, 180px);
    }
}

/* Phone: single column stack — login first, ads fill below */
@media (max-width: 640px) {
    .auth-main:has(.auth-stage) {
        padding: var(--header-h) 0 24px;
        gap: 8px;
    }

    .auth-utility-bar {
        padding: 8px 12px;
    }

    .auth-utility-services {
        width: 100%;
        justify-content: center;
    }

    .auth-stage--with-ads {
        grid-template-columns: 1fr;
        grid-template-areas:
            "login"
            "left"
            "right"
            "rect"
            "bot";
    }

    .auth-card--stage {
        padding: 28px 20px;
    }

    .auth-ad-unit {
        min-height: 88px;
    }

    .auth-ad-unit[data-ad="5"] {
        height: auto;
        aspect-ratio: 12 / 5;
        max-height: 220px;
    }

    /* Half-width billboards stack on phones */
    .auth-stage-region--bottom {
        flex-direction: column;
    }

    .auth-stage-region--bottom .auth-ad-unit {
        min-height: clamp(110px, 20vw, 160px);
    }
}


/* ==========================================================================
   AUTH CARD
   ========================================================================== */

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 48px 40px;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Top accent line */
.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    border-radius: 0 0 4px 4px;
}

.auth-card-logo {
    text-align: center;
    margin-bottom: 32px;
    animation: fadeUp 0.5s ease-out 0.1s both;
}

.auth-card-logo img {
    height: 72px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: 0.95;
}

/* Theme-paired brand logos: black-text logo on light, white-text + gold swoosh on dark.
   Real assets instead of a CSS invert so the gold swoosh survives dark mode. */
.auth-card-logo .auth-logo-dark {
    display: none;
}

[data-theme="dark"] .auth-card-logo .auth-logo-light {
    display: none;
}

[data-theme="dark"] .auth-card-logo .auth-logo-dark {
    display: inline-block;
}

.auth-card-title {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    text-align: center;
    color: var(--accent);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    animation: fadeUp 0.5s ease-out 0.2s both;
}

.auth-card-subtitle {
    font-size: 0.9375rem;
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 32px;
    animation: fadeUp 0.5s ease-out 0.25s both;
}


/* ==========================================================================
   ALERT MESSAGES
   ========================================================================== */

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    margin-bottom: 20px;
    border: 1px solid;
    line-height: 1.5;
}

.auth-alert svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.auth-alert--success {
    background: var(--success-bg);
    color: var(--success);
    border-color: rgba(22, 163, 74, 0.18);
}

.auth-alert--error {
    background: var(--error-bg);
    color: var(--error);
    border-color: rgba(220, 38, 38, 0.18);
}

.auth-alert--info {
    background: var(--info-bg);
    color: var(--info);
    border-color: rgba(37, 99, 235, 0.18);
}

/* Flash package compatibility */
.auth-card .alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    margin-bottom: 16px;
    border: 1px solid;
}

.auth-card .alert-success {
    background: var(--success-bg);
    color: var(--success);
    border-color: rgba(22, 163, 74, 0.18);
}

.auth-card .alert-danger {
    background: var(--error-bg);
    color: var(--error);
    border-color: rgba(220, 38, 38, 0.18);
}

.auth-card .alert-info {
    background: var(--info-bg);
    color: var(--info);
    border-color: rgba(37, 99, 235, 0.18);
}

.auth-card .alert-warning {
    background: var(--gold-soft);
    color: var(--gold);
    border-color: rgba(150, 121, 47, 0.18);
}


/* ==========================================================================
   FORM
   ========================================================================== */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fadeUp 0.5s ease-out 0.3s both;
}

.auth-form-group label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    transition: color var(--fast);
}

.auth-input-wrap input {
    width: 100%;
    padding: 13px 14px 13px 44px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    outline: none;
    transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
    box-shadow: var(--shadow-input);
}

.auth-input-wrap input::placeholder {
    color: var(--text-muted);
}

.auth-input-wrap input:hover {
    border-color: var(--border-input-hover);
}

.auth-input-wrap input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-input);
    background: var(--input-focus-bg);
}

/* Icon highlight on focus */
.auth-input-wrap:has(input:focus) .auth-input-icon {
    color: var(--accent-hover);
}

.auth-form-group.has-error .auth-input-wrap input {
    border-color: var(--error);
    box-shadow: 0 0 0 3px var(--error-bg);
}

.auth-field-error {
    display: block;
    font-size: 0.8125rem;
    color: var(--error);
    margin-top: 6px;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all var(--fast);
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.auth-btn--primary {
    width: 100%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: var(--text-on-accent);
    box-shadow: var(--shadow-btn);
}

.auth-btn--primary:hover {
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-bright) 100%);
}

.auth-btn--primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-btn);
}

.auth-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-input);
    width: 100%;
}

.auth-btn--ghost:hover {
    color: var(--text-primary);
    border-color: var(--border-input-hover);
    background: var(--ghost-btn-hover-bg);
}

.auth-btn--outline-light {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--outline-btn-border);
    padding: 10px 28px;
    font-size: 0.875rem;
}

.auth-btn--outline-light:hover {
    color: var(--text-primary);
    border-color: var(--outline-btn-hover-border);
    background: var(--outline-btn-hover-bg);
}


/* ==========================================================================
   CARD LINKS (Forgot Password / Signup)
   ========================================================================== */

.auth-card-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
    animation: fadeUp 0.5s ease-out 0.4s both;
}

.auth-card-links a {
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: color var(--fast);
}

.auth-card-links a:hover {
    color: var(--accent-hover);
}

.auth-card-links-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}


/* ==========================================================================
   ALREADY LOGGED IN
   ========================================================================== */

.auth-already-logged {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}




/* ==========================================================================
   FOOTER
   ========================================================================== */

.auth-footer {
    position: relative;
    z-index: 1;
    padding: 2rem 1.25rem 1.5rem;
    background: var(--footer-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

.auth-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    text-align: center;
}

.auth-footer-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 16px;
}

.auth-footer-phone {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.9);
}

.auth-social-links {
    display: flex;
    gap: 8px;
}

.auth-social-link {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    transition: all var(--fast);
}

.auth-social-link:hover {
    color: #fff;
    background: rgba(127, 32, 39, 0.35);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.auth-footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-bottom: 16px;
}

.auth-footer-links a {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--fast);
}

.auth-footer-links a:hover {
    color: var(--haa-primary-soft);
}

.auth-footer-copy {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
}

.auth-footer-copy a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--fast);
}

.auth-footer-copy a:hover {
    color: var(--haa-primary-soft);
}


/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .auth-main {
        padding: calc(var(--header-h) + 16px) 16px 40px;
    }

    .auth-card {
        padding: 36px 24px;
        border-radius: var(--radius-lg);
    }
}

@media (max-width: 480px) {
    .auth-card {
        padding: 32px 20px;
    }

    .auth-card-title {
        font-size: 1.375rem;
    }

    .auth-footer-links {
        flex-direction: column;
        gap: 8px;
    }

    .auth-card-links {
        flex-direction: column;
        gap: 10px;
    }

    .auth-card-links-divider {
        display: none;
    }
}