/* Modern Auth Page Styles - Warm Neutral Logistics Theme */

:root {
    /* Warm Neutral Palette from Cozy Neutral Retreat */
    --auth-primary: #57534e;
    --auth-primary-dark: #44403c;
    --auth-primary-light: #78716c;
    --auth-gradient-start: #78716c;
    --auth-gradient-end: #a8a29e;
    --auth-text-dark: #0c0a09;
    --auth-text-muted: #78716c;
    --auth-bg-light: #fafaf9;
    --auth-white: #ffffff;
    --auth-border: #e7e5e4;
    --auth-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    --auth-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);

    /* Logistics accent colors - muted tones */
    --auth-accent-orange: #c2410c;
    --auth-accent-green: #15803d;
    --auth-accent-beige: #f5f5f4;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    height: 100vh;
    background: var(--auth-bg-light);
}

/* Main Container - Split Screen */
.auth-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* Left Side - Form */
.auth-left {
    flex: 0 0 45%;
    background: var(--auth-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.auth-form-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 0 1rem;
}

/* Logo Section */
.auth-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.logo-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--auth-gradient-start), var(--auth-gradient-end));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(87, 83, 78, 0.3);
}

.logo-text {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--auth-text-dark);
    margin: 0;
    letter-spacing: -0.5px;
}

.logo-text .text-primary {
    color: var(--auth-primary);
}

/* Header Section */
.auth-header {
    margin-bottom: 2rem;
}

.auth-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--auth-text-dark);
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.auth-subtitle {
    font-size: 1rem;
    color: var(--auth-text-muted);
    margin: 0;
}

/* Form Styles */
.auth-form {
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--auth-text-dark);
    margin-bottom: 0.5rem;
}

.modern-input {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    border: 1.5px solid var(--auth-border);
    border-radius: 10px;
    background: var(--auth-white);
    color: var(--auth-text-dark);
    transition: all 0.2s ease;
    font-family: inherit;
}

.modern-input:focus {
    outline: none;
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 3px rgba(91, 108, 242, 0.1);
    background: var(--auth-white);
}

.modern-input::placeholder {
    color: #94a3b8;
}

/* Button Styles */
.btn-modern {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: var(--auth-primary);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(87, 83, 78, 0.3);
    margin-top: 0.5rem;
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(87, 83, 78, 0.4);
    background: var(--auth-primary-dark);
}

.btn-modern:active {
    transform: translateY(0);
}

/* Forgot Password Link */
.forgot-password {
    color: var(--auth-primary);
    font-size: 0.875rem;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.forgot-password:hover {
    color: var(--auth-primary-dark);
    text-decoration: underline;
}

/* Footer */
.auth-footer {
    margin-top: 2rem;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────
   Login page — 4 rotating illustration variants
   The variant theme bleeds across BOTH halves so the page feels unified.
   .auth-left gets a faint variant-themed SVG background overlay (circuit
   + globe / mesh / etc) and the form lifts into a frosted card so it
   stays readable against the pattern.
   ───────────────────────────────────────────────────────────────────── */

/* ── Container-level variant tinting on the form side ── */
.auth-container.variant-tech      .auth-left,
.auth-container.variant-dashboard .auth-left {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(207,250,254,0.40) 0%, transparent 65%),
        linear-gradient(135deg, #f6fefb 0%, #e7f7f1 100%);
}
.auth-container.variant-globe .auth-left {
    background:
        radial-gradient(ellipse at 40% 50%, rgba(167,243,235,0.30) 0%, transparent 60%),
        linear-gradient(135deg, #f3fcfa 0%, #d8f0ea 100%);
}
.auth-container.variant-hex .auth-left {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(254,243,199,0.32) 0%, transparent 65%),
        linear-gradient(135deg, #fdf9f0 0%, #f4ece0 100%);
}
.auth-container.variant-constellation .auth-left {
    background:
        radial-gradient(ellipse at 60% 30%, rgba(191,219,254,0.45) 0%, transparent 65%),
        linear-gradient(135deg, #f5f9ff 0%, #dce8fa 100%);
}

/* The SVG overlay rendering the circuit / globe / mesh on the form side */
.auth-left-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ── Per-variant form-side animations ──
   Each variant has DIFFERENT elements on the form side from its right pane,
   with its own subtle motion: tech rings tilt-spin, dashboard city lights
   twinkle, globe hubs pulse, hex globe rotates. */

/* TECH: topographic rings drift slowly, chevrons twinkle */
.l-tech-rings { transform-origin: 400px 500px; animation: techRingDrift 90s linear infinite; }
@keyframes techRingDrift {
    from { transform: translate(400px, 500px) rotate(0deg); }
    to   { transform: translate(400px, 500px) rotate(360deg); }
}
.l-tech-chevrons polygon {
    animation: chevronPulse 3s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}
.l-tech-chevrons polygon:nth-of-type(2n) { animation-delay: 0.6s; }
.l-tech-chevrons polygon:nth-of-type(3n) { animation-delay: 1.2s; }
@keyframes chevronPulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1;    transform: scale(1.25); }
}

/* DASHBOARD: distant city lights twinkle on the horizon */
.l-dash-lights circle {
    animation: cityLightTwinkle 3.5s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}
.l-dash-lights circle:nth-of-type(2n) { animation-delay: 0.5s; animation-duration: 4.2s; }
.l-dash-lights circle:nth-of-type(3n) { animation-delay: 1.0s; animation-duration: 2.8s; }
.l-dash-lights circle:nth-of-type(5n) { animation-delay: 1.6s; }
@keyframes cityLightTwinkle {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.5); }
}

/* GLOBE: dashed flight-paths flow between hubs; hub rings pulse outward */
.l-globe-routes path {
    animation: flightPathFlow 4s infinite linear;
}
.l-globe-routes path:nth-of-type(2) { animation-duration: 5.5s; animation-direction: reverse; }
.l-globe-routes path:nth-of-type(3) { animation-duration: 6.5s; }
.l-globe-routes path:nth-of-type(4) { animation-duration: 5s;   animation-direction: reverse; }
.l-globe-routes path:nth-of-type(5) { animation-duration: 7s; }
@keyframes flightPathFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -48; }
}
.l-globe-hubs circle {
    animation: hubRingPulse 2.6s infinite ease-out;
    transform-origin: center;
    transform-box: fill-box;
}
.l-globe-hubs circle:nth-of-type(2n) { animation-delay: 0.5s; }
.l-globe-hubs circle:nth-of-type(3n) { animation-delay: 1.0s; }
.l-globe-hubs circle:nth-of-type(4n) { animation-delay: 1.5s; }
@keyframes hubRingPulse {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0;   transform: scale(2.2); }
}

/* HEX: abstract logistics + AI scene on the form side */
.l-hex-globe { transform-origin: 380px 540px; animation: hexGlobeSpin 80s linear infinite; }
@keyframes hexGlobeSpin {
    from { transform: translate(380px, 540px) rotate(0deg); }
    to   { transform: translate(380px, 540px) rotate(360deg); }
}
/* Neural-network nodes breathe with a soft warm pulse */
.l-hex-nodes circle {
    animation: hexNodePulse 3.6s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}
.l-hex-nodes circle:nth-of-type(2n) { animation-delay: 0.4s; }
.l-hex-nodes circle:nth-of-type(3n) { animation-delay: 0.9s; animation-duration: 4.4s; }
.l-hex-nodes circle:nth-of-type(5n) { animation-delay: 1.4s; animation-duration: 3.0s; }
@keyframes hexNodePulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.35); }
}
/* Data-packet dashes flow along the shipping routes */
.l-hex-packets path {
    animation: hexPacketFlow 6s infinite linear;
}
.l-hex-packets path:nth-of-type(2) { animation-duration: 7.5s; animation-direction: reverse; }
.l-hex-packets path:nth-of-type(3) { animation-duration: 5.5s; }
@keyframes hexPacketFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -120; }
}

/* Left-side sparkles use the same twinkle keyframes as the right side */
.left-sparks circle {
    animation: sparkTwinkle 4s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}
.left-sparks circle:nth-of-type(2n) { animation-delay: 0.7s; animation-duration: 5s; }
.left-sparks circle:nth-of-type(3n) { animation-delay: 1.3s; animation-duration: 3.5s; }
.left-sparks circle:nth-of-type(5n) { animation-delay: 2.1s; animation-duration: 4.5s; }

/* Seamless form — no card boundary. The form floats directly on the
   variant-tinted left half; only the inputs and the login button have
   their own visual outline. Previously a frosted glass card sat behind
   the form (rgba bg + backdrop blur + border + box-shadow); removed so
   the page feels integrated instead of rectangle-on-rectangle. */
.auth-form-wrapper {
    position: relative;
    z-index: 2;
    padding: 2rem 2.25rem !important;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Inputs lighten a touch and lose their hard solid background — they
   sit on the variant gradient rather than punching a flat white card. */
.auth-form-wrapper .modern-input {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(231, 229, 228, 0.85);
}
.auth-container.variant-hex .auth-form-wrapper .modern-input {
    background: rgba(255, 248, 240, 0.72);
    border: 1px solid rgba(252, 165, 165, 0.30);
}

.auth-right { flex: 1; position: relative; overflow: hidden; }

/* Variant backgrounds */
.auth-right.variant-tech {
    background:
        radial-gradient(ellipse 90% 70% at 50% 60%, rgba(63,189,167,0.20) 0%, transparent 60%),
        radial-gradient(circle at 88% 8%,           rgba(167,139,250,0.18) 0%, transparent 35%),
        radial-gradient(circle at 8% 92%,           rgba(207,250,254,0.14) 0%, transparent 40%),
        linear-gradient(135deg, #0a3a35 0%, #155e54 45%, #38a299 100%);
}
.auth-right.variant-dashboard {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(63,189,167,0.18) 0%, transparent 65%),
        linear-gradient(135deg, #07302d 0%, #103c39 50%, #275452 100%);
}
.auth-right.variant-globe {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(63,189,167,0.16) 0%, transparent 60%),
        linear-gradient(135deg, #0d3e3a 0%, #155e54 50%, #2d8b7c 100%);
}
.auth-right.variant-hex {
    /* Flatter charcoal — no corner vignette — so the chip + hex pattern reads
       edge-to-edge instead of fading into a dark frame. The pane-level glow
       is wide and low-intensity so it blends seamlessly with the SVG h-glow
       layered on top instead of stacking into a visible hotspot. */
    background:
        radial-gradient(ellipse 140% 120% at 50% 55%, rgba(252,165,165,0.14) 0%, rgba(252,165,165,0.04) 55%, transparent 85%),
        #1f1c1b;
}
.auth-right.variant-constellation {
    /* Deep night sky: midnight blue with a soft galactic-core glow drifting
       toward the upper-right. SVG nebula gradient layers on top inside the
       pane SVG; this CSS background is the canvas that everything sits on. */
    background:
        radial-gradient(ellipse 130% 100% at 65% 35%, rgba(96,165,250,0.18) 0%, rgba(59,130,246,0.06) 50%, transparent 80%),
        linear-gradient(160deg, #060d1f 0%, #0c1a3a 45%, #1e3a8a 100%);
}

.illustration-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.illustration-content {
    /* Fill the full right pane — no width cap. Previously max-width: 720px
       created a visible rectangular boundary because the chip-pattern SVG
       (which lives inside this container) was capped, leaving the dark CSS
       backdrop visible as a "frame" around the centred composition. */
    position: relative;
    width: 100%;
    height: 100%;
}

/* Small star sparkle marker in the bottom-right (all variants) */
.auth-star {
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    width: 28px;
    height: 28px;
    background: radial-gradient(circle, #ffffff 0%, #a5f3eb 60%, transparent 80%);
    border-radius: 50%;
    opacity: 0.65;
    animation: sparkTwinkle 3s infinite ease-in-out;
    z-index: 5;
}

/* Background SVG (all variants) */
.ops-hub-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.hub-lines line {
    animation: lineFlow 6s infinite linear;
    filter: drop-shadow(0 0 4px rgba(165, 243, 235, 0.45));
}
@keyframes lineFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -27; }
}

/* Sparkle particles — per-circle staggered phase via nth-of-type */
.hub-sparks circle {
    animation: sparkTwinkle 3.5s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}
.hub-sparks circle:nth-of-type(2n) { animation-delay: 0.6s; animation-duration: 4s; }
.hub-sparks circle:nth-of-type(3n) { animation-delay: 1.4s; animation-duration: 3s; }
.hub-sparks circle:nth-of-type(5n) { animation-delay: 2.0s; animation-duration: 4.5s; }
.hub-sparks circle:nth-of-type(7n) { animation-delay: 0.3s; animation-duration: 5s; }
@keyframes sparkTwinkle {
    0%, 100% { opacity: 0.30; transform: scale(0.85); }
    50%       { opacity: 1.00; transform: scale(1.10); }
}

/* ─── HUD satellite (shared base) ─────────────────────────────────── */
.hub-sat {
    position: absolute;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.45rem;
    animation: satFloat 14s infinite ease-in-out;
    z-index: 3;
}
.hub-sat i {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 70%),
        rgba(10, 58, 53, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(165, 243, 235, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.25),
        inset 0 0 12px rgba(165, 243, 235, 0.18);
    filter: drop-shadow(0 0 6px rgba(165, 243, 235, 0.35));
}
.hub-sat .sat-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.4px solid rgba(165, 243, 235, 0.75);
    box-shadow:
        0 0 18px rgba(63, 189, 167, 0.55),
        inset 0 0 10px rgba(165, 243, 235, 0.20);
    animation: ringPulse 3s infinite ease-in-out;
}
@keyframes ringPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%       { opacity: 1.0; transform: scale(1.04); }
}
@keyframes satFloat {
    0%, 100% { transform: translateY(0)     scale(1); }
    50%       { transform: translateY(-12px) scale(1.06); }
}
@keyframes satFloatX {
    0%, 100% { transform: translateX(-50%) translateY(0)    scale(1); }
    50%       { transform: translateX(-50%) translateY(-12px) scale(1.06); }
}
@keyframes satFloatY {
    0%, 100% { transform: translateY(-50%)             scale(1); }
    50%       { transform: translateY(calc(-50% - 12px)) scale(1.06); }
}

/* ─── VARIANT 1: TECH-HUD — central chip + 9 satellites in 3×3+1 ─── */
.hub-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 132px; height: 132px;
    transform: translate(-50%, -50%);
    z-index: 4;
}
.hub-chip {
    position: absolute; inset: 0;
    /* Was a rounded rectangle (28px); now a true orb so the right pane
       doesn't have any rectangle-shaped containers inside its graphic. */
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(180,255,235,0.55) 0%, rgba(63,189,167,0.25) 60%),
        radial-gradient(circle at 70% 70%, rgba(45,139,124,0.95) 0%, rgba(45,139,124,0.40) 80%);
    border: 1.5px solid rgba(165, 243, 235, 0.85);
    display: flex; align-items: center; justify-content: center;
    color: #ffffff;
    font-size: 2.8rem;
    box-shadow:
        0 0 36px rgba(63, 189, 167, 0.70),
        0 0 80px rgba(63, 189, 167, 0.35),
        inset 0 0 24px rgba(255, 255, 255, 0.30);
    animation: chipBreathe 3.5s infinite ease-in-out;
}
.hub-chip i { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }

@keyframes chipBreathe {
    0%, 100% {
        box-shadow: 0 0 36px rgba(63,189,167,0.70), 0 0 80px rgba(63,189,167,0.35), inset 0 0 24px rgba(255,255,255,0.30);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 52px rgba(63,189,167,0.95), 0 0 110px rgba(63,189,167,0.50), inset 0 0 32px rgba(255,255,255,0.40);
        transform: scale(1.04);
    }
}

.hub-pulse {
    position: absolute;
    left: 50%; top: 50%;
    width: 132px; height: 132px;
    border-radius: 50%;
    border: 1.5px solid rgba(165, 243, 235, 0.75);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: hubPulse 4s infinite ease-out;
}
.pulse-a { animation-delay: 0s; }
.pulse-b { animation-delay: 1.33s; }
.pulse-c { animation-delay: 2.66s; }
@keyframes hubPulse {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.0; }
    15%  {                                                opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(3.0); opacity: 0.0; }
}

/* Tech satellite positions (3×3 + 1 satellite) */
.pos-top-left   { top:  9%; left:  9%;  animation-delay: 0s; }
.pos-top-mid    { top:  4%; left: 50%;  transform: translateX(-50%); animation-delay: 1.4s; animation-name: satFloatX; }
.pos-top-right  { top:  9%; right: 9%;  animation-delay: 2.8s; }
.pos-mid-left   { top: 50%; left:  4%;  transform: translateY(-50%); animation-delay: 4.2s; animation-name: satFloatY; }
.pos-mid-right  { top: 50%; right: 4%;  transform: translateY(-50%); animation-delay: 5.6s; animation-name: satFloatY; }
.pos-bot-left   { bottom: 9%; left:  9%;  animation-delay: 7s; }
.pos-bot-mid    { bottom: 4%; left: 50%;  transform: translateX(-50%); animation-delay: 8.4s; animation-name: satFloatX; }
.pos-bot-right  { bottom: 9%; right: 9%;  animation-delay: 9.8s; }
.pos-satellite  { top: 28%; right: 18%; animation-delay: 11.2s; }

/* ─── VARIANT 2: DASHBOARD — central glass tablet + 6 satellites ─── */
.dash-tablet {
    /* The tablet "container" is gone. .dash-tablet is now just a positioning
       wrapper that holds the bar chart in the middle of the right pane. No
       background, no border, no border-radius — the chart floats directly on
       the variant gradient. A soft radial glow halo (via box-shadow) sits
       behind it so the chart still has presence without a card boundary. */
    position: absolute;
    left: 50%; top: 50%;
    width: 360px; height: 360px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse 55% 45% at 50% 55%, rgba(63,189,167,0.22) 0%, transparent 70%);
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
    display: flex; align-items: flex-end; justify-content: center;
    animation: none;
    z-index: 4;
}
.dash-header { display: none; }
.dash-chart {
    width: 70%; height: 70%;
    display: flex; align-items: flex-end; justify-content: space-around;
    gap: 0.7rem;
}
.dash-chart .bar {
    flex: 1;
    /* Slightly larger glow + softer top edge so bars feel like floating
       energy bars rather than rectangles inside a container. */
    border-radius: 8px 8px 4px 4px;
    box-shadow: 0 0 18px rgba(165,243,235,0.75), 0 0 40px rgba(63,189,167,0.35);
}
.dash-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 0.55rem;
}
.dash-chart .bar {
    flex: 1;
    background: linear-gradient(180deg, #a5f3eb 0%, #2D8B7C 100%);
    border-radius: 6px 6px 0 0;
    box-shadow: 0 0 12px rgba(165,243,235,0.55);
    animation: chartGrow 3s infinite ease-in-out;
}
.dash-chart .bar:nth-child(2) { animation-delay: 0.4s; }
.dash-chart .bar:nth-child(3) { animation-delay: 0.8s; }
.dash-chart .bar:nth-child(4) { animation-delay: 1.2s; }
.dash-chart .bar:nth-child(5) { animation-delay: 1.6s; }
@keyframes chartGrow {
    0%, 100% { transform: scaleY(0.96); opacity: 0.9; }
    50%       { transform: scaleY(1.06); opacity: 1.0; }
}

/* Dashboard satellite positions (6 around the tablet) */
.pos-tl-2 { top: 10%; left: 12%; animation-delay: 0s; }
.pos-tr-2 { top: 10%; right: 12%; animation-delay: 1.4s; }
.pos-ml-2 { top: 50%; left:  3%; transform: translateY(-50%); animation-delay: 2.8s; animation-name: satFloatY; }
.pos-mr-2 { top: 50%; right: 3%; transform: translateY(-50%); animation-delay: 4.2s; animation-name: satFloatY; }
.pos-bl-2 { bottom: 10%; left: 12%; animation-delay: 5.6s; }
.pos-br-2 { bottom: 10%; right: 12%; animation-delay: 7s; }

/* ─── VARIANT 3: GLOBE — translucent sphere + orbiting icons ─── */
/* Globe is drawn entirely in SVG; we just need satellite positions
   around its circumference (radius ~280px from center). */
.variant-globe .hub-sat .sat-ring { display: none; }       /* globe variant: cleaner look, no ring */
.variant-globe .hub-sat i {
    border: 1px solid rgba(165,243,235,0.55);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.25),
        inset 0 0 14px rgba(165, 243, 235, 0.20);
}
.pos-tl-3 { top: 12%; left: 14%; animation-delay: 0s; }
.pos-tr-3 { top: 14%; right: 14%; animation-delay: 1.4s; }
.pos-ml-3 { top: 38%; left:  4%; animation-delay: 2.8s; }
.pos-mr-3 { top: 38%; right: 4%; animation-delay: 4.2s; }
.pos-bl-3 { top: 65%; left: 12%; animation-delay: 5.6s; }
.pos-bm-3 { bottom: 8%; left: 42%; animation-delay: 7s; }
.pos-br-3 { bottom: 18%; right: 16%; animation-delay: 8.4s; }

/* ─── VARIANT 4: HEX-WARM — hexagonal bar chart + coral satellites ─── */
.variant-hex .hub-sat i {
    background:
        radial-gradient(circle at 30% 30%, rgba(254,226,226,0.20) 0%, rgba(124,45,18,0.10) 70%),
        rgba(40, 20, 18, 0.55);
    border: 1px solid rgba(252, 165, 165, 0.55);
    color: rgba(252, 165, 165, 0.95);
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.40),
        inset 0 0 12px rgba(252, 165, 165, 0.18);
    filter: drop-shadow(0 0 6px rgba(252, 165, 165, 0.40));
}
.variant-hex .hub-sat .sat-ring {
    border-color: rgba(252, 165, 165, 0.70);
    box-shadow:
        0 0 18px rgba(252, 165, 165, 0.50),
        inset 0 0 10px rgba(252, 165, 165, 0.20);
}
/* Hexagonal satellite positions (5 around the central hex) */
.pos-h-tl { top: 6%;  left: 22%; animation-delay: 0s; }
.pos-h-tr { top: 6%;  right: 8%; animation-delay: 1.4s; }
.pos-h-ml { top: 38%; left: 4%;  animation-delay: 2.8s; }
.pos-h-mr { top: 38%; right: 4%; animation-delay: 4.0s; }
.pos-h-bl { bottom: 8%; left: 22%; animation-delay: 5.2s; }
.pos-h-br { bottom: 8%; right: 8%; animation-delay: 6.6s; }

/* ─── Extra animations: more movement per variant ─── */

/* Globe variant: slowly rotate the lat/long ellipses (right pane) */
.variant-globe .ops-hub-svg g[stroke-opacity="0.30"] {
    transform-origin: 400px 400px;
    animation: globeSpin 50s linear infinite;
}

/* Hex variant: pulse the 3 nested hexagonal frames + breathe the chart */
.variant-hex .ops-hub-svg polygon {
    transform-origin: 400px 400px;
    animation: hexFramePulse 6s infinite ease-in-out;
}
.variant-hex .ops-hub-svg polygon:nth-of-type(2) { animation-delay: 0.8s; }
.variant-hex .ops-hub-svg polygon:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes hexFramePulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50%       { opacity: 1.00; transform: scale(1.025); }
}

.variant-hex .ops-hub-svg g[transform^="translate(290"] rect {
    transform-origin: bottom;
    animation: chartGrow 3s infinite ease-in-out;
}
.variant-hex .ops-hub-svg g[transform^="translate(290"] rect:nth-of-type(2) { animation-delay: 0.5s; }
.variant-hex .ops-hub-svg g[transform^="translate(290"] rect:nth-of-type(3) { animation-delay: 1.0s; }
.variant-hex .ops-hub-svg g[transform^="translate(290"] rect:nth-of-type(4) { animation-delay: 1.5s; }
.variant-hex .ops-hub-svg g[transform^="translate(290"] rect:nth-of-type(5) { animation-delay: 2.0s; }
.variant-hex .ops-hub-svg g[transform^="translate(290"] rect:nth-of-type(6) { animation-delay: 2.5s; }

/* Globe variant: the SVG bar chart animates with chartGrow too */
.variant-globe .ops-hub-svg g[transform^="translate(310"] rect {
    transform-origin: bottom;
    animation: chartGrow 3s infinite ease-in-out;
}
.variant-globe .ops-hub-svg g[transform^="translate(310"] rect:nth-of-type(2) { animation-delay: 0.4s; }
.variant-globe .ops-hub-svg g[transform^="translate(310"] rect:nth-of-type(3) { animation-delay: 0.8s; }
.variant-globe .ops-hub-svg g[transform^="translate(310"] rect:nth-of-type(4) { animation-delay: 1.2s; }
.variant-globe .ops-hub-svg g[transform^="translate(310"] rect:nth-of-type(5) { animation-delay: 1.6s; }

/* Alert Styles */
.alert {
    border-radius: 10px;
    border: none;
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
}

.alert-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.alert-success {
    background-color: #d1fae5;
    color: #065f46;
}

.alert-info {
    background-color: #dbeafe;
    color: #1e40af;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .auth-left {
        flex: 0 0 50%;
    }
}

@media (max-width: 768px) {
    .auth-container {
        flex-direction: column;
    }

    .auth-left {
        flex: 1;
        min-height: 100vh;
    }

    .auth-right {
        display: none;
    }

    .auth-form-wrapper {
        max-width: 100%;
        padding: 1rem;
    }

    .auth-title {
        font-size: 1.75rem;
    }

    body {
        overflow: auto;
    }
}

@media (max-width: 480px) {
    .auth-logo {
        margin-bottom: 2rem;
    }

    .logo-circle {
        width: 42px;
        height: 42px;
        font-size: 1.25rem;
    }

    .logo-text {
        font-size: 1.5rem;
    }

    .auth-title {
        font-size: 1.5rem;
    }

    .auth-subtitle {
        font-size: 0.9375rem;
    }
}

/* Loading State */
.btn-modern:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Focus Visible for Accessibility */
*:focus-visible {
    outline: 2px solid var(--auth-primary);
    outline-offset: 2px;
}

/* ─── VARIANT 5: CONSTELLATION — icons as stars in a connected star chart ─── */
/* Each .const-icon is positioned absolutely at the same percent the matching
   <circle class="const-anchors"> sits at in the 800×800 SVG, so the constellation
   lines drawn in the SVG meet the icon orb centres exactly. */
.const-icon {
    position: absolute;
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.25rem;
    /* Translucent ice-blue orb glow + outer halo so the icon reads as a
       luminous star rather than a tile. */
    background:
        radial-gradient(circle at 30% 30%, rgba(219,234,254,0.45) 0%, rgba(59,130,246,0.18) 60%),
        rgba(30, 58, 138, 0.55);
    border: 1px solid rgba(147, 197, 253, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 0 18px rgba(147, 197, 253, 0.55),
        0 0 42px rgba(96, 165, 250, 0.30),
        inset 0 0 14px rgba(219, 234, 254, 0.18);
    filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.45));
    transform: translate(-50%, -50%);  /* center the orb on its anchor coord */
    /* Two simultaneous animations: a gentle vertical float (positional) and
       a breathing glow on box-shadow + inner light (luminosity). */
    animation:
        constIconFloat   14s infinite ease-in-out,
        constIconBreathe  4s infinite ease-in-out;
    z-index: 3;
}
.const-icon i {
    filter: drop-shadow(0 0 4px rgba(219, 234, 254, 0.6));
}

/* Sonar ping ring — expands outward from each orb periodically and fades.
   Sized as ::after pseudo so it doesn't disturb the icon transforms. */
.const-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(147, 197, 253, 0.75);
    pointer-events: none;
    opacity: 0;
    animation: constIconPing 4s infinite ease-out;
}
.pos-c-2::after, .pos-c-5::after, .pos-c-8::after { animation-delay: 1.3s; }
.pos-c-3::after, .pos-c-6::after                  { animation-delay: 2.6s; }
.pos-c-4::after, .pos-c-7::after                  { animation-delay: 0.7s; }

@keyframes constIconBreathe {
    0%, 100% {
        box-shadow:
            0 0 18px rgba(147, 197, 253, 0.55),
            0 0 42px rgba(96, 165, 250, 0.30),
            inset 0 0 14px rgba(219, 234, 254, 0.18);
    }
    50% {
        box-shadow:
            0 0 28px rgba(147, 197, 253, 0.85),
            0 0 70px rgba(96, 165, 250, 0.55),
            inset 0 0 22px rgba(219, 234, 254, 0.32);
    }
}

@keyframes constIconPing {
    0%   { opacity: 0.8; transform: scale(0.85); }
    70%  { opacity: 0;   transform: scale(1.7); }
    100% { opacity: 0;   transform: scale(1.7); }
}

/* Signal pulses travelling along each constellation line. Each <line> in
   .const-pulses has stroke-dasharray "6 220" (6-unit bright segment + 220-
   unit gap). Animating stroke-dashoffset slides the bright segment along
   the line endpoint-to-endpoint, giving "data flowing between stars".
   Stagger delays + durations so the 10 lines never pulse in unison. */
.const-pulses line {
    filter: drop-shadow(0 0 5px rgba(219, 234, 254, 0.9));
    animation: constPulseFlow 4.5s infinite linear;
}
.const-pulses line:nth-of-type(1)  { animation-delay: 0.0s; animation-duration: 4.5s; }
.const-pulses line:nth-of-type(2)  { animation-delay: 0.6s; animation-duration: 5.2s; }
.const-pulses line:nth-of-type(3)  { animation-delay: 1.2s; animation-duration: 4.8s; }
.const-pulses line:nth-of-type(4)  { animation-delay: 1.8s; animation-duration: 5.5s; }
.const-pulses line:nth-of-type(5)  { animation-delay: 0.4s; animation-duration: 6.0s; }
.const-pulses line:nth-of-type(6)  { animation-delay: 2.4s; animation-duration: 5.0s; }
.const-pulses line:nth-of-type(7)  { animation-delay: 1.0s; animation-duration: 5.8s; }
.const-pulses line:nth-of-type(8)  { animation-delay: 3.0s; animation-duration: 5.2s; }
.const-pulses line:nth-of-type(9)  { animation-delay: 2.0s; animation-duration: 6.2s; }
.const-pulses line:nth-of-type(10) { animation-delay: 0.8s; animation-duration: 4.6s; }
@keyframes constPulseFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -226; }
}

/* Position each icon at the same 0–800 coord as its matching .const-anchors
   circle in the SVG, converted to percent (coord/800 * 100). */
.pos-c-1 { left: 20%;   top: 22.5%;          /*  160,180 */                  animation-delay: 0s;   }
.pos-c-2 { left: 40%;   top: 33.75%;         /*  320,270 */                  animation-delay: 1.2s; }
.pos-c-3 { left: 62.5%; top: 22.5%;          /*  500,180 */                  animation-delay: 2.4s; }
.pos-c-4 { left: 82.5%; top: 35%;            /*  660,280 */                  animation-delay: 3.6s; }
.pos-c-5 { left: 35%;   top: 55%;            /*  280,440 */                  animation-delay: 4.8s; }
.pos-c-6 { left: 57.5%; top: 62.5%;          /*  460,500 */                  animation-delay: 6.0s; }
.pos-c-7 { left: 22.5%; top: 80%;            /*  180,640 */                  animation-delay: 7.2s; }
.pos-c-8 { left: 47.5%; top: 87.5%;          /*  380,700 */                  animation-delay: 8.4s; }

@keyframes constIconFloat {
    0%, 100% { transform: translate(-50%, -50%)             scale(1);    }
    50%       { transform: translate(-50%, calc(-50% - 8px)) scale(1.04); }
}

/* Star twinkles in the SVG background */
.const-twinkle circle {
    animation: sparkTwinkle 4s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}
.const-twinkle circle:nth-of-type(2n) { animation-delay: 0.7s; animation-duration: 5s; }
.const-twinkle circle:nth-of-type(3n) { animation-delay: 1.3s; animation-duration: 3.5s; }
.const-twinkle circle:nth-of-type(5n) { animation-delay: 2.1s; animation-duration: 4.5s; }

.const-bg-stars circle {
    animation: starPulse 6s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}
.const-bg-stars circle:nth-of-type(3n) { animation-delay: 1.5s; animation-duration: 7s; }
.const-bg-stars circle:nth-of-type(5n) { animation-delay: 2.8s; animation-duration: 5.5s; }
.const-bg-stars circle:nth-of-type(7n) { animation-delay: 0.5s; animation-duration: 8s; }
@keyframes starPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1.0; }
}

/* Anchor stars (the bright cores under the icons) also breathe slowly */
.const-anchors circle {
    animation: starPulse 4s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}
.const-anchors circle:nth-of-type(2n) { animation-delay: 0.8s; }
.const-anchors circle:nth-of-type(3n) { animation-delay: 1.5s; }

/* Form-side stars on the constellation variant — light blue twinkle */
.l-const-stars circle {
    animation: sparkTwinkle 4s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}
.l-const-stars circle:nth-of-type(2n) { animation-delay: 0.6s; animation-duration: 5s; }
.l-const-stars circle:nth-of-type(3n) { animation-delay: 1.2s; animation-duration: 3.5s; }