body { background-color: #0f172a; color: #f8fafc; font-family: 'Inter', sans-serif; overflow-x: hidden; }
        .glass-panel { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }

        /* Circular liquid-glass close (×); bubble sized to the icon */
        button.modal-glass-close {
            box-sizing: border-box;
            width: 2.375rem;
            height: 2.375rem;
            min-width: 2.375rem;
            min-height: 2.375rem;
            padding: 0;
            margin: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50% !important;
            flex-shrink: 0;
            line-height: 1;
            cursor: pointer;
            -webkit-appearance: none;
            appearance: none;
            color: rgba(226, 232, 240, 0.92);
            background: linear-gradient(155deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(15, 23, 42, 0.42) 100%) !important;
            backdrop-filter: blur(18px) saturate(1.45);
            -webkit-backdrop-filter: blur(18px) saturate(1.45);
            border: 1px solid rgba(255, 255, 255, 0.16) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.28),
                0 4px 18px rgba(0, 0, 0, 0.32),
                0 0 0 1px rgba(15, 23, 42, 0.25);
            transition:
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.15s ease,
                background 0.2s ease;
        }
        button.modal-glass-close i {
            font-size: 1rem;
            line-height: 1;
            pointer-events: none;
        }
        button.modal-glass-close:hover {
            color: #f8fafc;
            border-color: rgba(125, 211, 252, 0.38) !important;
            background: linear-gradient(155deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.09) 50%, rgba(30, 41, 59, 0.48) 100%) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.34),
                0 6px 22px rgba(0, 0, 0, 0.38),
                0 0 26px rgba(56, 189, 248, 0.14);
        }
        button.modal-glass-close:active {
            transform: scale(0.94);
        }
        button.modal-glass-close:focus-visible {
            outline: 2px solid rgba(125, 211, 252, 0.55);
            outline-offset: 2px;
        }
        button.modal-glass-close--lg {
            width: 2.75rem;
            height: 2.75rem;
            min-width: 2.75rem;
            min-height: 2.75rem;
        }
        button.modal-glass-close--lg i {
            font-size: 1.2rem;
        }
        .premium-modal {
            opacity: 0;
            transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        .premium-modal.premium-modal-visible {
            opacity: 1;
        }
        .premium-modal-panel {
            opacity: 0;
            transform: translateY(20px) scale(0.968);
            transition:
                opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
            transition-delay: 35ms;
            will-change: opacity, transform;
        }
        .premium-modal-panel.premium-modal-panel-visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        @media (prefers-reduced-motion: reduce) {
            .premium-modal,
            .premium-modal-panel {
                transition: none !important;
            }
            .premium-modal-panel {
                transform: none !important;
            }
        }

        /* Pro paywall — amber glow (matches OFP locked hero) */
        .pro-ofp-dropzone-locked {
            border-color: rgba(245, 158, 11, 0.5) !important;
            background: linear-gradient(165deg, rgba(30, 27, 18, 0.75) 0%, rgba(15, 23, 42, 0.55) 45%, rgba(45, 35, 18, 0.5) 100%) !important;
            box-shadow:
                0 0 0 1px rgba(245, 158, 11, 0.15),
                0 0 36px rgba(245, 158, 11, 0.2),
                0 0 72px rgba(245, 158, 11, 0.08),
                inset 0 0 40px rgba(245, 158, 11, 0.07);
        }
        .group:hover .pro-ofp-dropzone-locked {
            border-color: rgba(251, 191, 36, 0.65) !important;
            box-shadow:
                0 0 0 1px rgba(245, 158, 11, 0.35),
                0 0 48px rgba(245, 158, 11, 0.35),
                0 0 96px rgba(245, 158, 11, 0.14),
                inset 0 0 48px rgba(245, 158, 11, 0.1);
        }
        /* OFP quota exhausted — dim dropzone; file input disabled in JS */
        #ofp-upload-dropzone.ofp-dropzone-quota-exhausted {
            opacity: 0.55;
            cursor: not-allowed;
        }
        .pro-lock-icon-glow {
            box-shadow:
                inset 0 2px 10px rgba(0, 0, 0, 0.35),
                0 0 28px rgba(245, 158, 11, 0.45),
                0 0 56px rgba(245, 158, 11, 0.18) !important;
        }
        .group:hover .pro-lock-icon-glow {
            box-shadow:
                inset 0 2px 10px rgba(0, 0, 0, 0.3),
                0 0 36px rgba(245, 158, 11, 0.55),
                0 0 72px rgba(245, 158, 11, 0.22) !important;
        }
        .pro-paywall-cta {
            position: relative;
            overflow: visible !important;
            background: linear-gradient(145deg, rgba(245, 158, 11, 0.16) 0%, rgba(15, 23, 42, 0.72) 48%, rgba(245, 158, 11, 0.1) 100%) !important;
            border: 1px solid rgba(245, 158, 11, 0.48) !important;
            color: #fcd34d !important;
            box-shadow:
                0 0 0 1px rgba(245, 158, 11, 0.2),
                0 0 22px rgba(245, 158, 11, 0.28),
                0 0 44px rgba(245, 158, 11, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
            transition: box-shadow 0.35s ease, transform 0.2s ease, border-color 0.25s ease, filter 0.25s ease;
        }
        .pro-paywall-cta:hover {
            color: #fde68a !important;
            border-color: rgba(251, 191, 36, 0.65) !important;
            box-shadow:
                0 0 0 1px rgba(245, 158, 11, 0.4),
                0 0 32px rgba(245, 158, 11, 0.5),
                0 0 64px rgba(245, 158, 11, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
            transform: translateY(-1px);
            filter: brightness(1.05);
        }
        .pro-paywall-cta:active {
            transform: translateY(0);
        }
        .pro-cta-badge {
            position: absolute;
            top: -7px;
            right: -7px;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            color: #0f172a;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.1em;
            padding: 3px 8px;
            border-radius: 9999px;
            text-transform: uppercase;
            box-shadow: 0 2px 12px rgba(245, 158, 11, 0.55), 0 0 20px rgba(245, 158, 11, 0.35);
            pointer-events: none;
            line-height: 1.2;
            border: 1px solid rgba(255, 255, 255, 0.25);
        }
        /* Silver tier paywall CTA (friend roster, etc.) */
        .silver-paywall-cta {
            position: relative;
            overflow: visible !important;
            background: linear-gradient(145deg, rgba(148, 163, 184, 0.2) 0%, rgba(15, 23, 42, 0.72) 48%, rgba(203, 213, 225, 0.08) 100%) !important;
            border: 1px solid rgba(148, 163, 184, 0.55) !important;
            color: #e2e8f0 !important;
            box-shadow:
                0 0 0 1px rgba(148, 163, 184, 0.2),
                0 0 22px rgba(148, 163, 184, 0.22),
                0 0 44px rgba(100, 116, 139, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
            transition: box-shadow 0.35s ease, transform 0.2s ease, border-color 0.25s ease, filter 0.25s ease;
        }
        .silver-paywall-cta:hover {
            color: #f8fafc !important;
            border-color: rgba(203, 213, 225, 0.7) !important;
            box-shadow:
                0 0 0 1px rgba(148, 163, 184, 0.4),
                0 0 32px rgba(148, 163, 184, 0.35),
                0 0 64px rgba(100, 116, 139, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
            transform: translateY(-1px);
            filter: brightness(1.06);
        }
        .silver-paywall-cta:active {
            transform: translateY(0);
        }
        .silver-cta-badge {
            position: absolute;
            top: -7px;
            right: -7px;
            background: linear-gradient(135deg, #e2e8f0, #94a3b8);
            color: #0f172a;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.1em;
            padding: 3px 8px;
            border-radius: 9999px;
            text-transform: uppercase;
            box-shadow: 0 2px 12px rgba(148, 163, 184, 0.45), 0 0 18px rgba(100, 116, 139, 0.3);
            pointer-events: none;
            line-height: 1.2;
            border: 1px solid rgba(255, 255, 255, 0.35);
        }
        .pro-ofp-panel-locked {
            border-color: rgba(245, 158, 11, 0.28) !important;
            box-shadow:
                0 20px 48px -12px rgba(0, 0, 0, 0.75),
                0 0 40px rgba(245, 158, 11, 0.12),
                inset 0 1px 0 rgba(245, 158, 11, 0.06) !important;
        }
        .group:hover .pro-ofp-panel-locked {
            border-color: rgba(245, 158, 11, 0.42) !important;
            box-shadow:
                0 20px 48px -12px rgba(0, 0, 0, 0.75),
                0 0 56px rgba(245, 158, 11, 0.22),
                inset 0 1px 0 rgba(245, 158, 11, 0.08) !important;
        }
        
        .gradient-text-sky { background: linear-gradient(90deg, #38bdf8, #818cf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .gradient-text-emerald { background: linear-gradient(90deg, #34d399, #10b981); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .gradient-text-orange { background: linear-gradient(90deg, #fb923c, #f97316); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .gradient-text-amber { background: linear-gradient(90deg, #fbbf24, #f59e0b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .gradient-text-rose { background: linear-gradient(90deg, #fb7185, #f43f5e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .gradient-text-violet { background: linear-gradient(90deg, #a78bfa, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .doc-validity-glow-green {
            border-color: rgba(16, 185, 129, 0.45) !important;
            box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.18), 0 10px 28px rgba(16, 185, 129, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }
        .doc-validity-glow-amber {
            border-color: rgba(245, 158, 11, 0.48) !important;
            box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2), 0 10px 28px rgba(245, 158, 11, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }
        .doc-validity-glow-red {
            border-color: rgba(244, 63, 94, 0.52) !important;
            box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.24), 0 10px 28px rgba(244, 63, 94, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }
        
        #main-app-viewport { width: 100vw; overflow-x: hidden; }
        #main-app-slider { width: 600%; display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); align-items: flex-start; }
        .main-app-section { width: 16.6667%; flex-shrink: 0; padding-bottom: 7rem; }
        @media (min-width: 768px) {
            #main-app-viewport {
                height: calc(100dvh - 5.35rem);
                overflow: hidden;
            }
            #main-app-slider {
                height: 100%;
                align-items: stretch;
            }
            .main-app-section {
                height: 100%;
                overflow-y: auto;
                overscroll-behavior: contain;
                padding-bottom: 2rem;
            }
            .main-app-section.briefing-app-section {
                min-height: 0;
            }
        }

        .page-slide { padding: 2.25rem; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }

        /* Briefing (manual + OFP): match info card fill to dep/arr ICAO tiles (#151e32) */
        .briefing-dashboard .bg-slate-800\/50 {
            background-color: #151e32 !important;
        }
        .briefing-dashboard .bg-slate-800\/80 {
            background-color: #151e32 !important;
        }
        .briefing-dashboard .bg-slate-800\/50.hover\:bg-slate-700:hover,
        .briefing-dashboard .bg-slate-800\/80.hover\:bg-slate-700:hover {
            background-color: #1e293b !important;
        }
        .briefing-dashboard .bg-gradient-to-r.from-sky-900\/30.to-indigo-900\/30 {
            background-image: none !important;
            background-color: #151e32 !important;
        }
        .briefing-dashboard .bg-gradient-to-br.from-sky-600.to-blue-800 {
            background-image: none !important;
            background-color: #151e32 !important;
        }
        .briefing-dashboard .bg-indigo-500\/10 {
            background-color: #151e32 !important;
        }

        @media (max-width: 767px) {
            #main-app-viewport {
                height: calc(100dvh - 4.65rem);
                overflow: hidden;
            }
            #main-app-slider {
                height: 100%;
            }
            .main-app-section {
                height: 100%;
                overflow-y: auto;
                overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch;
            }
            .main-app-section.briefing-app-section {
                min-height: 0;
            }
            .briefing-app-section {
                align-items: stretch !important;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
                padding-top: 0.2rem;
                padding-bottom: 5.5rem;
            }
            #empty-state-container {
                padding-top: 0.35rem !important;
                padding-bottom: 1.5rem !important;
            }
            #empty-state-container > .text-center {
                margin-top: 0.15rem !important;
                margin-bottom: 1.35rem !important;
            }
            #empty-state-container > .text-center > .inline-flex.rounded-full {
                margin-bottom: 0.65rem !important;
            }
            .briefing-app-section .briefing-empty-wrap .glass-panel {
                padding: 2rem 1.25rem !important;
                margin-top: 1rem !important;
                border-radius: 1.25rem;
            }
            .briefing-app-section .briefing-landing {
                padding: 0.35rem 0.35rem 0 !important;
            }
            .briefing-app-section .briefing-landing h1 {
                margin-top: 0.1rem;
                margin-bottom: 0.7rem;
            }
            .briefing-app-section .briefing-landing .briefing-upload-controls {
                max-width: 100%;
            }
            .briefing-app-section .briefing-landing .briefing-file-input {
                min-width: 0;
                max-width: 100%;
            }
            .briefing-app-section #loading-screen {
                padding: 2.5rem 1.25rem !important;
                margin-top: 1rem !important;
                border-radius: 1.25rem;
            }
            .briefing-app-section #loading-screen .fa-circle-notch {
                font-size: 2.75rem !important;
            }
            .briefing-app-section #loading-screen h2 {
                font-size: 1.25rem;
            }
            .briefing-dashboard .page-slide {
                padding: 0.5rem 0.35rem 1rem !important;
            }
            .briefing-dashboard .glass-panel {
                padding: 1rem 0.85rem 1.15rem !important;
                border-radius: 1.15rem;
            }
            .briefing-dashboard .glass-panel > .flex.justify-between.items-center.mb-6:not(.briefing-save-row):not(.briefing-route-strip),
            .briefing-dashboard .glass-panel > .flex.justify-between.items-center.mb-10:not(.briefing-route-strip) {
                flex-direction: column;
                align-items: stretch;
                gap: 0.75rem;
            }
            .briefing-dashboard .briefing-save-row {
                flex-direction: row !important;
                align-items: center !important;
                justify-content: space-between !important;
                flex-wrap: nowrap;
                gap: 0.45rem;
            }
            .briefing-dashboard .briefing-save-row > h3 {
                min-width: 0;
                flex: 1 1 auto;
                line-height: 1.25;
            }
            .briefing-dashboard .briefing-save-row > .briefing-saved-pill,
            .briefing-dashboard .briefing-save-row > .briefing-save-btn {
                flex: 0 0 auto;
                width: auto !important;
                max-width: none;
            }
            .briefing-app-section .briefing-active-header {
                padding: 0.75rem 0.35rem 0 !important;
            }
            .briefing-app-section .briefing-active-header h1 {
                font-size: 1.15rem;
                line-height: 1.2;
            }
            .briefing-app-section .briefing-active-header .briefing-close-new-btn {
                font-size: 0.65rem;
                padding: 0.4rem 0.55rem;
                border-radius: 0.65rem;
            }
            .briefing-app-section .briefing-active-header .briefing-close-new-btn i {
                margin-right: 0.25rem;
            }
            .briefing-dashboard .briefing-route-strip {
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: space-between;
                gap: 0.35rem;
                margin-bottom: 1.75rem !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            .briefing-dashboard .briefing-route-strip .briefing-route-airport {
                flex: 0 0 auto;
                width: max-content;
                max-width: calc(50% - 0.5rem);
                min-width: 0;
                box-sizing: border-box;
                padding: 0.75rem 1rem !important;
                border-radius: 0.75rem;
            }
            .briefing-dashboard .briefing-route-strip .briefing-route-airport h3 {
                font-size: clamp(1.35rem, 4.2vw, 1.85rem) !important;
                line-height: 1.1;
                margin-bottom: 0.25rem !important;
            }
            .briefing-dashboard .briefing-route-strip .briefing-route-airport p {
                font-size: 0.5625rem !important;
                letter-spacing: 0.06em;
            }
            .briefing-dashboard .briefing-route-strip .briefing-route-mid {
                flex: 1 1 auto;
                min-width: 2rem;
                width: auto;
                max-width: none;
                padding: 0.2rem 0.25rem !important;
            }
            .briefing-dashboard .briefing-route-strip .briefing-route-mid .border-t-2 {
                display: none;
            }
            .briefing-dashboard .briefing-route-strip .briefing-route-mid .fa-plane {
                position: static !important;
                transform: none !important;
                font-size: 0.8rem;
                padding: 0.2rem !important;
                margin: 0 auto;
            }
            .briefing-dashboard .briefing-route-strip .briefing-route-mid .briefing-route-flttime {
                font-size: 0.6rem !important;
                line-height: 1.1;
                margin-top: 0.15rem !important;
            }
            .briefing-dashboard .bg-slate-800\/50.rounded-2xl.p-6 > .flex.justify-between.items-center.mb-4 {
                flex-direction: column;
                align-items: stretch;
                gap: 0.65rem;
            }
            .briefing-dashboard .bg-slate-800\/50.rounded-2xl.p-6 > .flex.justify-between.items-center.mb-4 button {
                width: 100%;
                justify-content: center;
            }
            .briefing-dashboard .bg-slate-800\/50.rounded-2xl.p-6 > .flex.justify-between.items-center.mb-4 h3 {
                font-size: 1.1rem;
                line-height: 1.3;
            }
            .briefing-dashboard h2.text-3xl {
                font-size: 1.35rem;
                line-height: 1.25;
            }
            .briefing-dashboard .briefing-map-flight {
                height: 220px !important;
                min-height: 200px;
            }
            .briefing-dashboard .briefing-map-windy {
                height: 260px !important;
                min-height: 240px;
            }
            .briefing-dashboard .briefing-hero {
                min-height: 11rem;
            }
            .briefing-dashboard .min-h-\[600px\] {
                min-height: unset !important;
            }
            .briefing-dashboard .text-5xl.font-black.text-white:not(.briefing-block-fuel-total) {
                font-size: 1.65rem;
                line-height: 1.15;
            }
            .briefing-dashboard .briefing-block-fuel-total {
                font-size: 2.25rem;
                line-height: 1.1;
            }
            .briefing-dashboard .briefing-notam-airports-grid h3.text-2xl {
                font-size: 1.25rem;
            }
        }
        
        .leaflet-container { background: #0f172a; outline: none; border-radius: 1rem; }
        .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
        .leaflet-popup-content { margin: 16px; }
        .vertical-text { writing-mode: vertical-rl; text-orientation: mixed; }
        .notam-tab.active { background-color: #38bdf8; color: #0f172a; border-color: #38bdf8; }
        .notam-tab { transition: all 0.3s ease; }
        .nav-btn { transition: color 0.35s ease, transform 0.2s ease; border-bottom: none; }
        .nav-btn:hover { transform: translateY(-1px); }
        .page-slide .slide-nav-btn { display: none !important; }

        /* Welcome hero (Briefing Extractor landing) */
        .welcome-hero {
            position: relative;
            overflow: hidden;
            border-radius: 1.75rem;
            padding: 1.75rem 1.5rem 2rem;
            margin-bottom: 1.75rem;
            border: 1px solid rgba(148, 163, 184, 0.7);
            background:
                radial-gradient(circle at top left, rgba(56,189,248,0.20), transparent 55%),
                radial-gradient(circle at bottom right, rgba(8,47,73,0.85), rgba(15,23,42,0.98));
            box-shadow:
                0 20px 55px rgba(15, 23, 42, 0.9),
                0 0 0 1px rgba(15, 23, 42, 0.9);
        }
        .welcome-hero::before {
            content: '';
            position: absolute;
            inset: -25%;
            background:
                radial-gradient(circle at 0% 0%, rgba(56,189,248,0.30), transparent 55%),
                radial-gradient(circle at 120% 120%, rgba(8,47,73,0.85), transparent 65%);
            opacity: 0.7;
            transform: translate3d(0,0,0);
            animation: welcomeWeatherDrift 26s linear infinite alternate;
            pointer-events: none;
        }
        .welcome-hero-inner {
            position: relative;
            z-index: 1;
        }
        .welcome-hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.35rem 0.8rem;
            border-radius: 9999px;
            background: rgba(15,23,42,0.8);
            border: 1px solid rgba(56,189,248,0.5);
            box-shadow: 0 8px 24px rgba(15,23,42,0.9);
        }
        .welcome-hero-badge span {
            font-size: 0.625rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }
        .welcome-hero-homebase {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.3rem 0.75rem;
            border-radius: 9999px;
            background: rgba(15,23,42,0.9);
            border: 1px solid rgba(148,163,184,0.7);
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #e5e7eb;
        }
        .welcome-hero-homebase code {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.8rem;
            font-weight: 900;
            letter-spacing: 0.18em;
        }
        @keyframes welcomeWeatherDrift {
            0% { transform: translate3d(-6%, -4%, 0) scale(1.05); opacity: 0.75; }
            50% { transform: translate3d(4%, 2%, 0) scale(1.08); opacity: 0.9; }
            100% { transform: translate3d(8%, -3%, 0) scale(1.03); opacity: 0.8; }
        }
        @media (max-width: 767px) {
            .welcome-hero {
                padding: 1.25rem 1rem 1.6rem;
                margin-bottom: 1.25rem;
                border-radius: 1.4rem;
            }
            .welcome-hero h1 {
                font-size: 1.6rem;
                line-height: 1.15;
                margin-bottom: 0.5rem;
            }
            .welcome-hero p {
                font-size: 0.8rem;
            }
        }
        .main-nav-desktop {
            display: none;
            align-items: center;
        }
        .app-mobile-nav.app-mobile-nav--responsive {
            display: block;
        }
        @media (min-width: 1200px) {
            .main-nav-desktop { display: flex; }
            .app-mobile-nav.app-mobile-nav--responsive { display: none; }
            .app-header .app-header-inner {
                display: grid;
                grid-template-columns: minmax(200px, 1fr) auto minmax(220px, 1fr);
                align-items: center;
                column-gap: 1rem;
            }
            .app-header .app-header-brand { justify-self: start; min-width: 0; }
            .app-header .main-nav-desktop { justify-self: center; }
            .app-header .app-header-actions { justify-self: end; min-width: 0; }
        }
        .main-nav-track {
            position: relative;
            isolation: isolate;
        }
        .nav-glass-pill {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 9999px;
            pointer-events: none;
            z-index: 0;
            opacity: 0;
            box-sizing: border-box;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 100%);
            backdrop-filter: blur(14px) saturate(1.35);
            -webkit-backdrop-filter: blur(14px) saturate(1.35);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.14),
                0 4px 20px rgba(0, 0, 0, 0.28),
                0 0 0 1px rgba(255, 255, 255, 0.06);
            transition:
                left 0.4s cubic-bezier(0.34, 1.2, 0.64, 1),
                top 0.4s cubic-bezier(0.34, 1.2, 0.64, 1),
                width 0.4s cubic-bezier(0.34, 1.2, 0.64, 1),
                height 0.4s cubic-bezier(0.34, 1.2, 0.64, 1),
                opacity 0.25s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease;
        }
        .nav-glass-pill.is-ready { opacity: 1; }
        .nav-glass-pill[data-accent="0"] {
            border: 1px solid rgba(56, 189, 248, 0.38);
            box-shadow:
                inset 0 1px 0 rgba(56, 189, 248, 0.2),
                0 0 24px rgba(56, 189, 248, 0.12),
                0 4px 20px rgba(0, 0, 0, 0.28);
        }
        .nav-glass-pill[data-accent="1"] {
            border: 1px solid rgba(52, 211, 153, 0.38);
            box-shadow:
                inset 0 1px 0 rgba(52, 211, 153, 0.18),
                0 0 24px rgba(52, 211, 153, 0.1),
                0 4px 20px rgba(0, 0, 0, 0.28);
        }
        .nav-glass-pill[data-accent="2"] {
            border: 1px solid rgba(251, 146, 60, 0.42);
            box-shadow:
                inset 0 1px 0 rgba(251, 146, 60, 0.18),
                0 0 24px rgba(251, 146, 60, 0.1),
                0 4px 20px rgba(0, 0, 0, 0.28);
        }
        .nav-glass-pill[data-accent="3"] {
            border: 1px solid rgba(251, 191, 36, 0.4);
            box-shadow:
                inset 0 1px 0 rgba(251, 191, 36, 0.16),
                0 0 24px rgba(251, 191, 36, 0.1),
                0 4px 20px rgba(0, 0, 0, 0.28);
        }
        .nav-glass-pill[data-accent="4"] {
            border: 1px solid rgba(251, 113, 133, 0.42);
            box-shadow:
                inset 0 1px 0 rgba(251, 113, 133, 0.2),
                0 0 24px rgba(251, 113, 133, 0.12),
                0 4px 20px rgba(0, 0, 0, 0.28);
        }
        .nav-glass-pill[data-accent="5"] {
            border: 1px solid rgba(167, 139, 250, 0.42);
            box-shadow:
                inset 0 1px 0 rgba(167, 139, 250, 0.2),
                0 0 24px rgba(167, 139, 250, 0.12),
                0 4px 20px rgba(0, 0, 0, 0.28);
        }
        /* Mobile bottom nav: square-ish sliding highlight (not full pill) */
        .nav-glass-pill.nav-glass-pill--mobile {
            border-radius: 0.65rem;
        }
        /* Same shell as .logbook-period-filters (track, not the glass chip) */
        .app-mobile-nav.app-mobile-nav--period-track {
            background: rgba(2, 6, 23, 0.4);
            border-top: 1px solid rgba(51, 65, 85, 0.6);
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
            backdrop-filter: blur(14px) saturate(1.2);
            -webkit-backdrop-filter: blur(14px) saturate(1.2);
        }
        /* Header profile / message: circular glass matches icon, neutral until hover */
        body[data-app-mode] .app-header .app-header-icon-btn {
            width: 2.5rem;
            height: 2.5rem;
            min-width: 2.5rem;
            min-height: 2.5rem;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            flex-shrink: 0;
            box-sizing: border-box;
            overflow: visible;
            color: #94a3b8 !important;
        }
        body[data-app-mode] .app-header .app-header-icon-btn:hover {
            color: #e2e8f0 !important;
        }
        body[data-app-mode] .app-header .app-header-icon-btn[title="Settings"]:hover {
            color: #e2e8f0 !important;
        }
        body[data-app-mode] .app-header .app-header-icon-btn[title="Message Box"]:hover {
            color: #38bdf8 !important;
        }
        @media (min-width: 768px) {
            body[data-app-mode] .app-header .app-header-icon-btn {
                width: 2.75rem;
                height: 2.75rem;
                min-width: 2.75rem;
                min-height: 2.75rem;
            }
        }
        .app-header .nav-btn { color: #64748b; }
        body[data-app-mode="0"] .app-header .nav-btn.active { color: #7dd3fc; }
        body[data-app-mode="1"] .app-header .nav-btn.active { color: #6ee7b7; }
        body[data-app-mode="2"] .app-header .nav-btn.active { color: #fdba74; }
        body[data-app-mode="3"] .app-header .nav-btn.active { color: #fcd34d; }
        body[data-app-mode="4"] .app-header .nav-btn.active { color: #fda4af; }
        body[data-app-mode="5"] .app-header .nav-btn.active { color: #c4b5fd; }

        .app-mobile-nav button.mob-nav-tab {
            color: #64748b;
            -webkit-tap-highlight-color: transparent;
            background: none;
            border: none;
            box-shadow: none;
            border-radius: 0;
            cursor: pointer;
        }
        .app-mobile-nav button.mob-nav-tab:not(.nav-mob-active):hover {
            color: #94a3b8;
        }
        body[data-app-mode="0"] .app-mobile-nav button.nav-mob-active { color: #7dd3fc; }
        body[data-app-mode="1"] .app-mobile-nav button.nav-mob-active { color: #6ee7b7; }
        body[data-app-mode="2"] .app-mobile-nav button.nav-mob-active { color: #fdba74; }
        body[data-app-mode="3"] .app-mobile-nav button.nav-mob-active { color: #fcd34d; }
        body[data-app-mode="4"] .app-mobile-nav button.nav-mob-active { color: #fda4af; }
        body[data-app-mode="5"] .app-mobile-nav button.nav-mob-active { color: #c4b5fd; }

        /*
         * Liquid glass buttons (same family as .nav-glass-pill + logbook period track).
         * Excludes segment controls inside tracks (nav + logbook period).
         */
        body[data-app-mode] button:not(.nav-btn):not(.filter-btn):not(.nav-glass-pill):not(.mob-nav-tab):not(.modal-glass-close):not(.salary-fold-btn) {
            -webkit-appearance: none;
            appearance: none;
            cursor: pointer;
            border-radius: 9999px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
            backdrop-filter: blur(14px) saturate(1.35);
            -webkit-backdrop-filter: blur(14px) saturate(1.35);
            border: 1px solid rgba(255, 255, 255, 0.11) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.14),
                0 4px 20px rgba(0, 0, 0, 0.28),
                0 0 0 1px rgba(255, 255, 255, 0.05);
            color: #e2e8f0;
            transition:
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                color 0.25s ease,
                transform 0.2s ease;
        }
        body[data-app-mode] button:not(.nav-btn):not(.filter-btn):not(.nav-glass-pill):not(.mob-nav-tab):not(.modal-glass-close):not(.salary-fold-btn):hover {
            border-color: rgba(52, 211, 153, 0.38) !important;
            color: #f8fafc;
            box-shadow:
                inset 0 1px 0 rgba(52, 211, 153, 0.14),
                0 6px 24px rgba(0, 0, 0, 0.35),
                0 0 24px rgba(52, 211, 153, 0.09);
        }
        body[data-app-mode] button:not(.nav-btn):not(.filter-btn):not(.nav-glass-pill):not(.mob-nav-tab):not(.modal-glass-close):not(.salary-fold-btn):active {
            transform: scale(0.98);
        }
        body[data-app-mode] button:not(.nav-btn):not(.filter-btn):not(.nav-glass-pill):not(.mob-nav-tab):not(.modal-glass-close):not(.salary-fold-btn):focus-visible {
            outline: 2px solid rgba(52, 211, 153, 0.5);
            outline-offset: 2px;
        }
        body[data-app-mode] button[class*="emerald"]:not(.filter-btn):not(.nav-btn):not(.mob-nav-tab):not(.app-header-icon-btn) {
            border-color: rgba(52, 211, 153, 0.42) !important;
            color: #d1fae5;
            box-shadow:
                inset 0 1px 0 rgba(52, 211, 153, 0.2),
                0 4px 20px rgba(0, 0, 0, 0.28),
                0 0 22px rgba(52, 211, 153, 0.1);
        }
        body[data-app-mode] button[class*="emerald"]:not(.filter-btn):not(.nav-btn):not(.mob-nav-tab):not(.app-header-icon-btn):hover {
            border-color: rgba(52, 211, 153, 0.55) !important;
            color: #fff;
            box-shadow:
                inset 0 1px 0 rgba(52, 211, 153, 0.24),
                0 6px 26px rgba(0, 0, 0, 0.34),
                0 0 28px rgba(52, 211, 153, 0.14);
        }
        body[data-app-mode] button[class*="sky"]:not(.filter-btn):not(.nav-btn):not(.nav-glass-pill):not(.notam-tab):not(.mob-nav-tab):not(.app-header-icon-btn) {
            border-color: rgba(56, 189, 248, 0.4) !important;
            color: #e0f2fe;
            box-shadow:
                inset 0 1px 0 rgba(56, 189, 248, 0.16),
                0 4px 20px rgba(0, 0, 0, 0.28),
                0 0 22px rgba(56, 189, 248, 0.1);
        }
        body[data-app-mode] button[class*="sky"]:not(.filter-btn):not(.nav-btn):not(.nav-glass-pill):not(.notam-tab):not(.mob-nav-tab):not(.app-header-icon-btn):hover {
            border-color: rgba(56, 189, 248, 0.58) !important;
            color: #fff;
            box-shadow:
                inset 0 1px 0 rgba(56, 189, 248, 0.22),
                0 6px 26px rgba(0, 0, 0, 0.34),
                0 0 28px rgba(56, 189, 248, 0.14);
        }
        body[data-app-mode] button[class*="amber"]:not(.filter-btn):not(.nav-btn):not(.mob-nav-tab) {
            border-color: rgba(251, 191, 36, 0.45) !important;
            color: #fef3c7;
            box-shadow:
                inset 0 1px 0 rgba(251, 191, 36, 0.16),
                0 4px 20px rgba(0, 0, 0, 0.28),
                0 0 22px rgba(251, 191, 36, 0.1);
        }
        body[data-app-mode] button[class*="amber"]:not(.filter-btn):not(.nav-btn):not(.mob-nav-tab):hover {
            border-color: rgba(251, 191, 36, 0.6) !important;
            color: #fff;
            box-shadow:
                inset 0 1px 0 rgba(251, 191, 36, 0.2),
                0 6px 26px rgba(0, 0, 0, 0.34),
                0 0 28px rgba(251, 191, 36, 0.14);
        }
        body[data-app-mode] button.notam-tab {
            border-radius: 0.65rem 0.65rem 0 0;
            border-bottom-width: 2px !important;
            border-bottom-style: solid !important;
            border-bottom-color: transparent !important;
        }
        body[data-app-mode] .notam-tab.active {
            background: linear-gradient(135deg, rgba(56, 189, 248, 0.72) 0%, rgba(56, 189, 248, 0.42) 100%) !important;
            border: 1px solid rgba(56, 189, 248, 0.55) !important;
            border-bottom: 2px solid rgba(125, 211, 252, 0.95) !important;
            color: #0f172a !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.38),
                0 4px 18px rgba(56, 189, 248, 0.22);
        }
        body[data-app-mode] .floating-slide-nav-btn {
            border-radius: 1.25rem;
        }

        .floating-slide-nav-btn {
            position: fixed;
            top: 50vh;
            transform: translateY(-50%);
            z-index: 65;
            display: inline-flex;
            align-items: center;
            gap: 0.85rem;
            padding: 1.15rem 1.45rem;
            border-radius: 1.25rem;
            transition:
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                color 0.25s ease,
                transform 0.2s ease;
            cursor: pointer;
        }
        .floating-slide-nav-btn-left { left: 0.9rem; }
        .floating-slide-nav-btn-right { right: 0.9rem; }
        .floating-slide-nav-label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
        @media (max-width: 767px) {
            .floating-slide-nav-btn {
                padding: 0.8rem;
                gap: 0;
                justify-content: center;
            }
            .floating-slide-nav-btn-left { left: 0.45rem; }
            .floating-slide-nav-btn-right { right: 0.45rem; }
            .floating-slide-nav-label {
                display: none !important;
            }
        }
        
        .photo-cover { object-fit: cover; border-radius: 0.75rem; }
        .safe-input { position: relative; z-index: 50; cursor: text; }
        
        .filter-btn { padding: 0.65rem 1.35rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s ease; border: 1px solid rgba(148, 163, 184, 0.3); color: #94a3b8; }
        .filter-btn:hover { background-color: rgba(16, 185, 129, 0.1); color: #10b981; border-color: rgba(16, 185, 129, 0.3); }
        .filter-btn.active { background-color: #10b981; color: #0f172a; border-color: #10b981; }
        /* Match #main-nav-track-desktop: rounded-full border-slate-700/60 bg-slate-950/40 shadow-inner */
        .logbook-period-filters {
            position: relative;
            isolation: isolate;
            display: inline-flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem;
            border-radius: 9999px;
            background: rgba(2, 6, 23, 0.4);
            border: 1px solid rgba(51, 65, 85, 0.6);
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
            flex-shrink: 0;
        }
        .logbook-period-filters .filter-btn {
            position: relative;
            z-index: 2;
            cursor: pointer;
            border: none;
            background: transparent;
            color: #94a3b8;
            padding: 0.4rem 0.65rem;
            font-size: 0.7rem;
            letter-spacing: 0.08em;
            transition: color 0.3s ease;
            white-space: nowrap;
        }
        @media (max-width: 639px) {
            .logbook-period-filters {
                width: 100%;
                justify-content: space-between;
                gap: 0;
            }
            .logbook-period-filters .filter-btn {
                flex: 1 1 0%;
                text-align: center;
                padding: 0.38rem 0.3rem;
                font-size: 0.625rem;
                letter-spacing: 0.04em;
            }
        }
        .logbook-period-filters .filter-btn:hover {
            background: transparent;
            color: #a7f3d0;
        }
        .logbook-period-filters .filter-btn.active {
            background: transparent;
            color: #6ee7b7;
            box-shadow: none;
        }
        #logbook-period-glass { border-radius: 9999px; }
        /* Logbook search: same shell as .logbook-period-filters */
        .logbook-search-field {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            width: 100%;
            min-width: 0;
            padding: 0.2rem 0.65rem 0.2rem 0.75rem;
            border-radius: 9999px;
            background: rgba(2, 6, 23, 0.4);
            border: 1px solid rgba(51, 65, 85, 0.6);
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .logbook-search-field:focus-within {
            border-color: rgba(52, 211, 153, 0.38);
            box-shadow:
                inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
                0 0 0 1px rgba(52, 211, 153, 0.12);
        }
        .logbook-search-field .logbook-search-icon {
            color: #64748b;
            flex-shrink: 0;
            font-size: 0.8125rem;
            transition: color 0.2s ease;
        }
        .logbook-search-field:focus-within .logbook-search-icon {
            color: #6ee7b7;
        }
        .logbook-search-field .logbook-search-input {
            flex: 1;
            min-width: 0;
            background: transparent;
            border: none;
            outline: none;
            box-shadow: none;
            color: #f8fafc;
            font-size: 0.875rem;
            line-height: 1.45;
            padding: 0.4rem 0.15rem 0.4rem 0;
        }
        .logbook-search-field .logbook-search-input::placeholder {
            color: #94a3b8;
        }
        .logbook-kpi { background: rgba(30, 41, 59, 0.65); backdrop-filter: blur(10px); border: 1px solid rgba(51, 65, 85, 0.55); border-radius: 1rem; padding: 1.35rem 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.15rem; text-align: left; transition: border-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 24px rgba(2, 6, 23, 0.35); position: relative; overflow: hidden; }
        .logbook-kpi::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, #34d399, #059669); opacity: 0.85; }
        .logbook-kpi:hover { border-color: rgba(52, 211, 153, 0.35); box-shadow: 0 8px 28px rgba(2, 6, 23, 0.45); }
        .logbook-kpi-icon { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.22); color: #34d399; font-size: 1.05rem; }
        .logbook-chart-shell { background: rgba(30, 41, 59, 0.55); backdrop-filter: blur(10px); border: 1px solid rgba(51, 65, 85, 0.55); border-radius: 1rem; padding: 1.15rem 1.15rem 0.9rem; box-shadow: 0 4px 24px rgba(2, 6, 23, 0.3); display: flex; flex-direction: column; height: 20rem; }
        .logbook-chart-shell .logbook-chart-head { padding: 0.125rem 0.25rem 0.65rem; margin-bottom: 0.35rem; border-bottom: 1px solid rgba(51, 65, 85, 0.5); }
        .logbook-chart-shell .logbook-chart-head h4 { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #e2e8f0; margin: 0; }
        .logbook-chart-shell .logbook-chart-head p { font-size: 0.65rem; color: #64748b; margin: 0.2rem 0 0; font-weight: 600; letter-spacing: 0.04em; }
        .logbook-chart-shell .logbook-chart-canvas { flex: 1; min-height: 0; position: relative; width: 100%; }
        .logbook-compact-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem 0.75rem; padding: 0.7rem 0.85rem; border-radius: 1rem; background: linear-gradient(165deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.72) 100%); border: 1px solid rgba(71, 85, 105, 0.55); box-shadow: 0 8px 28px rgba(2, 6, 23, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); }
        .logbook-compact-bar .logbook-compact-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 0.75rem; min-width: 0; flex: 1; }
        .logbook-compact-bar .logbook-compact-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; min-width: 0; flex: 1; }
        @media (min-width: 640px) {
            .logbook-compact-bar { flex-wrap: nowrap; padding: 0.65rem 0.95rem; gap: 0.75rem 1rem; }
            .logbook-compact-bar .logbook-compact-inner { flex-wrap: nowrap; gap: 0.75rem; }
            .logbook-compact-bar .logbook-compact-metrics { flex-wrap: nowrap; flex: 1 1 auto; align-items: stretch; }
        }
        .logbook-highlight-stat { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.2rem 0.5rem 0.2rem 0; }
        .logbook-quick-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; flex: 1 1 0; min-width: 0; }
        @media (max-width: 639px) { .logbook-quick-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } }
        .logbook-mini-stat { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.2rem; min-width: 0; padding: 0.5rem 0.55rem; border-radius: 0.65rem; background: rgba(2, 6, 23, 0.45); border: 1px solid rgba(51, 65, 85, 0.65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
        .logbook-mini-stat .logbook-mini-lbl { font-size: 0.5rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; line-height: 1.15; }
        .logbook-mini-stat .logbook-mini-val { font-size: clamp(0.95rem, 2vw, 1.2rem); font-weight: 900; color: #f8fafc; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; width: 100%; white-space: nowrap; }
        .logbook-mini-stat .logbook-mini-val.emerald-stat { color: #6ee7b7; }
        .logbook-quick-period { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.15rem; padding: 0.45rem 0.6rem; border-radius: 0.6rem; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(52, 211, 153, 0.22); flex-shrink: 0; min-width: 5.5rem; max-width: 9rem; }
        .logbook-quick-period .logbook-period-lbl { font-size: 0.5rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #34d399; }
        .logbook-quick-period .logbook-period-val { font-size: 0.6875rem; font-weight: 700; color: #e2e8f0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
        @media (max-width: 639px) { .logbook-quick-period { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; } }
        .logbook-dashboard { position: relative; border-radius: 1rem; padding: 1.1rem 1.25rem 1.25rem; overflow: hidden; border: 1px solid rgba(100, 116, 139, 0.2); background: linear-gradient(165deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.88) 100%); box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
        .logbook-dashboard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #059669, #34d399 40%, #38bdf8); opacity: 0.95; }
        .logbook-dash-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.15rem; margin-bottom: 0.85rem; padding-bottom: 0.85rem; border-bottom: 1px solid rgba(51, 65, 85, 0.5); position: relative; z-index: 1; }
        .logbook-dash-badge { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(52, 211, 153, 0.28); color: #34d399; font-size: 0.95rem; flex-shrink: 0; }
        .logbook-chart-card { background: rgba(15, 23, 42, 0.45); border: 1px solid rgba(51, 65, 85, 0.45); border-radius: 0.75rem; padding: 0.65rem 0.75rem 0.55rem; display: flex; flex-direction: column; min-height: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
        .logbook-chart-card .lc-head { padding: 0 0.1rem 0.35rem; margin-bottom: 0.25rem; border-bottom: 1px solid rgba(51, 65, 85, 0.4); }
        .logbook-chart-card .lc-head h4 { margin: 0; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: #cbd5e1; }
        .logbook-chart-card .lc-head p { display: none; }
        .logbook-chart-card .lc-canvas { flex: 1; min-height: 0; position: relative; width: 100%; }
        .logbook-charts-grid { display: grid; grid-template-columns: 1fr; gap: 0.85rem; }
        @media (min-width: 480px) { .logbook-charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (min-width: 1024px) { .logbook-charts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.95rem; } }
        .logbook-map-launch-btn {
            align-self: flex-end;
            min-height: 2.35rem;
            min-width: 2.35rem;
            border-radius: 0.85rem;
        }
        .logbook-main-section .logbook-toolbar-actions > button,
        .logbook-main-section .logbook-map-launch-btn,
        .logbook-main-section .logbook-search-field {
            min-height: 2.35rem;
        }
        .logbook-main-section .flight-card > .flight-card-primary {
            flex: 1 1 0;
            min-width: 0;
        }
        .logbook-main-section .flight-card > .flight-card-rail {
            flex: 0 0 auto;
            min-width: 0;
            padding-left: 0.6rem;
            margin-left: 0.15rem;
            border-left: 1px solid rgba(71, 85, 105, 0.5);
        }
        #logbook-map-modal .logbook-map-shell {
            width: 100%;
            max-width: 64rem;
            max-height: 88vh;
        }
        #logbook-dest-map {
            width: 100%;
            height: min(58vh, 36rem);
            border-radius: 1rem;
        }
        #logbook-map-period-track {
            align-self: flex-start;
            width: fit-content;
            max-width: 100%;
        }
        
        /* Responsive Mobile Charts */
        .logbook-dashboard .logbook-chart-card.logbook-chart-square { aspect-ratio: 16/9; width: 100%; min-height: 0; max-height: none; }
        @media (min-width: 768px) {
            .logbook-dashboard .logbook-chart-card.logbook-chart-square { aspect-ratio: 1; }
        }

        /* Safe area padding for modern phones (iPhone Home Bar) */
        .pb-safe { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
        
        /* Smooth momentum scrolling for iOS devices */
        .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }

        .cal-day-box { aspect-ratio: 1; border-radius: 0.875rem; padding: 0.65rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,0.1); }
        .roster-main-section .roster-weekday-row { display: none; }
        .roster-main-section #roster-calendar-grid.roster-day-list {
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            width: 100%;
        }
        .roster-main-section #roster-calendar-grid .roster-day-row {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            border-radius: 0.95rem;
            border: 1px solid rgba(71, 85, 105, 0.6);
            background: rgba(15, 23, 42, 0.6);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            padding: 0.75rem 0.85rem;
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .roster-main-section #roster-calendar-grid .roster-day-row.duty-flight {
            border-color: rgba(56, 189, 248, 0.55);
            background: linear-gradient(145deg, rgba(14, 116, 144, 0.30), rgba(15, 23, 42, 0.85));
            box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.18), 0 8px 20px rgba(14, 116, 144, 0.18);
        }
        .roster-main-section #roster-calendar-grid .roster-day-row.duty-off {
            border-color: rgba(16, 185, 129, 0.55);
            background: linear-gradient(145deg, rgba(6, 95, 70, 0.30), rgba(15, 23, 42, 0.85));
            box-shadow: inset 0 1px 0 rgba(110, 231, 183, 0.16), 0 8px 20px rgba(6, 95, 70, 0.18);
        }
        .roster-main-section #roster-calendar-grid .roster-day-row.duty-standby {
            border-color: rgba(245, 158, 11, 0.55);
            background: linear-gradient(145deg, rgba(146, 64, 14, 0.28), rgba(15, 23, 42, 0.85));
            box-shadow: inset 0 1px 0 rgba(253, 186, 116, 0.16), 0 8px 20px rgba(146, 64, 14, 0.18);
        }
        .roster-main-section #roster-calendar-grid .roster-day-row.duty-leave {
            border-color: rgba(168, 85, 247, 0.55);
            background: linear-gradient(145deg, rgba(107, 33, 168, 0.28), rgba(15, 23, 42, 0.85));
            box-shadow: inset 0 1px 0 rgba(196, 181, 253, 0.15), 0 8px 20px rgba(107, 33, 168, 0.16);
        }
        .roster-main-section #roster-calendar-grid .roster-day-row.duty-sick {
            border-color: rgba(244, 63, 94, 0.55);
            background: linear-gradient(145deg, rgba(159, 18, 57, 0.30), rgba(15, 23, 42, 0.85));
            box-shadow: inset 0 1px 0 rgba(251, 113, 133, 0.16), 0 8px 20px rgba(159, 18, 57, 0.18);
        }
        .roster-main-section #roster-calendar-grid .roster-day-row.duty-layover {
            border-color: rgba(249, 115, 22, 0.55);
            background: linear-gradient(145deg, rgba(154, 52, 18, 0.28), rgba(15, 23, 42, 0.85));
            box-shadow: inset 0 1px 0 rgba(251, 146, 60, 0.16), 0 8px 20px rgba(154, 52, 18, 0.18);
        }
        .roster-main-section #roster-calendar-grid .roster-day-row:hover {
            transform: translateY(-1px);
            border-color: rgba(148, 163, 184, 0.7);
        }
        .roster-main-section #roster-calendar-grid .roster-day-row.is-today {
            border-color: rgba(251, 191, 36, 0.95);
            background: linear-gradient(145deg, rgba(251, 191, 36, 0.14), rgba(15, 23, 42, 0.78));
            box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2), 0 8px 24px rgba(251, 191, 36, 0.18);
        }
        .roster-main-section #roster-calendar-grid .roster-day-date {
            flex: 0 0 auto;
            width: 4.15rem;
            text-align: center;
            border-right: 1px solid rgba(71, 85, 105, 0.5);
            padding-right: 0.75rem;
        }
        .roster-main-section #roster-calendar-grid .roster-day-num {
            font-size: 1.15rem;
            font-weight: 900;
            color: #f8fafc;
            line-height: 1;
        }
        .roster-main-section #roster-calendar-grid .roster-day-dow {
            margin-top: 0.18rem;
            font-size: 0.58rem;
            letter-spacing: 0.08em;
            font-weight: 800;
            text-transform: uppercase;
            color: #94a3b8;
        }
        .roster-main-section #roster-calendar-grid .roster-day-main {
            min-width: 0;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }
        .roster-main-section #roster-calendar-grid .roster-day-type {
            font-size: 0.6rem;
            font-weight: 900;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            color: #cbd5e1;
        }
        .roster-main-section #roster-calendar-grid .roster-day-route {
            font-size: 0.82rem;
            font-weight: 700;
            color: #e2e8f0;
            line-height: 1.25;
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }
        .roster-main-section #cal-month-title,
        .roster-main-section #roster-calendar-grid {
            transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
            will-change: opacity, transform;
        }
        #friend-roster-modal #friend-weekday-row { display: none; }
        #friend-roster-modal #friend-roster-calendar-grid.roster-day-list { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-row { display: flex; align-items: center; gap: 0.9rem; border-radius: 0.95rem; border: 1px solid rgba(71, 85, 105, 0.6); background: rgba(15, 23, 42, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); padding: 0.75rem 0.85rem; }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-row.duty-flight { border-color: rgba(56, 189, 248, 0.55); background: linear-gradient(145deg, rgba(14, 116, 144, 0.30), rgba(15, 23, 42, 0.85)); box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.18), 0 8px 20px rgba(14, 116, 144, 0.18); }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-row.duty-off { border-color: rgba(16, 185, 129, 0.55); background: linear-gradient(145deg, rgba(6, 95, 70, 0.30), rgba(15, 23, 42, 0.85)); box-shadow: inset 0 1px 0 rgba(110, 231, 183, 0.16), 0 8px 20px rgba(6, 95, 70, 0.18); }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-row.duty-standby { border-color: rgba(245, 158, 11, 0.55); background: linear-gradient(145deg, rgba(146, 64, 14, 0.28), rgba(15, 23, 42, 0.85)); box-shadow: inset 0 1px 0 rgba(253, 186, 116, 0.16), 0 8px 20px rgba(146, 64, 14, 0.18); }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-row.duty-leave { border-color: rgba(168, 85, 247, 0.55); background: linear-gradient(145deg, rgba(107, 33, 168, 0.28), rgba(15, 23, 42, 0.85)); box-shadow: inset 0 1px 0 rgba(196, 181, 253, 0.15), 0 8px 20px rgba(107, 33, 168, 0.16); }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-row.duty-sick { border-color: rgba(244, 63, 94, 0.55); background: linear-gradient(145deg, rgba(159, 18, 57, 0.30), rgba(15, 23, 42, 0.85)); box-shadow: inset 0 1px 0 rgba(251, 113, 133, 0.16), 0 8px 20px rgba(159, 18, 57, 0.18); }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-row.duty-layover { border-color: rgba(249, 115, 22, 0.55); background: linear-gradient(145deg, rgba(154, 52, 18, 0.28), rgba(15, 23, 42, 0.85)); box-shadow: inset 0 1px 0 rgba(251, 146, 60, 0.16), 0 8px 20px rgba(154, 52, 18, 0.18); }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-row.is-today { border-color: rgba(251, 191, 36, 0.95); background: linear-gradient(145deg, rgba(251, 191, 36, 0.14), rgba(15, 23, 42, 0.78)); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2), 0 8px 24px rgba(251, 191, 36, 0.18); }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-date { flex: 0 0 auto; width: 4.15rem; text-align: center; border-right: 1px solid rgba(71, 85, 105, 0.5); padding-right: 0.75rem; }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-num { font-size: 1.15rem; font-weight: 900; color: #f8fafc; line-height: 1; }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-dow { margin-top: 0.18rem; font-size: 0.58rem; letter-spacing: 0.08em; font-weight: 800; text-transform: uppercase; color: #94a3b8; }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.25rem; }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-type { font-size: 0.6rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; color: #cbd5e1; }
        #friend-roster-modal #friend-roster-calendar-grid .roster-day-route { font-size: 0.82rem; font-weight: 700; color: #e2e8f0; line-height: 1.25; display: flex; flex-direction: column; gap: 0.2rem; }
        .roster-main-section .roster-month-exit {
            opacity: 0;
            transform: translateY(10px);
        }
        .roster-main-section .roster-month-enter {
            opacity: 0;
            transform: translateY(-8px);
        }

        /* Logbook: mobile layout (bottom nav safe area handled by .main-app-section padding-bottom) */
        @media (max-width: 767px) {
            .logbook-main-section {
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
                padding-top: 0.5rem !important;
                padding-bottom: 6rem !important;
                align-items: stretch !important;
            }
            .logbook-main-section .logbook-page-head {
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                align-items: end;
                justify-content: space-between;
                margin-top: 0.25rem;
                margin-bottom: 0.75rem;
                padding-bottom: 0.75rem;
                gap: 0.55rem;
            }
            .logbook-main-section .logbook-map-launch-btn {
                align-self: flex-end;
                width: auto;
                justify-content: center;
                border-radius: 0.85rem;
            }
            .logbook-main-section .logbook-page-head > .min-w-0 {
                flex: 1 1 13rem;
            }
            .logbook-main-section .logbook-toolbar {
                flex-direction: column;
                align-items: stretch;
                gap: 0.5rem;
                width: 100%;
                flex: 1 1 100%;
            }
            .logbook-main-section .logbook-toolbar-actions {
                display: flex;
                flex-wrap: nowrap;
                align-items: stretch;
                gap: 0.35rem;
                width: 100%;
            }
            .logbook-main-section .logbook-toolbar-actions > button {
                min-height: 2.35rem;
                flex: 1 1 0;
                min-width: 0;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
                font-size: 0.6rem;
                letter-spacing: 0.07em;
                white-space: nowrap;
            }
            .logbook-main-section .logbook-search-field {
                min-height: 2.35rem;
                padding-left: 0.85rem;
                padding-right: 0.7rem;
            }
            .logbook-main-section .logbook-compact-bar {
                flex-direction: column;
                align-items: stretch;
                padding: 0.55rem 0.6rem;
                gap: 0.55rem;
            }
            /* One row: period = content-width; stats use remaining width so values stay fully visible */
            .logbook-main-section .logbook-compact-inner {
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: stretch;
                justify-content: flex-start;
                width: 100%;
                gap: 0.4rem;
                min-width: 0;
            }
            .logbook-main-section #logbook-period-track {
                flex: 1 1 0%;
                width: auto;
                max-width: calc(100% - 10.75rem);
                min-width: 0;
                overflow: visible;
            }
            /* Period pills: same metrics as desktop (.logbook-period-filters .filter-btn) — track padding 0.25rem, gap 0.25rem */
            .logbook-main-section .logbook-compact-metrics {
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: stretch;
                flex: 1 1 0;
                width: auto;
                min-width: 10.25rem;
                max-width: none;
                gap: 0;
            }
            .logbook-main-section .logbook-quick-period {
                display: none;
            }
            .logbook-main-section .logbook-quick-stats {
                display: grid;
                grid-template-columns: minmax(2.65rem, 1fr) minmax(2.65rem, 1fr) minmax(3.85rem, 1.55fr);
                gap: 0.28rem;
                width: 100%;
                min-width: 0;
                max-width: none;
            }
            .logbook-main-section .logbook-mini-stat {
                padding: 0.45rem 0.28rem;
                border-radius: 0.52rem;
                align-items: center;
                text-align: center;
                justify-content: center;
                min-width: 0;
                min-height: 3.15rem;
            }
            .logbook-main-section .logbook-mini-stat .logbook-mini-lbl {
                font-size: 0.5rem;
                letter-spacing: 0.07em;
                width: 100%;
                text-align: center;
            }
            .logbook-main-section .logbook-mini-stat .logbook-mini-val {
                font-size: clamp(0.78rem, 3.8vw, 1.05rem);
                font-variant-numeric: tabular-nums;
                width: 100%;
                text-align: center;
                line-height: 1.2;
                white-space: nowrap;
                overflow: visible;
                text-overflow: clip;
            }
            .logbook-main-section #btn-logbook-stats-toggle {
                width: 100%;
                justify-content: center;
                min-height: 2.5rem;
            }
            .logbook-main-section #logbook-stats-panel .logbook-dashboard {
                padding: 0.75rem 0.85rem 1rem;
            }
            .logbook-main-section #logbook-grid {
                gap: 0.5rem;
            }
        }
        @media (max-width: 380px) {
            .logbook-main-section .logbook-compact-metrics {
                min-width: 8.85rem;
            }
            .logbook-main-section #logbook-period-track {
                max-width: calc(100% - 8.75rem);
            }
            .logbook-main-section .logbook-quick-stats {
                grid-template-columns: minmax(2.35rem, 1fr) minmax(2.35rem, 1fr) minmax(3.4rem, 1.55fr);
                gap: 0.22rem;
            }
            .logbook-main-section .logbook-mini-stat {
                padding: 0.38rem 0.12rem;
            }
            .logbook-main-section .logbook-mini-stat .logbook-mini-val {
                font-size: 0.74rem;
            }
        }
        @media (max-width: 767px) {
            .main-app-section.roster-main-section,
            .main-app-section.friends-main-section,
            .main-app-section.documents-main-section,
            .main-app-section.salary-main-section {
                padding-left: 0.75rem !important;
                padding-right: 0.75rem !important;
                padding-top: 0.5rem !important;
                padding-bottom: 6rem;
                align-items: stretch !important;
            }
            .roster-main-section .roster-page-head,
            .friends-main-section .friends-page-head,
            .documents-main-section .docs-page-head,
            .salary-main-section .salary-page-head {
                margin-top: 0.25rem;
                margin-bottom: 0.75rem;
                padding-bottom: 0.75rem;
            }
            .documents-main-section .docs-add-row {
                flex-direction: column !important;
                align-items: stretch !important;
                width: 100% !important;
                max-width: 100%;
                min-width: 0;
                gap: 0.5rem !important;
            }
            .documents-main-section .docs-add-row #custom-doc-name {
                width: 100% !important;
                min-width: 0;
                max-width: 100%;
                box-sizing: border-box;
                font-size: 1rem;
                line-height: 1.25;
                min-height: 2.75rem;
                padding: 0.65rem 0.75rem;
            }
            .documents-main-section .docs-add-row #btn-add-document {
                width: 100% !important;
                min-height: 2.75rem;
                justify-content: center;
                flex-shrink: 0;
            }
            @media (min-width: 420px) and (max-width: 767px) {
                .documents-main-section .docs-add-row {
                    flex-direction: row !important;
                    align-items: stretch !important;
                }
                .documents-main-section .docs-add-row #btn-add-document {
                    width: auto !important;
                    min-width: 5.5rem;
                }
                .documents-main-section .docs-add-row #custom-doc-name {
                    flex: 1 1 0%;
                    min-width: 0;
                }
            }
            .documents-main-section #documents-grid {
                gap: 0.7rem;
                min-width: 0;
                width: 100%;
                max-width: 100%;
            }
            .documents-main-section #documents-grid .glass-panel {
                padding: 0.85rem;
                border-radius: 1rem;
                min-width: 0;
                max-width: 100%;
                box-sizing: border-box;
            }
            .documents-main-section #documents-grid .grid.grid-cols-1.sm\:grid-cols-2 {
                grid-template-columns: 1fr !important;
                gap: 0.55rem !important;
                min-width: 0;
            }
            .documents-main-section #documents-grid .glass-panel > .grid label {
                display: block;
                min-width: 0;
                max-width: 100%;
                font-size: 0.6875rem !important;
                letter-spacing: 0.06em !important;
            }
            .documents-main-section #documents-grid input[type="date"] {
                width: 100%;
                min-width: 0;
                max-width: 100%;
                box-sizing: border-box;
                font-size: 1rem;
                line-height: 1.25;
                min-height: 2.75rem;
                padding: 0.62rem 0.65rem;
                -webkit-appearance: none;
                appearance: none;
                color-scheme: dark;
            }
            /* Document card actions: stack full-width on small phones; row from ~480px in JS */
            .documents-main-section #documents-grid .doc-card-actions {
                flex-direction: column !important;
                align-items: stretch !important;
                justify-content: flex-start !important;
                gap: 0.5rem !important;
            }
            .documents-main-section #documents-grid .doc-card-actions > button {
                flex: 0 0 auto !important;
                width: 100% !important;
                max-width: none;
                white-space: normal;
                line-height: 1.2;
            }
            @media (min-width: 480px) {
                .documents-main-section #documents-grid .doc-card-actions {
                    flex-direction: row !important;
                    align-items: center !important;
                    justify-content: flex-end !important;
                }
                .documents-main-section #documents-grid .doc-card-actions > button {
                    width: auto !important;
                    flex: 0 1 auto !important;
                    white-space: nowrap;
                }
            }
            @media (max-width: 360px) {
                .documents-main-section #documents-grid .glass-panel {
                    padding: 0.7rem 0.6rem;
                }
                .documents-main-section .docs-add-row #custom-doc-name {
                    font-size: 0.9375rem;
                }
            }
            .roster-main-section .roster-toolbar {
                max-width: none;
                width: 100%;
            }
            .roster-main-section .roster-toolbar #btn-roster-upload {
                min-height: 2.75rem;
            }
            .roster-main-section .roster-calendar-shell {
                padding: 1rem 0.55rem 1.15rem;
                border-radius: 1.25rem;
            }
            .roster-main-section .roster-calendar-nav {
                margin-bottom: 0.85rem;
                padding-bottom: 0.65rem;
            }
            .roster-main-section .roster-calendar-nav h2#cal-month-title {
                font-size: 0.8rem;
                letter-spacing: 0.08em;
                line-height: 1.25;
                text-align: center;
                padding: 0 0.2rem;
                word-break: break-word;
            }
            .roster-main-section .roster-calendar-nav button {
                width: 2.25rem;
                height: 2.25rem;
                flex-shrink: 0;
            }
            .roster-main-section #roster-calendar-grid {
                gap: 0.28rem;
            }
            .roster-main-section .roster-weekday-row {
                gap: 0.15rem;
                font-size: 0.52rem;
                letter-spacing: 0.02em;
                margin-bottom: 0.3rem;
            }
            .roster-main-section .roster-legend {
                flex-wrap: wrap;
                gap: 0.45rem 0.75rem;
                justify-content: center;
                font-size: 0.52rem;
                margin-top: 0.85rem;
            }
            .roster-main-section #roster-calendar-grid .cal-day-box {
                padding: 0.28rem 0.18rem;
                border-radius: 0.45rem;
            }
            .friends-main-section .friends-invite-row {
                max-width: none;
                width: 100%;
            }
            .friends-main-section #btn-add-friend {
                width: 100%;
                justify-content: center;
                min-height: 2.75rem;
            }
            .friends-main-section #friends-grid {
                gap: 1rem;
            }
            .friends-main-section #friends-grid > .glass-panel {
                padding: 0.85rem 0.75rem 0.95rem;
                border-radius: 1rem;
            }
            .friends-main-section #friends-grid > .glass-panel h3 {
                font-size: 1rem;
            }
            .friends-main-section #friends-grid > .glass-panel button[onclick^="removeFriend"] {
                top: 0.5rem;
                right: 0.5rem;
                width: 1.75rem;
                height: 1.75rem;
            }
            #export-modal {
                padding: max(0.65rem, env(safe-area-inset-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px)) max(0.65rem, env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px));
                align-items: center;
                justify-content: center;
            }
            #export-modal > div {
                max-width: 100%;
                width: 100%;
                border-radius: 1.25rem;
                max-height: min(92dvh, calc(100svh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
                margin-top: auto;
                margin-bottom: auto;
                display: flex;
                flex-direction: column;
                min-height: 0;
            }
            #export-modal .export-modal-body {
                min-height: 0;
                flex: 1 1 auto;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            #export-modal .grid.grid-cols-2 {
                grid-template-columns: 1fr !important;
                gap: 0.6rem !important;
            }
            #export-modal input[type="date"] {
                min-height: 2.75rem;
                min-width: 0;
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                font-size: 1rem;
                line-height: 1.25;
                padding: 0.65rem 0.65rem;
                -webkit-appearance: none;
                appearance: none;
            }
            #export-modal .export-modal-actions {
                margin-top: 0.7rem !important;
                gap: 0.65rem !important;
                flex-direction: column !important;
                align-items: stretch !important;
            }
            #export-modal .export-modal-actions > button {
                width: 100% !important;
                min-height: 2.75rem;
                flex: 0 0 auto !important;
            }
            @media (min-width: 480px) and (max-width: 767px) {
                #export-modal .export-modal-actions {
                    flex-direction: row !important;
                    align-items: center !important;
                }
                #export-modal .export-modal-actions > button {
                    width: 50% !important;
                    flex: 1 1 0% !important;
                }
            }
            @media (max-width: 360px) {
                #export-modal {
                    padding-left: 0.35rem;
                    padding-right: 0.35rem;
                }
                #export-modal .export-modal-head {
                    padding-left: 1rem !important;
                    padding-right: 1rem !important;
                    padding-top: 1rem !important;
                    padding-bottom: 0.85rem !important;
                }
                #export-modal .export-modal-body {
                    padding: 0.85rem !important;
                }
                #export-modal h3 {
                    font-size: 1.15rem !important;
                    padding-right: 2.5rem;
                    line-height: 1.2;
                }
            }
            #logbook-map-modal {
                padding: 0.75rem;
            }
            #logbook-map-modal .logbook-map-shell {
                border-radius: 1rem;
                max-height: 92vh;
            }
            #logbook-map-modal #logbook-dest-map {
                height: 50vh;
                min-height: 15rem;
            }
            /* Mobile cards: 2-row layout — row1: date+route, row2: flag+blk+aircraft+reg+status */
            .logbook-main-section .flight-card {
                border-radius: 1rem;
                box-shadow:
                    0 0 0 1px rgba(51, 65, 85, 0.35),
                    0 6px 24px rgba(0, 0, 0, 0.22);
            }
            .logbook-main-section .flight-card > .flight-card-primary {
                display: flex;
                flex-direction: row;
                align-items: center;
                min-width: 0;
                width: 100%;
            }
            .logbook-main-section .flight-card .flight-card-route {
                min-width: 0;
            }
            .logbook-main-section .flight-card > .flight-card-rail {
                padding-left: 0 !important;
                margin-left: 0 !important;
                border-left: none !important;
                border-top: 1px solid rgba(51, 65, 85, 0.55);
                padding-top: 0.5rem;
                width: 100%;
                min-width: 0;
            }
            .logbook-main-section .flight-card .flight-card-memory {
                font-size: 0.5rem;
                line-height: 1.2;
                max-width: 3.25rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        @media (min-width: 640px) {
            .logbook-main-section .flight-card {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                gap: 0.75rem;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
            }
            .logbook-main-section .flight-card::-webkit-scrollbar {
                height: 4px;
            }
            .logbook-main-section .flight-card::-webkit-scrollbar-thumb {
                background: rgba(100, 116, 139, 0.55);
                border-radius: 999px;
            }
            .logbook-main-section .flight-card > .flight-card-primary {
                display: flex !important;
                flex: 1 1 0 !important;
                width: auto !important;
                min-width: 0 !important;
            }
            .logbook-main-section .flight-card > .flight-card-rail {
                width: auto !important;
                min-width: 0;
                border-top: none !important;
                padding-top: 0 !important;
                padding-left: 0.6rem !important;
                margin-left: 0.15rem !important;
                border-left: 1px solid rgba(71, 85, 105, 0.5) !important;
            }
            .logbook-main-section .flight-card .flight-card-memory {
                font-size: 0.625rem;
                max-width: none;
                overflow: visible;
                text-overflow: unset;
                white-space: normal;
            }
        }
        @media (max-width: 430px) {
            /* iPhone-size briefing: cleaner hierarchy and spacing */
            #empty-state-container {
                padding-left: 0.7rem !important;
                padding-right: 0.7rem !important;
                padding-top: 0.25rem !important;
                min-height: auto;
            }
            #empty-state-container .welcome-hero {
                padding: 1rem 0.9rem 1.1rem;
                border-radius: 1.25rem;
            }
            #empty-state-container .welcome-hero h1 {
                font-size: 2rem;
                line-height: 1.08;
                margin-bottom: 0.55rem;
            }
            #empty-state-container .welcome-hero p {
                font-size: 0.98rem;
                line-height: 1.4;
            }
            #empty-state-container .briefing-hero-toprow {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }

            /* iPhone-size: keep cards square but give content breathing room */
            #empty-state-container .grid.grid-cols-2 {
                grid-template-columns: 1fr;
                gap: 0.85rem;
            }
            #empty-state-container .grid.grid-cols-2 > .glass-panel {
                aspect-ratio: auto;
            }
            #empty-state-container .grid.grid-cols-2 > .glass-panel > .bg-slate-900\/80 {
                min-height: 12.75rem;
                justify-content: flex-start;
                gap: 0.55rem;
            }
            #empty-state-container .grid.grid-cols-2 h3 {
                font-size: 1.05rem;
                line-height: 1.25;
            }
            #empty-state-container .grid.grid-cols-2 p {
                line-height: 1.35;
            }
            #empty-state-container .grid.grid-cols-2 button {
                min-height: 2.55rem;
                white-space: nowrap;
            }
            #empty-state-container .grid.grid-cols-2 form {
                margin-top: 0.35rem !important;
                width: 100%;
            }
            #empty-state-container .grid.grid-cols-2 button[onclick="openManualFlightModal()"] {
                margin-top: 0.35rem !important;
            }
        }