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

body {
    background: #0A0C12;
    font-family: 'Rajdhani', 'Inter', system-ui, sans-serif;
    color: #EDF2F8;
    line-height: 1.5;
    overflow-x: hidden;
}

:root {
    --bg-primary: #05070c;
    --bg-secondary: #0E121B;
    --surface: #161C27;
    --surface-hover: #1F2838;
    --border-subtle: #2A3342;
    --accent: #00C2FF;
    --accent-dim: #0F4C6F;
    --text-main: #F0F4FA;
    --text-muted: #9AAEBF;
    --gold: #E6B422;
    --success: #2E7D32;
    --warning: #ED6C02;
    --info: #0288D1;
}

/* Navbar */
.navbar {
    background: rgba(7, 10, 16, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.8rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.logo-group { display: flex; align-items: center; gap: 0.8rem; }
.nav-logo { width: 50px; height: 50px; object-fit: contain; border-radius: 8px; }
.nav-logo2 { width: 50px; height: 50px; object-fit: contain; border-radius: 8px; }
.nav-divider { width: 2px; height: 35px; background: linear-gradient(180deg, transparent, var(--accent), var(--gold), transparent); }
.nav-links { display: flex; gap: 1.8rem; list-style: none; }
.nav-links a {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
    transition: 0.2s;
}
.nav-links a:hover, .nav-links a.active-page { border-bottom-color: var(--accent); color: white; }
.mobile-menu { display: none; font-size: 1.3rem; cursor: pointer; color: white; }

.logo-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1px;
}

.logo-sub {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

@media (max-width: 760px) {
    .logo-text { display: none; }
}

/* Hero */
.hero {
    min-height: 70vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: brightness(0.4);
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5));
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
}
.hero-content h1 {
    font-family: 'Rajdhani', monospace;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.hero-badge {
    background: rgba(0,194,255,0.15);
    border: 1px solid var(--accent);
    display: inline-block;
    padding: 0.3rem 1.2rem;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    border-radius: 30px;
}
.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 1.5s ease, filter 1.5s ease;
}

.slide.active {
    opacity: 1;
    filter: blur(0px);
}

.hero-content p { font-size: 1rem; color: var(--text-muted); max-width: 550px; margin: 0 auto; }

/* Container & Cards */
.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }
.missions-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 2rem; }
.section-title {
    font-family: 'Rajdhani', monospace;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--accent);
    padding-left: 1rem;
}
.sharp-card {
    border: 1px solid var(--border-subtle);
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
}

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.stat-card { text-align: center; padding: 1.5rem; }
.stat-card i { font-size: 2rem; color: var(--accent); }
.stat-card h3 { font-size: 0.9rem; margin: 0.5rem 0; }
.stat-card p { font-size: 1.8rem; font-weight: 700; color: var(--gold); }

/* NAVLOG */
.navlog-container {
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}
.navlog-header, .navlog-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr 1fr;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
}
.navlog-header {
    background: rgba(0,0,0,0.4);
    font-weight: 700;
    color: var(--accent);
    border-bottom: 1px solid var(--border-subtle);
}
.navlog-row {
    border-bottom: 1px solid var(--border-subtle);
    transition: 0.2s;
}
.navlog-row:hover { background: var(--surface-hover); }
.nl-col { word-break: break-word; }

/* Mission Filters */
.mission-filters { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.filter-btn {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    color: white;
    padding: 0.4rem 1.2rem;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: 0.2s;
    font-family: 'Rajdhani', sans-serif;
}
.filter-btn.active, .filter-btn:hover { background: var(--accent); border-color: var(--accent); color: black; }

/* Live Flight Tracker */
.live-flights-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.flight-card {
    padding: 1rem 1.2rem;
    border-left: 3px solid #00ff88;
}

.flight-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.flight-callsign {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

.flight-member {
    font-size: 0.8rem;
    color: var(--accent);
}

.flight-route {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 0.4rem;
}

.flight-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.flight-stats span { display: flex; align-items: center; gap: 0.3rem; }

.no-flights {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.last-updated {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: 0.5rem;
}

.loading-text {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

/* Mission Status */
.mission-status {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
}
.status-planned { background: var(--info); color: white; }
.status-completed { background: var(--success); color: white; }
.status-pending { background: var(--warning); color: black; }

/* Roster */
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.member-card { padding: 1.2rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 10px; }
.member-rank { font-family: 'Rajdhani', sans-serif; color: var(--gold); font-size: 1.0rem; }
.member-callsign { font-size: 1.2rem; font-weight: 700; margin: 0.3rem 0; }
.member-name { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.5rem; }

.community-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.member-card { padding: 1.2rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 10px; }
.member-rank { font-family: 'Rajdhani', sans-serif; color: var(--gold); font-size: 1.0rem; }
.member-callsign { font-size: 1.2rem; font-weight: 700; margin: 0.3rem 0; }
.member-name { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.member-avatar {
    width: 90px;
    height: 90px;
    margin: 0 auto 1rem auto;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--accent);
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* shows face rather than chest */
}

/* Fleet */
/* Fleet Filters */
.fleet-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.fleet-filter-btn {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    padding: 0.5rem 1.5rem;
    border-radius: 40px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.fleet-filter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

.fleet-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    box-shadow: 0 0 10px rgba(0,194,255,0.3);
}

/* Fleet Grid */
.fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.8rem;
}

.fleet-card {
    background: var(--surface);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--border-subtle);
}

.fleet-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

.fleet-card:hover .fleet-img {
    transform: scale(1.02);
}

.fleet-info {
    padding: 1.2rem;
    border-top: 1px solid var(--border-subtle);
}

.fleet-info h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.fleet-info p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.fleet-category {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.category-fighter {
    background: rgba(244,67,54,0.15);
    border: 1px solid #F44336;
    color: #EF9A9A;
}

.category-transport {
    background: rgba(33,150,243,0.15);
    border: 1px solid #2196F3;
    color: #90CAF9;
}

.category-trainer {
    background: rgba(76,175,80,0.15);
    border: 1px solid #4CAF50;
    color: #A5D6A7;
}

.category-aew {
    background: rgba(156,39,176,0.15);
    border: 1px solid #9C27B0;
    color: #CE93D8;
}

.fleet-badge {
    display: inline-block;
    background: var(--accent-dim);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    margin-left: 0.5rem;
}

/* Missions List */
.missions-list { display: flex; flex-direction: column; gap: 1rem; }
.mission-item {
    background: var(--surface);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-left: 3px solid var(--accent);
}
.mission-date { font-size: 0.7rem; color: var(--gold); }
.mission-title { font-size: 1rem; font-weight: 600; margin: 0.2rem 0; }
.mission-desc { font-size: 0.8rem; color: var(--text-muted); font-family: 'Noto Sans Thai', sans-serif; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.gallery-item {
    aspect-ratio: 4/3;
    background: #1a1f2a;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border: 1px solid var(--border-subtle);
    transition: 0.2s;
}
.gallery-item:hover { transform: scale(1.02); border-color: var(--accent); }

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
    animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-content {
    max-width: 500px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 20px;
    position: relative;
    border: 1px solid var(--accent);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.modal-content::-webkit-scrollbar {
    width: 4px;
}

.modal-content::-webkit-scrollbar-track {
    background: var(--border-subtle);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 18px;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: 0.2s;
    z-index: 10;
}

.modal-close:hover {
    color: white;
    transform: scale(1.1);
}

.modal-body {
    padding: 1.8rem;
}

.modal-close-btn {
    background: var(--accent);
    border: none;
    padding: 0.5rem 1.8rem;
    border-radius: 30px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.2s;
}

.modal-close-btn:hover {
    background: #00d4ff;
    transform: scale(1.02);
}

/* Join Section */
.join-section { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2rem; padding: 2rem 1.5rem; background: linear-gradient(135deg, #0a0c12, #0E121B); }
.join-container, .event-container { flex: 1 1 380px; max-width: 700px; padding: 2rem; background: var(--surface); border-radius: 20px; border: 1px solid var(--accent); }
.join-title, .event-title { font-size: 1.6rem; font-family: 'Orbitron', monospace; margin-bottom: 1rem; }
.join-badge, .event-badge { color: var(--accent); margin-bottom: 0.5rem; }
.btn-join-primary, .btn-join-secondary, .btn-event-primary, .btn-event-secondary {
    display: inline-block;
    padding: 0.7rem 1.8rem;
    border-radius: 40px;
    text-decoration: none;
    font-weight: bold;
    margin: 0.5rem;
}
.btn-join-primary, .btn-event-primary { background: var(--accent); color: black; }
.btn-join-secondary, .btn-event-secondary { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.join-features, .event-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.join-features span { font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.event-features span { font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.3rem;}
.event-desc { font-size: 0.9rem; color: var(--text-muted); margin-top: 1rem; font-family: 'Noto Sans Thai', sans-serif; padding-bottom: 2rem;}

.Event-section { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; width: 100%; }

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    visibility: hidden;
    opacity: 0;
}
.lightbox.active { visibility: visible; opacity: 1; }
.lightbox-img { max-width: 85%; max-height: 85%; border-radius: 12px; border: 2px solid var(--accent); }
.close-lightbox {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    cursor: pointer;
    color: white;
}

footer { text-align: center; padding: 1.5rem; border-top: 1px solid var(--border-subtle); font-size: 0.7rem; color: var(--text-muted); }
footer a { color: var(--accent); text-decoration: none; }

.hidden-page { display: none; }
.page-content { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
    .hero-content h1 { font-size: 1.8rem; }
    .stats-grid { grid-template-columns: 1fr; }
    .navlog-header, .navlog-row { grid-template-columns: 1fr; gap: 0.3rem; text-align: center; }
    .join-title { font-size: 1.2rem; }
}   

/* ===== REPORT FLIGHT MODAL ===== */
.report-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 999;
    align-items: center;
    justify-content: center;
}

.report-modal-overlay.active {
    display: flex;
    animation: modalFadeIn 0.2s ease;
}

.report-modal-box {
    width: 90%;
    max-width: 620px;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 194, 255, 0.15);
}

.report-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.2rem;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--border-subtle);
}

.report-modal-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}
.report-modal-close:hover {
    color: white;
    background: rgba(255, 255, 255, 0.08);
}

.report-modal-iframe {
    width: 100%;
    height: 500px;
    border: none;
    display: block;
    background: #fff;
}


/* =====================================================================
   v2.0 — admin-managed content, on-site registration, accessibility
   ===================================================================== */
[hidden] { display: none !important; }

/* Elements that became real <button>s for keyboard access */
.mobile-menu, .modal-close, .close-lightbox, .lightbox-nav {
    background: none;
    border: 0;
    font-family: inherit;
    line-height: 1;
}
.mobile-menu { min-width: 40px; min-height: 40px; }
button.fleet-card {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
    color: inherit;
    font: inherit;
}
button.gallery-item {
    padding: 0;
    overflow: hidden;
    width: 100%;
    color: inherit;
}
.fleet-card:focus-visible, .gallery-item:focus-visible, .nav-links a:focus-visible,
.mobile-menu:focus-visible, .reg-radio input:focus-visible + span, .reg-pdpa-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.no-data { color: var(--text-muted); padding: 1.5rem 0; }

/* Lightbox navigation */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    padding: 1rem;
    opacity: 0.75;
}
.lightbox-nav:hover { opacity: 1; color: var(--accent); }
.lightbox-nav.prev { left: 1rem; }
.lightbox-nav.next { right: 1rem; }

/* ---------- Registration modal ---------- */
.reg-box { max-width: 720px; max-height: 92vh; display: flex; flex-direction: column; }
.reg-scroll { overflow-y: auto; padding: 1.4rem 1.5rem 1.6rem; }
.reg-intro { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.2rem; font-family: 'Inter', 'Noto Sans Thai', sans-serif; }
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.reg-field { margin-bottom: 1rem; border: 0; min-width: 0; }
.reg-field label, .reg-field legend {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.4px;
    margin-bottom: 0.35rem;
    color: var(--text-main);
}
.reg-field .req, .reg-pdpa .req { color: #ff6b6b; }
.reg-field input[type=text], .reg-field input[type=email], .reg-field textarea {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
    color: var(--text-main);
    font-family: 'Inter', 'Noto Sans Thai', sans-serif;
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.reg-field textarea { resize: vertical; min-height: 96px; }
.reg-field input:focus, .reg-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.15);
}
.reg-field.invalid input, .reg-field.invalid textarea { border-color: #ff6b6b; }
.reg-field.invalid legend, .reg-field.invalid label { color: #ff8a8a; }
.reg-levels { padding: 0; }
.reg-radios { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.reg-radio { position: relative; cursor: pointer; margin: 0 !important; }
.reg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.reg-radio span {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-subtle);
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--bg-primary);
    transition: all 0.15s;
}
.reg-radio:hover span { border-color: var(--accent); }
.reg-radio input:checked + span { background: var(--accent); border-color: var(--accent); color: #001018; }
.reg-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.reg-pdpa { margin: 0.4rem 0 1rem; }
.reg-pdpa-btn {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0.8rem 0.9rem;
    color: var(--text-main);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
}
.reg-pdpa-btn i { font-size: 1.2rem; color: var(--text-muted); }
.reg-pdpa-btn.checked { border-color: var(--accent); }
.reg-pdpa-btn.checked i { color: var(--accent); }
.reg-pdpa.invalid .reg-pdpa-btn { border-color: #ff6b6b; }
.reg-status { border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 1rem; font-size: 0.9rem; }
.reg-status.err { background: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.45); color: #ffb3b3; }
.reg-submit {
    width: 100%;
    background: var(--accent);
    color: #001018;
    border: 0;
    border-radius: 40px;
    padding: 0.85rem 1.2rem;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: filter 0.15s;
}
.reg-submit:hover { filter: brightness(1.12); }
.reg-submit:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
.reg-note { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.8rem; }
.reg-note a { color: var(--accent); }
.reg-closed { text-align: center; padding: 2rem 1rem; }
.reg-closed i { font-size: 2.2rem; color: var(--gold); }
.reg-closed h3 { font-family: 'Orbitron', monospace; margin: 0.8rem 0 0.4rem; font-size: 1.1rem; }
.reg-closed p { color: var(--text-muted); margin-bottom: 1rem; }

/* PDPA */
.pdpa-overlay { z-index: 1001; }
.pdpa-scroll { max-height: 55vh; overflow-y: auto; padding: 1.2rem 1.4rem; font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-size: 0.88rem; color: var(--text-muted); }
.pdpa-scroll h4 { color: var(--text-main); font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; margin: 0.9rem 0 0.3rem; }
.pdpa-scroll h4:first-child { margin-top: 0; }
.pdpa-th { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.pdpa-foot { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.2rem; border-top: 1px solid var(--border-subtle); }
.pdpa-hint { flex: 1; font-size: 0.8rem; color: var(--text-muted); }
.pdpa-hint.done { color: #66e0a3; }
.pdpa-accept { width: auto; padding: 0.7rem 1.6rem; }

/* Success */
.reg-success { text-align: center; padding: 2rem 1.5rem 1.5rem; max-width: 460px; }
.reg-success-icon {
    width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.8rem;
    background: rgba(0, 194, 255, 0.15); color: var(--accent); border: 2px solid var(--accent);
}
.reg-success h3 { font-family: 'Orbitron', monospace; letter-spacing: 1.5px; margin-bottom: 0.5rem; }
.reg-success p { color: var(--text-muted); font-family: 'Inter', 'Noto Sans Thai', sans-serif; }
.reg-success-actions { margin-top: 1.2rem; display: flex; justify-content: center; flex-wrap: wrap; }
.reg-success-actions button { cursor: pointer; font-family: inherit; font-size: inherit; }

@media (max-width: 640px) {
    .reg-grid { grid-template-columns: 1fr; }
    .reg-scroll { padding: 1.1rem; }
    .report-modal-box { width: calc(100% - 24px); }
    .lightbox-nav { padding: 0.6rem; }
}

/* =====================================================================
   v2.1 — pilot sign-in, logbook, leaderboard
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.status-rejected { background: #8e2b2f; color: #fff; }
.reg-status.ok { background: rgba(46, 125, 50, 0.18); border: 1px solid rgba(102, 224, 163, 0.45); color: #9ff0c6; }
.lb-login-box { max-width: 440px; }
.lb-form { padding: 1.3rem 1.4rem 1.4rem; }
.lb-staff-link { margin-top: 0.4rem; }
.lb-staff-link a { color: var(--text-muted) !important; }
.lb-inline-btn { width: auto; padding: 0.75rem 1.6rem; }
.lb-small { cursor: pointer; font-family: inherit; font-size: 0.85rem; padding: 0.55rem 1.1rem; margin: 0; }
.lb-select {
    width: 100%; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 0.65rem 0.8rem; color: var(--text-main); font-family: 'Inter', 'Noto Sans Thai', sans-serif; font-size: 0.92rem;
}
.reg-field input[type=date], .reg-field input[type=time], .reg-field input[type=password] {
    width: 100%; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 0.65rem 0.8rem; color: var(--text-main); font-family: 'Inter', sans-serif; font-size: 0.92rem; color-scheme: dark;
}
.reg-field input[type=date]:focus, .reg-field input[type=time]:focus, .reg-field input[type=password]:focus, .lb-select:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.15);
}
.reg-field.invalid input, .reg-field.invalid select { border-color: #ff6b6b; }
.lb-duration { font-family: 'Orbitron', monospace; font-size: 1.1rem; color: var(--accent); padding: 0.55rem 0; }
.lb-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.4rem; font-family: 'Inter', 'Noto Sans Thai', sans-serif; }

.lb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.5rem; margin-bottom: 1.5rem; border-left: 3px solid var(--gold); }
.lb-rank { font-family: 'Rajdhani', sans-serif; font-weight: 700; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }
.lb-callsign { font-family: 'Orbitron', monospace; font-size: 1.8rem; font-weight: 700; line-height: 1.2; }
.lb-sub { color: var(--text-muted); font-size: 0.9rem; }
.lb-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.lb-stats { margin-bottom: 1.5rem; }
.lb-progress { padding: 1.4rem 1.5rem; }
.lb-progress h3 { font-family: 'Rajdhani', sans-serif; font-size: 1.2rem; margin-bottom: 1rem; }
.lb-progress h3 span { color: var(--gold); }
.lb-bar { margin-bottom: 0.9rem; }
.lb-bar-top { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.3rem; font-weight: 600; }
.lb-bar-track { height: 10px; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; }
.lb-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); border-radius: 10px; transition: width 0.4s; }
.lb-bar-fill.done { background: linear-gradient(90deg, #2e7d32, #66e0a3); }

.lb-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: 12px; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.lb-table th { text-align: left; padding: 10px 14px; font-family: 'Orbitron', monospace; font-size: 0.68rem; color: var(--accent); background: rgba(255, 255, 255, 0.04); border-bottom: 2px solid var(--accent); white-space: nowrap; }
.lb-table td { padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: middle; }
.lb-table tr:last-child td { border-bottom: 0; }
.lb-table small { color: var(--text-muted); }
.lb-table .lb-cs { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 0.8rem; color: #fff; white-space: nowrap; }
.lb-table tr.lb-top td:first-child { color: var(--gold); font-weight: 700; }
.lb-row-actions { white-space: nowrap; color: var(--text-muted); }
.lb-row-actions button { background: none; border: 1px solid var(--border-subtle); color: var(--text-main); border-radius: 6px; padding: 0.3rem 0.5rem; margin-left: 0.3rem; cursor: pointer; }
.lb-row-actions button:hover { border-color: var(--accent); color: var(--accent); }
.lb-row-actions button.confirm { border-color: #ff6b6b; color: #ff6b6b; background: rgba(255, 107, 107, 0.12); }

@media (max-width: 640px) {
    .lb-head { padding: 1.1rem; }
    .lb-callsign { font-size: 1.4rem; }
    .lb-actions { width: 100%; }
}
.lb-table td:first-child, .lb-table td:nth-child(3), .lb-table td:nth-child(5) { white-space: nowrap; }

/* =====================================================================
   v2.1.1 — top navigation layout: logo | page links | action buttons
   ===================================================================== */
.nav-container { flex-wrap: nowrap; gap: 1.5rem; }
.logo-group { flex-shrink: 0; }
.nav-menu { display: flex; align-items: center; flex: 1; min-width: 0; gap: 1.5rem; }
.nav-menu .nav-links { flex: 1; justify-content: center; gap: 1.6rem; }
.nav-links a { white-space: nowrap; letter-spacing: 0.5px; }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 36px;
    padding: 0 0.95rem;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.6px;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.nav-btn i { font-size: 0.85rem; }
.nav-btn--ghost { color: var(--text-main); border-color: var(--border-subtle); background: rgba(255, 255, 255, 0.03); }
.nav-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.nav-btn--primary { background: var(--accent); color: #001018; border-color: var(--accent); }
.nav-btn--primary:hover { background: #33ceff; box-shadow: 0 0 18px rgba(0, 194, 255, 0.35); }
.nav-btn--pilot { color: var(--gold); border-color: rgba(230, 180, 34, 0.55); background: rgba(230, 180, 34, 0.06); }
.nav-btn--pilot:hover { border-color: var(--gold); background: rgba(230, 180, 34, 0.14); }
.nav-btn--pilot.signed-in { background: rgba(230, 180, 34, 0.14); border-color: var(--gold); }
.nav-btn--pilot span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Medium screens: tighter spacing, icon-only Register */
@media (max-width: 1240px) {
    .nav-menu .nav-links { gap: 1.1rem; }
    .nav-menu, .nav-container { gap: 1rem; }
    .nav-btn { padding: 0 0.75rem; }
}

/* Collapse the page links into the ☰ menu; Register / Sign in stay in the bar */
@media (max-width: 1080px) {
    .nav-container { flex-wrap: wrap; gap: 0.6rem; }
    .nav-actions { margin-left: auto; }
    .mobile-menu { display: inline-flex; align-items: center; justify-content: center; }
    .nav-menu {
        display: none;
        order: 5;
        flex: 0 0 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 0.7rem 0 0.3rem;
        margin-top: 0.5rem;
        border-top: 1px solid var(--border-subtle);
    }
    .nav-menu.show { display: flex; }
    .nav-menu .nav-links { flex-direction: column; align-items: center; gap: 0.2rem; }
    .nav-menu .nav-links a { display: inline-block; padding: 0.55rem 0; font-size: 1rem; }
}
@media (max-width: 560px) {
    .navbar { padding: 0.65rem 0.9rem; }
    .logo-left, .nav-divider { display: none; }
    .nav-logo2 { width: 42px; height: 42px; }
    .nav-actions { gap: 0.4rem; }
    .nav-btn { height: 36px; padding: 0 0.65rem; font-size: 0.78rem; gap: 0.35rem; }
    .nav-btn--report .nav-btn-text { display: none; }
    .nav-btn--report::after { content: 'REPORT'; }
    .nav-btn--pilot span { max-width: 78px; }
}
@media (max-width: 340px) {
    .nav-btn i { display: none; }
}

/* v2.3 — logo link, members-only Report Flight, registration hints */
a.logo-group { text-decoration: none; color: inherit; border-radius: 8px; }
a.logo-group:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
body:not(.pilot-signed-in) .nav-btn--report { display: none; }
body.pilot-signed-in .nav-btn--register { display: none; }
.reg-msg { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.3rem; font-family: 'Inter', sans-serif; }
.reg-msg.ok { color: #66e0a3; }
.reg-msg.err { color: #ff8a8a; }

/* v2.4 — postponed / cancelled operations */
.status-postponed { background: #8a6d00; color: #fff; }
.status-cancelled { background: #3a4252; color: #c5cdd8; text-decoration: line-through; }
.lb-auto { color: #66e0a3; }
.lb-flag { color: #f0c040; display: inline-block; max-width: 280px; white-space: normal; line-height: 1.35; margin-top: 2px; }

/* v2.4.1 — ATC in the live tracker */
.live-kind { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 1px; padding: 2px 8px; border-radius: 20px; border: 1px solid currentColor; display: inline-flex; align-items: center; gap: 4px; }
.live-kind--pilot { color: var(--accent); }
.live-kind--atc { color: var(--gold); }
.atc-card { border-left: 3px solid var(--gold); }
.atc-position span { color: var(--gold); }
.flight-header { flex-wrap: wrap; gap: 0.5rem 0.9rem; }

/* ===================== v2.5 ===================== */
/* Site-wide fixed background: the home slideshow stays behind every page while scrolling */
.hero-slideshow { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.site-bg-overlay {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(5,7,12,0.55) 0%, rgba(5,7,12,0.72) 45%, rgba(5,7,12,0.82) 100%);
}
.hero { background: transparent; }
.sharp-card, .navlog-container, .join-container, .event-container, .member-card {
    background: rgba(22, 28, 39, 0.86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.join-section { background: transparent; }
footer { background: rgba(5,7,12,0.7); }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }

/* Report flight: full-width rows, ZZZZ boxes, aircraft name hint */
.reg-full { grid-column: 1 / -1; }
.zzzz-field { border-left: 3px solid var(--gold); padding-left: 0.7rem; }
#f-aircraftName.lb-flag { color: var(--gold); }
.lb-rule { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; padding: 0 0.35rem; border: 1px solid var(--border-subtle); border-radius: 4px; color: var(--text-muted); margin-left: 0.25rem; }
.lb-note { color: var(--text-muted); font-size: 0.75rem; }

/* ===== STATS page ===== */
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.st-kpi { padding: 1.1rem 1.2rem; }
.st-kpi .st-k-label { font-size: 0.72rem; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; }
.st-kpi .st-k-value { font-size: 2rem; font-weight: 700; color: var(--text-main); line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-kpi .st-k-sub { font-size: 0.75rem; color: var(--text-muted); }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.st-panel { padding: 1.2rem 1.3rem 1.3rem; min-width: 0; }
.st-panel.st-wide { grid-column: 1 / -1; }
.st-panel h3 { font-size: 1rem; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 0.2rem; }
.st-panel .st-sub { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1rem; }
.st-hbars { display: flex; flex-direction: column; gap: 0.55rem; }
.st-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; gap: 0.75rem; align-items: center; cursor: default; }
.st-row-label { font-size: 0.82rem; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row-label small { color: var(--text-muted); margin-left: 0.3rem; }
.st-track { position: relative; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.st-bar { height: 14px; min-width: 2px; background: var(--accent); border-radius: 0 4px 4px 0; transition: opacity 0.15s; }
.st-row:hover .st-bar, .st-row:focus-visible .st-bar { opacity: 0.8; }
.st-hbars:hover .st-row:not(:hover) .st-bar { opacity: 0.45; }
.st-val { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 180px; padding-top: 18px; border-bottom: 1px solid var(--border-subtle); }
.st-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: default; }
.st-col .st-colbar { width: 70%; max-width: 34px; min-height: 0; background: var(--accent); border-radius: 4px 4px 0 0; transition: opacity 0.15s; }
.st-cols:hover .st-col:not(:hover) .st-colbar { opacity: 0.45; }
.st-col .st-colval { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.st-collabels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.st-collabels span { font-size: 0.68rem; color: var(--text-muted); text-align: center; }
.st-tip { position: fixed; z-index: 3000; pointer-events: none; background: #0b0f17; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0.45rem 0.65rem; font-size: 0.78rem; color: var(--text-main); box-shadow: 0 6px 20px rgba(0,0,0,0.45); max-width: 260px; }
.st-tip b { display: block; margin-bottom: 2px; }
.st-tip span { color: var(--text-muted); }
.st-empty { padding: 2rem; text-align: center; color: var(--text-muted); }
.st-updated { font-size: 0.75rem; color: var(--text-muted); margin-top: 1rem; text-align: right; }
.st-toggle { display: inline-flex; border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; float: right; margin-top: -0.2rem; }
.st-toggle button { background: transparent; border: 0; color: var(--text-muted); font: inherit; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.7rem; cursor: pointer; }
.st-toggle button[aria-pressed="true"] { background: var(--accent); color: #000; }
.st-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.st-table th, .st-table td { padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.st-table th { color: var(--text-muted); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.5px; }
.st-table td.num, .st-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 800px) { .st-grid { grid-template-columns: 1fr; } .st-cols { gap: 3px; } .st-collabels { gap: 3px; } .st-collabels span { font-size: 0.6rem; } .st-col .st-colval { display: none; } }

/* ===================== v2.5.1 ===================== */
/* Report flight: everything typed in capitals */
#reportForm input[type="text"], #reportForm textarea { text-transform: uppercase; }
#reportForm input::placeholder, #reportForm textarea::placeholder { text-transform: none; }
.lb-req { margin-top: 0.6rem; padding: 0.6rem 0.8rem; border: 1px solid var(--gold); border-radius: 8px; background: rgba(230,180,34,0.08); font-size: 0.82rem; }
.lb-req b { color: var(--gold); letter-spacing: 0.5px; }
.lb-req ul { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.lb-req li { padding: 0.1rem 0; color: var(--text-main); }
.lb-req li.ok::before { content: "✓ "; color: #5fd47a; }
.lb-req li.bad::before { content: "✗ "; color: #ff8a65; }
.lb-req li.todo::before { content: "• "; color: var(--text-muted); }
.req-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.6px; padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--gold); color: #000; margin-left: 0.4rem; vertical-align: middle; }
.req-line { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }

/* Dashboard: activity time frame */
.st-frames { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.9rem; }
.st-frames button { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-muted); font: inherit; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 999px; cursor: pointer; }
.st-frames button:hover { color: var(--text-main); border-color: var(--accent-dim); }
.st-frames button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #000; }
.st-range { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
.st-range input { background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-main); border-radius: 6px; padding: 0.15rem 0.4rem; font: inherit; color-scheme: dark; }
.st-cols.st-dense, .st-cols.st-dense + .st-collabels { gap: 1px; }
.st-cols.st-dense .st-colbar { width: 100%; border-radius: 2px 2px 0 0; }
.st-collabels span { white-space: nowrap; overflow: visible; }

/* ===================== v2.6 ===================== */
.legs-list { margin: 0.45rem 0 0; padding-left: 1.3rem; font-size: 0.8rem; color: var(--text-muted); }
.legs-list li { padding: 0.08rem 0; }
.legs-list b { color: var(--text-main); font-weight: 600; letter-spacing: 0.3px; }

/* Home: UPCOMING EVENTS blocks (from the Mission Hub) */
.upcoming-wrap { padding-top: 1.5rem; padding-bottom: 0.5rem; }
.upcoming-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.upcoming-head .section-title { margin-bottom: 1rem; }
.upcoming-all { color: var(--accent); font-weight: 700; font-size: 0.8rem; letter-spacing: 1px; text-decoration: none; }
.upcoming-all:hover { text-decoration: underline; }
.upcoming-grid { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.upcoming-grid:has(> .up-card:only-child) { grid-template-columns: 1fr; }
.upcoming-grid:has(> .up-card:nth-child(2):last-child) { grid-template-columns: 1.4fr 1fr; }
.up-card { position: relative; display: flex; flex-direction: column; gap: 0.45rem; padding: 1.1rem 1.25rem; border-left: 3px solid var(--accent); }
.up-card.has-img { background-image: linear-gradient(90deg, rgba(12,16,24,0.96) 0%, rgba(12,16,24,0.82) 55%, rgba(12,16,24,0.55) 100%), var(--up-img); background-size: cover; background-position: center; }
.up-main { grid-row: span 2; border-left-color: var(--gold); padding: 1.5rem 1.6rem; justify-content: flex-end; min-height: 260px; box-shadow: 0 0 0 1px rgba(230,180,34,0.35), 0 12px 30px rgba(0,0,0,0.35); }
.upcoming-grid:has(> .up-card:nth-child(2):last-child) .up-main { grid-row: auto; }
.up-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.up-when { font-size: 0.68rem; font-weight: 800; letter-spacing: 1.2px; color: var(--accent); background: rgba(0,194,255,0.12); border: 1px solid rgba(0,194,255,0.35); padding: 0.12rem 0.55rem; border-radius: 999px; }
.up-main .up-when { color: #000; background: var(--gold); border-color: var(--gold); }
.up-when.soon:not(.up-main .up-when) { color: var(--gold); border-color: rgba(230,180,34,0.5); background: rgba(230,180,34,0.1); }
.up-status { margin-left: auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); }
.up-card .req-badge { margin-left: 0; }
.up-date { font-size: 0.8rem; color: var(--text-muted); }
.up-title { font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.up-main .up-title { font-size: 1.8rem; }
.up-desc { font-size: 0.85rem; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.up-main .up-desc { -webkit-line-clamp: 3; line-clamp: 3; font-size: 0.95rem; }
.up-route { font-size: 0.8rem; color: var(--text-main); letter-spacing: 0.3px; }
.up-route i { color: var(--gold); margin-right: 0.2rem; }
.up-route small { color: var(--text-muted); margin-left: 0.3rem; }
.up-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.up-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-decoration: none; padding: 0.4rem 0.9rem; border-radius: 8px; background: var(--accent); color: #000; }
.up-btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.up-btn:hover { filter: brightness(1.1); }
.mission-item.flash { animation: missionFlash 1.8s ease; }
@keyframes missionFlash { 0%, 60% { box-shadow: 0 0 0 2px var(--gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 800px) {
    .upcoming-grid, .upcoming-grid:has(> .up-card:nth-child(2):last-child) { grid-template-columns: 1fr; }
    .up-main { grid-row: auto; min-height: 0; }
    .up-main .up-title { font-size: 1.4rem; }
}
.up-main:not(.has-img) { justify-content: center; background: radial-gradient(120% 90% at 100% 0%, rgba(230,180,34,0.14), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(0,194,255,0.10), transparent 60%), rgba(22, 28, 39, 0.9); }

/* v2.6.1 — house style: capitals for titles / names / dates; event time */
.mission-title, .mission-date, .up-title, .up-date, .up-route, .navlog-row .nl-col, .member-card h3, .member-name, .member-rank, .fleet-card h3, .lb-rank, #memberTableContainer td { text-transform: uppercase; }
.up-time { margin-left: 0.5rem; color: var(--text-main); white-space: nowrap; }
.up-time i { color: var(--accent); }
#r-fullName, #r-nickname, #r-favoriteAircraft, #r-callsign { text-transform: uppercase; }
#r-fullName::placeholder, #r-nickname::placeholder, #r-favoriteAircraft::placeholder { text-transform: none; }

/* ===================== v2.7 ===================== */
.closed-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.6px; padding: 0.05rem 0.4rem; border-radius: 4px; border: 1px solid var(--text-muted); color: var(--text-muted); margin-left: 0.4rem; vertical-align: middle; }

/* Promotion animation */
.rankup-overlay { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 16px; background: rgba(3,5,10,0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s; }
.rankup-overlay.play { opacity: 1; }
.rankup-overlay.closing { opacity: 0; }
.rankup-card { width: min(440px, 100%); text-align: center; padding: 1.6rem 1.4rem 1.4rem; border-radius: 18px; background: linear-gradient(180deg, #121826, #0b0f17); border: 1px solid rgba(230,180,34,0.45); box-shadow: 0 0 0 1px rgba(230,180,34,0.15), 0 30px 80px rgba(0,0,0,0.6); transform: translateY(14px) scale(0.96); transition: transform 0.35s cubic-bezier(.2,.9,.3,1.3); }
.rankup-overlay.play .rankup-card { transform: none; }
.rankup-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 4px; color: var(--gold); }
.rankup-title { font-family: 'Rajdhani', sans-serif; font-size: 1.35rem; margin: 0.2rem 0 0.6rem; }
.rankup-stage { position: relative; height: 170px; display: grid; place-items: center; perspective: 600px; }
.rankup-badge { position: absolute; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden; }
.rankup-badge svg { width: 70px; height: 70px; }
.rankup-badge.old { background: radial-gradient(circle at 35% 30%, #3a4558, #1b2230); color: #c8d3e0; border: 3px solid #56637a; }
.rankup-badge.new { background: radial-gradient(circle at 35% 30%, #ffe08a, #b8860b); color: #2b1d00; border: 3px solid #ffe7a3; transform: rotateY(-180deg) scale(0.6); opacity: 0; box-shadow: 0 0 0 0 rgba(230,180,34,0.6); }
.rankup-overlay.play .rankup-badge.old { animation: rkOldOut 0.7s 0.9s ease-in forwards; }
.rankup-overlay.play .rankup-badge.new { animation: rkNewIn 0.8s 1.45s cubic-bezier(.2,.9,.3,1.25) forwards, rkGlow 1.6s 2.2s ease-out infinite; }
.rankup-rays { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: repeating-conic-gradient(rgba(230,180,34,0.18) 0 8deg, transparent 8deg 24deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%); opacity: 0; }
.rankup-overlay.play .rankup-rays { animation: rkRays 8s 1.5s linear infinite, rkFade 0.6s 1.5s forwards; }
.rankup-sparks { position: absolute; width: 0; height: 0; }
.rankup-sparks i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0; transform: rotate(var(--a)) translateY(0); }
.rankup-overlay.play .rankup-sparks i { animation: rkSpark 0.9s calc(1.6s + var(--d)) ease-out forwards; }
.rankup-names { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.rankup-from { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0.8; }
.rankup-names i { color: var(--gold); }
.rankup-to { color: var(--gold); font-size: 1.3rem; opacity: 0; }
.rankup-overlay.play .rankup-to { animation: rkFade 0.5s 1.9s forwards; }
.rankup-sub { font-size: 0.8rem; color: var(--text-muted); margin: 0.5rem 0 1rem; }
.rankup-sub b { color: var(--text-main); }
.rankup-ok { width: 100%; }
@keyframes rkOldOut { 0% { transform: none; opacity: 1; } 100% { transform: rotateY(180deg) scale(0.6); opacity: 0; } }
@keyframes rkNewIn { 0% { transform: rotateY(-180deg) scale(0.6); opacity: 0; } 100% { transform: rotateY(0) scale(1); opacity: 1; } }
@keyframes rkGlow { 0% { box-shadow: 0 0 0 0 rgba(230,180,34,0.55); } 100% { box-shadow: 0 0 0 28px rgba(230,180,34,0); } }
@keyframes rkRays { to { transform: rotate(360deg); } }
@keyframes rkFade { to { opacity: 1; } }
@keyframes rkSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-95px); } }
@media (prefers-reduced-motion: reduce) {
    .rankup-overlay.play .rankup-badge.old { animation: none; opacity: 0; }
    .rankup-overlay.play .rankup-badge.new { animation: none; opacity: 1; transform: none; }
    .rankup-overlay.play .rankup-rays, .rankup-overlay.play .rankup-sparks i { animation: none; }
    .rankup-overlay.play .rankup-to { animation: none; opacity: 1; }
}
/* Dashboard scope (my flying / squadron) */
.st-scope { margin-bottom: 1.2rem; }
.st-scope-tabs { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; background: rgba(14,18,27,0.7); }
.st-scope-tabs button { background: transparent; border: 0; color: var(--text-muted); font: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.8px; padding: 0.55rem 1rem; cursor: pointer; }
.st-scope-tabs button + button { border-left: 1px solid var(--border-subtle); }
.st-scope-tabs button[aria-pressed="true"] { background: var(--accent); color: #000; }
.st-scope-hint { color: var(--text-muted); font-size: 0.9rem; }
.st-scope-hint a { color: var(--accent); font-weight: 700; }
.rankup-sub b { text-transform: uppercase; }

/* ===================== v2.8 ===================== */
.lb-head { align-items: center; }
.lb-avatar-wrap { position: relative; flex: 0 0 auto; width: 92px; height: 92px; margin-right: 1rem; }
.lb-avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); background: #222; transition: opacity 0.2s; }
.lb-avatar.busy { opacity: 0.4; }
.lb-avatar-btn { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #000; cursor: pointer; border: 2px solid #0b0f17; }
.lb-avatar-btn:hover { filter: brightness(1.1); }
.lb-avatar-x { position: absolute; left: -4px; top: -4px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #0b0f17; background: #3a4558; color: #fff; font-size: 0.9rem; line-height: 1; cursor: pointer; }
.lb-atc { margin-top: 0.25rem; font-size: 0.8rem; color: var(--gold); letter-spacing: 0.4px; text-transform: uppercase; }
.lb-photos { padding: 1.1rem 1.2rem; }
.lb-photo-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.6rem 0; }
.lb-photo-form input[type=text] { flex: 1 1 220px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0.55rem 0.7rem; color: var(--text-main); font: inherit; text-transform: uppercase; }
.lb-photo-form input[type=text]::placeholder { text-transform: none; }
.lb-file-btn { cursor: pointer; }
.lb-photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; margin-top: 0.8rem; }
.lb-photo { position: relative; display: flex; gap: 0.6rem; align-items: center; padding: 0.5rem; border: 1px solid var(--border-subtle); border-radius: 10px; background: rgba(0,0,0,0.25); }
.lb-photo-thumb { width: 64px; height: 48px; border-radius: 6px; overflow: hidden; background: #1b2230; display: grid; place-items: center; color: var(--text-muted); flex: 0 0 auto; }
.lb-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-photo-meta { font-size: 0.75rem; text-transform: uppercase; min-width: 0; }
.lb-photo-meta small { display: block; color: var(--text-muted); text-transform: none; }
.lb-photo-del { position: absolute; right: 6px; top: 6px; background: none; border: 0; color: var(--text-muted); cursor: pointer; }
.member-atc { margin-top: 6px; font-size: 0.75rem; color: var(--gold); text-transform: uppercase; }
.member-atc-sm { color: var(--gold); font-size: 0.72rem; }
.st-scope-av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: -5px; margin-right: 2px; }
.reg-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.training-soon { max-width: 640px; margin: 1rem auto; text-align: center; padding: 2.5rem 1.5rem; }
.training-icon { font-size: 3rem; color: var(--text-muted); opacity: 0.6; }
.training-badge { display: inline-block; margin: 1rem 0 0.6rem; padding: 0.2rem 0.8rem; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); font-size: 0.72rem; font-weight: 800; letter-spacing: 1.5px; }
.training-soon h3 { font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; margin-bottom: 0.5rem; }
.training-soon p { color: var(--text-muted); margin-bottom: 1.2rem; }
@media (max-width: 600px) { .reg-roles { grid-template-columns: 1fr; } .lb-avatar-wrap { margin: 0 auto 0.6rem; } }
.lb-photo-del { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; }
.lb-photo-del:hover { color: #ff8a65; background: rgba(255,255,255,0.06); }
.member-rank.atc-rank { color: var(--gold); }