html {
    color-scheme: dark;
}
html {
    scroll-behavior: smooth;
}
/* =========================================================
   FLIGHTSCOPE
   GLOBAL STYLES
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
    --bg: #050810;
    --bg-soft: #080d18;
    --glass: rgba(10, 17, 30, 0.72);
    --glass-light: rgba(255, 255, 255, 0.045);
    --glass-border: rgba(255, 255, 255, 0.09);
    --text: #f5f8ff;
    --text-soft: #aab5c8;
    --text-muted: #6e7b91;
    --accent: #55aaff;
    --accent-bright: #79c1ff;
    --accent-dark: #1674c9;
    --success: #43e59b;
    --radius: 22px;
    --max-width: 1280px;
}

/* =========================================================
   RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: radial-gradient( circle at 50% -10%, rgba(50, 130, 220, 0.13), transparent 40% ), var(--bg);
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

img {
    max-width: 100%;
    display: block;
}

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

.background-system {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -10;
    background: radial-gradient( circle at 20% 20%, rgba(35, 120, 255, 0.05), transparent 35% ), radial-gradient( circle at 80% 70%, rgba(0, 190, 255, 0.04), transparent 35% );
}

.aurora {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.16;
}

.aurora-one {
    top: -300px;
    left: -150px;
    background: #147cff;
}

.aurora-two {
    top: 30%;
    right: -300px;
    background: #0066ff;
}

.aurora-three {
    bottom: -350px;
    left: 35%;
    background: #00aaff;
}

.grid-plane {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: linear-gradient( rgba(255, 255, 255, 0.5) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px );
    background-size: 70px 70px;
    -webkit-mask-image: linear-gradient( to bottom, black, transparent 80% );
    mask-image: linear-gradient( to bottom, black, transparent 80% );
}

.stars {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image: radial-gradient( circle, rgba(255, 255, 255, 0.8) 1px, transparent 1px );
    background-size: 150px 150px;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    padding: 18px 24px;
    z-index: 100;
}

.nav-glass {
    width: min(calc(100% - 20px), var(--max-width));
    min-height: 72px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(7, 12, 22, 0.78);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.28);
}

/* BRAND */

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-symbol {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient( 135deg, rgba(70, 160, 255, 0.25), rgba(30, 100, 190, 0.08) );
    border: 1px solid rgba(100, 180, 255, 0.2);
    color: var(--accent-bright);
    box-shadow: inset 0 0 20px rgba(70, 160, 255, 0.08);
}

.brand-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .brand-name strong {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.04em;
    }

        .brand-name strong span {
            color: var(--accent-bright);
        }

    .brand-name small {
        color: var(--text-muted);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.13em;
    }

/* NAV LINKS */

.nav-links {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
}

    .nav-links a {
        padding: 10px 14px;
        border-radius: 10px;
        color: var(--text-soft);
        font-size: 13px;
        font-weight: 600;
        transition: color 0.2s ease, background 0.2s ease;
    }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--text);
            background: rgba(255, 255, 255, 0.055);
        }

/* NAV RIGHT */

.nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.network-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.status-light {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 12px rgba(67, 229, 155, 0.8);
}

.nav-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 11px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    background: linear-gradient( 135deg, #2489e8, #1464b3 );
    box-shadow: 0 8px 25px rgba(25, 120, 220, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .nav-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(25, 120, 220, 0.32);
    }

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

.hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    padding: 80px 24px 100px;
}

.hero-content {
    width: min(1180px, 100%);
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    align-items: center;
    gap: 60px;
}

.hero-copy {
    max-width: 650px;
}

.hero-label,
.section-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--accent-bright);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.label-line {
    width: 28px;
    height: 1px;
    background: var(--accent);
}

.hero h1 {
    margin-bottom: 24px;
    font-size: clamp(58px, 7vw, 94px);
    line-height: 0.88;
    font-weight: 900;
    letter-spacing: -0.07em;
}

    .hero h1 span {
        display: block;
        color: var(--accent-bright);
        text-shadow: 0 0 50px rgba(80, 170, 255, 0.18);
    }

    .hero h1 small {
        display: block;
        margin-top: 8px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.48em;
        font-weight: 700;
        letter-spacing: -0.03em;
    }

.hero-description {
    max-width: 600px;
    margin-bottom: 30px;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.primary-button {
    background: linear-gradient( 135deg, #268eea, #155fa9 );
    box-shadow: 0 10px 30px rgba(30, 130, 230, 0.2);
}

.secondary-button {
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-soft);
}

.hero-metrics {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 42px;
}

.metric {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .metric strong {
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    .metric span {
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
    }

.metric-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
}

/* =========================================================
   RADAR
   ========================================================= */

.hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.radar-system {
    position: relative;
    width: min(500px, 90vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(30, 130, 220, 0.08), transparent 62% );
}

.radar-orbit {
    position: absolute;
    inset: 10%;
    border: 1px solid rgba(80, 170, 255, 0.12);
    border-radius: 50%;
}

.orbit-two {
    inset: 23%;
}

.orbit-three {
    inset: 36%;
}

.radar-grid.horizontal,
.radar-grid.vertical {
    position: absolute;
    background: rgba(80, 170, 255, 0.08);
}

.radar-grid.horizontal {
    top: 50%;
    left: 8%;
    right: 8%;
    height: 1px;
}

.radar-grid.vertical {
    left: 50%;
    top: 8%;
    bottom: 8%;
    width: 1px;
}

.radar-sweep {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: conic-gradient( from 0deg, transparent 0deg, rgba(80, 180, 255, 0.16) 25deg, transparent 55deg );
    animation: radarSpin 5s linear infinite;
}

@keyframes radarSpin {
    to {
        transform: rotate(360deg);
    }
}

.radar-center {
    position: absolute;
    inset: 47%;
    display: grid;
    place-items: center;
}

.radar-core {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 30px rgba(80, 180, 255, 0.9);
}

.radar-pulse {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(90, 190, 255, 0.35);
    border-radius: 50%;
    animation: radarPulse 2s ease-out infinite;
}

@keyframes radarPulse {
    0% {
        transform: scale(0.3);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.radar-aircraft {
    position: absolute;
    color: var(--accent-bright);
    filter: drop-shadow( 0 0 8px rgba(80, 180, 255, 0.8) );
}

.aircraft-one {
    top: 23%;
    left: 63%;
}

.aircraft-two {
    top: 64%;
    left: 23%;
}

.aircraft-three {
    top: 35%;
    left: 28%;
}

.aircraft-four {
    top: 70%;
    left: 65%;
}

.telemetry {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid rgba(90, 180, 255, 0.14);
    border-radius: 8px;
    background: rgba(4, 10, 18, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .telemetry span {
        color: var(--text-muted);
        font-size: 7px;
        font-weight: 800;
        letter-spacing: 0.12em;
    }

    .telemetry strong {
        font-size: 10px;
        color: var(--accent-bright);
    }

.telemetry-one {
    top: 17%;
    left: 5%;
}

.telemetry-two {
    right: 0;
    top: 45%;
}

.telemetry-three {
    left: 10%;
    bottom: 13%;
}

.visual-caption {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.caption-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 10px rgba(67, 229, 155, 0.7);
}

/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.tracker-section,
.technology-section,
.about-section {
    width: min(var(--max-width), calc(100% - 48px));
    margin: auto;
    padding: 110px 0;
}

.section-heading {
    max-width: 720px;
    margin-bottom: 45px;
}

    .section-heading.centered {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

        .section-heading.centered .section-eyebrow {
            justify-content: center;
        }

    .section-heading h2 {
        margin-bottom: 18px;
        font-size: clamp(38px, 5vw, 62px);
        line-height: 0.95;
        letter-spacing: -0.055em;
    }

        .section-heading h2 span {
            color: var(--accent-bright);
        }

    .section-heading p {
        color: var(--text-soft);
        font-size: 15px;
        line-height: 1.8;
    }

/* =========================================================
   TRACKER CARD
   ========================================================= */

.tracker-status-card {
    position: relative;
    overflow: hidden;
    padding: 42px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: linear-gradient( 135deg, rgba(20, 35, 58, 0.75), rgba(7, 13, 24, 0.82) );
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.25);
}

.tracker-card-glow {
    position: absolute;
    width: 450px;
    height: 450px;
    top: -280px;
    right: -150px;
    border-radius: 50%;
    background: rgba(60, 160, 255, 0.12);
    filter: blur(70px);
}

.tracker-icon {
    position: relative;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 15px;
    background: rgba(70, 160, 255, 0.1);
    border: 1px solid rgba(80, 170, 255, 0.18);
    color: var(--accent-bright);
    font-size: 20px;
}

.tracker-card-content {
    position: relative;
    max-width: 850px;
}

.card-kicker {
    color: var(--accent-bright);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.tracker-card-content h3 {
    margin: 10px 0 14px;
    font-size: 34px;
    letter-spacing: -0.04em;
}

    .tracker-card-content h3 span {
        color: var(--accent-bright);
    }

.tracker-card-content p {
    max-width: 700px;
    color: var(--text-soft);
    line-height: 1.75;
    font-size: 14px;
}

/* =========================================================
   RELEASE TARGET
   ========================================================= */

.release-target-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 28px;
    padding: 18px;
    border-left: 2px solid var(--accent);
    background: rgba(255, 255, 255, 0.025);
    border-radius: 0 12px 12px 0;
}

    .release-target-text span {
        color: var(--text-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.14em;
    }

    .release-target-text strong {
        color: white;
        font-size: 21px;
        letter-spacing: -0.025em;
    }

    .release-target-text small {
        color: var(--accent-bright);
        font-size: 11px;
        font-weight: 700;
    }

/* =========================================================
   DEVELOPMENT PROGRESS
   ========================================================= */

.development-progress {
    position: relative;
    margin-top: 30px;
}

.development-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

    .development-progress-header span {
        color: var(--text-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.13em;
    }

    .development-progress-header strong {
        color: var(--accent-bright);
        font-size: 16px;
        font-weight: 800;
    }

.development-bar {
    width: 100%;
    height: 9px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.07);
}

.development-bar-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient( 90deg, #1674c9, #69baff );
    box-shadow: 0 0 20px rgba(70, 170, 255, 0.35);
    transition: width 0.5s ease;
}

/* =========================================================
   COUNTDOWN
   ========================================================= */

.release-countdown {
    margin-top: 35px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.countdown-label span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.countdown-grid {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 18px;
}

.countdown-unit {
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

    .countdown-unit strong {
        color: white;
        font-size: clamp(26px, 4vw, 38px);
        line-height: 1;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.04em;
    }

    .countdown-unit span {
        color: var(--text-muted);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.1em;
    }

.countdown-separator {
    color: var(--accent);
    font-size: 22px;
    font-weight: 800;
}

/* =========================================================
   STATUS
   ========================================================= */

.development-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

    .development-info span {
        color: var(--text-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.14em;
    }

    .development-info strong {
        color: var(--success);
        font-size: 10px;
        letter-spacing: 0.08em;
    }

/* =========================================================
   AIRCRAFT LIBRARY
   CLEAN FINAL VERSION
   ========================================================= */

.aircraft-photos-section {
    width: min(1400px, calc(100% - 48px));
    margin: 0 auto;
    padding: 120px 0 100px;
    text-align: center;
}

/* HEADER */

.aircraft-library-heading {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .aircraft-library-heading .section-eyebrow {
        display: block;
        width: 100%;
        margin: 0 0 18px;
        text-align: center;
        color: rgba(255, 255, 255, 0.55);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
    }

    .aircraft-library-heading h2 {
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
        color: #ffffff;
        font-size: clamp(2.8rem, 5vw, 4.6rem);
        line-height: 0.98;
        font-weight: 900;
        letter-spacing: -0.055em;
    }

        /*
   IMPORTANT:
   No background-clip:text here.
   The previous version was causing the CSS warning.
*/

        .aircraft-library-heading h2 span {
            display: inline;
            margin: 0;
            padding: 0;
            color: rgba(255, 255, 255, 0.42);
        }

    .aircraft-library-heading p {
        width: 100%;
        max-width: 720px;
        margin: 24px auto 0;
        padding: 0;
        text-align: center;
        color: rgba(255, 255, 255, 0.58);
        font-size: 1rem;
        line-height: 1.8;
    }

/* =========================================================
   AIRCRAFT PHOTO GRID
   ========================================================= */

.aircraft-photo-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    text-align: left;
}

/* =========================================================
   AIRCRAFT PHOTO CARD
   ========================================================= */

.aircraft-photo-card {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025) );
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

    .aircraft-photo-card:hover {
        transform: translateY(-6px);
        border-color: rgba(120, 165, 255, 0.35);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    }

    /* =========================================================
   AIRCRAFT PHOTO
   ========================================================= */

    .aircraft-photo-card img {
        display: block;
        width: 100%;
        height: 270px;
        object-fit: cover;
        object-position: center;
        background: rgba(255, 255, 255, 0.03);
        transition: transform 0.5s ease, filter 0.5s ease;
    }

    .aircraft-photo-card:hover img {
        transform: scale(1.04);
        filter: brightness(1.06);
    }

/* =========================================================
   AIRCRAFT PHOTO INFORMATION
   ========================================================= */

.aircraft-photo-info {
    position: relative;
    padding: 24px 26px 27px;
    text-align: left;
}

    .aircraft-photo-info .aircraft-kicker,
    .aircraft-photo-info .photo-kicker {
        display: block;
        margin-bottom: 8px;
        color: rgba(255, 255, 255, 0.42);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .aircraft-photo-info h3 {
        margin: 0;
        color: #ffffff;
        font-size: 1.55rem;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -0.035em;
    }

    .aircraft-photo-info p {
        margin: 10px 0 0;
        color: rgba(255, 255, 255, 0.55);
        font-size: 0.88rem;
        line-height: 1.65;
    }

/* =========================================================
   LEGACY PHOTO CONTENT SUPPORT
   ========================================================= */

.aircraft-photo-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
    text-align: left;
}

.aircraft-photo-kicker {
    margin-bottom: 7px;
    color: var(--accent-bright);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.aircraft-photo-title {
    width: 100%;
    margin: 0 0 8px;
    color: white;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.aircraft-photo-description {
    width: 100%;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.7;
}

/* =========================================================
   NO PHOTOS
   ========================================================= */

.aircraft-no-photos {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
}

    .aircraft-no-photos i {
        margin-bottom: 18px;
        font-size: 2rem;
        color: rgba(255, 255, 255, 0.3);
    }

    .aircraft-no-photos strong {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1.1rem;
        font-weight: 800;
    }

    .aircraft-no-photos span {
        margin-top: 8px;
        color: rgba(255, 255, 255, 0.4);
        font-size: 0.85rem;
    }

    .aircraft-no-photos h3 {
        margin: 0;
        color: #ffffff;
        font-size: 22px;
        font-weight: 800;
    }

    .aircraft-no-photos p {
        max-width: 500px;
        margin: 10px auto 0;
        color: rgba(255, 255, 255, 0.5);
        font-size: 14px;
        line-height: 1.6;
    }

/* =========================================================
   TECHNOLOGY
   ========================================================= */

.technology-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.technology-card {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    padding: 30px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: rgba(10, 17, 29, 0.65);
}

    .technology-card.large {
        min-height: 320px;
    }

    .technology-card.wide {
        grid-column: span 2;
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        align-items: center;
        gap: 35px;
    }

.technology-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin-bottom: 25px;
    border-radius: 14px;
    background: rgba(70, 160, 255, 0.08);
    color: var(--accent-bright);
    font-size: 19px;
}

.technology-number {
    display: block;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.technology-card h3 {
    margin-bottom: 10px;
    font-size: 23px;
    letter-spacing: -0.035em;
}

.technology-card p {
    max-width: 550px;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.7;
}

.technology-visual {
    min-height: 220px;
    display: grid;
    place-items: center;
}

.mini-radar {
    position: relative;
    width: 190px;
    aspect-ratio: 1;
    border: 1px solid rgba(80, 170, 255, 0.18);
    border-radius: 50%;
    background: radial-gradient( circle, rgba(50, 150, 255, 0.08), transparent 65% );
}

.mini-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient( transparent, rgba(80, 180, 255, 0.2), transparent 25% );
    animation: radarSpin 4s linear infinite;
}

.mini-radar span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 10px rgba(80, 180, 255, 0.7);
}

    .mini-radar span:nth-child(2) {
        top: 30%;
        left: 65%;
    }

    .mini-radar span:nth-child(3) {
        top: 65%;
        left: 35%;
    }

    .mini-radar span:nth-child(4) {
        top: 45%;
        left: 48%;
    }

/* =========================================================
   ABOUT
   ========================================================= */

.about-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 60px;
    align-items: center;
    padding: 60px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: rgba(9, 15, 26, 0.65);
}

.about-copy {
    max-width: 700px;
}

    .about-copy h2 {
        margin-bottom: 22px;
        font-size: clamp(40px, 5vw, 60px);
        line-height: 0.95;
        letter-spacing: -0.055em;
    }

        .about-copy h2 span {
            color: var(--accent-bright);
        }

    .about-copy p {
        max-width: 650px;
        margin-bottom: 14px;
        color: var(--text-soft);
        font-size: 14px;
        line-height: 1.8;
    }

.about-stat-card {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(80, 170, 255, 0.14);
    border-radius: 20px;
    background: radial-gradient( circle, rgba(50, 150, 255, 0.09), transparent 65% );
}

.about-stat-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 15px;
    color: var(--accent-bright);
    background: rgba(70, 160, 255, 0.08);
}

.about-stat-card strong {
    font-size: 25px;
    letter-spacing: 0.04em;
}

.about-stat-card span {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

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

.footer,
.server-footer {
    width: min(var(--max-width), calc(100% - 48px));
    margin: auto;
    padding: 35px 0 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.footer-symbol {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--accent-bright);
    background: rgba(70, 160, 255, 0.08);
}

/* =========================================================
   SERVER / ABOUT PAGE
   ========================================================= */

.server-page {
    width: min(var(--max-width), calc(100% - 48px));
    margin: auto;
    padding-top: 70px;
}

.page-header {
    max-width: 750px;
    margin-bottom: 55px;
}

.page-eyebrow {
    margin-bottom: 18px;
    color: var(--accent-bright);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.page-header h1 {
    margin-bottom: 20px;
    font-size: clamp(48px, 6vw, 76px);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

    .page-header h1 span {
        color: var(--accent-bright);
    }

.page-header p {
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.8;
}

.server-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.server-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 30px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: linear-gradient( 145deg, rgba(17, 27, 43, 0.78), rgba(7, 12, 21, 0.88) );
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

    .server-card:hover {
        transform: translateY(-4px);
        border-color: rgba(80, 170, 255, 0.2);
    }

    .server-card.featured {
        grid-column: span 2;
    }

.server-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.server-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--accent-bright);
    background: rgba(70, 160, 255, 0.08);
    border: 1px solid rgba(80, 170, 255, 0.12);
}

.server-status {
    color: var(--success);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.server-content {
    min-width: 0;
}

.server-kicker {
    margin-bottom: 9px;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.server-content h2 {
    margin-bottom: 14px;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.045em;
}

    .server-content h2 span {
        color: var(--accent-bright);
    }

.server-content p {
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.75;
}

.server-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 25px;
}

.server-data-item {
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

    .server-data-item span {
        display: block;
        margin-bottom: 5px;
        color: var(--text-muted);
        font-size: 7px;
        font-weight: 800;
        letter-spacing: 0.1em;
    }

    .server-data-item strong {
        color: white;
        font-size: 10px;
        word-break: break-word;
    }

.server-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    padding: 12px 15px;
    border-radius: 10px;
    color: white;
    font-size: 10px;
    font-weight: 800;
    background: linear-gradient( 135deg, #247fda, #145a9e );
}

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

@media (max-width: 1000px) {

    .nav-links {
        display: none;
    }

    .hero-content {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        max-width: 760px;
    }

    .hero-visual {
        order: -1;
    }

    .radar-system {
        width: min(440px, 80vw);
    }

    .about-container {
        grid-template-columns: 1fr;
    }

    .about-stat-card {
        max-width: 320px;
    }

    .aircraft-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aircraft-photos-section {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 750px) {

    .navbar {
        padding: 10px;
    }

    .nav-glass {
        width: 100%;
    }

    .network-status {
        display: none;
    }

    .hero {
        min-height: auto;
        padding: 55px 20px 80px;
    }

    .hero-content {
        gap: 40px;
    }

    .hero-metrics {
        gap: 12px;
    }

    .metric-divider {
        height: 24px;
    }

    .metric span {
        font-size: 8px;
    }

    .tracker-section,
    .technology-section,
    .about-section {
        width: min( calc(100% - 32px), var(--max-width) );
        padding: 75px 0;
    }

    .aircraft-photos-section {
        width: calc(100% - 32px);
        padding: 90px 0 80px;
    }

    .aircraft-library-heading {
        margin-bottom: 40px;
    }

    .tracker-status-card {
        padding: 25px;
    }

    .countdown-grid {
        gap: 5px;
    }

    .countdown-unit {
        min-width: 0;
        flex: 1;
        padding: 13px 5px;
    }

        .countdown-unit strong {
            font-size: 24px;
        }

    .countdown-separator {
        font-size: 16px;
    }

    .technology-grid,
    .server-grid {
        grid-template-columns: 1fr;
    }

    .technology-card.wide {
        grid-column: span 1;
        grid-template-columns: 1fr;
    }

    .server-card.featured {
        grid-column: span 1;
    }

    .server-data {
        grid-template-columns: 1fr;
    }

    .about-container {
        padding: 30px;
    }

    .footer,
    .server-footer {
        width: calc(100% - 32px);
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .aircraft-photo-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .aircraft-library-heading h2 {
        font-size: 2.7rem;
    }

    .aircraft-library-heading p {
        font-size: 0.9rem;
    }

    .aircraft-photo-card img {
        height: 230px;
    }
}

@media (max-width: 480px) {

    .brand-name small {
        display: none;
    }

    .nav-button {
        padding: 10px 12px;
    }

    .hero h1 {
        font-size: 52px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .primary-button,
    .secondary-button {
        justify-content: center;
    }

    .hero-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .metric-divider {
        display: none;
    }

    .telemetry {
        transform: scale(0.8);
    }

    .aircraft-library-heading h2 {
        font-size: 36px;
    }

    .aircraft-library-heading p {
        font-size: 14px;
    }

    .aircraft-photo-info {
        padding: 22px;
    }

    .aircraft-photo-card img {
        height: 220px;
    }

    .release-target-text strong {
        font-size: 18px;
    }
}

```css
/* ============================================================
   FLIGHTSCOPE LIVE TRACKER
   ============================================================ */
.tracker-page {
    position: relative;
    width: min(1600px, calc(100% - 48px));
    margin: 0 auto;
    padding: 120px 0 70px;
    z-index: 1;
}


/* ============================================================
   TRACKER HEADER
   ============================================================ */

.tracker-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 34px;
}

.tracker-heading {
    max-width: 760px;
}

    .tracker-heading .page-eyebrow {
        margin-bottom: 16px;
        color: var(--accent-bright, #8eb5ff);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
    }

    .tracker-heading h1 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(48px, 6vw, 78px);
        line-height: 0.95;
        font-weight: 900;
        letter-spacing: -0.06em;
    }

        .tracker-heading h1 span {
            color: var(--accent-bright, #8eb5ff);
        }

    .tracker-heading p {
        max-width: 680px;
        margin: 24px 0 0;
        color: var(--text-soft, rgba(255, 255, 255, 0.62));
        font-size: 15px;
        line-height: 1.75;
    }


/* ============================================================
   CURRENT SERVER
   ============================================================ */

.current-server {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 300px;
    padding: 16px 18px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.current-server-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(130, 170, 255, 0.18);
    border-radius: 13px;
    background: rgba(100, 145, 255, 0.1);
    color: var(--accent-bright, #8eb5ff);
    font-size: 17px;
}

.current-server-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

    .current-server-info span {
        margin-bottom: 4px;
        color: var(--text-muted, rgba(255, 255, 255, 0.4));
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.16em;
    }

    .current-server-info strong {
        overflow: hidden;
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.server-status {
    padding: 7px 9px;
    border: 1px solid rgba(75, 220, 145, 0.18);
    border-radius: 8px;
    background: rgba(75, 220, 145, 0.08);
    color: #71e5a7;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
}


/* ============================================================
   SERVER SWITCHER
   ============================================================ */

.tracker-server-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-bottom: 24px;
    padding: 6px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.tracker-server-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    border-radius: 9px;
    color: var(--text-muted, rgba(255, 255, 255, 0.48));
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

    .tracker-server-option:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.06);
    }

    .tracker-server-option.active {
        background: rgba(110, 155, 255, 0.15);
        color: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(130, 170, 255, 0.12);
    }

    .tracker-server-option i {
        color: var(--accent-bright, #8eb5ff);
        font-size: 12px;
    }


/* ============================================================
   MAIN TRACKER LAYOUT
   ============================================================ */

.tracker-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    min-height: 690px;
    overflow: hidden;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 24px;
    background: rgba(8, 13, 25, 0.72);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}


/* ============================================================
   MAP PANEL
   ============================================================ */

.tracker-map-panel {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}

.map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 72px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    background: rgba(8, 13, 25, 0.82);
    z-index: 500;
}

.map-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .map-title > i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 11px;
        background: rgba(100, 145, 255, 0.1);
        color: var(--accent-bright, #8eb5ff);
        font-size: 15px;
    }

    .map-title > div {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .map-title span {
        color: var(--text-muted, rgba(255, 255, 255, 0.4));
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.15em;
    }

    .map-title strong {
        margin-top: 3px;
        overflow: hidden;
        color: #ffffff;
        font-size: 13px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.map-controls {
    display: flex;
    gap: 6px;
}

    .map-controls button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.045);
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

        .map-controls button:hover {
            border-color: rgba(130, 170, 255, 0.28);
            background: rgba(110, 155, 255, 0.12);
            color: #ffffff;
            transform: translateY(-1px);
        }

        .map-controls button:active {
            transform: translateY(0);
        }


/* ============================================================
   LEAFLET MAP
   ============================================================ */

.flight-map {
    position: relative;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    background: #0a101b;
}

    .flight-map .leaflet-container {
        width: 100%;
        height: 100%;
        min-height: 540px;
        background: #0a101b;
        font-family: Inter, sans-serif;
    }

    .flight-map .leaflet-control-zoom {
        display: none;
    }

    .flight-map .leaflet-control-attribution {
        border-radius: 6px 0 0 0;
        background: rgba(5, 9, 17, 0.72);
        color: rgba(255, 255, 255, 0.45);
    }

        .flight-map .leaflet-control-attribution a {
            color: rgba(150, 185, 255, 0.75);
        }


/* ============================================================
   MAP LOADING
   ============================================================ */

.map-loading {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    background: radial-gradient( circle at center, rgba(50, 90, 170, 0.12), rgba(5, 9, 17, 0.96) 65% );
    color: #ffffff;
}

    .map-loading strong {
        margin-top: 6px;
        font-size: 14px;
        font-weight: 700;
    }

    .map-loading > span {
        color: rgba(255, 255, 255, 0.45);
        font-size: 11px;
    }

.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(130, 170, 255, 0.22);
    border-radius: 50%;
    background: rgba(100, 145, 255, 0.08);
    color: var(--accent-bright, #8eb5ff);
    animation: trackerPulse 1.8s ease-in-out infinite;
}

    .loading-spinner i {
        font-size: 17px;
    }

@keyframes trackerPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}


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

.map-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 45px;
    padding: 0 17px;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    background: rgba(8, 13, 25, 0.88);
    color: rgba(255, 255, 255, 0.4);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

    .map-footer > div {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #71e5a7;
    }

.map-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #71e5a7;
    box-shadow: 0 0 10px rgba(113, 229, 167, 0.65);
}

.map-footer > span {
    margin-left: auto;
}

    .map-footer > span + span {
        margin-left: 0;
    }


/* ============================================================
   AIRCRAFT SIDEBAR
   ============================================================ */

.aircraft-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: rgba(5, 9, 17, 0.56);
}

.aircraft-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

    .aircraft-panel-header > div:first-child {
        display: flex;
        flex-direction: column;
    }

    .aircraft-panel-header span {
        color: var(--text-muted, rgba(255, 255, 255, 0.38));
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.16em;
    }

    .aircraft-panel-header strong {
        margin-top: 4px;
        color: #ffffff;
        font-size: 18px;
        font-weight: 800;
    }

.aircraft-total {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(130, 170, 255, 0.16);
    border-radius: 9px;
    background: rgba(100, 145, 255, 0.08);
    color: var(--accent-bright, #8eb5ff);
    font-size: 13px;
    font-weight: 800;
}


/* ============================================================
   AIRCRAFT SEARCH
   ============================================================ */

.aircraft-search {
    position: relative;
    margin: 14px;
}

    .aircraft-search > i {
        position: absolute;
        top: 50%;
        left: 13px;
        color: rgba(255, 255, 255, 0.32);
        font-size: 11px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .aircraft-search input {
        width: 100%;
        height: 40px;
        padding: 0 13px 0 35px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        outline: none;
        background: rgba(255, 255, 255, 0.035);
        color: #ffffff;
        font-family: inherit;
        font-size: 11px;
        transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

        .aircraft-search input::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .aircraft-search input:focus {
            border-color: rgba(130, 170, 255, 0.3);
            background: rgba(255, 255, 255, 0.055);
            box-shadow: 0 0 0 3px rgba(100, 145, 255, 0.07);
        }


/* ============================================================
   AIRCRAFT LIST
   ============================================================ */

.aircraft-list {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 0 10px 12px;
}

    .aircraft-list::-webkit-scrollbar {
        width: 5px;
    }

    .aircraft-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .aircraft-list::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(130, 170, 255, 0.24);
    }


/* ============================================================
   AIRCRAFT EMPTY STATE
   ============================================================ */

.aircraft-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 35px;
    text-align: center;
    flex-direction: column;
}

.empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border: 1px solid rgba(130, 170, 255, 0.12);
    border-radius: 15px;
    background: rgba(100, 145, 255, 0.07);
    color: rgba(142, 181, 255, 0.65);
}

    .empty-icon i {
        font-size: 18px;
    }

.aircraft-empty strong {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 700;
}

.aircraft-empty > span {
    max-width: 220px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.36);
    font-size: 10px;
    line-height: 1.6;
}


/* ============================================================
   DYNAMIC AIRCRAFT CARDS
   Supports cards generated by app.js
   ============================================================ */

.aircraft-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 7px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .aircraft-card:hover {
        border-color: rgba(130, 170, 255, 0.2);
        background: rgba(100, 145, 255, 0.07);
        transform: translateY(-1px);
    }

.aircraft-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: rgba(100, 145, 255, 0.08);
    color: var(--accent-bright, #8eb5ff);
}

.aircraft-card-info {
    min-width: 0;
    flex: 1;
}

    .aircraft-card-info strong {
        display: block;
        overflow: hidden;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .aircraft-card-info span {
        display: block;
        margin-top: 3px;
        overflow: hidden;
        color: rgba(255, 255, 255, 0.38);
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.aircraft-card-altitude {
    color: rgba(255, 255, 255, 0.52);
    font-size: 9px;
    font-weight: 700;
}


/* ============================================================
   TRACKER STATS
   ============================================================ */

.tracker-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.tracker-stat {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.tracker-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: rgba(100, 145, 255, 0.08);
    color: var(--accent-bright, #8eb5ff);
}

.tracker-stat > div:last-child {
    min-width: 0;
}

.tracker-stat span {
    display: block;
    color: rgba(255, 255, 255, 0.35);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.tracker-stat strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}


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

.server-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 4px 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

    .server-footer strong {
        color: rgba(255, 255, 255, 0.52);
    }


/* ============================================================
   LEAFLET AIRCRAFT MARKERS
   ============================================================ */

.aircraft-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(142, 181, 255, 0.55);
    border-radius: 50%;
    background: rgba(30, 65, 130, 0.88);
    color: #ffffff;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.35), 0 0 18px rgba(100, 145, 255, 0.18);
}

    .aircraft-marker i {
        font-size: 13px;
    }


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

@media (max-width: 1200px) {

    .tracker-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .tracker-page {
        width: min(1500px, calc(100% - 36px));
    }
}


@media (max-width: 1000px) {

    .tracker-header {
        align-items: stretch;
        flex-direction: column;
    }

    .current-server {
        width: 100%;
    }

    .tracker-layout {
        grid-template-columns: 1fr;
    }

    .tracker-map-panel {
        min-height: 600px;
        border-right: 0;
        border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    }

    .aircraft-panel {
        min-height: 420px;
    }

    .tracker-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 650px) {

    .tracker-page {
        width: calc(100% - 24px);
        padding: 95px 0 45px;
    }

    .tracker-heading h1 {
        font-size: 48px;
    }

    .tracker-heading p {
        font-size: 13px;
    }

    .current-server {
        min-width: 0;
        padding: 13px;
    }

    .tracker-server-switcher {
        width: 100%;
        overflow-x: auto;
    }

    .tracker-server-option {
        flex: 1;
        justify-content: center;
        min-width: 0;
        padding: 10px 12px;
    }

        .tracker-server-option span {
            font-size: 9px;
        }

    .tracker-layout {
        border-radius: 18px;
    }

    .tracker-map-panel {
        min-height: 520px;
    }

    .map-toolbar {
        min-height: 64px;
        padding: 10px 12px;
    }

    .map-title > i {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .map-title strong {
        font-size: 11px;
    }

    .map-controls button {
        width: 32px;
        height: 32px;
    }

    .flight-map .leaflet-container {
        min-height: 455px;
    }

    .map-footer {
        gap: 10px;
        padding: 0 11px;
        font-size: 8px;
    }

    .tracker-stats {
        grid-template-columns: 1fr;
    }

    .tracker-stat {
        padding: 15px;
    }

    .server-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        line-height: 1.5;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .loading-spinner,
    .aircraft-card,
    .map-controls button,
    .tracker-server-option {
        animation: none;
        transition: none;
    }
}

/* ============================================================
   FLIGHTSCOPE TRACKER
   Dark background + isolated tracker styling
   ============================================================ */

/* ============================================================
   TRACKER PAGE BACKGROUND
   ============================================================ */

html:has(.tracker-page),
body:has(.tracker-page) {
    background: #050812 !important;
    color: #ffffff;
}

.tracker-page {
    position: relative;
    isolation: isolate;
    color: #ffffff;
}

/* Keep the existing background behind everything */
.background-system {
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none;
    background: #050812 !important;
}

    /* ============================================================
   AURORA BACKGROUND
   ============================================================ */

    .background-system .aurora {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        filter: blur(90px);
        opacity: 0.42;
    }

    .background-system .aurora-one {
        width: 65vw;
        height: 65vw;
        max-width: 900px;
        max-height: 900px;
        top: -32%;
        left: -20%;
        background: radial-gradient( circle, rgba(70, 125, 255, 0.32) 0%, rgba(65, 105, 220, 0.16) 32%, transparent 70% );
    }

    .background-system .aurora-two {
        width: 65vw;
        height: 65vw;
        max-width: 900px;
        max-height: 900px;
        top: -20%;
        right: -24%;
        background: radial-gradient( circle, rgba(125, 90, 245, 0.25) 0%, rgba(85, 105, 230, 0.13) 35%, transparent 72% );
    }

    .background-system .aurora-three {
        width: 65vw;
        height: 65vw;
        max-width: 900px;
        max-height: 900px;
        right: 8%;
        bottom: -38%;
        background: radial-gradient( circle, rgba(45, 120, 220, 0.24) 0%, rgba(55, 95, 190, 0.11) 35%, transparent 72% );
    }

/* ============================================================
   NAVIGATION
   ============================================================ */

.navbar {
    position: relative;
    z-index: 1000;
}

.nav-glass {
    background: rgba(7, 12, 24, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}

/* Logo */
.navbar .brand,
.navbar .brand-name strong {
    color: #ffffff !important;
}

    .navbar .brand-name strong span {
        color: #8eb5ff !important;
    }

.navbar .brand-name small {
    color: rgba(205, 220, 255, 0.58) !important;
}

.navbar .brand-symbol {
    color: #ffffff !important;
}

    .navbar .brand-symbol i {
        color: #a9c6ff !important;
    }

/* Navigation */
.navbar .nav-links a {
    color: rgba(235, 241, 255, 0.72) !important;
}

    .navbar .nav-links a:hover,
    .navbar .nav-links a.active {
        color: #ffffff !important;
    }

/* Network */
.navbar .network-status {
    color: rgba(225, 236, 255, 0.72) !important;
}

/* Tracker button */
.navbar .nav-button {
    color: #ffffff !important;
}

/* ============================================================
   TRACKER CONTENT
   ============================================================ */

.tracker-page h1,
.tracker-page h2,
.tracker-page h3,
.tracker-page strong,
.tracker-page span,
.tracker-page p {
    color: inherit;
}

/* Main tracker glass container */
.tracker-layout {
    background: rgba(7, 12, 24, 0.58) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 24px;
    box-sizing: border-box;
}

/* Server / statistic cards */
.current-server,
.tracker-server-switcher,
.tracker-stat {
    background: rgba(255, 255, 255, 0.035) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    box-sizing: border-box;
}

/* Map */
.tracker-map-panel {
    background: rgba(5, 9, 18, 0.40) !important;
    border-radius: 20px;
    box-sizing: border-box;
}

/* Aircraft panel */
.aircraft-panel {
    background: rgba(5, 9, 18, 0.45) !important;
    border-radius: 20px;
    box-sizing: border-box;
}

/* ============================================================
   GLOBAL PAGE EDGE SPACING
   ============================================================ */

main {
    padding-left: clamp(16px, 3vw, 42px);
    padding-right: clamp(16px, 3vw, 42px);
    box-sizing: border-box;
    border-radius: 0 !important;
    overflow: visible !important;
}

    /* Major page sections */
    main > section,
    main > div {
        width: 100%;
        box-sizing: border-box;
        border-radius: 24px;
    }

/* ============================================================
   GLOBAL CARD / PANEL ROUNDING
   IMPORTANT:
   overflow remains VISIBLE so text cannot be clipped.
   ============================================================ */

.card,
.panel,
.glass-card,
.glass-panel,
[class*="card"],
[class*="panel"],
[class*="glass"] {
    border-radius: 24px !important;
    box-sizing: border-box;
    overflow: visible !important;
}

/* ============================================================
   CARD CONTAINERS
   ============================================================ */

main > section,
main > div,
main section,
main .container,
main .content,
main .card-container,
main .cards-container,
main .panel-container {
    border-radius: 24px !important;
    box-sizing: border-box;
    overflow: visible !important;
}

/* ============================================================
   ABOUT FLIGHTSCOPE
   ============================================================ */

.about-section {
    border-radius: 28px !important;
    box-sizing: border-box;
    overflow: visible !important;
}

.about-container {
    border-radius: 24px !important;
    box-sizing: border-box;
    overflow: visible !important;
}

/* ============================================================
   GLOBAL FLIGHTSCOPE TEXT
   ============================================================ */

body,
body * {
    color: #f5f7ff;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
.brand-name strong,
.nav-links a,
.network-status,
.nav-button {
    color: #ffffff !important;
}

    /* Gradient headings */
    h1,
    h2,
    .brand-name strong span,
    .gradient-text {
        background: linear-gradient( 135deg, #ffffff 0%, #b9c7ff 45%, #7c8cff 100% );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* Icons */
i,
svg {
    color: inherit;
    -webkit-text-fill-color: initial;
}

/* Links */
a {
    color: #f5f7ff;
}

    a:hover {
        color: #aebaff;
    }

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 650px) {

    main {
        padding-left: 12px;
        padding-right: 12px;
    }

        main > section,
        main > div {
            border-radius: 16px;
        }

    .background-system .aurora {
        width: 100vw;
        height: 100vw;
        filter: blur(70px);
        opacity: 0.32;
    }

    .tracker-layout {
        border-radius: 18px;
    }

    .current-server,
    .tracker-server-switcher,
    .tracker-stat,
    .tracker-map-panel,
    .aircraft-panel {
        border-radius: 16px;
    }
}
/* ============================================================
   DEVELOPMENT SECTION
   VERSION 1.0 CARD + DEVELOPMENT CARD SIDE BY SIDE
   ============================================================ */

.tracker-section {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr) !important;
    gap: 24px !important;
    width: 100%;
    box-sizing: border-box;
}

    /* Section heading spans both columns */
    .tracker-section .section-heading {
        grid-column: 1 / -1 !important;
        width: 100%;
    }

    /* VERSION 1.0 CARD */
    .tracker-section .tracker-status-card {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        box-sizing: border-box;
        margin: 0 !important;
    }

    /* DEVELOPMENT CARD */
    .tracker-section .development-extra-card {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        box-sizing: border-box;
        padding: 32px;
        background: rgba(7, 12, 24, 0.58) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 24px !important;
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        color: #ffffff !important;
    }

        /* Development card icon */
        .tracker-section .development-extra-card .tracker-icon {
            color: #a9c6ff !important;
            margin-bottom: 20px;
        }

        /* DEVELOPMENT label */
        .tracker-section .development-extra-card .card-kicker {
            display: block;
            color: rgba(190, 205, 255, 0.65) !important;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        /* Heading */
        .tracker-section .development-extra-card h3 {
            color: #ffffff !important;
            font-size: clamp(1.6rem, 2.5vw, 2.2rem);
            line-height: 1.15;
            margin: 0 0 16px;
        }

            /* Gradient heading text */
            .tracker-section .development-extra-card h3 span {
                color: #8faeff !important;
                background: none !important;
                -webkit-text-fill-color: #8faeff !important;
            }

        /* Description */
        .tracker-section .development-extra-card p {
            color: rgba(225, 232, 248, 0.72) !important;
            font-size: 0.95rem;
            line-height: 1.7;
            margin: 0;
        }

/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (max-width: 850px) {

    .tracker-section {
        grid-template-columns: 1fr !important;
    }

        .tracker-section .section-heading {
            grid-column: 1 !important;
        }

        .tracker-section .tracker-status-card {
            grid-column: 1 !important;
        }

        .tracker-section .development-extra-card {
            grid-column: 1 !important;
            padding: 24px;
        }
}
/* ============================================================
   RELEASE DATE CARD
   ============================================================ */

.tracker-section .release-target-text {
    border-radius: 18px !important;
    overflow: hidden;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
/* ============================================================
   AIRCRAFT LIBRARY EMPTY STATE
   ============================================================ */

.aircraft-library-empty {
    position: relative;
    width: 100%;
    min-height: 360px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 32px;
    background: rgba(7, 12, 24, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    overflow: hidden;
}

/* ============================================================
   EMPTY STATE ICON
   ============================================================ */

.aircraft-library-empty-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 20px;
    background: rgba(120, 150, 255, 0.08);
    border: 1px solid rgba(140, 165, 255, 0.16);
    border-radius: 18px;
}

    .aircraft-library-empty-icon i {
        color: #a9c6ff !important;
        font-size: 25px;
    }

/* ============================================================
   EMPTY STATE TEXT
   ============================================================ */

.aircraft-library-empty h3 {
    margin: 0 0 12px;
    color: #ffffff !important;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
}

.aircraft-library-empty p {
    width: 100%;
    max-width: 560px;
    margin: 0;
    color: rgba(220, 228, 248, 0.65) !important;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 650px) {

    .aircraft-library-empty {
        min-height: 300px;
        padding: 32px 22px;
        border-radius: 18px;
    }

    .aircraft-library-empty-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

        .aircraft-library-empty-icon i {
            font-size: 22px;
        }

    .aircraft-library-empty h3 {
        font-size: 1.4rem;
    }
}
/* ============================================================
   AIRCRAFT LIBRARY EMPTY STATE POSITION
   ============================================================ */

.aircraft-photo-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
}

.aircraft-library-empty {
    width: min(100%, 700px) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
/* ============================================================
   FLIGHTSCOPE SCROLLBAR
   ============================================================ */

html {
}

/* Chromium / Edge / Safari */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #080d1a;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient( 180deg, #8fa8ff 0%, #657cff 50%, #5967d8 100% );
    border-radius: 999px;
    border: 2px solid #080d1a;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient( 180deg, #a9bcff 0%, #7c91ff 50%, #6979eb 100% );
    }

::-webkit-scrollbar-corner {
    background: #080d1a;
}
/* ============================================================
   FLIGHTSCOPE PWA INSTALL BUTTON
   ============================================================ */

.install-app-button {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(150, 175, 255, 0.22);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

    .install-app-button:hover {
        background: rgba(110, 135, 255, 0.14) !important;
        border-color: rgba(150, 175, 255, 0.38);
        box-shadow: 0 8px 28px rgba(70, 100, 255, 0.16);
        transform: translateY(-1px);
    }

    .install-app-button:active {
        transform: translateY(0);
    }

    .install-app-button i {
        color: #a9c6ff !important;
    }
/* ============================================================
   FLIGHTSCOPE AIRCRAFT LIST
   ============================================================ */

/* Aircraft sidebar */
.tracker-page .aircraft-panel {
    background: rgba(7, 12, 24, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    overflow: visible !important;
    box-sizing: border-box;
}

/* ============================================================
   AIRCRAFT PANEL HEADER
   ============================================================ */

.tracker-page .aircraft-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 22px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

    .tracker-page .aircraft-panel-header > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .tracker-page .aircraft-panel-header span {
        color: rgba(185, 202, 235, 0.55) !important;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.13em;
        text-transform: uppercase;
    }

    .tracker-page .aircraft-panel-header strong {
        color: #ffffff !important;
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1;
    }

.tracker-page .aircraft-total {
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 14px;
    background: rgba(105, 130, 255, 0.11) !important;
    border: 1px solid rgba(135, 160, 255, 0.18);
    color: #a9c6ff !important;
    font-size: 0.95rem;
    font-weight: 800;
    box-sizing: border-box;
}

/* ============================================================
   AIRCRAFT SEARCH
   ============================================================ */

.tracker-page .aircraft-search {
    position: relative;
    margin: 16px 18px;
    height: 46px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

    .tracker-page .aircraft-search:focus-within {
        background: rgba(110, 135, 255, 0.055) !important;
        border-color: rgba(130, 155, 255, 0.32);
        box-shadow: 0 0 0 3px rgba(100, 125, 255, 0.07);
    }

    .tracker-page .aircraft-search i {
        margin-left: 15px;
        color: rgba(175, 195, 235, 0.48) !important;
        font-size: 0.85rem;
    }

    .tracker-page .aircraft-search input {
        width: 100%;
        height: 100%;
        padding: 0 14px 0 11px;
        border: 0;
        outline: 0;
        background: transparent !important;
        color: #ffffff !important;
        font-family: inherit;
        font-size: 0.84rem;
        box-sizing: border-box;
    }

        .tracker-page .aircraft-search input::placeholder {
            color: rgba(185, 200, 230, 0.38) !important;
        }

        .tracker-page .aircraft-search input:focus {
            outline: none;
        }

/* ============================================================
   AIRCRAFT LIST
   ============================================================ */

.tracker-page .aircraft-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 12px;
    max-height: 560px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

    .tracker-page .aircraft-list::-webkit-scrollbar {
        width: 7px;
    }

    .tracker-page .aircraft-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .tracker-page .aircraft-list::-webkit-scrollbar-thumb {
        background: linear-gradient( 180deg, #8fa8ff 0%, #657cff 50%, #5967d8 100% );
        border-radius: 999px;
    }

    /* ============================================================
   DYNAMIC AIRCRAFT ROWS
   ============================================================ */

    /*
   These rules intentionally target common row/card selectors
   without changing your JavaScript-generated HTML.
*/

    .tracker-page .aircraft-list > div:not(.aircraft-empty),
    .tracker-page .aircraft-list > article,
    .tracker-page .aircraft-list > li {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 72px;
        padding: 12px 14px;
        background: rgba(255, 255, 255, 0.035) !important;
        border: 1px solid rgba(255, 255, 255, 0.065);
        border-radius: 16px;
        color: #ffffff !important;
        box-sizing: border-box;
        transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

        /* Hover */
        .tracker-page .aircraft-list > div:not(.aircraft-empty):hover,
        .tracker-page .aircraft-list > article:hover,
        .tracker-page .aircraft-list > li:hover {
            background: rgba(105, 130, 255, 0.075) !important;
            border-color: rgba(140, 165, 255, 0.20);
            transform: translateY(-1px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        }

        /* ============================================================
   TEXT INSIDE AIRCRAFT ROWS
   ============================================================ */

        .tracker-page .aircraft-list > div:not(.aircraft-empty) *,
        .tracker-page .aircraft-list > article *,
        .tracker-page .aircraft-list > li * {
            color: inherit;
        }

    .tracker-page .aircraft-list strong {
        color: #ffffff !important;
        font-weight: 750;
    }

    .tracker-page .aircraft-list span {
        color: rgba(210, 222, 247, 0.62) !important;
    }

    /* Small labels */
    .tracker-page .aircraft-list small {
        color: rgba(170, 190, 230, 0.48) !important;
        font-size: 0.68rem;
    }

    /* Icons */
    .tracker-page .aircraft-list i {
        color: #a9c6ff !important;
    }

/* ============================================================
   EMPTY / LOADING STATE
   ============================================================ */

.tracker-page .aircraft-empty {
    min-height: 220px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px dashed rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    box-sizing: border-box;
}

    .tracker-page .aircraft-empty .empty-icon {
        width: 54px;
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        background: rgba(105, 130, 255, 0.08);
        border: 1px solid rgba(135, 160, 255, 0.14);
        border-radius: 16px;
    }

        .tracker-page .aircraft-empty .empty-icon i {
            color: #9eb9ff !important;
            font-size: 20px;
        }

    .tracker-page .aircraft-empty strong {
        margin-bottom: 7px;
        color: #ffffff !important;
        font-size: 0.95rem;
        font-weight: 700;
    }

    .tracker-page .aircraft-empty span {
        max-width: 220px;
        color: rgba(200, 214, 242, 0.48) !important;
        font-size: 0.76rem;
        line-height: 1.55;
    }

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 850px) {

    .tracker-page .aircraft-list {
        max-height: 420px;
    }

    .tracker-page .aircraft-panel-header {
        padding: 18px 18px 16px;
    }

    .tracker-page .aircraft-search {
        margin: 14px 14px;
    }

    .tracker-page .aircraft-list {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 650px) {

    .tracker-page .aircraft-panel {
        border-radius: 18px !important;
    }

    .tracker-page .aircraft-list > div:not(.aircraft-empty),
    .tracker-page .aircraft-list > article,
    .tracker-page .aircraft-list > li {
        min-height: 66px;
        border-radius: 14px;
    }

    .tracker-page .aircraft-total {
        min-width: 38px;
        height: 38px;
        border-radius: 12px;
    }
}
/* ============================================================
   LEAFLET MAP - PROTECT MAP DIMENSIONS
   ============================================================ */

.tracker-page .tracker-map-panel {
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
}

.tracker-page .flight-map {
    width: 100% !important;
    height: 560px !important;
    min-height: 420px !important;
    position: relative;
    box-sizing: border-box;
}

    .tracker-page .flight-map .leaflet-container {
        width: 100% !important;
        height: 100% !important;
        background: #080d1a;
    }

/* =========================================================
   FLIGHTSCOPE TRACKER MODAL BACKDROP
   ========================================================= */

#trackerComingSoonDialog::backdrop {
    background: rgba(2, 5, 14, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Mobile sizing */

@media (max-width: 600px) {

    #trackerComingSoonDialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        border-radius: 24px !important;
    }
}
/* FlightScope themed scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(7, 11, 20, .6); }
::-webkit-scrollbar-thumb { background: rgba(99, 169, 255, .55); border-radius: 999px; border: 2px solid rgba(7, 11, 20, .9); }
::-webkit-scrollbar-thumb:hover { background: #8ac2ff; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: rgba(99, 169, 255, .6) rgba(7, 11, 20, .6); }
}