:root {
    --color-bg: #050a14;
    --color-card-bg: #1a1f2e;
    --color-card-bg-light: #23293a;
    --color-gold: #d4af37;
    --color-gold-shine: #f7e7ce;
    --color-text: #e0e6ed;
    --color-text-muted: #64748b;
    --color-accent: #38bdf8;
    /* Sky blue */

    --font-main: 'Outfit', sans-serif;
    --font-mono: 'Inter', monospace;
    /* Using Inter as mono-like for data */
}

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

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Canvas Background */
#bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Content Wrapper */
.content-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
}

/* Boarding Pass Container */
.boarding-pass {
    display: flex;
    width: 800px;
    max-width: 100%;
    height: 320px;
    background: var(--color-card-bg);
    border-radius: 16px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.boarding-pass:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

/* Main Section */
.pass-main {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--color-card-bg) 0%, var(--color-card-bg-light) 100%);
    position: relative;
}

/* Header */
.pass-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.airline-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.airline-name {
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--color-gold);
    font-size: 1.1rem;
}

.brand-motto {
    text-align: left;
    color: var(--color-gold);
    font-size: 0.7rem;
    letter-spacing: 4px;
    opacity: 0.6;
    margin-top: 0;
    /* Reduced from 10px */
    text-transform: uppercase;
}

.flight-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.status-label {
    font-size: 0.6rem;
    color: var(--color-text-muted);
    letter-spacing: 1px;
}

.status-container {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    /* Fixed height to ensure vertical centering */
}

.status-led {
    width: 8px;
    height: 8px;
    background-color: #fbbf24;
    /* Amber/Gold */
    border-radius: 50%;
    box-shadow: 0 0 8px #fbbf24;
    animation: pulse-led 2s infinite;
}

@keyframes pulse-led {
    0% {
        opacity: 1;
        box-shadow: 0 0 8px #fbbf24;
    }

    50% {
        opacity: 0.5;
        box-shadow: 0 0 2px #fbbf24;
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 8px #fbbf24;
    }
}

.status-value {
    font-family: var(--font-mono);
    color: var(--color-accent);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 0.9rem;
    line-height: 1;
    /* Ensure text is centered */
}

.blinking {
    /* Removed old blink, using LED now */
    animation: none;
}

/* Body */
.pass-body {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 20px;
    /* Added to shift details down */
}

.route-large {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.airport-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    /* Above line */
}

.code {
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

.city {
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: var(--color-text-muted);
    margin-top: 5px;
}

.flight-icon {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}

.route-line {
    position: absolute;
    width: 100%;
    height: 2px;
    /* White center, transparent edges */
    background: linear-gradient(90deg, transparent 0%, #ffffff 50%, transparent 100%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 1;
    /* Removed opacity 0.5 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.flight-icon svg {
    width: 32px;
    height: 32px;
    transform: rotate(90deg);
    opacity: 1;
    /* Increased from 0.8 */
    z-index: 2;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 8px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.label {
    font-size: 0.6rem;
    color: var(--color-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.value {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    /* Prevent wrapping */
}

/* Mobile Trigger */
.mobile-trigger {
    display: none;
    /* Hidden by default */
    margin-top: 20px;
    text-align: center;
    background: transparent;
    /* Removed background */
    padding: 5px;
    border: none;
    /* Removed border */
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.mobile-trigger:active {
    opacity: 1;
    transform: scale(0.98);
}

.serial-number {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin-top: 5px;
    font-weight: 400;
}

.mobile-barcode-strip {
    height: 15px;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    background: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.8) 0,
            rgba(255, 255, 255, 0.8) 2px,
            transparent 2px,
            transparent 4px,
            rgba(255, 255, 255, 0.8) 4px,
            rgba(255, 255, 255, 0.8) 5px,
            transparent 5px,
            transparent 8px,
            rgba(255, 255, 255, 0.8) 8px,
            rgba(255, 255, 255, 0.8) 12px,
            transparent 12px,
            transparent 13px,
            rgba(255, 255, 255, 0.8) 13px,
            rgba(255, 255, 255, 0.8) 14px,
            transparent 14px,
            transparent 16px,
            rgba(255, 255, 255, 0.8) 16px,
            rgba(255, 255, 255, 0.8) 19px,
            transparent 19px,
            transparent 22px);
    opacity: 0.8;
}

/* Footer (Nav) - Empty in card now */
.pass-footer {
    margin-top: auto;
}

/* Modern Navigation */
.modern-nav {
    display: flex;
    gap: 15px;
    background: rgba(20, 25, 40, 0.6);
    padding: 10px 15px;
    border-radius: 50px;
    /* Pill shape */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin-top: 100px;
    /* Increased from 40px */
    transition: all 0.3s ease;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text-muted);
    padding: 10px 20px;
    border-radius: 30px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.5));
}

.nav-text {
    display: flex;
    flex-direction: column;
}

.nav-title {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 1.2;
}

.nav-subtitle {
    font-size: 0.6rem;
    color: var(--color-text-muted);
    font-weight: 400;
    opacity: 0.8;
}

.nav-link:hover .nav-subtitle,
.nav-link.active .nav-subtitle {
    color: var(--color-gold);
}

/* Divider / Perforation */
.pass-divider {
    width: 0;
    border-left: 2px dashed rgba(0, 0, 0, 0.5);
    position: relative;
    background: var(--color-card-bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.notch-top,
.notch-bottom {
    width: 20px;
    height: 20px;
    background: var(--color-bg);
    /* Matches page background to look like a hole */
    border-radius: 50%;
    position: absolute;
    left: -11px;
    z-index: 2;
}

.notch-top {
    top: -10px;
}

.notch-bottom {
    bottom: -10px;
}

/* Stub Section */
.pass-stub {
    width: 220px;
    background: var(--color-card-bg-light);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.stub-header {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.stub-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.stub-logo svg {
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.3));
}

.airline-small {
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: var(--color-gold);
    font-weight: 600;
    opacity: 0.8;
}

.stub-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stub-route {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.stub-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stub-item {
    display: flex;
    justify-content: space-between;
}

.barcode {
    height: 55px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
}

.bars {
    width: 100%;
    height: 40px;
    background: repeating-linear-gradient(90deg,
            #fff 0,
            #fff 2px,
            transparent 2px,
            transparent 4px,
            #fff 4px,
            #fff 5px,
            transparent 5px,
            transparent 8px,
            #fff 8px,
            #fff 12px,
            transparent 12px,
            transparent 13px,
            #fff 13px,
            #fff 14px,
            transparent 14px,
            transparent 16px,
            #fff 16px,
            #fff 19px,
            transparent 19px,
            transparent 22px);
}

.barcode-number {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 4px;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Bottom Message */
.bottom-message {
    text-align: center;
}

.bottom-message h2 {
    font-size: 1.5rem;
    letter-spacing: 5px;
    color: var(--color-gold);
    margin-bottom: 10px;
    font-weight: 300;
}

.bottom-message p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 850px) {
    .content-wrapper {
        padding: 10px;
        gap: 20px;
    }

    .boarding-pass {
        flex-direction: column;
        height: auto;
        width: 100%;
        max-width: 340px;
        /* Narrower to fit screens */
        margin: 0 auto;
    }

    .pass-main {
        padding: 20px;
        border-radius: 16px;
        /* Full radius since stub is gone */
    }

    /* Header Adjustments */
    .airline-name {
        font-size: 0.9rem;
        /* Smaller logo text */
    }

    .status-value {
        font-size: 0.7rem;
        /* Smaller status text */
    }

    .status-label {
        font-size: 0.5rem;
    }

    .status-led {
        width: 6px;
        height: 6px;
    }

    .code {
        font-size: 2.5rem;
        /* Smaller airport codes */
    }

    .route-large {
        padding: 0;
    }

    /* Hide Stub and Divider on Mobile */
    .pass-divider,
    .pass-stub {
        display: none;
    }

    /* Show Mobile Trigger */
    .mobile-trigger {
        display: block;
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns for cleaner look */
        gap: 10px;
    }

    /* Center Motto */
    .brand-motto {
        text-align: center;
        margin-top: 5px;
    }

    /* Vertical Stack Nav */
    .modern-nav {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        border-radius: 16px;
        padding: 10px;
        margin-top: 20px;
    }

    .nav-link {
        width: 100%;
        justify-content: flex-start;
        /* Left align */
        padding: 12px 20px;
        background: rgba(255, 255, 255, 0.03);
    }

    .nav-icon svg {
        width: 18px;
        height: 18px;
    }

    .nav-text {
        align-items: flex-start;
    }

    .nav-title {
        font-size: 0.8rem;
    }

    .nav-subtitle {
        display: block;
        /* Show subtitle again for fuller look */
        font-size: 0.6rem;
    }
}

/* Easter Egg Animation */
.takeoff-animation {
    animation: takeoff 1.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

@keyframes takeoff {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    20% {
        transform: translateY(20px) rotate(-2deg);
        /* Anticipation */
    }

    100% {
        transform: translateY(-1000px) rotate(10deg) scale(0.8);
        opacity: 0;
    }
}

.fade-in {
    animation: fadeIn 1.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Luck Message Overlay */
.luck-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    display: grid !important;
    place-items: center !important;
    z-index: 2147483647 !important;
    background: rgba(0, 0, 0, 0.85);
    pointer-events: auto;
    /* Catch clicks */

    /* Smooth transition */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.luck-overlay.hidden {
    display: grid !important;
    /* Keep layout for transition */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.luck-content {
    text-align: center;
    animation: fadeIn 0.5s ease forwards;
    background: rgba(0, 0, 0, 0.8);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid var(--color-gold);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);

    backdrop-filter: blur(10px);
    pointer-events: auto;
}

@keyframes fadeInOpacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.luck-title {
    color: var(--color-gold);
    letter-spacing: 3px;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.luck-reward {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.luck-counter {
    font-family: var(--font-mono);
    color: var(--color-accent);
    font-size: 1rem;
    margin-bottom: 10px;
}

.luck-flavor {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.9rem;
}

/* Article Tables */
.wiki-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    overflow: hidden;
    /* For radius to work on headers */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.wiki-table thead {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 2px solid rgba(212, 175, 55, 0.2);
}

.wiki-table th {
    padding: 15px;
    text-align: left;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-gold);
    letter-spacing: 0.5px;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.wiki-table td {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: top;
    color: var(--color-text);
}

.wiki-table tr:last-child td {
    border-bottom: none;
}

.wiki-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Table Utilities */
.badge-cell {
    font-style: italic;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.status-active {
    color: #4ade80;
    /* Green */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.status-disbanded {
    color: #ef4444;
    /* Red */
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.8rem;
    opacity: 0.8;
}

.note {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0.8;
    line-height: 1.4;
}

/* Mobile Table Responsiveness */
@media (max-width: 768px) {
    .wiki-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .wiki-table th,
    .wiki-table td {
        padding: 10px;
    }

    .note {
        white-space: normal;
        min-width: 150px;
    }
}

/* Bad Luck Styles */
.luck-overlay.bad-luck .luck-content {
    border-color: #ef4444;
    box-shadow: 0 0 50px rgba(239, 68, 68, 0.4);
}

.luck-overlay.bad-luck .luck-title {
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.luck-overlay.bad-luck .luck-reward {
    color: #ef4444;
    font-size: 2.5rem;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
}

.luck-overlay.bad-luck .luck-counter {
    color: #ef4444;
}

.luck-overlay.bad-luck .luck-flavor {
    color: #fca5a5;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* =========================================
   RESOURCES PAGE STYLES (2-Column Redesign)
   ========================================= */

.resources-page {
    max-width: 1200px;
}

.resources-header {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: 20px;
}

.resources-grid-2col {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    width: 100%;
    height: 500px;
    /* Fixed height for alignment */
}

/* Topics Column (Left) */
.topics-column {
    background: rgba(26, 31, 46, 0.6);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

.col-title {
    font-size: 0.9rem;
    color: var(--color-gold);
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.topic-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.topic-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.group-title {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.topic-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.topic-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.topic-card.active {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--color-gold);
}

.topic-icon {
    font-size: 1.2rem;
}

.topic-text {
    display: flex;
    flex-direction: column;
}

.topic-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
}

.topic-sub {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.topic-card.active .topic-label {
    color: var(--color-gold);
}

/* Content Column (Right) */
.content-column {
    background: rgba(26, 31, 46, 0.8);
    border-radius: 16px;
    padding: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow-y: auto;
    position: relative;
}

.article-content {
    animation: fadeIn 0.3s ease;
}

.article-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.article-title {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 10px;
}

.article-meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-gold);
}

.article-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
}

.article-body h3 {
    color: var(--color-accent);
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.article-body ul {
    margin-left: 20px;
    margin-bottom: 15px;
    color: var(--color-text-muted);
}

.article-body li {
    margin-bottom: 5px;
}

.placeholder-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Responsive */
@media (max-width: 850px) {
    .resources-grid-2col {
        grid-template-columns: 1fr;
        height: auto;
    }

    .topics-column {
        height: auto;
        max-height: 300px;
    }

    .content-column {
        height: 500px;
    }
}

/* --- Overrides for Navigation and Article Styling --- */
.modern-nav {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    background: rgba(26, 31, 46, 0.8);
    backdrop-filter: blur(12px);
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    margin-top: 0;
}

.article-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.article-title {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 15px;
}

.article-meta-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    text-align: right;
}

.article-meta {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--color-gold);
    font-weight: 500;
}

.article-author {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* --- Redesigned Article Header (Modern Badge) --- */
.article-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 25px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    text-align: left;
}

.article-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.article-meta-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    width: 100%;
    flex-wrap: wrap;
}

.article-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 20px;
    color: var(--color-gold);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.article-author {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: normal;
    font-family: var(--font-main);
}

/* --- Layout Fixes (Nav & Columns) --- */
.nav-text {
    white-space: nowrap;
}

.resources-grid-2col {
    height: 80vh;
    min-height: 600px;
}

.topics-column,
.content-column {
    border-radius: 4px;
    /* Sharper look */
}

.content-column {
    height: 100%;
}

.topics-column {
    height: 100%;
}

/* --- Layout Refinement Round 2 --- */
.resources-grid-2col {
    height: 70vh;
    min-height: 500px;
}

.topics-column,
.content-column {
    border-radius: 16px;
}

.article-meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-gold);
}

.article-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
}

.article-body h3 {
    color: var(--color-accent);
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.article-body ul {
    margin-left: 20px;
    margin-bottom: 15px;
    color: var(--color-text-muted);
}

.article-body li {
    margin-bottom: 5px;
}

.placeholder-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Responsive */
@media (max-width: 850px) {
    .resources-grid-2col {
        grid-template-columns: 1fr;
        height: auto;
    }

    .topics-column {
        height: auto;
        max-height: 300px;
    }

    .content-column {
        height: 500px;
    }
}

/* --- Overrides for Navigation and Article Styling --- */
.modern-nav {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    background: rgba(26, 31, 46, 0.8);
    backdrop-filter: blur(12px);
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    margin-top: 0;
}

.article-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.article-title {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 15px;
}

.article-meta-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    text-align: right;
}

.article-meta {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--color-gold);
    font-weight: 500;
}

.article-author {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* --- Redesigned Article Header (Modern Badge) --- */
.article-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 25px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    text-align: left;
}

.article-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.article-meta-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    width: 100%;
    flex-wrap: wrap;
}

.article-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 20px;
    color: var(--color-gold);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.article-author {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: normal;
    font-family: var(--font-main);
}

/* --- Layout Fixes (Nav & Columns) --- */
.nav-text {
    white-space: nowrap;
}

.resources-grid-2col {
    height: 80vh;
    min-height: 600px;
}

.topics-column,
.content-column {
    border-radius: 4px;
    /* Sharper look */
}

.content-column {
    height: 100%;
}

.topics-column {
    height: 100%;
}

/* --- Layout Refinement Round 2 --- */
.resources-grid-2col {
    height: 70vh;
    min-height: 500px;
}

.topics-column,
.content-column {
    border-radius: 16px;
}

.modern-nav {
    border-radius: 50px;
}


/* --- Consolidated Mobile Overrides (Sticky Header + Modern Dropdown) --- */
@media (max-width: 850px) {

    /* 1. Sticky Header */
    .resources-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: rgba(20, 25, 40, 0.95);
        /* Dark Glass */
        backdrop-filter: blur(15px);
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        margin-top: 0 !important;
    }

    /* Ensure Logo/Text is visible */
    .airline-logo {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .nav-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* 2. Page Layout Adjustments */
    .resources-page {
        padding-top: 100px !important;
        /* Push content down below fixed header */
    }

    .resources-grid-2col {
        display: flex;
        flex-direction: column;
        height: auto !important;
        gap: 0 !important;
        padding-bottom: 0;
    }

    .topics-column {
        display: none !important;
    }

    /* 3. Modern Dropdown */
    .mobile-topic-selector {
        display: block;
        width: 100%;
        margin-bottom: 25px;
        margin-top: 10px;
        padding: 0 10px;
        /* Side padding */
    }

    #topic-dropdown {
        width: 100%;
        padding: 14px 20px;
        background-color: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(212, 175, 55, 0.3);
        border-radius: 50px;
        /* Pill shape */
        color: var(--color-gold);
        font-family: var(--font-mono);
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        appearance: none;
        -webkit-appearance: none;
        /* Custom Gold Arrow */
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23D4AF37%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 20px center;
        background-size: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
    }

    #topic-dropdown:focus {
        outline: none;
        border-color: var(--color-gold);
        background-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }

    /* 4. Content & Nav */
    .content-column {
        flex-grow: 1;
        min-height: 400px;
        height: auto !important;
        overflow: visible !important;
        margin-bottom: 160px !important;
        /* Space for nav */
        border-radius: 16px;
    }

    .content-wrapper {
        padding-bottom: 0;
    }

    /* 5. Navigation Bar */
    .modern-nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        padding: 5px;
        width: 95%;
        max-width: 450px;
        bottom: 20px;
        justify-content: center;
        border-radius: 50px;
        transition: all 0.3s ease;
    }

    .nav-link {
        flex-direction: column;
        gap: 2px;
        padding: 5px 2px;
        margin: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        justify-content: center;
        align-items: center;
    }

    .nav-text {
        text-align: center;
        width: 100%;
        white-space: normal;
        max-width: none;
        margin-left: 0;
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        transform: translateY(-5px);
        transition: all 0.3s ease;
    }

    .nav-title {
        font-size: 0.55rem;
        letter-spacing: 0.5px;
    }

    .nav-subtitle {
        font-size: 0.5rem;
        white-space: normal;
        line-height: 1.1;
        margin-top: 2px;
    }

    .modern-nav:hover,
    .modern-nav:active {
        padding: 10px 5px;
    }

    .modern-nav:hover .nav-text,
    .modern-nav:active .nav-text {
        max-height: 60px;
        opacity: 1;
        margin-top: 5px;
        transform: translateY(0);
    }
}

/* End of @media (max-width: 850px) at 1493 */

/* Hide Dropdown on Desktop */
.mobile-topic-selector {
    display: none;
}

/* =========================================
   ARTICLE TABLE STYLES
   ========================================= */

.wiki-table {
    width: 100%;
    border-collapse: separate;
    /* Changed for border-radius */
    border-spacing: 0;
    margin: 20px 0;
    font-size: 0.9rem;
    background: rgba(26, 31, 46, 0.6);
    /* Darker, more on-brand */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.wiki-table th,
.wiki-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.wiki-table th {
    background: rgba(212, 175, 55, 0.15);
    /* Stronger Gold tint */
    color: var(--color-gold);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.wiki-table tr:last-child td {
    border-bottom: none;
}

.wiki-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Pulse Animation for Status */
@keyframes pulse-status {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(0.98);
        text-shadow: 0 0 4px currentColor;
    }

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

/* Specific Column Styling */
/* Squadron Number (First Column) */
/* Specific Column Styling */
/* Squadron Number (First Column) */
.wiki-table td:first-child {
    font-weight: 700;
    color: var(--color-gold);
    font-family: var(--font-mono);
    letter-spacing: 1px;
    white-space: nowrap;
    /* Fixes "1MS" wrapping */
}

/* Target the Platform/History column (usually 4th, but check headers) */
/* We'll use a more generic approach: cells with long text or specific content */
.wiki-table td:nth-child(4) {
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(224, 230, 237, 0.9);
}

/* Exception for tables with fewer columns where Platform might be 3rd */
/* But for now, the user asked specifically about the squadron article which has 6 cols mostly */

.badge-cell {
    font-style: italic;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.wiki-table td.status-active {
    color: #4ade80;
    /* Green */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
}

.wiki-table td.status-disbanded {
    color: #f87171;
    /* Red */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(248, 113, 113, 0.3);
}

.note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: block;
    margin-top: 4px;
    font-style: italic;
    opacity: 0.8;
}

/* Locations Table Specifics */
.locations-table td:first-child {
    white-space: normal;
    /* Allow wrapping for location names */
    min-width: 150px;
    width: 20%;
}

.locations-table td:nth-child(3) {
    width: 40%;
    /* Give description more space */
    min-width: 250px;
}

/* Coordinates and Recommended Lens Columns */
.locations-table td:nth-child(2),
.locations-table td:nth-child(5) {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

/* Mobile Table Responsiveness */
@media (max-width: 768px) {
    .wiki-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
    }

    .wiki-table th,
    .wiki-table td {
        padding: 10px;
        white-space: nowrap;
        /* Force horizontal scroll if content is wide */
    }

    .note {
        white-space: normal;
        min-width: 150px;
    }
}

/* Blue Section Title */
.blue-section-title {
    color: #38bdf8;
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(56, 189, 248, 0.3);
    padding-bottom: 5px;
    display: inline-block;
}

/* --- Location Cards (New Layout) --- */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Planespotting Law Styles */
.zone-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

.zone {
    flex: 1;
    min-width: 280px;
    padding: 20px;
    border-radius: 4px;
    color: #94a3b8;
    /* Muted text color for body */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: rgba(26, 31, 46, 0.6);
    /* Default dark bg base */
}

/* Green Zone */
.zone-green {
    background: rgba(16, 185, 129, 0.1);
    border-left: 5px solid #10b981;
}

.zone-green h3 {
    color: #34d399;
    /* Green title */
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

.zone-green strong {
    color: #d1fae5;
}

/* Grey Zone */
.zone-grey {
    background: rgba(148, 163, 184, 0.1);
    border-left: 5px solid #94a3b8;
}

.zone-grey h3 {
    color: #e2e8f0;
    /* Grey/White title */
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.zone-grey strong {
    color: #f1f5f9;
}

/* Red Zone */
.zone-red {
    background: rgba(239, 68, 68, 0.1);
    border-left: 5px solid #ef4444;
}

.zone-red h3 {
    color: #fca5a5;
    /* Red title */
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.zone-red strong {
    color: #fee2e2;
}

.zone h3 {
    margin-top: 0;
    padding-bottom: 10px;
    font-size: 1.2rem;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.scenario-card {
    background: rgba(26, 31, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease;
    border-top: 5px solid #38bdf8;
    /* Blue accent matching site theme */
    display: flex;
    flex-direction: column;
}

.scenario-card:hover {
    transform: translateY(-5px);
}

.scenario-header {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    font-weight: 700;
    font-size: 1.1em;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.scenario-body {
    padding: 20px;
    flex-grow: 1;
    color: #94a3b8;
}

.situation-text {
    font-style: italic;
    color: #cbd5e1;
    margin-bottom: 15px;
    font-size: 0.95em;
    display: block;
}

.step {
    display: flex;
    margin-bottom: 15px;
    font-size: 0.95em;
}

.step-number {
    font-weight: bold;
    color: #38bdf8;
    margin-right: 15px;
    min-width: 20px;
}

.why-box {
    margin-top: 15px;
    background-color: rgba(16, 185, 129, 0.1);
    /* Green tint */
    padding: 12px;
    border-radius: 6px;
    font-size: 0.9em;
    color: #6ee7b7;
    border-left: 3px solid #10b981;
}

.location-card {
    background: rgba(26, 31, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.location-card:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.3);
}

.location-card h3 {
    color: var(--color-gold);
    font-size: 1.1rem;
    margin-bottom: 5px;
    margin-top: 0;
}

.location-card .subtitle {
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-family: var(--font-mono);
    margin-bottom: 15px;
}

.location-card .description {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

.location-card .meta-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
    font-size: 0.85rem;
    color: var(--color-text-dim);
}

.location-card .meta-label {
    color: var(--color-gold);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
    margin-top: 10px;
}

.location-card .meta-label:first-child {
    margin-top: 0;
}

/* Bad Luck Styles */
.luck-overlay.bad-luck .luck-content {
    border-color: #ef4444 !important;
    box-shadow: 0 0 50px rgba(239, 68, 68, 0.4) !important;
}

.luck-overlay.bad-luck .luck-title {
    color: #ef4444 !important;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5) !important;
}

.luck-overlay.bad-luck .luck-reward {
    color: #ef4444 !important;
    font-size: 2.5rem;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
}

.luck-overlay.bad-luck .luck-counter {
    color: #ef4444 !important;
}

.luck-overlay.bad-luck .luck-flavor {
    color: #fca5a5 !important;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* =========================================
   CONTRIBUTORS PAGE STYLES
   ========================================= */

.contributors-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding-top: 0;
    height: 70vh;
}

.roster-column {
    background: rgba(26, 31, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.section-header {
    color: var(--color-gold);
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding-bottom: 10px;
}

.roster-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
    overflow-y: auto;
}

.roster-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: transparent;
    border: 1px solid transparent;
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all 0.2s ease;
}

.roster-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.roster-item.active {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--color-gold);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #475569;
    /* Inactive grey */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.roster-item.active .status-dot {
    background-color: #4ade80;
    /* Active green */
    box-shadow: 0 0 10px #4ade80;
}

.roster-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.roster-name {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--font-main);
}

.roster-role {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.arrow-icon {
    color: var(--color-gold);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.roster-item.active .arrow-icon {
    opacity: 1;
    transform: translateX(0);
}

.roster-footer {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.roster-footer p {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-dim);
    margin: 0;
}

/* -- Right Column: Profile -- */
.profile-column {
    height: 100%;
    display: flex;
    justify-content: center;
    /* Center card */
    align-items: flex-start;
}

#profile-display {
    width: 100%;
    max-width: 600px;
    transition: opacity 0.2s ease;
}

/* Profile Card Styling */
.pilot-card {
    background: rgba(16, 20, 30, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    position: relative;
    backdrop-filter: blur(10px);
}

/* Card Header with "Tech" stripes */
.card-header {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(26, 31, 46, 0) 100%);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.security-level {
    font-family: var(--font-mono);
    color: #4ade80;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.callsign {
    font-family: var(--font-mono);
    color: var(--color-gold);
    font-size: 1rem;
    letter-spacing: 2px;
    font-weight: 700;
}

.card-body {
    padding: 40px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.photo-placeholder {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(212, 175, 55, 0.5);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-info {
    flex-grow: 1;
    display: block;
}

.profile-info .name {
    font-size: 2rem;
    margin: 0 0 5px 0;
    color: #fff;
    line-height: 1;
}

.profile-info .role {
    color: var(--color-gold);
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.profile-info .bio {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px 0;
}

.stat {
    text-align: center;
}

.stat-value {
    display: block;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.stat-label {
    color: var(--color-text-dim);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.social-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    text-decoration: none;
    color: #e2e8f0;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.social-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* Animation Utils */
.fade-in {
    animation: cardEnter 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    opacity: 0;
    transform: translateY(10px);
}

@keyframes cardEnter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.arrow-icon {
    color: var(--color-gold);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.roster-item.active .arrow-icon {
    opacity: 1;
    transform: translateX(0);
}

.roster-footer {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.roster-footer p {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-dim);
    margin: 0;
}

/* -- Right Column: Profile -- */
.profile-column {
    height: 100%;
    display: flex;
    justify-content: center;
    /* Center card */
    align-items: flex-start;
}

#profile-display {
    width: 100%;
    max-width: 600px;
    transition: opacity 0.2s ease;
}

/* Profile Card Styling */
.pilot-card {
    background: rgba(16, 20, 30, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    position: relative;
    backdrop-filter: blur(10px);
}

/* Card Header with "Tech" stripes */
.card-header {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(26, 31, 46, 0) 100%);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.security-level {
    font-family: var(--font-mono);
    color: #4ade80;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.callsign {
    font-family: var(--font-mono);
    color: var(--color-gold);
    font-size: 1rem;
    letter-spacing: 2px;
    font-weight: 700;
}

.card-body {
    padding: 40px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.photo-placeholder {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(212, 175, 55, 0.5);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-body.empty-state {
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.profile-info {
    flex-grow: 1;
    display: block;
}

.profile-info .name {
    font-size: 2rem;
    margin: 0 0 5px 0;
    color: #fff;
    line-height: 1;
}

.profile-info .role {
    color: var(--color-gold);
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.profile-info .bio {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px 0;
}

.stat {
    text-align: center;
}

.stat-value {
    display: block;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.stat-label {
    color: var(--color-text-dim);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.social-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    text-decoration: none;
    color: #e2e8f0;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.social-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* Animation Utils */
.fade-in {
    animation: cardEnter 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    opacity: 0;
    transform: translateY(10px);
}

@keyframes cardEnter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsive */
@media (max-width: 850px) {
    .contributors-layout {
        grid-template-columns: 1fr;
        height: auto;
        padding-bottom: 150px;
        /* Nav space */
        display: block;
        /* Stack */
    }

    .roster-column {
        height: auto;
        margin-bottom: 30px;
    }

    .card-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .social-links {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Close Button in Pilot Card */
.close-profile-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-profile-btn:hover {
    color: #ef4444;
    /* Red for close */
    background: rgba(239, 68, 68, 0.1);
    transform: rotate(90deg);
}

/* Clickable Author Link in Articles */
.article-author-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    margin: 0 5px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50px;
    color: var(--color-gold);
    text-decoration: none;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.article-author-link:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--color-gold);
    color: #fff;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
    transform: translateY(-1px);
}

/* Contributors Header - Flex item, no grid prop needed */
.contributors-header {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: 20px;
    margin-bottom: 0;
    /* Let wrapper gap handle spacing */
}

/* --- EMERGENCY FIX BLOCK --- */
}
.modern-nav {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    background: rgba(26, 31, 46, 0.8);
    backdrop-filter: blur(12px);
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    margin-top: 0;
}

.pilot-card {
    background: rgba(16, 20, 30, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


.card-body.empty-state {
    justify-content: center;
    align-items: center;
    min-height: 300px;
    display: flex;
}


/* --- SUBTITLE REFINEMENT --- */
.article-meta {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--color-gold);
    font-size: 0.9rem;
    letter-spacing: 2px;
    font-weight: 700;
}

.article-author-link {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 5px;
    color: var(--color-text-muted) !important;
    font-weight: 400;
    text-decoration: none;
    font-style: italic;
}

.article-author-link:hover {
    color: #fff !important;
    text-decoration: underline;
    transform: none !important;
    box-shadow: none !important;
    background: none !important;
}


/* --- REFACTOR: Security Level -> Personnel Role --- */
.personnel-role {
    font-family: var(--font-mono);
    color: #4ade80;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Scoping specifically for roster items if they need different styling, otherwise they inherit above */
.roster-info .personnel-role {
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
}