* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --bg-color: #f5f5f5;
            --bg-secondary: #ffffff;
            --text-color: #333;
            --text-secondary: #666;
            --text-tertiary: #767676;
            --border-color: #e0e0e0;
            --shadow: rgba(0,0,0,0.1);
            --sidebar-bg: #ffffff;
            --card-bg: #fafafa;
            --input-bg: #ffffff;
            --button-bg: #ffffff;
            --button-hover: #f5f5f5;
            --header-gradient: linear-gradient(135deg, #2e7d32 0%, #1976d2 100%);
            --header-icon-color: white;
            --warning-bg: #fff3e0;
            --warning-text: #e65100;
            --primary: #2e7d32;
            --danger: #d32f2f;
            --surface-alt: #fafafa;
            --primary-green: #4caf50;
            --dark-green: #2e7d32;
            --light-green: #66bb6a;

            /* Blue Colors */
            --blue-primary: #1976d2;
            --blue-light: #2196f3;
            --tracking-color: var(--blue-light);
            --tracking-color-rgb: 33, 150, 243;  /* For rgba() usage */

            /* Utility Colors */
            --white: #ffffff;
            --shadow-green: rgba(76, 175, 80, 0.3);

            /* Border Radius Scale */
            --radius-sm: 4px;
            --radius-md: 6px;
            --radius-lg: 8px;
            --radius-xl: 12px;

            /* Spacing Scale */
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 12px;
            --spacing-lg: 16px;
            --spacing-xl: 20px;

            /* POI Info Section Colors */
            --info-section-bg: #f8f9fa;
            --info-section-border: #e0e0e0;
            --side-left-color: #2196f3;
            --side-right-color: var(--warning-color);
            --elevation-warning-bg: #fff3e0;
            --link-color: var(--primary-green);
            --warning-color: var(--warning-color);
            --danger-color: #f44336;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #1a1a1a;
                --bg-secondary: #2a2a2a;
                --text-color: #e0e0e0;
                --text-secondary: #a0a0a0;
                --text-tertiary: #808080;
                --border-color: #404040;
                --shadow: rgba(0,0,0,0.3);
                --sidebar-bg: #2a2a2a;
                --card-bg: #333333;
                --input-bg: #3a3a3a;
                --button-bg: #3a3a3a;
                --button-hover: #454545;
                --header-gradient: linear-gradient(135deg, #1b5e20 0%, #0d47a1 100%);
                --header-icon-color: white;
                --warning-bg: #3a2a1a;
                --warning-text: #ffb74d;
                --primary: #4caf50;
                --danger: #ef5350;
                --surface-alt: #333333;
                --primary-green: #66bb6a;
                --light-green: #81c784;

                /* Blue Colors - Dark Mode */
                --blue-primary: #42a5f5;
                --blue-light: #64b5f6;

                /* POI Info Section Colors - Dark Mode */
                --info-section-bg: #2d2d2d;
                --info-section-border: #404040;
                --side-left-color: #42a5f5;
                --side-right-color: #ffa726;
                --elevation-warning-bg: #3a2a1a;
                --link-color: var(--light-green);
                --warning-color: #ffa726;
                --danger-color: #ef5350;
            }
        }

        /*
         * Force light mode (overrides system dark preference)
         * This class is added when user explicitly selects light mode on a system
         * that prefers dark mode. It resets variables to :root defaults, overriding
         * the @media (prefers-color-scheme: dark) block above.
         *
         * Note: All values here are identical to :root defaults. This redundancy
         * is necessary because CSS specificity requires explicit values to override
         * the media query. Consider this a reset block rather than a definition block.
         */
        body.light-mode {
            --bg-color: #f5f5f5;
            --bg-secondary: #ffffff;
            --text-color: #333;
            --text-secondary: #666;
            --text-tertiary: #767676;
            --border-color: #e0e0e0;
            --shadow: rgba(0,0,0,0.1);
            --sidebar-bg: #ffffff;
            --card-bg: #fafafa;
            --input-bg: #ffffff;
            --button-bg: #ffffff;
            --button-hover: #f5f5f5;
            --header-gradient: linear-gradient(135deg, #2e7d32 0%, #1976d2 100%);
            --header-icon-color: white;
            --warning-bg: #fff3e0;
            --warning-text: #e65100;
            --primary: #2e7d32;
            --danger: #d32f2f;
            --surface-alt: #fafafa;
            --primary-green: #4caf50;
            --dark-green: #2e7d32;
            --light-green: #66bb6a;
            --blue-primary: #1976d2;
            --blue-light: #2196f3;
            --info-section-bg: #f8f9fa;
            --info-section-border: #e0e0e0;
            --side-left-color: #2196f3;
            --side-right-color: var(--warning-color);
            --elevation-warning-bg: #fff3e0;
            --link-color: var(--primary-green);
            --warning-color: var(--warning-color);
            --danger-color: #f44336;
        }

        /* Force dark mode (overrides system light preference) */
        body.dark-mode {
            --bg-color: #1a1a1a;
            --bg-secondary: #2a2a2a;
            --text-color: #e0e0e0;
            --text-secondary: #a0a0a0;
            --text-tertiary: #808080;
            --border-color: #404040;
            --shadow: rgba(0,0,0,0.3);
            --sidebar-bg: #2a2a2a;
            --card-bg: #333333;
            --input-bg: #3a3a3a;
            --button-bg: #3a3a3a;
            --button-hover: #454545;
            --header-gradient: linear-gradient(135deg, #1b5e20 0%, #0d47a1 100%);
            --header-icon-color: white;
            --warning-bg: #3a2a1a;
            --warning-text: #ffb74d;
            --primary: #4caf50;
            --danger: #ef5350;
            --surface-alt: #333333;
            --primary-green: #66bb6a;
            --light-green: #81c784;
            --blue-primary: #42a5f5;
            --blue-light: #64b5f6;
            --info-section-bg: #2d2d2d;
            --info-section-border: #404040;
            --side-left-color: #42a5f5;
            --side-right-color: #ffa726;
            --elevation-warning-bg: #3a2a1a;
            --link-color: var(--light-green);
            --warning-color: #ffa726;
            --danger-color: #ef5350;
        }

        /* ============================================
           Route Direction Arrow Styling
           ============================================ */

        /* Custom SVG arrow markers with rotation support */
        .leaflet-marker-icon {
            /* Ensure smooth rotation transitions */
            transition: transform 0.1s ease-out;
        }

        .leaflet-marker-icon svg {
            /* Ensure SVG renders crisply */
            shape-rendering: geometricPrecision;
        }

        /* Ensure arrows stay on top of route but below POIs */
        .leaflet-pane .leaflet-marker-pane {
            z-index: 600;
        }

        /* Chart-to-map hover marker with orange glow */
        .chart-hover-marker {
            filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.8)) drop-shadow(0 0 16px rgba(255, 107, 53, 0.5));
        }

        /* Active route glow effect - highlights the selected route on the map */
        .active-route-glow {
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
        }

        body.dark-mode .active-route-glow {
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 12px rgba(100, 180, 255, 0.5));
        }

        /* ===== Bootstrap Icons Styling ===== */
        .bi {
            color: currentColor;
            vertical-align: middle;
            display: inline-block;
        }

        /* ===== Button System ===== */

        /* Base button styles */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-md);
            font-weight: 500;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            text-decoration: none;
            font-family: inherit;
            line-height: 1.5;
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        /* Primary action buttons */
        .btn-primary {
            background: var(--primary-green);
            color: white;
            border: none;
        }

        .btn-primary:hover:not(:disabled) {
            background: var(--dark-green);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
        }

        .btn-primary:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: 0 1px 4px rgba(76, 175, 80, 0.3);
        }

        /* Secondary action buttons */
        .btn-secondary {
            background: transparent;
            color: var(--text-color);
            border: 1px solid var(--border-color);
        }

        .btn-secondary:hover:not(:disabled) {
            border-color: var(--primary-green);
            color: var(--primary-green);
            background: rgba(76, 175, 80, 0.05);
        }

        .btn-secondary:active:not(:disabled) {
            background: rgba(76, 175, 80, 0.1);
        }

        /* Danger/delete buttons */
        .btn-danger {
            background: var(--danger);
            color: white;
            border: none;
        }

        .btn-danger:hover:not(:disabled) {
            background: #b71c1c;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3);
        }

        .btn-danger:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: 0 1px 4px rgba(211, 47, 47, 0.3);
        }

        /* Icon-only buttons */
        .btn-icon {
            width: 36px;
            height: 36px;
            padding: 0;
            background: transparent;
            border: 1px solid var(--border-color);
        }

        .btn-icon:hover:not(:disabled) {
            border-color: var(--primary-green);
            color: var(--primary-green);
            background: rgba(76, 175, 80, 0.05);
        }

        /* Button sizes */
        .btn-sm {
            padding: var(--spacing-xs) var(--spacing-sm);
            font-size: 12px;
            gap: 4px;
        }

        .btn-lg {
            padding: var(--spacing-md) var(--spacing-xl);
            font-size: 15px;
            gap: 8px;
        }

        .btn-icon.btn-sm {
            width: 28px;
            height: 28px;
        }

        .btn-icon.btn-lg {
            width: 44px;
            height: 44px;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: var(--bg-color);
            color: var(--text-color);
            transition: background 0.3s ease, color 0.3s ease;
            padding-top: 90px; /* Space for fixed header (15px + 28px + 6px + 14px + 15px + extra) */
        }

        /* Remove body padding when map view is active to eliminate white gap between header and map */
        body:has(.main-content:not(.initial-view)) {
            padding-top: 0;
        }
        
        .container {
            max-width: 1300px; /* Optimized to fit workflow panels on 1366px screens */
            margin: 0 auto;
            padding: 20px;
        }

        /* Remove container padding when main content is not in initial view */
        .container:has(.main-content:not(.initial-view)) {
            padding: 0;
            margin: 0;
            max-width: none;
        }

        /* Full-screen Map View Container */
        .map-view-container {
            position: fixed;
            top: 45px; /* Below header - matches compact header height (8px padding top + ~53px content + 8px padding bottom) */
            left: 0;
            right: 0;
            bottom: 0;
            overflow-x: visible; /* Allow toggle button to extend beyond sidebar */
            overflow-y: hidden;
            z-index: 1;
        }

        /* When header is hidden, map fills full viewport height */
        body.header-hidden .map-view-container {
            top: 0;
        }

        #map {
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* Sidebar Overlay */
        .sidebar-overlay {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: auto !important;
            bottom: 0 !important;
            width: 350px !important;
            max-height: none !important;
            height: auto !important;
            background: var(--bg-color);
            box-shadow: 2px 0 12px rgba(0,0,0,0.15);
            z-index: 10010; /* Above footer-bar (10002) and tracking controls, but below modals (50000) */
            transition: transform 150ms ease !important;
            overflow: hidden !important; /* Removed split overflow to fix spec constraint */
            display: block !important; /* Override .sidebar display: none */
            padding: 6px 6px 0 6px;
            box-sizing: border-box;
        }

        .sidebar-overlay.collapsed {
            transform: translateX(-350px) !important;
        }

        .sidebar-content {
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden; /* Container doesn't scroll, children do */
        }

        /* Sidebar Toggle Tab - Consistent with other panel tabs */
        /* Fixed positioning strategy: Button is positioned relative to viewport, not sidebar */
        /* This allows it to extend beyond sidebar boundaries without overflow issues */
        .sidebar-toggle-tab {
            position: fixed; /* Changed from absolute to fixed for viewport positioning */
            left: 350px; /* Position at right edge of 350px sidebar when expanded */
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 44px;
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            border-left: none;
            border-radius: 0 8px 8px 0;
            box-shadow: 2px 0 8px rgba(0,0,0,0.15);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: left 150ms ease, transform 150ms ease, width 0.2s ease;
            z-index: 10010; /* Same as sidebar-overlay */
            opacity: 0.9;
            color: #333; /* Default dark grey for light mode arrow icons */
        }

        .sidebar-toggle-tab:hover {
            background: var(--hover-bg, #f0f0f0);
            opacity: 1;
            width: 46px;
            box-shadow: 2px 0 12px rgba(0,0,0,0.2);
        }

        /* Dark mode base state - light grey arrows on dark background */
        body.dark-mode .sidebar-toggle-tab {
            color: #a0a0a0 !important; /* Medium light grey for arrow icons */
        }

        /* Dark mode hover state - subtle grey background with lighter arrows */
        body.dark-mode .sidebar-toggle-tab:hover {
            background: #404040; /* Subtle grey instead of bright green */
            color: #f0f0f0; /* Lighter grey on hover for better contrast */
        }

        /* System dark mode preference - matches body.dark-mode styling */
        @media (prefers-color-scheme: dark) {
            .sidebar-toggle-tab {
                color: #a0a0a0; /* Medium light grey for arrow icons */
            }

            .sidebar-toggle-tab:hover {
                background: #404040; /* Subtle grey instead of bright green */
                color: #f0f0f0; /* Lighter grey on hover for better contrast */
            }
        }

        .sidebar-toggle-tab svg {
            transition: transform 150ms ease;
        }

        /* Button positioning when sidebar is collapsed */
        body.sidebar-collapsed .sidebar-toggle-tab {
            /* Move button to screen edge when sidebar is off-screen */
            left: 0px !important; /* At left edge of viewport when collapsed */
            transform: translateY(-50%) !important; /* Keep vertical centering */
        }

        /* Show left arrow when expanded, hide right arrow */
        body:not(.sidebar-collapsed) .sidebar-toggle-tab .arrow-left {
            display: block;
        }

        body:not(.sidebar-collapsed) .sidebar-toggle-tab .arrow-right {
            display: none;
        }

        /* Show right arrow when collapsed, hide left arrow */
        body.sidebar-collapsed .sidebar-toggle-tab .arrow-left {
            display: none;
        }

        body.sidebar-collapsed .sidebar-toggle-tab .arrow-right {
            display: block;
        }

        /* Mobile: Full screen sidebar */
        @media (max-width: 768px) {
            .sidebar-overlay {
                width: 100% !important; /* Override desktop 350px */
                max-width: 100% !important;
                bottom: 0 !important;
                padding: 6px 10px 0 10px; /* Slightly more horizontal padding for mobile */
            }

            .sidebar-overlay.collapsed {
                transform: translateX(-100%);
            }

            .sidebar-toggle-tab {
                display: none !important; /* Hide vertical toggle button on mobile */
            }

            /* Hide slider arrow buttons on mobile */
            .slider-arrow {
                display: none !important;
            }

            /* Mobile menu button - tab style matching other panel tabs */
            .mobile-menu-btn {
                display: none; /* Hidden by default */
            }

            body.header-hidden .mobile-menu-btn {
                display: flex;
                position: fixed;
                top: 38px;
                left: 0;
                z-index: 10020;
                width: 40px;
                height: 44px;
                align-items: center;
                justify-content: center;
                background: var(--bg-color, #ffffff);
                border: 1px solid var(--border-color, #e0e0e0);
                border-left: none;
                border-radius: 0 8px 8px 0;
                box-shadow: 2px 0 8px rgba(0,0,0,0.15);
                cursor: pointer;
                transition: all 0.2s ease;
            }

            body.header-hidden .mobile-menu-btn i {
                font-size: 18px;
                color: var(--text-color, #333);
            }

            body.header-hidden .mobile-menu-btn:hover {
                background: var(--hover-bg, #f0f0f0);
                width: 46px;
                box-shadow: 2px 0 12px rgba(0,0,0,0.2);
            }

            body.header-hidden .mobile-menu-btn:active {
                transform: scale(0.95);
            }

            /* Dark mode styles */
            body.dark-mode.header-hidden .mobile-menu-btn {
                background: var(--bg-color);
                border-color: var(--border-color);
            }

            body.dark-mode.header-hidden .mobile-menu-btn i {
                color: var(--text-color);
            }

            body.dark-mode.header-hidden .mobile-menu-btn:hover {
                background: var(--button-hover);
            }

            /* Hide when sidebar is open */
            body.header-hidden:not(.sidebar-collapsed) .mobile-menu-btn {
                display: none;
            }
        }

        /* Desktop: Hide mobile menu button completely */
        @media (min-width: 769px) {
            .mobile-menu-btn {
                display: none !important;
            }
        }

        /* Hide old sidebar structure */
        #sidebarOld {
            display: none !important;
        }

        /* Mobile hamburger button - hidden on desktop, shown on mobile */
        .sidebar-toggle {
            display: none; /* Hidden on desktop by default */
        }

        /* Ensure it stays hidden on desktop even with active class */
        @media (min-width: 769px) {
            .sidebar-toggle,
            .sidebar-toggle.active {
                display: none !important;
            }
        }

        @media (max-width: 768px) {
            .sidebar-toggle.active {
                display: flex !important; /* Show on mobile only when route is loaded */
                position: absolute; /* Position within header instead of fixed */
                top: 50% !important;
                left: 10px !important;
                transform: translateY(-50%) !important;
                width: 36px;
                height: 36px;
                background: rgba(255, 255, 255, 0.15);
                border: 1px solid rgba(255, 255, 255, 0.3);
                border-radius: var(--radius-md);
                align-items: center;
                justify-content: center;
                cursor: pointer;
                z-index: 10; /* Within header stacking context */
                box-shadow: none;
            }

            .sidebar-toggle.active:hover {
                background: rgba(255, 255, 255, 0.25);
                border-color: rgba(255, 255, 255, 0.5);
                transform: translateY(-50%) scale(1.05) !important;
            }

            .sidebar-toggle.active:active {
                transform: translateY(-50%) scale(0.95) !important;
            }

            .sidebar-toggle svg,
            .sidebar-toggle .bi {
                width: 20px;
                height: 20px;
                stroke: white;
                color: white;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                fill: none;
            }

            body.dark-mode .sidebar-toggle.active {
                background: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.2);
            }

            body.dark-mode .sidebar-toggle.active:hover {
                background: rgba(255, 255, 255, 0.2);
            }

            body.dark-mode .sidebar-toggle svg,
            body.dark-mode .sidebar-toggle .bi {
                stroke: white;
                color: white;
            }
        }

        /* Map view container hidden until GPX loaded */
        .map-view-container {
            display: none;
        }

        .map-view-container.active {
            display: block;
        }

        header {
            background: var(--header-gradient);
            color: white;
            padding: 15px 20px;
            text-align: center;
            box-shadow: 0 2px 10px var(--shadow);
            position: fixed; /* Fixed position so it stays at top */
            top: 0;
            left: 0;
            right: 0;
            overflow: visible; /* Changed from hidden to visible to allow language dropdown to extend beyond header */
            transition: padding 0.3s ease;
            z-index: 10005; /* Above leaflet popup container (10003) so sidebar toggle button works */
            isolation: isolate; /* Create stacking context to contain background SVG */
        }

        header.compact {
            padding: 8px 20px;
        }

        header.compact h1 {
            font-size: 16px;
            margin-bottom: 0;
        }

        header.compact .tagline {
            display: none;
        }

        /* Hidden header mode - completely hides header to maximize map space */
        header.hidden {
            display: none !important;
        }

        /* When header is hidden, expand map to fill full viewport */
        header.hidden ~ .main-content .map-view-container,
        body.header-hidden .map-view-container {
            top: 0 !important;
        }

        /* Move mobile hamburger to fixed position when header is hidden */
        body.header-hidden .sidebar-toggle.active {
            position: fixed !important;
            top: 10px !important;
            left: 10px !important;
            transform: none !important;
            z-index: 10020 !important;
            background: var(--bg-color) !important;
            border: 1px solid var(--border-color) !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
        }

        @media (max-width: 768px) {
            body.header-hidden .sidebar-toggle.active {
                background: rgba(255, 255, 255, 0.95) !important;
            }

            body.dark-mode.header-hidden .sidebar-toggle.active {
                background: rgba(30, 30, 30, 0.95) !important;
            }
        }

        .project-name-display {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 400;
            opacity: 0.85;
            max-width: 250px;
            min-width: 0; /* Allow flex shrinking */
        }

        .project-name-display i {
            font-size: 16px;
            flex-shrink: 0;
        }

        .project-name-display-content {
            display: flex;
            flex-direction: column;
            gap: 2px;
            overflow: hidden;
            max-width: 100%;
        }

        .project-name-display-filename {
            display: flex;
            align-items: center;
            gap: 6px;
            overflow: hidden;
        }

        #projectNameText {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 220px; /* Explicit constraint for long names */
            position: relative;
        }

        /* Tooltip on hover to show full project name */
        #projectNameText[data-full-name]:hover::after {
            content: attr(data-full-name);
            position: absolute;
            bottom: 100%;
            left: 0;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 4px;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        /* Tooltip arrow */
        #projectNameText[data-full-name]:hover::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 10px;
            border: 5px solid transparent;
            border-top-color: rgba(0, 0, 0, 0.9);
            margin-bottom: -6px;
            z-index: 1000;
            pointer-events: none;
        }

        .project-name-display-subtitle {
            font-size: 11px;
            opacity: 0.7;
            font-weight: 300;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 22px;
        }

        #projectNameSubtitleText {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative; /* Enable tooltip positioning */
        }

        /* Hover tooltip to show full subtitle */
        #projectNameSubtitleText[data-full-name]:hover::after {
            content: attr(data-full-name);
            position: absolute;
            top: 100%;
            left: 0;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            margin-top: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            pointer-events: none;
        }

        /* Tooltip arrow for subtitle */
        #projectNameSubtitleText[data-full-name]:hover::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 10px;
            border: 5px solid transparent;
            border-bottom-color: rgba(0, 0, 0, 0.9);
            margin-top: -10px;
            z-index: 1001;
            pointer-events: none;
        }

        header.compact .project-name-display {
            font-size: 12px;
            max-width: 200px;
        }

        header.compact .project-name-display i {
            font-size: 14px;
        }

        header.compact .project-name-display-subtitle {
            font-size: 10px;
            padding-left: 20px;
        }

        header.compact #headerBackground {
            opacity: 0.5;
        }

        #headerBackground {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            opacity: 1;
            pointer-events: none;
            transition: opacity 0.3s ease;
            overflow: hidden; /* Prevent SVG from extending beyond header */
        }

        header h1, header p {
            position: relative;
            z-index: 1;
        }

        header h1 {
            padding-left: 55px; /* Make space for hamburger button (5px left + 40px width + 10px gap) */
        }

        h1 {
            font-size: 28px;
            margin-bottom: 6px;
            transition: font-size 0.3s ease, margin-bottom 0.3s ease;
        }

        .tagline {
            font-size: 14px;
            opacity: 0.9;
            transition: opacity 0.3s ease;
        }

        .beta-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #dc3545;
            color: white;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            padding: 3px 8px;
            border-radius: 12px;
            margin-left: 8px;
            vertical-align: middle;
            text-transform: uppercase;
            box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
            transition: all 0.3s ease;
        }

        header.compact .beta-badge {
            font-size: 9px;
            padding: 2px 6px;
            margin-left: 6px;
        }

        /* Beta badge works in both light and dark modes with solid red */
        body.dark-mode .beta-badge {
            background: #f44336;
            box-shadow: 0 2px 4px rgba(244, 67, 54, 0.4);
        }

        /* Header Actions Container (top-right corner) */
        .header-actions {
            position: absolute;
            top: 15px;
            right: 20px;
            z-index: 10001; /* Above all other elements including modals */
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* Header Save GPX Button */
        .header-save-gpx-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: var(--blue-primary);
            border: 1px solid var(--blue-primary);
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 13px;
            font-weight: 500;
            color: white;
        }

        .header-save-gpx-btn:hover {
            background: var(--blue-light);
            border-color: var(--blue-light);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
        }

        .header-save-gpx-btn i {
            font-size: 14px;
        }

        /* Hide header save button on mobile */
        @media (max-width: 768px) {
            .header-save-gpx-btn {
                display: none !important;
            }
        }

        /* Compact header adjustments */
        header.compact .header-actions {
            top: 8px;
        }

        header.compact .header-save-gpx-btn {
            padding: 6px 12px;
            font-size: 12px;
        }

        /* Landing Page Language Selector (now inside header-actions) */
        .landing-language-selector {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Footer language container removed - language switcher now in Tools menu */

        .landing-language-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
            font-weight: 500;
            color: white;
            backdrop-filter: blur(10px);
        }

        .landing-language-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        #landingLanguageFlag {
            font-size: 20px;
            line-height: 1;
            pointer-events: none; /* Ensure clicks pass through to button */
        }

        #landingLanguageText {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
            pointer-events: none; /* Ensure clicks pass through to button */
        }

        /* Ensure arrow icon clicks pass through to button */
        .landing-language-btn .bi-chevron-down {
            pointer-events: none;
        }

        /* Note: header.compact .landing-language-selector removed - selector now inside header-actions */

        header.compact .landing-language-btn {
            padding: 0.35rem 0.8rem;
        }

        /* Language Dropdown Menu Styles */
        .language-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: var(--radius-lg);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.2s ease;
            z-index: 10002; /* Above parent selector (10001) to ensure dropdown appears on top */
            min-width: 180px;
            overflow: hidden;
        }

        .language-dropdown.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .language-dropdown-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            width: 100%;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: background 0.2s ease;
            font-size: 14px;
            text-align: left;
            color: #333;
        }

        .language-dropdown-item:hover {
            background: rgba(76, 175, 80, 0.1);
        }

        .language-dropdown-item:not(:last-child) {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .language-item-flag {
            font-size: 20px;
            line-height: 1;
            flex-shrink: 0;
        }

        .language-item-name {
            flex: 1;
            font-weight: 500;
        }

        .language-item-check {
            color: var(--primary-green);
            font-size: 16px;
            opacity: 0;
            transition: opacity 0.2s ease;
            flex-shrink: 0;
        }

        .language-dropdown-item.active .language-item-check {
            opacity: 1;
        }

        /* Footer Language Dropdown (opens upward) */
        .language-dropdown-footer {
            top: auto;
            bottom: calc(100% + 8px);
            background: var(--bg-color);
            border: 1px solid var(--border-color);
        }

        .language-dropdown-footer .language-dropdown-item {
            color: var(--text-color);
        }

        .language-dropdown-footer .language-dropdown-item:hover {
            background: rgba(76, 175, 80, 0.1);
        }

        .main-content {
            margin-top: 20px;
            transition: all 0.3s ease;
            max-width: 100vw;
            overflow-x: hidden;
            /* When sidebar is visible (fixed position), leave space for it */
            margin-left: 370px; /* 350px sidebar + 20px gap */
            margin-right: 20px;
            width: calc(100vw - 390px); /* Full width minus sidebar (350px), gap (20px), and right margin (20px) */
        }

        /* Collapsed sidebar state - take full width */
        .main-content.sidebar-collapsed {
            margin-left: 20px; /* Just left padding */
            margin-right: 20px; /* Just right padding */
            width: calc(100vw - 40px); /* Full width minus left and right margins */
        }
        
        .main-content.initial-view {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 60vh;
            margin-left: 0; /* No sidebar margin in initial view */
            margin-right: 0; /* Reset right margin for proper centering */
            width: auto; /* Allow content to determine width for centering */
        }

        @media (max-width: 768px) {
            .main-content.initial-view {
                min-height: auto;
                padding-top: 10px;
            }

            .project-name-display {
                display: none !important;
            }
        }

        /* Clock Time Settings Modal - Mobile Responsive */
        @media (max-width: 600px) {
            .clock-time-inputs-row {
                flex-direction: column !important;
                gap: 8px !important;
            }
        }

        .upload-section-wrapper {
            max-width: 1286px; /* 340 + 391 + 340 + (24*2 gaps) + (32*2 padding) + margins = 1286px */
            width: 100%;
            background: var(--sidebar-bg);
            border-radius: 12px;
            padding: 24px 32px;
            box-shadow: 0 4px 24px var(--shadow);
            border: 1px solid var(--border-color);
            transition: box-shadow 0.3s ease;
            animation: fadeInUp 0.6s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .upload-section-wrapper:hover {
            box-shadow: 0 8px 32px var(--shadow);
        }

        /* Stagger animation for option cards */
        .option-card:nth-child(3) {
            animation: fadeInUp 0.6s ease-out 0.1s both;
        }

        .option-card:nth-child(5) {
            animation: fadeInUp 0.6s ease-out 0.2s both;
        }

        .option-card:nth-child(7) {
            animation: fadeInUp 0.6s ease-out 0.3s both;
        }

        .feature-list {
            animation: fadeInUp 0.6s ease-out 0.4s both;
        }
        
        .sidebar {
            background: var(--sidebar-bg);
            border-radius: var(--radius-lg);
            padding: 20px 20px 0 20px; /* Remove bottom padding from sidebar itself */
            box-shadow: 0 2px 10px var(--shadow);
            max-height: calc(100vh - 165px); /* Account for header (~90px), margin (20px), and footer (~55px) */
            height: calc(100vh - 165px);
            overflow-y: auto;
            overflow-x: hidden;
            display: none; /* Hidden until file is loaded */
            transition: all 0.3s ease;
            position: fixed; /* Fixed position to stay visible on scroll */
            top: 90px; /* Below fixed header (matches body padding-top) */
            left: 20px; /* Match container padding */
            width: 310px; /* Total with padding = 350px */
            z-index: 100; /* Above map but below modals */
            box-sizing: border-box; /* Include padding in height calculation */
        }

        /* Ensure sidebar scrolls smoothly */
        .sidebar::-webkit-scrollbar {
            width: 8px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: var(--card-bg);
            border-radius: 4px;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 4px;
        }

        .sidebar::-webkit-scrollbar-thumb:hover {
            background: var(--text-tertiary);
        }

        .sidebar.active {
            display: block;
        }

        /* Collapsed sidebar - slide out to the left */
        .sidebar.collapsed {
            transform: translateX(-100%);
            opacity: 0;
            width: 0;
            padding: 0;
            min-width: 0;
            box-shadow: none;
        }

        /* Hamburger toggle button */
        .sidebar-toggle {
            position: absolute;
            top: 5px; /* 5px from top of header */
            left: 5px; /* 5px from left of header */
            width: 40px; /* Reduced by 10% from 44px */
            height: 40px; /* Reduced by 10% from 44px */
            background: var(--sidebar-bg);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-lg);
            display: none; /* Hidden until sidebar is active */
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10; /* Above header content but within header stacking context */
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px var(--shadow);
        }

        /* Removed obsolete .sidebar-toggle.sidebar-closed positioning rule - now handled by body.sidebar-collapsed */

        .sidebar-toggle:hover {
            background: var(--button-hover);
            border-color: var(--dark-green);
            transform: scale(1.05);
            box-shadow: 0 4px 16px rgba(46, 125, 50, 0.3);
        }

        .sidebar-toggle:active {
            transform: scale(0.95);
        }

        .sidebar-toggle.active {
            display: flex;
        }

        /* Hamburger icon SVG styling */
        .sidebar-toggle svg {
            width: 24px;
            height: 24px;
            stroke: var(--text-color);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: stroke 0.2s ease;
        }

        .sidebar-toggle:hover svg {
            stroke: var(--dark-green);
        }

        body.dark-mode .sidebar-toggle:hover svg {
            stroke: #1a1a1a;
        }

        body.dark-mode .sidebar-toggle:hover .bi {
            color: #1a1a1a;
        }

        body.dark-mode .sidebar-toggle svg {
            stroke: var(--primary-green);
        }

        /* Dark mode - green icon color for all icon elements */
        body.dark-mode .sidebar-toggle .bi {
            color: var(--primary-green);
        }

        /* System dark mode preference - green icon color */
        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) .sidebar-toggle svg {
                stroke: var(--primary-green);
            }

            body:not(.light-mode) .sidebar-toggle .bi {
                color: var(--primary-green);
            }

            body:not(.light-mode) .sidebar-toggle:hover svg {
                stroke: #1a1a1a;
            }

            body:not(.light-mode) .sidebar-toggle:hover .bi {
                color: #1a1a1a;
            }
        }

        /* Base state for arrow icons */
        .hamburger-icon,
        .arrow-icon {
            transition: all 0.3s ease;
            position: absolute;
        }

        /* Default state when sidebar collapsed: show right arrow only */
        body.sidebar-collapsed .hamburger-icon {
            opacity: 0;
            transform: scale(0.8);
        }

        body.sidebar-collapsed .arrow-left {
            opacity: 0;
            transform: scale(0.8);
        }

        body.sidebar-collapsed .arrow-right {
            opacity: 1;
            transform: scale(1);
        }

        /* When sidebar is expanded: show left arrow only */
        body:not(.sidebar-collapsed) .hamburger-icon {
            opacity: 0;
            transform: scale(0.8);
        }

        body:not(.sidebar-collapsed) .arrow-left {
            opacity: 1;
            transform: scale(1);
        }

        body:not(.sidebar-collapsed) .arrow-right {
            opacity: 0;
            transform: scale(0.8);
        }

        /* Default state before body classes are applied: show hamburger */
        .hamburger-icon {
            opacity: 1;
            transform: scale(1);
        }

        .arrow-icon {
            opacity: 0;
            transform: scale(0.8);
        }
        
        .map-section {
            display: flex;
            flex-direction: column;
            gap: 5px;
            display: none; /* Hidden until file is loaded */
            position: relative; /* Make toolbar position relative to this container */
        }
        
        .map-section.active {
            display: flex;
        }
        
        .map-container {
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            padding: 10px;
            box-shadow: 0 2px 10px var(--shadow);
            height: 600px;
            position: relative;
            z-index: 1; /* Low z-index to stay below header (200) and sidebar (100) */
        }
        
        #map {
            width: 100%;
            height: 100%;
            border-radius: 4px;
            z-index: 1; /* Ensure map stays below header and sidebar */
        }


        /* Ensure Leaflet's container also respects z-index hierarchy */
        .leaflet-container {
            z-index: 1 !important; /* Force low z-index on Leaflet map */
        }

        /* When a Leaflet popup is open, the map container needs a higher z-index
           so the popup can appear above the footer bar (z-index 10002) on mobile.
           Using :has() selector to detect when popup is visible */
        .leaflet-container:has(.leaflet-popup) {
            z-index: 10003 !important; /* Above footer bar (10002) but below modals (50000) */
        }

        /* Ensure popups appear above map controls within the Leaflet container.
           Leaflet's DOM hierarchy creates stacking contexts:
           - .leaflet-map-pane (z-index: 400) contains all map layers including popup-pane
           - .leaflet-control-container (sibling to map-pane) contains zoom/layers controls
           Problem: Since control-container comes after map-pane in DOM and both are
           in the same stacking context, controls appear above the entire map-pane.
           Solution: Raise map-pane's z-index when a popup is open so it appears above controls. */
        .leaflet-map-pane:has(.leaflet-popup) {
            z-index: 1001 !important; /* Above control-container's controls */
        }

        .elevation-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-secondary);
            border-radius: 0;
            padding: 0;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
            display: none;
            z-index: 90; /* Below sidebar (100) but above map */
            transition: left 150ms ease, transform 150ms ease;
        }

        /* When sidebar is expanded (not collapsed), elevation panel starts after sidebar */
        body:not(.sidebar-collapsed) .elevation-container:not(.collapsed) {
            left: 350px;  /* Start after 350px sidebar */
        }

        /* When sidebar is collapsed, elevation panel is full width */
        body.sidebar-collapsed .elevation-container:not(.collapsed) {
            left: 0;  /* Full width */
        }

        /* Collapsed state: bottom-right corner widget */
        .elevation-container.collapsed {
            position: fixed;
            bottom: 20px;        /* Above leaflet and openstreetmap copyright */
            right: -7px;         /* Right corner - offset to avoid map controls */
            left: auto;          /* Remove full-width */
            width: 220px;        /* Fixed compact width */
            background: transparent; /* Transparent in mini view for cleaner appearance */
            box-shadow: none;    /* Remove shadow when collapsed */
        }

        /* Toggle icon for elevation panel */
        .elevation-toggle-icon {
            position: absolute;
            top: -24px; /* Position above the panel (adjusted for new height) */
            right: 20px;
            width: 60px; /* Landscape orientation - width × height flipped from sidebar */
            height: 24px;
            background: var(--bg-color); /* Match sidebar toggle background */
            border: 1px solid var(--border-color);
            border-bottom: none; /* Attaches to panel below */
            border-radius: var(--radius-md) 6px 0 0; /* Rounded top corners */
            box-shadow: 0 -2px 8px rgba(0,0,0,0.15); /* Upward shadow matching sidebar intensity */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 150ms ease; /* Match sidebar timing */
            z-index: 91; /* Above elevation container */
            opacity: 0.9; /* Match sidebar opacity */
        }

        .elevation-toggle-icon svg {
            transition: transform 150ms ease;
        }

        .elevation-toggle-icon:hover {
            opacity: 1;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
            transform: translateY(-2px); /* Slight lift on hover */
        }

        /* Center toggle icon above collapsed widget */
        .elevation-container.collapsed .elevation-toggle-icon {
            right: 80px;         /* Centered above 220px widget (220/2 - 30px) */
        }

        body.dark-mode .elevation-toggle-icon:hover {
            background: var(--light-green); /* Green background in dark mode */
            color: #1a1a1a;
        }

        body.dark-mode .elevation-toggle-icon:hover svg {
            stroke: #1a1a1a; /* Black arrow in dark mode hover */
        }

        .elevation-toggle-icon:active {
            transform: translateY(0);
        }

        /* Show up arrow when collapsed, hide down arrow */
        .elevation-container.collapsed .elevation-toggle-icon .arrow-down {
            display: none;
        }

        .elevation-container.collapsed .elevation-toggle-icon .arrow-up {
            display: block;
        }

        /* Show down arrow when expanded, hide up arrow */
        .elevation-container:not(.collapsed) .elevation-toggle-icon .arrow-down {
            display: block;
        }

        .elevation-container:not(.collapsed) .elevation-toggle-icon .arrow-up {
            display: none;
        }

        /* Hide toggle button when collapsed - user clicks mini chart instead */
        .elevation-container.collapsed .elevation-toggle-icon {
            display: none;
        }

        /* Map Sync Button */
        .elevation-map-sync-btn {
            position: absolute;
            top: -24px; /* Same as toggle icon */
            right: 90px; /* To the left of toggle icon (right: 20px + 60px width + 10px gap) */
            width: 50px; /* Slightly narrower than toggle */
            height: 24px;
            background: var(--bg-color);
            border: 1px solid var(--border-color);
            border-bottom: none;
            border-radius: var(--radius-md) 6px 0 0;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 150ms ease;
            z-index: 91;
            opacity: 0.9;
            color: var(--text-secondary);
            padding: 0;
        }

        .elevation-map-sync-btn:hover {
            opacity: 1;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
            transform: translateY(-2px);
        }

        .elevation-map-sync-btn:active {
            transform: translateY(0);
        }

        /* Active state - orange background */
        .elevation-map-sync-btn.active {
            background: var(--warning-color);
            color: white;
            border-color: #f57c00;
        }

        .elevation-map-sync-btn.active:hover {
            background: #f57c00;
        }

        /* Hide sync button when collapsed */
        .elevation-container.collapsed .elevation-map-sync-btn {
            display: none;
        }

        /* Dark mode styling */
        body.dark-mode .elevation-map-sync-btn:hover {
            background: var(--light-green);
            color: #1a1a1a;
        }

        body.dark-mode .elevation-map-sync-btn.active {
            background: var(--warning-color);
            color: white;
        }

        body.dark-mode .elevation-map-sync-btn.active:hover {
            background: #f57c00;
        }

        /* Mini view when collapsed */
        .elevation-mini-view {
            display: block;      /* Changed from flex for compact layout */
            padding: 10px;       /* Reduced padding for widget */
            align-items: stretch;
            transition: all 150ms ease;
            box-sizing: border-box;  /* Include padding in width calculation */
        }
        
        .elevation-mini-view.hidden {
            display: none;
        }
        
        .elevation-mini-stats {
            flex: 1;
            display: none; /* Hidden - stats now only shown in footer */
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .elevation-mini-stat {
            background: var(--card-bg);
            padding: 4px 10px;
            border-radius: 4px;
            border-left: 3px solid var(--primary-green);
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }
        
        .elevation-mini-stat.distance {
            border-left-color: #2196f3;
        }
        
        .elevation-mini-stat.gain {
            border-left-color: var(--primary-green);
        }
        
        .elevation-mini-stat.descent {
            border-left-color: #03a9f4;
        }
        
        .elevation-mini-stat.max {
            border-left-color: var(--primary-green);
        }

        .elevation-mini-stat.min {
            border-left-color: #2196f3;
        }
        
        .elevation-mini-stat-label {
            font-size: 9px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
        }
        
        .elevation-mini-stat-value {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-color);
        }
        
        .elevation-mini-chart-container {
            width: 200px;        /* Fixed width for compact widget */
            height: 70px;        /* Maintain height */
            flex: none;          /* Remove flex: 1 */
            min-height: 70px;
            position: relative;
            background: var(--card-bg);
            border-radius: var(--radius-md);
            padding: 6px;
            border: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 150ms ease;
            overflow: hidden;    /* Prevent chart from overflowing container */
            box-sizing: border-box;  /* Include padding and border in width calculation */
        }

        .elevation-mini-chart-container:hover {
            border-color: var(--light-green);
            box-shadow: 0 2px 8px rgba(102, 187, 106, 0.2);
            transform: translateY(-1px);
        }
        
        .elevation-mini-chart-container canvas {
            display: block;
            pointer-events: none;
            max-width: 100%;  /* Ensure canvas never exceeds container width */
            max-height: 100%; /* Ensure canvas never exceeds container height */
        }
        
        /* Full view when expanded */
        .elevation-content {
            padding: 10px 20px 10px 20px;
            transition: max-height 250ms ease, padding 250ms ease, opacity 200ms ease;
            opacity: 1;
        }

        .elevation-content.collapsed {
            max-height: 0;
            overflow: hidden;
            padding: 0;
            opacity: 0;
        }

        .elevation-content.expanded {
            max-height: 560px; /* Reduced by 30% from 800px to 560px */
            overflow: visible;
        }

        /* Elevation Route Tabs */
        .elevation-route-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 8px;
            padding: 4px;
            background: var(--card-bg);
            border-radius: var(--radius-md);
            overflow-x: auto;
            scrollbar-width: thin;
        }

        .elevation-route-tab {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.2s ease, color 0.2s ease;
        }

        .elevation-route-tab:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text-color);
        }

        body.dark-mode .elevation-route-tab:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .elevation-route-tab.active {
            background: var(--primary-color);
            color: white;
        }

        .elevation-route-tab .route-color-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .elevation-route-tab.combined-tab {
            margin-left: auto;
            border-left: 1px solid var(--border-color);
            padding-left: 16px;
        }

        .elevation-route-tab.combined-tab .route-color-dot {
            background: linear-gradient(135deg, #1976d2 0%, #4caf50 50%, #ff9800 100%);
        }

        .elevation-full-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 6px;
            margin-top: 0;
        }
        
        .elevation-stat-card {
            background: var(--card-bg);
            padding: 12px;
            border-radius: var(--radius-md);
            border-left: 4px solid var(--primary-green);
        }
        
        .elevation-stat-card.distance { border-left-color: #2196f3; }
        .elevation-stat-card.gain { border-left-color: var(--primary-green); }
        .elevation-stat-card.descent { border-left-color: #03a9f4; }
        .elevation-stat-card.max { border-left-color: var(--primary-green); }
        .elevation-stat-card.min { border-left-color: #2196f3; }
        .elevation-stat-card.avg-grade { border-left-color: #607d8b; }
        .elevation-stat-card.steepest { border-left-color: var(--blue-primary); }
        
        .elevation-stat-label {
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
            font-weight: 600;
        }
        
        .elevation-stat-value {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-color);
            line-height: 1;
        }
        
        .elevation-stat-unit {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-left: 4px;
        }
        
        .elevation-chart-wrapper {
            position: relative;
            height: 210px; /* Reduced by 30% from 300px to 210px */
            background: var(--card-bg);
            border-radius: var(--radius-md);
            padding: 10px;
            border: 2px solid var(--border-color);
            margin-bottom: 0;
        }
        
        .elevation-chart-wrapper canvas {
            cursor: crosshair;
            position: relative;
            z-index: 1;
            touch-action: none; /* Enable Chart.js zoom plugin touch gestures */
        }
        
        /* Crosshair overlay */
        .elevation-crosshair {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background: rgba(33, 150, 243, 0.6);
            pointer-events: none;
            display: none;
            z-index: 100;
        }

        .elevation-crosshair-label {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(33, 150, 243, 1);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            font-weight: 600;
            z-index: 100;
        }
        
        .elevation-poi-marker {
            position: absolute;
            width: 9px;
            height: 12px;
            transform: translate(-50%, -100%);
            transform-origin: 50% 100%;
            cursor: pointer;
            z-index: 10;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
            transition: transform 150ms ease;
            pointer-events: auto;
        }

        .elevation-poi-marker svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .elevation-poi-marker .marker-icon {
            position: absolute;
            top: 2px;
            left: 0;
            width: 9px;
            height: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4px;
            color: white;
            line-height: 1;
            pointer-events: none;
            z-index: 2;
        }

        .elevation-poi-marker .marker-icon i {
            display: block;
            line-height: 1;
        }

        .elevation-poi-marker:hover {
            transform: translate(-50%, -100%) scale(1.2);
            z-index: 11;
            filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7));
        }

        .elevation-poi-marker.highlighted {
            transform: translate(-50%, -100%) scale(1.3);
            z-index: 1000;
            filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.8)) drop-shadow(0 3px 6px rgba(0,0,0,0.7));
        }

        .elevation-poi-marker.highlighted svg path {
            stroke: var(--warning-color);
            stroke-width: 1.5;
        }

        .elevation-poi-tooltip {
            position: absolute;
            background: var(--sidebar-bg);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 8px 12px;
            font-size: 12px;
            white-space: nowrap;
            pointer-events: none;
            display: none;
            z-index: 100;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        
        .elevation-poi-tooltip.visible {
            display: block;
        }
        
        .elevation-legend {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
            padding: 10px;
            background: var(--card-bg);
            border-radius: var(--radius-md);
            font-size: 12px;
            margin-bottom: 15px;
        }
        
        .elevation-loading {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            gap: 15px;
            color: var(--text-secondary);
            font-size: 14px;
        }
        
        .elevation-loading.active {
            display: flex;
        }
        
        .elevation-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid var(--border-color);
            border-top-color: var(--primary-green);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .elevation-legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .elevation-legend-color {
            width: 20px;
            height: 12px;
            border-radius: 2px;
            border: 1px solid rgba(0,0,0,0.1);
        }
        
        .elevation-legend-item span {
            color: var(--text-secondary);
            font-weight: 500;
        }

        .elevation-stat-card {
            padding: 10px 15px;
            border-radius: var(--radius-md);
            border-left: 3px solid var(--primary-green);
            flex: 1;
            min-width: 140px;
        }

        .elevation-stat-card.descent { border-left-color: #2196f3; }
        .elevation-stat-card.max { border-left-color: var(--primary-green); }
        .elevation-stat-card.min { border-left-color: #2196f3; }
        .elevation-stat-card.avg-grade { border-left-color: #607d8b; }
        .elevation-stat-card.steepest { border-left-color: var(--blue-primary); }
        
        .elevation-stat-label {
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        
        .elevation-stat-value {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-color);
        }
        
        .elevation-stat-subtext {
            font-size: 10px;
            color: var(--text-tertiary);
            margin-top: 2px;
        }
        /* Chart crosshair */
        .elevation-crosshair {
            position: absolute;
            pointer-events: none;
            z-index: 10;
        }
        
        .elevation-crosshair-vertical {
            width: 1px;
            background: rgba(255, 152, 0, 0.6);
            height: 100%;
        }
        
        .elevation-crosshair-tooltip {
            position: absolute;
            background: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 8px 12px;
            border-radius: var(--radius-md);
            font-size: 12px;
            white-space: nowrap;
            pointer-events: none;
            transform: translate(-50%, -100%);
            margin-top: -10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        
        body.dark-mode .elevation-crosshair-tooltip {
            background: rgba(255, 255, 255, 0.95);
            color: #1a1a1a;
        }
        
        /* Grade labels on chart */
        .elevation-grade-label {
            position: absolute;
            background: rgba(244, 67, 54, 0.9);
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 600;
            pointer-events: none;
            z-index: 5;
        }
        
        .elevation-grade-label.moderate {
            background: rgba(255, 152, 0, 0.9);
        }
        
        /* Legend for gradient zones */
        .elevation-legend {
            display: flex;
            gap: 15px;
            margin-top: 10px;
            font-size: 11px;
            color: var(--text-secondary);
            flex-wrap: wrap;
        }
        
        .elevation-legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .elevation-legend-color {
            width: 20px;
            height: 12px;
            border-radius: 2px;
        }
        
        .section {
            margin-bottom: 15px;
            flex-shrink: 0; /* Prevent sections from shrinking */
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* Monochrome icon styling for sidebar */
        .icon-mono {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .icon-mono svg {
            width: 100%;
            height: 100%;
            stroke: var(--text-secondary);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: stroke 0.2s ease;
        }

        .section-title .icon-mono svg {
            stroke: var(--text-color);
            stroke-width: 2.2;
        }

        /* Landing page specific styles */
        .landing-intro {
            text-align: center;
            margin-bottom: 28px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--border-color);
        }

        .landing-intro h2 {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 10px;
            line-height: 1.3;
        }

        .landing-intro p {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
            max-width: 540px;
            margin: 0 auto;
        }

        /* Horizontal container for side-by-side option cards */
        .options-horizontal-container {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .option-card {
            background: var(--card-bg);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            flex: 1; /* Make cards equal width in horizontal container */
        }

        /* Remove bottom margin from cards inside horizontal container */
        .options-horizontal-container .option-card {
            margin-bottom: 0;
        }

        .option-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--dark-green) 0%, var(--blue-primary) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .option-card:hover {
            border-color: var(--dark-green);
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(46, 125, 50, 0.15);
        }

        .option-card:hover::before {
            opacity: 1;
        }

        body.dark-mode .option-card:hover {
            box-shadow: 0 12px 32px rgba(102, 187, 106, 0.2);
        }

        .option-card-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .option-card-title .emoji {
            font-size: 28px;
        }

        .option-card-title .icon-mono {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .option-card-title .icon-mono svg {
            width: 100%;
            height: 100%;
            stroke: var(--text-secondary);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: stroke 0.2s ease;
        }

        .option-card:hover .icon-mono svg {
            stroke: var(--dark-green);
        }

        body.dark-mode .option-card:hover .icon-mono svg {
            stroke: var(--light-green);
        }

        .option-card-description {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .option-divider {
            text-align: center;
            margin: 20px 0;
            position: relative;
            font-size: 13px;
            color: var(--text-tertiary);
            font-weight: 500;
            letter-spacing: 1px;
        }

        .option-divider::before,
        .option-divider::after {
            content: '';
            position: absolute;
            top: 50%;
            width: calc(50% - 40px);
            height: 1px;
            background: linear-gradient(to right, transparent, var(--border-color), transparent);
        }

        .option-divider::before {
            left: 0;
        }

        .option-divider::after {
            right: 0;
        }

        /* Prominent OR divider (for always-visible section) */
        .option-divider-prominent {
            text-align: center;
            margin: 32px 0 24px 0;
            position: relative;
            font-size: 16px;
            color: var(--primary-green);
            font-weight: 700;
            letter-spacing: 2px;
        }

        .option-divider-prominent::before,
        .option-divider-prominent::after {
            content: '';
            position: absolute;
            top: 50%;
            width: calc(50% - 50px);
            height: 2px;
            background: linear-gradient(to right, transparent, var(--primary-green), transparent);
        }

        .option-divider-prominent::before {
            left: 0;
        }

        .option-divider-prominent::after {
            right: 0;
        }

        /* ===== Community Stats Showcase ===== */
        .community-stats-showcase {
            background: linear-gradient(135deg, rgba(46, 125, 50, 0.08) 0%, rgba(25, 118, 210, 0.08) 100%);
            border: 2px solid var(--primary-green);
            border-radius: 16px;
            padding: 2rem;
            margin: 2.5rem 0 1.5rem 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .stats-background-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        .community-stats-showcase > *:not(.stats-background-svg) {
            position: relative;
            z-index: 1;
        }

        body.dark-mode .community-stats-showcase {
            background: linear-gradient(135deg, rgba(46, 125, 50, 0.15) 0%, rgba(25, 118, 210, 0.15) 100%);
        }

        body.dark-mode .stats-background-svg .contour {
            stroke: rgba(102, 187, 106, 0.28);
        }
        body.dark-mode .stats-background-svg .contour-thick {
            stroke: rgba(102, 187, 106, 0.38);
        }
        body.dark-mode .stats-background-svg .road {
            stroke: rgba(102, 187, 106, 0.32);
        }
        body.dark-mode .stats-background-svg .pin {
            fill: rgba(102, 187, 106, 0.45);
        }

        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) .community-stats-showcase {
                background: linear-gradient(135deg, rgba(46, 125, 50, 0.15) 0%, rgba(25, 118, 210, 0.15) 100%);
            }
            body:not(.light-mode) .stats-background-svg .contour {
                stroke: rgba(102, 187, 106, 0.28);
            }
            body:not(.light-mode) .stats-background-svg .contour-thick {
                stroke: rgba(102, 187, 106, 0.38);
            }
            body:not(.light-mode) .stats-background-svg .road {
                stroke: rgba(102, 187, 106, 0.32);
            }
            body:not(.light-mode) .stats-background-svg .pin {
                fill: rgba(102, 187, 106, 0.45);
            }
        }

        .stats-showcase-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary-green);
        }

        .stats-showcase-header i {
            font-size: 1.3rem;
        }

        .stats-since {
            font-size: 0.75rem;
            font-weight: 400;
            color: var(--text-secondary);
            opacity: 0.8;
        }

        .stats-showcase-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 900px;
            margin: 0 auto;
        }

        .stats-showcase-item {
            padding: 1rem;
        }

        .stats-showcase-value {
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--primary-green);
            line-height: 1.1;
            margin-bottom: 0.5rem;
        }

        .stats-showcase-label {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 0.25rem;
        }

        .stats-showcase-sublabel {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .stats-loading {
            display: inline-block;
            animation: pulse 1.5s ease-in-out infinite;
        }

        .stats-loading i {
            font-size: 1.5rem;
            color: var(--text-secondary);
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        /* Stats showcase responsive */
        @media (max-width: 768px) {
            .community-stats-showcase {
                padding: 1.5rem 1rem;
                margin: 2rem 0 1rem 0;
            }

            .stats-showcase-grid {
                grid-template-columns: 1fr;
                gap: 1.25rem;
            }

            .stats-showcase-item {
                padding: 0.75rem;
                border-bottom: 1px solid var(--border-color);
            }

            .stats-showcase-item:last-child {
                border-bottom: none;
            }

            .stats-showcase-value {
                font-size: 2.2rem;
            }
        }

        /* Demo Route Section */
        .landing-demo-section {
            background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
            border: 3px solid #ffc107;
            border-radius: 12px;
            padding: 1.25rem 1.5rem;
            margin: 24px 0;
            box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
        }

        body.dark-mode .landing-demo-section {
            background: linear-gradient(135deg, #3a3520 0%, #2a2a1a 100%);
            border-color: #ffb300;
        }

        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) .landing-demo-section {
                background: linear-gradient(135deg, #3a3520 0%, #2a2a1a 100%);
                border-color: #ffb300;
            }
        }

        .demo-content {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .demo-icon {
            font-size: 2.5rem;
            color: #f57c00;
            flex-shrink: 0;
        }

        .demo-text {
            flex: 1;
            min-width: 200px;
        }

        .demo-text h3 {
            margin: 0 0 6px 0;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-color);
        }

        .demo-text p {
            margin: 0;
            font-size: 0.85rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .demo-routes {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }

        .demo-route-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px !important;
            background: #f57c00 !important;
            border-color: #f57c00 !important;
            color: white !important;
            text-align: left;
            white-space: nowrap;
        }

        .demo-route-btn:hover {
            background: #ef6c00 !important;
            border-color: #ef6c00 !important;
        }

        .demo-route-btn i {
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .demo-route-info {
            display: flex;
            flex-direction: column;
            line-height: 1.3;
        }

        .demo-route-info strong {
            font-size: 0.9rem;
        }

        .demo-route-info small {
            font-size: 0.75rem;
            opacity: 0.9;
        }

        @media (max-width: 600px) {
            .demo-content {
                flex-direction: column;
                text-align: center;
            }

            .demo-routes {
                width: 100%;
                flex-direction: column;
            }

            .demo-route-btn {
                width: 100%;
                justify-content: flex-start;
            }
        }

        /* Always-visible alternative options panel with green border */
        .landing-alternative-options {
            background: var(--card-bg);
            border: 4px solid var(--primary-green);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px var(--shadow);
            margin: 32px 0;
            transition: box-shadow 0.3s ease;
        }

        .landing-alternative-options:hover {
            box-shadow: 0 4px 12px var(--shadow);
        }

        /* Old collapsible styles - no longer used but kept for reference
        .additional-options-wrapper {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.4s ease, opacity 0.3s ease;
        }

        .additional-options-wrapper.expanded {
            max-height: 2000px;
            opacity: 1;
        } */

        /* Old button styles - no longer used but kept for reference
        .show-more-options-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 10px 20px;
            margin: 24px 0;
            background: var(--card-bg);
            border: 2px dashed var(--border-color);
            border-radius: var(--radius-lg);
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .show-more-options-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(46, 125, 50, 0.05) 0%, rgba(25, 118, 210, 0.05) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .show-more-options-btn:hover::before {
            opacity: 1;
        }

        .show-more-options-btn:hover {
            border-color: var(--dark-green);
            color: var(--dark-green);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
        }

        body.dark-mode .show-more-options-btn:hover {
            border-color: var(--light-green);
            color: var(--light-green);
            box-shadow: 0 4px 12px rgba(102, 187, 106, 0.2);
        }

        .show-more-options-btn svg {
            transition: transform 0.3s ease;
        }

        .show-more-options-btn.expanded svg {
            transform: rotate(180deg);
        }

        .show-more-options-btn .btn-text-more {
            display: inline;
        }

        .show-more-options-btn .btn-text-less {
            display: none;
        }

        .show-more-options-btn.expanded .btn-text-more {
            display: none;
        }

        .show-more-options-btn.expanded .btn-text-less {
            display: inline;
        } */

        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            margin-top: 32px;
            margin-bottom: 48px;
            padding-top: 32px;
            border-top: 1px dashed var(--border-color);
        }

        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .feature-item .icon {
            flex-shrink: 0;
            display: flex;
            align-items: center;
        }

        .feature-item .icon svg {
            stroke: var(--text-secondary);
            transition: stroke 0.2s ease;
        }

        /* Latest from Blog section */
        .latest-blog-section {
            margin-top: 32px;
            padding: 20px;
            background: linear-gradient(135deg, rgba(46, 125, 50, 0.08) 0%, rgba(25, 118, 210, 0.08) 100%);
            border: 2px solid var(--primary-green);
            border-radius: 16px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        body.dark-mode .latest-blog-section {
            background: linear-gradient(135deg, rgba(46, 125, 50, 0.15) 0%, rgba(25, 118, 210, 0.15) 100%);
        }

        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) .latest-blog-section {
                background: linear-gradient(135deg, rgba(46, 125, 50, 0.15) 0%, rgba(25, 118, 210, 0.15) 100%);
            }
        }

        .blog-background-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        .latest-blog-section > *:not(.blog-background-svg) {
            position: relative;
            z-index: 1;
        }

        body.dark-mode .blog-background-svg .blog-contour {
            stroke: rgba(102, 187, 106, 0.28);
        }
        body.dark-mode .blog-background-svg .blog-contour-thick {
            stroke: rgba(102, 187, 106, 0.38);
        }
        body.dark-mode .blog-background-svg .blog-road {
            stroke: rgba(102, 187, 106, 0.32);
        }
        body.dark-mode .blog-background-svg .blog-pin {
            fill: rgba(102, 187, 106, 0.4);
        }

        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) .blog-background-svg .blog-contour {
                stroke: rgba(102, 187, 106, 0.28);
            }
            body:not(.light-mode) .blog-background-svg .blog-contour-thick {
                stroke: rgba(102, 187, 106, 0.38);
            }
            body:not(.light-mode) .blog-background-svg .blog-road {
                stroke: rgba(102, 187, 106, 0.32);
            }
            body:not(.light-mode) .blog-background-svg .blog-pin {
                fill: rgba(102, 187, 106, 0.4);
            }
        }

        .latest-blog-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary-green);
            margin: 0 0 1.5rem 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .latest-blog-posts {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin-bottom: 16px;
        }

        @media (max-width: 600px) {
            .latest-blog-posts {
                grid-template-columns: 1fr;
            }
        }

        .latest-blog-post {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            text-decoration: none;
            text-align: left;
            transition: all 0.2s ease;
            overflow: hidden;
        }

        .latest-blog-post:hover {
            border-color: var(--link-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px var(--shadow);
        }

        .latest-blog-post-thumb {
            width: 72px;
            height: 100%;
            min-height: 64px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .latest-blog-post-thumb-placeholder {
            width: 72px;
            min-height: 64px;
            background: var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .latest-blog-post-thumb-placeholder i {
            font-size: 20px;
            color: var(--text-secondary);
            opacity: 0.4;
        }

        .latest-blog-post-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 10px 12px;
            min-width: 0;
        }

        .latest-blog-post-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 4px;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .latest-blog-post:hover .latest-blog-post-title {
            color: var(--link-color);
        }

        .latest-blog-post-meta {
            font-size: 11px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 4px;
        }

        .latest-blog-post-meta i {
            font-size: 10px;
        }

        .latest-blog-view-all {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--link-color);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s ease;
        }

        .latest-blog-view-all:hover {
            color: var(--link-hover);
        }

        .latest-blog-view-all i {
            font-size: 11px;
            transition: transform 0.2s ease;
        }

        .latest-blog-view-all:hover i {
            transform: translateX(2px);
        }

        /* Responsive for mobile */
        @media (max-width: 768px) {
            .latest-blog-section {
                margin-top: 24px;
                padding: 16px;
            }

            .latest-blog-title {
                font-size: 13px;
            }

            .latest-blog-post-thumb,
            .latest-blog-post-thumb-placeholder {
                width: 60px;
                min-height: 56px;
            }

            .latest-blog-post-content {
                padding: 8px 10px;
            }

            .latest-blog-post-title {
                font-size: 12px;
            }

            .latest-blog-post-meta {
                font-size: 10px;
            }
        }

        /* Latest Articles section (landing page) */
        .latest-articles-section {
            margin-top: 32px;
            padding: 20px;
            background: linear-gradient(135deg, rgba(230, 81, 0, 0.08) 0%, rgba(255, 143, 0, 0.08) 100%);
            border-radius: 12px;
            border: 1px solid rgba(245, 124, 0, 0.15);
        }

        body.dark-mode .latest-articles-section {
            background: linear-gradient(135deg, rgba(230, 81, 0, 0.15) 0%, rgba(255, 143, 0, 0.15) 100%);
        }

        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) .latest-articles-section {
                background: linear-gradient(135deg, rgba(230, 81, 0, 0.15) 0%, rgba(255, 143, 0, 0.15) 100%);
            }
        }

        .latest-articles-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .latest-articles-title i {
            color: #F57C00;
        }

        .latest-articles-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        .latest-article-card {
            display: flex;
            flex-direction: column;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
            text-decoration: none;
            color: inherit;
            transition: all 0.25s ease;
        }

        .latest-article-card:hover {
            border-color: #F57C00;
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }

        .latest-article-card-thumb {
            width: 100%;
            height: 120px;
            object-fit: cover;
            display: block;
        }

        .latest-article-card-thumb-placeholder {
            width: 100%;
            height: 120px;
            background: var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: var(--text-secondary);
            opacity: 0.4;
        }

        .latest-article-card-body {
            padding: 12px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .latest-article-card-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-color);
            line-height: 1.35;
            margin-bottom: 6px;
        }

        .latest-article-card:hover .latest-article-card-title {
            color: #F57C00;
        }

        .latest-article-card-excerpt {
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.45;
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .latest-article-card-read {
            font-size: 11px;
            font-weight: 600;
            color: #F57C00;
            margin-top: 8px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        .latest-article-card:hover .latest-article-card-read i {
            transform: translateX(2px);
        }

        .latest-article-card-read i {
            font-size: 10px;
            transition: transform 0.2s ease;
        }

        .latest-articles-view-all {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #F57C00;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            margin-top: 12px;
        }

        .latest-articles-view-all:hover {
            color: #E65100;
        }

        .latest-articles-view-all i {
            font-size: 11px;
            transition: transform 0.2s ease;
        }

        .latest-articles-view-all:hover i {
            transform: translateX(2px);
        }

        @media (max-width: 768px) {
            .latest-articles-section {
                margin-top: 24px;
                padding: 16px;
            }

            .latest-articles-grid {
                grid-template-columns: 1fr;
            }

            .latest-article-card {
                flex-direction: row;
            }

            .latest-article-card-thumb {
                width: 90px;
                height: auto;
                min-height: 80px;
            }

            .latest-article-card-thumb-placeholder {
                width: 90px;
                height: auto;
                min-height: 80px;
            }

            .latest-article-card-body {
                padding: 10px;
            }

            .latest-articles-title {
                font-size: 13px;
            }
        }

        @media (min-width: 769px) and (max-width: 900px) {
            .latest-articles-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Landing page help link */
        .landing-help-link {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 14px 28px;
            background: rgba(76, 175, 80, 0.08);
            border: 2px solid rgba(76, 175, 80, 0.3);
            border-radius: 12px;
            color: var(--link-color);
            text-decoration: none;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .landing-help-link:hover {
            background: rgba(76, 175, 80, 0.15);
            border-color: var(--link-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
        }

        .landing-help-link svg {
            flex-shrink: 0;
            stroke: currentColor;
        }

        body.dark-mode .landing-help-link {
            background: rgba(102, 187, 106, 0.1);
            border-color: rgba(102, 187, 106, 0.3);
            color: var(--light-green);
        }

        body.dark-mode .landing-help-link:hover {
            background: rgba(102, 187, 106, 0.18);
            border-color: var(--light-green);
            box-shadow: 0 4px 12px rgba(102, 187, 106, 0.25);
        }

        .upload-hint {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 12px;
            padding: 8px 14px;
            background: rgba(46, 125, 50, 0.08);
            border-radius: var(--radius-md);
            font-size: 13px;
            color: var(--dark-green);
            font-weight: 500;
        }

        body.dark-mode .upload-hint {
            background: rgba(102, 187, 106, 0.12);
            color: var(--light-green);
        }

        /* Dark mode enhancements for landing page */
        body.dark-mode .option-card {
            background: var(--card-bg);
            border-color: var(--border-color);
        }

        body.dark-mode .option-card:hover {
            border-color: var(--light-green);
        }

        body.dark-mode .option-card::before {
            background: linear-gradient(90deg, var(--light-green) 0%, var(--blue-light) 100%);
        }

        body.dark-mode .btn-primary {
            background: linear-gradient(135deg, #388e3c 0%, var(--primary-green) 100%);
        }

        body.dark-mode .btn-primary:hover {
            background: linear-gradient(135deg, var(--dark-green) 0%, #388e3c 100%);
            box-shadow: 0 4px 12px rgba(102, 187, 106, 0.35);
        }

        body.dark-mode .btn-secondary {
            background: linear-gradient(135deg, var(--blue-primary) 0%, #42a5f5 100%);
        }

        body.dark-mode .btn-secondary:hover {
            background: linear-gradient(135deg, #1565c0 0%, var(--blue-primary) 100%);
            box-shadow: 0 4px 12px rgba(66, 165, 245, 0.35);
        }

        body.dark-mode .upload-icon {
            color: var(--light-green);
        }

        @media (prefers-color-scheme: dark) {
            .option-card {
                background: var(--card-bg);
                border-color: var(--border-color);
            }

            .option-card:hover {
                border-color: var(--light-green);
            }

            .option-card::before {
                background: linear-gradient(90deg, var(--light-green) 0%, var(--blue-light) 100%);
            }

            .btn-primary {
                background: linear-gradient(135deg, #388e3c 0%, var(--primary-green) 100%);
            }

            .btn-primary:hover {
                background: linear-gradient(135deg, var(--dark-green) 0%, #388e3c 100%);
                box-shadow: 0 4px 12px rgba(102, 187, 106, 0.35);
            }

            .btn-secondary {
                background: linear-gradient(135deg, var(--blue-primary) 0%, #42a5f5 100%);
            }

            .btn-secondary:hover {
                background: linear-gradient(135deg, #1565c0 0%, var(--blue-primary) 100%);
                box-shadow: 0 4px 12px rgba(66, 165, 245, 0.35);
            }

            .upload-icon {
                color: var(--light-green);
            }

            .upload-hint {
                background: rgba(102, 187, 106, 0.12);
                color: var(--light-green);
            }

            input[type="text"]:focus {
                border-color: var(--light-green);
                box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.15);
            }
        }
        
        .collapsible-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }
        
        .collapse-icon {
            font-size: 12px;
            transition: transform 0.3s;
        }
        
        .collapse-icon.collapsed {
            transform: rotate(-90deg);
        }
        
        .file-upload {
            border: 3px dashed var(--border-color);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: var(--card-bg);
            position: relative;
            overflow: hidden;
        }

        .file-upload::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, transparent 0%, rgba(46, 125, 50, 0.03) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .file-upload:hover::before {
            opacity: 1;
        }

        .file-upload:hover {
            border-color: var(--dark-green);
            background: linear-gradient(to bottom, rgba(46, 125, 50, 0.05), rgba(46, 125, 50, 0.1));
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(46, 125, 50, 0.12);
        }

        body.dark-mode .file-upload:hover {
            background: linear-gradient(to bottom, rgba(102, 187, 106, 0.08), rgba(102, 187, 106, 0.15));
            box-shadow: 0 8px 24px rgba(102, 187, 106, 0.15);
        }

        .file-upload.dragover {
            border-color: var(--dark-green);
            background: #e8f5e9;
            transform: scale(1.02);
            box-shadow: 0 8px 32px rgba(46, 125, 50, 0.2);
        }

        body.dark-mode .file-upload.dragover {
            background: #2a4a2a;
        }

        .upload-icon {
            font-size: 32px;
            color: var(--dark-green);
            margin-bottom: 8px;
            display: inline-block;
            transition: transform 0.3s ease;
        }

        .file-upload:hover .upload-icon {
            transform: translateY(-4px);
        }
        
        input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            z-index: 1;
        }

        /* Simple upload button styles */
        .file-upload-simple {
            text-align: center;
            padding: 20px;
        }

        .upload-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            font-size: 1rem;
            font-weight: 500;
        }

        .upload-btn i {
            font-size: 1.2rem;
        }

        /* ===== Introduction Section ===== */
        .intro-section {
            max-width: 1100px;
            margin: 0 auto 2rem auto;
            background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-secondary) 100%);
            border: 2px solid var(--primary-green);
            border-radius: 12px;
            padding: 1.25rem 1.5rem;
            box-shadow: 0 4px 12px var(--shadow);
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

        .intro-icon {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            background: var(--primary-green);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
        }

        .intro-icon i {
            font-size: 24px;
            color: white;
        }

        .intro-content {
            flex: 1;
        }

        .intro-content p {
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.5;
            color: var(--text-color);
            text-align: left;
        }

        /* ===== Quick Links Navigation ===== */
        .landing-quick-links {
            display: flex;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            margin: 0 auto 24px auto;
            padding: 0 16px;
            max-width: 1100px;
        }

        .quick-link-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            font-size: 13px;
            color: var(--text-secondary);
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .quick-link-chip:hover {
            color: var(--primary-green);
            border-color: var(--primary-green);
            background: var(--card-bg);
        }

        .quick-link-chip i {
            font-size: 14px;
        }

        /* Mobile Quick Links Hamburger Menu - hidden on desktop */
        .landing-quick-links-mobile {
            display: none;
            position: relative;
        }

        .landing-menu-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-color);
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .landing-menu-btn:hover {
            background: var(--card-bg);
            border-color: var(--primary-green);
            color: var(--primary-green);
        }

        .landing-menu-btn i {
            font-size: 18px;
        }

        .landing-menu-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 8px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 8px 24px var(--shadow);
            z-index: 100;
            min-width: 180px;
            overflow: hidden;
        }

        .landing-menu-dropdown.active {
            display: block;
        }

        .landing-menu-dropdown a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            color: var(--text-color);
            text-decoration: none;
            font-size: 14px;
            transition: background 0.2s ease;
        }

        .landing-menu-dropdown a:hover {
            background: rgba(76, 175, 80, 0.1);
            color: var(--primary-green);
        }

        .landing-menu-dropdown a i {
            font-size: 16px;
            width: 20px;
            text-align: center;
            color: var(--text-secondary);
        }

        .landing-menu-dropdown a:hover i {
            color: var(--primary-green);
        }

        /* ===== Workflow Steps Container ===== */
        .workflow-steps-container {
            display: flex;
            align-items: stretch;
            justify-content: center;
            gap: 1.0rem;
            margin-bottom: 4rem;
        }

        /* Side panels (equal size) */
        .workflow-card-side {
            flex: 0 0 340px; /* Optimized for 1366px screens with comfortable margins */
            max-width: 340px;
            min-width: 340px;
        }

        /* Center panel (15% larger than side panels: 340 × 1.15 = 391px) */
        .workflow-card-center {
            flex: 0 0 391px; /* Optimized for 1366px screens with comfortable margins */
            max-width: 391px;
            min-width: 391px;
        }

        /* Workflow card base styles */
        .workflow-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-left: 4px solid var(--primary-green);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px var(--shadow);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .workflow-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px var(--shadow);
        }

        /* Center panel border override - must come after base .workflow-card styles */
        .workflow-card-center {
            border: 4px solid var(--primary-green);
        }

        /* Right panel border override - green border on right instead of left */
        .workflow-card-side:last-of-type {
            border-left: 1px solid var(--border-color);
            border-right: 4px solid var(--primary-green);
        }

        /* Card icon badge */
        .card-icon {
            width: 60px;
            height: 60px;
            background: var(--primary-green);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            transition: transform 0.3s ease;
        }

        .card-icon:hover {
            transform: scale(1.1);
        }

        .card-icon i {
            font-size: 28px;
            color: white;
        }

        /* Card content */
        .card-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 0.6rem;
            color: var(--text-color);
            text-align: center;
        }

        .card-description {
            font-size: 1rem;
            margin-bottom: 1rem;
            opacity: 0.85;
            text-align: center;
            line-height: 1.5;
        }

        .card-list {
            list-style: none;
            padding: 0;
            margin-bottom: 0;
        }

        .card-list li {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .card-list li:last-child {
            margin-bottom: 0;
        }

        .card-list li i {
            color: var(--primary-green);
            font-size: 1rem;
            flex-shrink: 0;
        }

        /* Grey out text in side panels to indicate external workflow steps */
        .workflow-card-side .card-title,
        .workflow-card-side .card-description,
        .workflow-card-side .card-list li {
            color: #666666; /* Dark grey for light mode */
        }

        body.dark-mode .workflow-card-side .card-title,
        body.dark-mode .workflow-card-side .card-description,
        body.dark-mode .workflow-card-side .card-list li {
            color: #767676; /* Slightly grey for dark mode */
        }

        @media (prefers-color-scheme: dark) {
            .workflow-card-side .card-title,
            .workflow-card-side .card-description,
            .workflow-card-side .card-list li {
                color: #767676;
            }
        }

        /* SVG illustration container */
        .card-illustration {
            width: 180px;
            height: 130px;
            margin: 1rem auto 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-illustration svg {
            width: 100%;
            height: 100%;
        }

        /* Center panel illustration enhancements */
        .workflow-card-center .card-illustration {
            transform: scale(1.15);
            margin: 24px auto; /* Increased vertical spacing to compensate for larger size */
        }

        .workflow-card-center .card-illustration svg {
            filter: drop-shadow(0 4px 12px rgba(76, 175, 80, 0.3));
        }

        /* Clickable upload area within center workflow card */
        .workflow-card-clickable {
            cursor: pointer;
            transition: background-color 0.2s ease, transform 0.2s ease;
            border-radius: var(--radius-lg);
            padding: 0.5rem;
            margin: -0.5rem;
        }

        .workflow-card-clickable:hover {
            background-color: rgba(76, 175, 80, 0.05);
        }

        body.dark-mode .workflow-card-clickable:hover {
            background-color: rgba(76, 175, 80, 0.08);
        }

        .workflow-card-clickable:active {
            transform: scale(0.98);
        }

        /* Upload button within clickable area should still look distinct */
        .workflow-card-clickable .upload-btn {
            position: relative;
            z-index: 1;
            cursor: pointer;
        }

        .workflow-card-clickable .upload-btn:hover {
            transform: scale(1.05);
        }

        /* Animated arrows between panels */
        .workflow-arrow {
            color: var(--primary-green);
            font-size: 3rem;
            align-self: flex-end;
            margin-bottom: 65px; /* Align with center of SVG illustration (130px height / 2) */
            flex-shrink: 0;
            animation: pulseArrow 2s ease-in-out infinite;
        }

        .workflow-arrow-mobile {
            display: none;
        }

        @keyframes pulseArrow {
            0%, 100% {
                transform: translateX(0);
                opacity: 1;
            }
            50% {
                transform: translateX(8px);
                opacity: 0.7;
            }
        }

        /* Medium screens (tablets, small laptops) - scale down panels to fit */
        @media (max-width: 1250px) {
            .intro-section {
                padding: 1rem 1.25rem;
                margin-bottom: 1.75rem;
            }

            .intro-content p {
                font-size: 0.9rem;
            }

            .upload-section-wrapper {
                padding: 24px 20px; /* Reduce horizontal padding */
            }

            .workflow-steps-container {
                gap: 0.75rem; /* Reduce gap from 1rem to 0.75rem */
            }

            /* Scale down side panels proportionally */
            .workflow-card-side {
                flex: 0 0 280px; /* Reduced from 340px */
                max-width: 280px;
                min-width: 280px;
            }

            /* Scale down center panel proportionally (maintain 15% larger ratio) */
            .workflow-card-center {
                flex: 0 0 322px; /* Reduced from 391px (280 × 1.15 = 322) */
                max-width: 322px;
                min-width: 322px;
            }

            /* Adjust arrow positioning for smaller panels */
            .workflow-arrow {
                font-size: 2.5rem; /* Slightly smaller */
                margin-bottom: 55px; /* Adjust for smaller illustration height */
            }

            /* Adjust card padding slightly for tighter layout */
            .workflow-card {
                padding: 1.25rem; /* Reduced from 1.5rem */
            }

            /* Scale down illustrations */
            .card-illustration {
                width: 150px; /* Reduced from 180px */
                height: 110px; /* Reduced from 130px */
            }

            /* Slightly smaller icon badges */
            .card-icon {
                width: 50px; /* Reduced from 60px */
                height: 50px;
            }

            .card-icon i {
                font-size: 24px; /* Reduced from 28px */
            }

            /* Adjust typography for tighter space */
            .card-title {
                font-size: 1.15rem; /* Reduced from 1.3rem */
            }

            .card-description {
                font-size: 0.9rem; /* Reduced from 1rem */
            }

            .card-list li {
                font-size: 0.85rem; /* Reduced from 0.9rem */
            }
        }

        /* Smaller laptops and tablets (1024px-1100px) - further reduce panel sizes */
        @media (max-width: 1100px) {
            /* Further scale down side panels */
            .workflow-card-side {
                flex: 0 0 250px; /* Reduced from 280px */
                max-width: 250px;
                min-width: 250px;
            }

            /* Further scale down center panel (maintain 15% larger ratio) */
            .workflow-card-center {
                flex: 0 0 288px; /* Reduced from 322px (250 × 1.15 = 288) */
                max-width: 288px;
                min-width: 288px;
            }

            /* Reduce arrows slightly */
            .workflow-arrow {
                font-size: 2.25rem; /* Reduced from 2.5rem */
            }

            /* Further reduce card padding */
            .workflow-card {
                padding: 1rem; /* Reduced from 1.25rem */
            }

            /* Scale down illustrations more */
            .card-illustration {
                width: 130px; /* Reduced from 150px */
                height: 95px; /* Reduced from 110px */
            }

            /* Smaller icon badges */
            .card-icon {
                width: 45px; /* Reduced from 50px */
                height: 45px;
            }

            .card-icon i {
                font-size: 22px; /* Reduced from 24px */
            }

            /* Further adjust typography */
            .card-title {
                font-size: 1.05rem; /* Reduced from 1.15rem */
            }

            .card-description {
                font-size: 0.85rem; /* Reduced from 0.9rem */
            }

            .card-list li {
                font-size: 0.8rem; /* Reduced from 0.85rem */
            }
        }

        /* Small tablets and large phones (769px-950px) - smallest horizontal layout before stacking */
        @media (max-width: 950px) {
            /* Minimal side panels */
            .workflow-card-side {
                flex: 0 0 220px; /* Reduced from 250px */
                max-width: 220px;
                min-width: 220px;
            }

            /* Minimal center panel (maintain 15% larger ratio) */
            .workflow-card-center {
                flex: 0 0 253px; /* Reduced from 288px (220 × 1.15 = 253) */
                max-width: 253px;
                min-width: 253px;
            }

            /* Smaller arrows */
            .workflow-arrow {
                font-size: 2rem; /* Reduced from 2.25rem */
            }

            /* Minimal card padding */
            .workflow-card {
                padding: 0.875rem; /* Reduced from 1rem */
            }

            /* Minimal illustrations */
            .card-illustration {
                width: 110px; /* Reduced from 130px */
                height: 80px; /* Reduced from 95px */
            }

            /* Minimal icon badges */
            .card-icon {
                width: 40px; /* Reduced from 45px */
                height: 40px;
            }

            .card-icon i {
                font-size: 20px; /* Reduced from 22px */
            }

            /* Minimal typography */
            .card-title {
                font-size: 0.95rem; /* Reduced from 1.05rem */
            }

            .card-description {
                font-size: 0.8rem; /* Reduced from 0.85rem */
            }

            .card-list li {
                font-size: 0.75rem; /* Reduced from 0.8rem */
            }
        }

        /* Mobile responsive - stack vertically */
        @media (max-width: 768px) {
            /* Intro section - compact, no icon */
            .intro-section {
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 0.75rem;
                margin-bottom: 1rem;
                gap: 0;
            }

            .intro-icon {
                display: none; /* Hide mapmarker icon on mobile */
            }

            .intro-content p {
                font-size: 0.85rem;
                line-height: 1.4;
                text-align: center;
                margin: 0;
            }

            /* Hide desktop quick links on mobile */
            .landing-quick-links-desktop {
                display: none !important;
            }

            /* Show mobile hamburger menu */
            .landing-quick-links-mobile {
                display: block;
                margin-bottom: 1rem;
                text-align: center;
            }

            .workflow-steps-container {
                flex-direction: column;
                align-items: center;
                margin-bottom: 2rem; /* Reduced from 3rem */
                gap: 0.75rem; /* Reduced gap between panels */
            }

            .workflow-card-side,
            .workflow-card-center {
                max-width: 100%;
                width: 100%;
            }

            .workflow-card {
                padding: 1rem; /* Reduced from 1.5rem (base value) */
            }

            .workflow-arrow {
                display: none;
            }

            .workflow-arrow-mobile {
                display: block !important;
                color: var(--primary-green);
                font-size: 1.5rem; /* Reduced from 2rem */
                margin: 0.25rem auto; /* Reduced from 0.5rem */
                text-align: center;
                animation: pulseArrowMobile 2s ease-in-out infinite;
            }

            @keyframes pulseArrowMobile {
                0%, 100% {
                    transform: translateY(0);
                    opacity: 1;
                }
                50% {
                    transform: translateY(8px);
                    opacity: 0.7;
                }
            }

            /* Hide SVG illustrations on mobile to save space */
            .card-illustration {
                display: none;
            }

            /* Hide card icons on mobile */
            .card-icon {
                display: none;
            }

            /* Hide side workflow cards (Create Your Route, Use Your Enhanced Route) on mobile */
            .workflow-card-side {
                display: none !important;
            }

            /* Hide mobile arrows since side cards are hidden */
            .workflow-arrow-mobile {
                display: none !important;
            }

            /* Hide demo section icon on mobile */
            .demo-icon {
                display: none;
            }

            /* Hide PitStopper Activity section on mobile */
            .community-stats-showcase {
                display: none !important;
            }

            .card-title {
                font-size: 1.2rem;
                margin-bottom: 0.5rem;
            }

            .card-description {
                font-size: 0.95rem;
                margin-bottom: 0.8rem;
            }

            .card-list li {
                font-size: 0.85rem;
                margin-bottom: 0.4rem;
            }
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: var(--radius-lg);
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.4s ease, height 0.4s ease;
        }

        .btn:active::before {
            width: 300px;
            height: 300px;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--dark-green) 0%, #388e3c 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #1b5e20 0%, var(--dark-green) 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(46, 125, 50, 0.35);
        }

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

        .btn-secondary {
            background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-light) 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(25, 118, 210, 0.25);
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, #1565c0 0%, var(--blue-primary) 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
        }

        .btn-secondary:active {
            transform: translateY(0);
        }
        
        .btn-danger {
            background: #d32f2f;
            color: white;
        }
        
        .btn-danger:hover {
            background: #c62828;
        }
        
        .btn-outline {
            background: var(--button-bg);
            color: var(--dark-green);
            border: 1px solid var(--dark-green);
        }
        
        .btn-outline:hover {
            background: var(--dark-green);
            color: white;
        }
        
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .search-controls {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }
        
        label {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
        }
        
        input[type="number"],
        input[type="text"],
        select {
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
            background: var(--input-bg);
            color: var(--text-color);
            transition: all 0.2s ease;
        }

        input[type="text"]:focus {
            outline: none;
            border-color: var(--dark-green);
            box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
        }

        body.dark-mode input[type="text"]:focus {
            border-color: var(--light-green);
            box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.15);
        }

        input[type="number"]:focus,
        select:focus {
            outline: none;
            border-color: var(--dark-green);
            box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
        }
        
        .slider-container {
            display: flex;
            flex-direction: column;
            gap: 0px;
        }

        .slider-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .slider-arrow {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            color: var(--text-primary);
            border-radius: var(--radius-md);
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        .slider-arrow:hover {
            background: var(--hover-bg);
            border-color: var(--dark-green);
        }

        .slider-arrow:active {
            transform: scale(0.95);
            background: var(--border-color);
        }

        .slider-arrow:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .slider-arrow:disabled:hover {
            background: var(--card-bg);
            border-color: var(--border-color);
        }

        input[type="range"] {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: var(--border-color);
            outline: none;
            -webkit-appearance: none;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--dark-green);
            cursor: pointer;
        }
        
        input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--dark-green);
            cursor: pointer;
            border: none;
        }
        
        .slider-value {
            text-align: center;
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
        }

        /* Search Radius Slider */
        #searchRadius {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            outline: none;
            cursor: pointer;
            background: linear-gradient(to right,
                #c8e6c9 0%,
                #81c784 50%,
                var(--primary-green) 100%);
        }

        #searchRadius::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--dark-green);
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        #searchRadius::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--dark-green);
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        /* POI Count Limit Slider */
        #poiCountLimitSlider {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            outline: none;
            transition: opacity 0.2s;
        }

        #poiCountLimitSlider:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            background: var(--border-color);
        }

        #poiCountLimitSlider:enabled {
            cursor: pointer;
            background: linear-gradient(to right,
                #c8e6c9 0%,
                #81c784 50%,
                var(--primary-green) 100%);
        }

        #poiCountLimitSlider:enabled::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--dark-green);
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        #poiCountLimitSlider:enabled::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--dark-green);
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        #poiCountLimitSlider:disabled::-webkit-slider-thumb,
        #poiCountLimitSlider:disabled::-moz-range-thumb {
            background: #ccc;
            cursor: not-allowed;
        }

        /* Category Count Slider (in modal) */
        #categoryCountSlider {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            outline: none;
            transition: opacity 0.2s;
        }

        #categoryCountSlider:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            background: var(--border-color);
        }

        #categoryCountSlider:enabled {
            cursor: pointer;
            background: linear-gradient(to right,
                #c8e6c9 0%,
                #81c784 50%,
                var(--primary-green) 100%);
        }

        #categoryCountSlider:enabled::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--dark-green);
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        #categoryCountSlider:enabled::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--dark-green);
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        #categoryCountSlider:disabled::-webkit-slider-thumb,
        #categoryCountSlider:disabled::-moz-range-thumb {
            background: #ccc;
            cursor: not-allowed;
        }

        /* Dark Mode Slider Styles */
        body.dark-mode #searchRadius {
            background: linear-gradient(to right, #454545, var(--dark-green));
        }

        body.dark-mode #poiCountLimitSlider:enabled {
            background: linear-gradient(to right, #454545, var(--dark-green));
        }

        body.dark-mode #categoryCountSlider:enabled {
            background: linear-gradient(to right, #454545, var(--dark-green));
        }

        /* ===== UNIVERSAL CHECKBOX STYLES ===== */
        /* Standardized checkbox styling across the entire application */

        /* Light mode - all checkboxes */
        input[type="checkbox"] {
            width: 18px;
            height: 18px;
            min-width: 18px;
            min-height: 18px;
            cursor: pointer;
            accent-color: var(--primary-green);
            vertical-align: middle;
            flex-shrink: 0;
        }

        /* Dark mode - custom styled checkboxes */
        body.dark-mode input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            width: 18px;
            height: 18px;
            min-width: 18px;
            min-height: 18px;
            border: 2px solid #666666;
            border-radius: 3px;
            background-color: #2a2a2a;
            cursor: pointer;
            position: relative;
            vertical-align: middle;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        body.dark-mode input[type="checkbox"]:hover {
            border-color: #888888;
            background-color: #333333;
        }

        body.dark-mode input[type="checkbox"]:checked {
            background-color: #3a3a3a;
            border-color: var(--primary-green);
        }

        body.dark-mode input[type="checkbox"]:checked::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 1px;
            width: 4px;
            height: 8px;
            border: solid var(--primary-green);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        body.dark-mode input[type="checkbox"]:focus {
            outline: 2px solid var(--primary-green);
            outline-offset: 2px;
        }

        body.dark-mode input[type="checkbox"]:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Prefers color scheme dark */
        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) input[type="checkbox"] {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                width: 18px;
                height: 18px;
                min-width: 18px;
                min-height: 18px;
                border: 2px solid #666666;
                border-radius: 3px;
                background-color: #2a2a2a;
                cursor: pointer;
                position: relative;
                vertical-align: middle;
                transition: all 0.2s ease;
                flex-shrink: 0;
            }

            body:not(.light-mode) input[type="checkbox"]:hover {
                border-color: #888888;
                background-color: #333333;
            }

            body:not(.light-mode) input[type="checkbox"]:checked {
                background-color: #3a3a3a;
                border-color: var(--primary-green);
            }

            body:not(.light-mode) input[type="checkbox"]:checked::after {
                content: '';
                position: absolute;
                left: 4px;
                top: 1px;
                width: 4px;
                height: 8px;
                border: solid var(--primary-green);
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

            body:not(.light-mode) input[type="checkbox"]:focus {
                outline: 2px solid var(--primary-green);
                outline-offset: 2px;
            }

            body:not(.light-mode) input[type="checkbox"]:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
        }

        /* Elevation Optimization Toolbar Styles */

        /* Enhanced Elevation Statistics */
        .elevation-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
            margin: 15px 0;
        }
        
        .elevation-stat-card {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            padding: 12px;
            display: flex;
            gap: 10px;
            align-items: center;
            border-left: 3px solid var(--primary-green);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .elevation-stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px var(--shadow);
        }
        
        .elevation-stat-card.climb {
            border-left-color: var(--climb-color, #4caf50);
        }
        
        .elevation-stat-card.descent {
            border-left-color: var(--descent-color, #42a5f5);
        }
        
        .elevation-stat-card.warning {
            border-left-color: var(--blue-primary);
        }
        
        .stat-icon {
            font-size: 24px;
        }
        
        .stat-content {
            flex: 1;
        }
        
        .stat-label {
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        
        .stat-value {
            font-size: 18px;
            font-weight: bold;
            color: var(--text-color);
        }
        
        .stat-detail {
            font-size: 11px;
            color: var(--text-tertiary);
            margin-top: 2px;
        }
        
        /* Segment Analysis */
        .segment-analysis {
            margin-top: 20px;
        }
        
        .segment-category {
            margin-bottom: 20px;
        }
        
        .segment-category h4 {
            font-size: 14px;
            margin-bottom: 10px;
            color: var(--text-color);
        }
        
        .segment-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .segment-item {
            background: var(--card-bg);
            border-radius: var(--radius-md);
            padding: 10px;
            border-left: 3px solid var(--primary-green);
        }
        
        .segment-item.steep-climb {
            border-left-color: var(--dark-green);
        }

        .segment-item.climb {
            border-left-color: var(--primary-green);
        }
        
        .segment-item.steep-descent {
            border-left-color: var(--blue-primary);
        }
        
        .segment-item.descent {
            border-left-color: #42a5f5;
        }
        
        .segment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }
        
        .segment-name {
            font-weight: 600;
            font-size: 13px;
        }
        
        .segment-length {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .segment-details {
            display: flex;
            gap: 12px;
            font-size: 11px;
            color: var(--text-tertiary);
        }

        /* POI Categories Header with Search */
        .poi-categories-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
        }

        .poi-categories-header > label {
            margin: 0;
            flex-shrink: 0;
        }

        .category-search-container {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .category-search-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .category-search-toggle:hover {
            background: rgba(46, 125, 50, 0.1);
            color: var(--primary-color);
        }

        .category-search-toggle.active {
            color: var(--primary-color);
        }

        .category-search-input-wrapper {
            display: flex;
            align-items: center;
            width: 0;
            overflow: hidden;
            opacity: 0;
            transition: width 0.25s ease, opacity 0.2s ease;
        }

        .category-search-input-wrapper.expanded {
            width: 160px;
            opacity: 1;
        }

        .category-search-input {
            flex: 1;
            min-width: 0;
            height: 28px;
            padding: 4px 8px;
            padding-right: 28px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 12px;
            background: var(--card-bg);
            color: var(--text-color);
            outline: none;
            transition: border-color 0.2s;
        }

        .category-search-input:focus {
            border-color: var(--primary-color);
        }

        .category-search-input::placeholder {
            color: var(--text-tertiary);
        }

        .category-search-clear {
            position: absolute;
            right: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            padding: 0;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            cursor: pointer;
            border-radius: 2px;
            opacity: 0;
            transition: opacity 0.2s, color 0.2s;
        }

        .category-search-input-wrapper.expanded .category-search-clear.visible {
            opacity: 1;
        }

        .category-search-clear:hover {
            color: var(--text-color);
        }

        .category-search-input-wrapper {
            position: relative;
        }

        /* Category search match highlighting */
        .poi-group.category-search-hidden,
        .poi-category-item.category-search-hidden {
            display: none !important;
        }

        .poi-category-item.category-search-match .category-name {
            font-weight: 600;
        }

        /* No results message */
        .category-search-no-results {
            padding: 16px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 13px;
            display: none;
        }

        .category-search-no-results.visible {
            display: block;
        }

        /* POI List Search */
        .poi-search-container {
            display: flex;
            align-items: center;
            position: relative;
        }

        .poi-search-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .poi-search-toggle:hover {
            background: rgba(46, 125, 50, 0.1);
            color: var(--primary-color);
        }

        .poi-search-toggle.active {
            color: var(--primary-color);
        }

        .poi-search-input-wrapper {
            position: absolute;
            right: 100%;
            display: flex;
            align-items: center;
            width: 0;
            overflow: hidden;
            opacity: 0;
            transition: width 0.25s ease, opacity 0.2s ease;
            margin-right: 4px;
        }

        .poi-search-input-wrapper.expanded {
            width: 140px;
            opacity: 1;
        }

        .poi-search-input {
            flex: 1;
            min-width: 0;
            height: 26px;
            padding: 4px 24px 4px 8px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 12px;
            background: var(--card-bg);
            color: var(--text-color);
            outline: none;
            transition: border-color 0.2s;
        }

        .poi-search-input:focus {
            border-color: var(--primary-color);
        }

        .poi-search-input::placeholder {
            color: var(--text-tertiary);
        }

        .poi-search-clear {
            position: absolute;
            right: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            padding: 0;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            cursor: pointer;
            border-radius: 2px;
            opacity: 0;
            transition: opacity 0.2s, color 0.2s;
        }

        .poi-search-input-wrapper.expanded .poi-search-clear.visible {
            opacity: 1;
        }

        .poi-search-clear:hover {
            color: var(--text-color);
        }

        .poi-list-item.poi-search-hidden {
            display: none !important;
        }

        .poi-list-no-results {
            padding: 16px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 13px;
            display: none;
        }

        .poi-list-no-results.visible {
            display: block;
        }
        
        /* NEW: Grouped POI Categories Styles */
        .poi-category-groups {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 1px;
        }

        .poi-group {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            overflow: hidden;
            background: var(--card-bg);
        }

        .poi-group:last-child {
            margin-bottom: 20px; /* Extra spacing for last group */
        }

        .poi-group-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 12px;
            background: var(--card-bg);
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
        }

        .poi-group-header:hover {
            background: rgba(46, 125, 50, 0.1);
        }

        body.dark-mode .poi-group-header:hover {
            background: rgba(76, 175, 80, 0.15);
        }

        .poi-group-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-color);
        }

        .poi-group-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
        }

        .poi-group-icon svg,
        .poi-category-label svg {
            width: 16px;
            height: 16px;
        }

        /* Stroke-based icons (without fill attribute) */
        .poi-group-icon svg path:not([fill]),
        .poi-category-label svg path:not([fill]) {
            fill: none;
            stroke: var(--text-color);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* Preserve stroke for elements without fill */
        .poi-group-icon svg:not(:has(path[fill])),
        .poi-category-label svg:not(:has(path[fill])) {
            stroke: var(--text-color);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .poi-group-count {
            font-size: 11px;
            color: var(--text-secondary);
            font-weight: normal;
            margin-right: 4px;
        }

        .poi-group-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .poi-group-toggle-all {
            font-size: 11px;
            color: var(--dark-green);
            padding: 4px 8px;
            border-radius: 3px;
            background: var(--button-bg);
            border: 1px solid var(--dark-green);
            cursor: pointer;
            transition: all 0.2s;
        }

        .poi-group-toggle-all:hover {
            background: var(--dark-green);
            color: white;
        }

        body.dark-mode .poi-group-toggle-all {
            color: var(--light-green);
            border-color: var(--light-green);
        }

        body.dark-mode .poi-group-toggle-all:hover {
            background: var(--light-green);
            color: #1a1a1a;
        }

        /* "All" button state - filled green when all categories selected */
        .poi-group-toggle-all.all-selected {
            background: var(--primary-green);
            color: white;
            border-color: var(--primary-green);
        }

        .poi-group-toggle-all.all-selected:hover {
            background: var(--dark-green);
        }

        body.dark-mode .poi-group-toggle-all.all-selected {
            background: var(--light-green);
            color: #1a1a1a;
            border-color: var(--light-green);
        }

        body.dark-mode .poi-group-toggle-all.all-selected:hover {
            background: var(--primary-green);
        }

        /* Group icon - green when any category selected */
        .poi-group-icon.has-selection {
            color: var(--primary-green);
        }

        body.dark-mode .poi-group-icon.has-selection {
            color: var(--light-green);
        }

        .poi-group-arrow {
            font-size: 12px;
            transition: transform 0.3s;
            transform: rotate(180deg); /* Up arrow when expanded (default state without .collapsed class) */
            display: inline-block; /* Required for transform to work */
        }

        .poi-group-arrow.collapsed {
            transform: rotate(0deg); /* Down arrow when collapsed */
        }

        .poi-group-content {
            padding: 8px 12px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
            max-height: 10000px;
            overflow: visible;
            transition: all 0.3s ease;
        }

        .poi-group-content.collapsed {
            max-height: 0;
            padding: 0 12px;
            overflow: hidden;
        }

        /* ===== Sidebar Sections Container for Overlay Effect ===== */
        .sidebar-sections-container {
            position: relative;
            display: flex;
            flex-direction: column;
            flex: 1; /* Use flex: 1 to share space with query results section */
            min-height: 0; /* Allow flex item to shrink below content size */
            overflow: hidden; /* Let children handle their own scrolling */
        }

        /* Mobile Sidebar Close Button - hidden on desktop */
        .sidebar-close-btn {
            display: none;
        }

        @media (max-width: 768px) {
            .sidebar-close-btn {
                display: flex;
                position: absolute;
                top: 8px;
                right: 8px;
                z-index: 100;
                width: 36px;
                height: 36px;
                align-items: center;
                justify-content: center;
                background: var(--bg-color);
                border: 1px solid var(--border-color);
                border-radius: 50%;
                cursor: pointer;
                color: var(--text-secondary);
                font-size: 16px;
                transition: all 0.2s ease;
                box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            }

            .sidebar-close-btn:hover {
                background: var(--hover-bg);
                color: var(--text-color);
                box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            }

            .sidebar-close-btn:active {
                transform: scale(0.95);
            }

            body.dark-mode .sidebar-close-btn {
                background: var(--card-bg);
                border-color: var(--border-color);
            }

            body.dark-mode .sidebar-close-btn:hover {
                background: var(--hover-bg);
            }
        }

        /* Search section should be scrollable and fill available space */
        #searchSection {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
        }

        #searchSection .collapsible-content {
            flex: 1;
            min-height: 0;
        }

        /* POI Section overlay behavior */
        .poi-section-overlay {
            z-index: 10;
            background: var(--sidebar-bg);
            transition: top 0.3s ease, bottom 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
        }

        body.dark-mode .poi-section-overlay {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
        }

        /* When POI section is collapsed, show as compact header bar */
        .poi-section-overlay .collapsible-content.collapsed {
            max-height: 0;
            overflow: hidden;
            padding: 0;
        }

        /* Smooth transition for expansion - only apply max-height to expanded state */
        .poi-section-overlay:not(.minimized) .collapsible-content {
            max-height: calc(100vh - 300px);
            overflow-y: auto;
            overflow-x: hidden;
            transition: max-height 0.3s ease;
        }

        /* Minimized state - appear in normal flow below search section */
        .poi-section-overlay.minimized {
            position: relative;
            flex: 1; /* Fill available vertical space in sidebar */
            min-height: 0; /* Allow flexbox to shrink if needed */
            display: flex;
            flex-direction: column;
        }

        /* When minimized POI section is visible, content should fill available space */
        .poi-section-overlay.minimized .collapsible-content {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: visible; /* Changed from hidden to allow sticky footer to display */
        }

        /* When minimized, let poi-list fill available space */
        .poi-section-overlay.minimized .poi-list {
            flex: 1;
            min-height: 0;
            max-height: none;
            overflow-y: auto;
        }

        /* Expanded state - absolute overlay covering entire search section */
        .poi-section-overlay:not(.minimized) {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            margin-bottom: 0; /* Remove the default .section margin-bottom to fill full height */
        }

        /* When overlay is expanded, content should fill available space */
        .poi-section-overlay:not(.minimized) .collapsible-content {
            max-height: none;
            flex: 1;
            min-height: 0; /* Critical: allows flex child to shrink below content size */
            overflow: visible; /* Allow sticky footer to display properly */
            display: flex;
            flex-direction: column;
            background: var(--sidebar-bg); /* Fill empty space with background color */
        }

        /* Hidden state for POI section - MUST come after minimized/expanded states to override */
        .poi-section-overlay.hidden {
            display: none !important;
        }

        /* When expanded, add subtle backdrop over search section */
        .sidebar-sections-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0);
            pointer-events: none;
            transition: background 0.3s ease;
            z-index: 5;
        }

        .sidebar-sections-container.poi-expanded::before {
            background: rgba(0, 0, 0, 0.05);
        }

        body.dark-mode .sidebar-sections-container.poi-expanded::before {
            background: rgba(0, 0, 0, 0.15);
        }

        /* Prevent interaction with search section when POI overlay is expanded */
        .sidebar-sections-container.poi-expanded #searchSection {
            pointer-events: none;
        }

        .poi-category-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            padding: 1px 8px;
            border-radius: 4px;
            transition: background 0.2s;
            min-height: 28px;
        }

        .poi-category-item:hover {
            background: rgba(46, 125, 50, 0.1);
        }

        body.dark-mode .poi-category-item:hover {
            background: rgba(76, 175, 80, 0.15);
        }

        .poi-category-item input[type="checkbox"] {
            /* Inherits from universal checkbox styles above */
            margin-right: 8px;
        }

        .poi-category-label {
            cursor: pointer;
            user-select: none;
            flex: 1;
            line-height: 1.3;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .poi-category-name {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .poi-category-count {
            font-size: 11px;
            color: var(--success-color, #4caf50);
            font-weight: 500;
            margin-left: 2px;
        }

        .poi-category-count[data-count="0"] {
            color: var(--text-secondary, #767676);
        }

        .poi-category-cache-btn {
            flex-shrink: 0;
            opacity: 0.6;
            color: #2196f3;
            background: none;
            border: none;
            cursor: pointer;
            padding: 2px 4px;
            font-size: 12px;
            transition: opacity 0.2s, color 0.2s;
            margin-left: auto;
        }

        .poi-category-cache-btn:hover {
            opacity: 1;
            color: var(--blue-primary);
        }

        body.dark-mode .poi-category-cache-btn {
            color: #64b5f6;
        }

        body.dark-mode .poi-category-cache-btn:hover {
            color: #90caf9;
        }

        .poi-category-settings-btn {
            flex-shrink: 0;
            opacity: 0.6;
            color: #666;
            transition: opacity 0.2s, color 0.2s;
            margin-left: 0;
        }

        /* Right-align settings button when cache button is hidden */
        .poi-category-cache-btn.u-hidden + .poi-category-settings-btn {
            margin-left: auto;
        }

        .poi-category-settings-btn:hover {
            opacity: 1;
            color: var(--blue-primary) !important;
        }

        .poi-category-settings-btn.has-custom-distance,
        .poi-category-settings-btn.has-custom-settings {
            opacity: 1;
            color: var(--dark-green) !important;
        }

        body.dark-mode .poi-category-settings-btn {
            color: #999;
        }

        body.dark-mode .poi-category-settings-btn.has-custom-distance,
        body.dark-mode .poi-category-settings-btn.has-custom-settings {
            color: var(--primary-green) !important;
        }

        /* Group settings button (palette icon in header) */
        .poi-group-settings-btn {
            flex-shrink: 0;
            opacity: 0.5;
            color: #888;
            background: none;
            border: none;
            padding: 2px 6px;
            cursor: pointer;
            transition: opacity 0.2s, color 0.2s;
            margin-left: auto;
            margin-right: 4px;
        }

        .poi-group-settings-btn:hover {
            opacity: 1;
            color: var(--blue-primary) !important;
        }

        .poi-group-settings-btn.has-custom-color {
            opacity: 1;
            color: var(--dark-green) !important;
        }

        body.dark-mode .poi-group-settings-btn {
            color: #aaa;
        }

        body.dark-mode .poi-group-settings-btn.has-custom-color {
            color: var(--primary-green) !important;
        }

        /* ================================================================
           Custom Tags Section
           ================================================================ */

        .poi-category-group--custom {
            border: 2px solid var(--primary-green);
            border-radius: 8px;
            margin-bottom: 12px;
        }

        body.dark-mode .poi-category-group--custom {
            border-color: var(--light-green);
        }

        .poi-category-add-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: var(--primary);
            cursor: pointer;
            padding: 4px 8px;
            margin-left: auto;
            margin-right: 8px;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .poi-category-add-btn:hover {
            background: rgba(46, 125, 50, 0.1);
            color: var(--dark-green);
        }

        body.dark-mode .poi-category-add-btn {
            color: var(--primary-green);
        }

        body.dark-mode .poi-category-add-btn:hover {
            background: rgba(76, 175, 80, 0.15);
        }

        .poi-category-delete-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: var(--text-tertiary);
            cursor: pointer;
            padding: 4px;
            margin-left: 4px;
            opacity: 0;
            transition: opacity 0.2s, color 0.2s;
        }

        /* When delete button is the first action button (no settings), push it right */
        .poi-category-cache-btn.u-hidden + .poi-category-delete-btn {
            margin-left: auto;
        }

        .poi-category-item:hover .poi-category-delete-btn {
            opacity: 0.7;
        }

        .poi-category-delete-btn:hover {
            opacity: 1 !important;
            color: var(--danger) !important;
        }

        .poi-category-item--add-prompt {
            padding: 8px 16px;
        }

        .poi-category-add-prompt-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: 1px dashed var(--border-color);
            border-radius: 6px;
            padding: 10px 14px;
            width: 100%;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 13px;
            transition: all 0.2s;
        }

        .poi-category-add-prompt-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: rgba(46, 125, 50, 0.05);
        }

        body.dark-mode .poi-category-add-prompt-btn:hover {
            background: rgba(76, 175, 80, 0.1);
        }

        /* Custom Tag Modal Styles */
        .custom-tag-intro {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 12px 14px;
            margin-bottom: 16px;
            font-size: 13px;
            line-height: 1.5;
        }

        .custom-tag-intro p {
            margin: 0;
            color: var(--text-secondary);
        }

        .custom-tag-intro p + p {
            margin-top: 8px;
        }

        .custom-tag-intro a {
            color: var(--primary);
            text-decoration: none;
        }

        .custom-tag-intro a:hover {
            text-decoration: underline;
        }

        .custom-tag-intro-examples {
            font-size: 12px;
        }

        .custom-tag-intro code {
            background: rgba(46, 125, 50, 0.1);
            color: var(--dark-green);
            padding: 2px 6px;
            border-radius: 3px;
            font-family: monospace;
            font-size: 11px;
        }

        body.dark-mode .custom-tag-intro code {
            background: rgba(76, 175, 80, 0.15);
            color: var(--primary-green);
        }

        .custom-tag-search-results {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            margin-top: 8px;
            background: var(--bg-secondary);
        }

        .custom-tag-no-results {
            padding: 16px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 13px;
        }

        .tag-search-result {
            padding: 10px 12px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
            transition: background 0.15s;
        }

        .tag-search-result:last-child {
            border-bottom: none;
        }

        .tag-search-result:hover {
            background: var(--button-hover);
        }

        .tag-search-result-main {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .tag-search-result-main strong {
            font-family: monospace;
            font-size: 13px;
            color: var(--text-color);
        }

        .tag-count {
            color: var(--text-tertiary);
            font-size: 11px;
        }

        .tag-description {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
            line-height: 1.4;
        }

        .selected-tag-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 12px;
            background: var(--card-bg);
            border-radius: 6px;
            border: 1px solid var(--border-color);
        }

        .selected-tag-badge {
            display: inline-block;
            background: var(--primary);
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 13px;
            width: fit-content;
        }

        .selected-tag-desc {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        /* Key-Value Input for tag selection */
        .selected-tag-key-input {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 8px;
        }

        .selected-tag-key-label {
            font-family: monospace;
            font-size: 14px;
            font-weight: 600;
            color: var(--primary);
            white-space: nowrap;
        }

        .selected-tag-value-input {
            flex: 1;
            padding: 6px 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-family: monospace;
            font-size: 13px;
            background: var(--input-bg);
            color: var(--text-color);
        }

        .selected-tag-value-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.1);
        }

        .selected-tag-examples {
            margin-top: 4px;
        }

        .selected-tag-examples small {
            font-size: 11px;
            color: var(--text-tertiary);
        }

        /* Key-only result styling */
        .tag-search-result--key-only {
            border-left: 3px solid var(--warning-color);
        }

        .tag-key-hint {
            font-size: 11px;
            color: var(--text-tertiary);
            font-style: italic;
            margin-left: 8px;
        }

        /* Icon Selection Grid */
        .custom-tag-icon-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 4px;
        }

        @media (max-width: 600px) {
            .custom-tag-icon-grid {
                grid-template-columns: repeat(6, 1fr);
            }
        }

        .icon-option {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            font-size: 16px;
            transition: all 0.15s;
        }

        .icon-option:hover {
            border-color: var(--primary);
            background: rgba(46, 125, 50, 0.05);
            color: var(--primary);
        }

        .icon-option.selected {
            border-color: var(--primary);
            background: rgba(46, 125, 50, 0.1);
            color: var(--dark-green);
        }

        body.dark-mode .icon-option:hover {
            background: rgba(76, 175, 80, 0.1);
        }

        body.dark-mode .icon-option.selected {
            background: rgba(76, 175, 80, 0.15);
            color: var(--primary-green);
        }

        /* POI Count Badge */
        .category-poi-count-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 600;
            color: var(--text-secondary);
            background: rgba(46, 125, 50, 0.1);
            border: 1px solid rgba(46, 125, 50, 0.3);
            border-radius: 10px;
            padding: 2px 7px;
            margin-left: auto;
            margin-right: 4px;
            min-width: 24px;
            text-align: center;
            transition: all 0.2s;
        }

        body.dark-mode .category-poi-count-badge {
            background: rgba(76, 175, 80, 0.15);
            border-color: rgba(76, 175, 80, 0.4);
        }

        /* Highlight when count > 0 */
        .category-poi-count-badge:not([data-count="0"]) {
            color: var(--dark-green);
            background: rgba(46, 125, 50, 0.15);
            border-color: rgba(46, 125, 50, 0.4);
        }

        body.dark-mode .category-poi-count-badge:not([data-count="0"]) {
            color: var(--light-green);
            background: rgba(76, 175, 80, 0.2);
            border-color: rgba(76, 175, 80, 0.5);
        }

        /* Fade when zero */
        .category-poi-count-badge[data-count="0"] {
            opacity: 0.3;
        }

        /* POI Sort Button */
        .poi-sort-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 18px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .poi-sort-btn:hover {
            background: var(--button-hover);
            color: var(--text-color);
        }

        .poi-sort-btn.active {
            color: var(--primary-green);
            background: rgba(76, 175, 80, 0.1);
        }

        body.dark-mode .poi-sort-btn.active {
            color: var(--light-green);
            background: rgba(76, 175, 80, 0.15);
        }

        /* Viewport Filter Button */
        .viewport-filter-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 18px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .viewport-filter-btn:hover {
            background: var(--button-hover);
            color: var(--text-color);
        }

        .viewport-filter-btn.active {
            color: var(--primary-green);
            background: rgba(76, 175, 80, 0.1);
        }

        .viewport-filter-btn.active i::before {
            content: "\f341"; /* bi-eye-fill icon */
        }

        body.dark-mode .viewport-filter-btn.active {
            color: var(--light-green);
            background: rgba(76, 175, 80, 0.15);
        }

        /* Favorites Filter Button */
        .favorites-filter-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 18px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .favorites-filter-btn:hover {
            background: var(--button-hover);
            color: #ffc107;
        }

        .favorites-filter-btn.active {
            color: #ffc107;
            background: rgba(255, 193, 7, 0.15);
        }

        .favorites-filter-btn.active i::before {
            content: "\f586";
        }

        body.dark-mode .favorites-filter-btn.active {
            color: #ffd54f;
            background: rgba(255, 193, 7, 0.2);
        }

        /* Category Favorites Button */
        .category-favorites-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            padding: 2px 6px;
            margin-left: 4px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .category-favorites-btn:hover {
            color: #ffc107;
        }

        .category-favorites-btn.active {
            color: #ffc107;
        }

        .category-favorites-btn.disabled,
        .category-favorites-btn:disabled {
            color: var(--text-secondary);
            opacity: 0.3;
            cursor: not-allowed;
        }

        .category-favorites-btn.disabled:hover,
        .category-favorites-btn:disabled:hover {
            color: var(--text-secondary);
        }

        /* Category Delete Non-Favorites Button */
        .category-delete-nonfav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            padding: 2px 6px;
            margin-left: 2px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .category-delete-nonfav-btn:hover {
            color: #f44336;
        }

        .icon-trash-star {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .icon-trash-star .bi-trash {
            font-size: 14px;
        }

        .icon-trash-star .icon-star-overlay {
            position: absolute;
            font-size: 7px;
            top: -2px;
            right: -4px;
            color: #ffc107;
            text-shadow: 0 0 2px rgba(0,0,0,0.3);
        }

        .category-delete-nonfav-btn:hover .icon-star-overlay {
            color: #ffeb3b;
        }

        /* Category Remove All Button */
        .category-remove-btn {
            background: none;
            border: none;
            color: #dc3545;
            font-size: 14px;
            cursor: pointer;
            padding: 2px 6px;
            margin-left: 2px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .category-remove-btn:hover {
            background: rgba(220, 53, 69, 0.1);
        }

        body.dark-mode .category-remove-btn:hover {
            background: rgba(220, 53, 69, 0.15);
        }

        /* Bulk Editor Button */
        .bulk-editor-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 18px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .bulk-editor-btn:hover {
            background: var(--button-hover);
            color: var(--text-color);
        }

        /* Batch Elevation Button */
        .batch-elevation-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 18px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .batch-elevation-btn:hover {
            background: var(--button-hover);
            color: var(--text-color);
        }

        .batch-elevation-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .batch-elevation-btn:disabled:hover {
            background: none;
            color: var(--text-secondary);
        }

        .elevation-count-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            background: #ff6b6b;
            color: white;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 4px;
            border-radius: var(--radius-lg);
            min-width: 16px;
            text-align: center;
            line-height: 1;
        }

        body.dark-mode .elevation-count-badge {
            background: #ff5252;
        }

        /* Quick action buttons for all groups */
        .poi-quick-actions {
            display: flex;
            gap: 6px;
            margin-top: 8px;
            margin-bottom: 30px; /* Bottom spacing for scrolling */
            padding-top: 8px;
            padding-bottom: 10px; /* Extra padding at bottom */
            border-top: 1px solid var(--border-color);
        }

        .quick-action-btn {
            flex: 1;
            padding: 5px 10px;
            border: 1px solid var(--border-color);
            background: var(--button-bg);
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            transition: all 0.2s;
            text-align: center;
            color: var(--text-color);
        }

        .quick-action-btn:hover {
            background: rgba(46, 125, 50, 0.1);
            border-color: var(--dark-green);
        }

        body.dark-mode .quick-action-btn:hover {
            background: rgba(76, 175, 80, 0.15);
            border-color: var(--light-green);
        }

        /* Reset Distances button - blue styling */
        .quick-action-btn-reset {
            background: var(--blue-primary);
            color: white;
            border-color: var(--blue-primary);
        }

        .quick-action-btn-reset:hover {
            background: #1565c0;
            border-color: #1565c0;
        }

        /* Search button row - combines search and quick actions */
        .search-button-row {
            display: flex;
            gap: 6px;
            margin-top: 1px;
            flex-wrap: nowrap; /* Keep all buttons on same row */
        }

        /* All buttons take equal 33.33% width */
        .search-button-row .quick-action-btn {
            flex: 0 1 33.33%;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Primary search button also takes 33.33% - equal to others */
        .search-button-row .btn-primary {
            flex: 0 1 33.33%;
            min-width: 0;
        }

        /* Show full text by default, hide short text */
        .btn-text-full {
            display: inline;
        }

        .btn-text-short {
            display: none;
        }

        body.dark-mode .quick-action-btn-reset {
            background: var(--blue-primary);
            border-color: var(--blue-primary);
        }

        body.dark-mode .quick-action-btn-reset:hover {
            background: #1565c0;
            border-color: #1565c0;
        }

        .preset-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
            margin-top: 8px;
        }
        
        .preset-btn {
            padding: 5px 10px;
            border: 1px solid var(--border-color);
            background: var(--button-bg);
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
            text-align: left;
            white-space: nowrap;
            color: var(--text-color);
        }
        
        .preset-btn:hover {
            background: #e8f5e9;
            border-color: var(--dark-green);
            color: var(--dark-green);
        }

        body.dark-mode .preset-btn:hover {
            background: #1e3a1e !important;
            border-color: var(--primary-green);
            color: var(--light-green);
        }
        
        .preset-btn:active {
            background: #c8e6c9;
            transform: scale(0.98);
        }

        /* Compact preset buttons that fit side-by-side */
        .preset-compact-group {
            display: flex;
            gap: 8px;
        }

        .preset-btn-compact {
            flex: 1;
            display: inline-block;
        }
        
        body.dark-mode .preset-btn:active {
            background: #2a4a2a;
        }

        /* ===== Custom Preset System ===== */

        /* Active Preset Display - styled like a preset button but non-clickable */
        .active-preset-display {
            display: flex;
            align-items: center;
            padding: 5px 10px;
            background: #fff8e1; /* Light gold/yellow background */
            border: 1px solid #ffc107; /* Gold border */
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            grid-column: 1 / -1; /* Span full width of grid */
            margin-top: 0; /* Align with other preset buttons */
            color: #f57f17; /* Dark gold text */
            transition: all 0.2s;
        }

        body.dark-mode .active-preset-display {
            background: #3a3300; /* Dark mode gold background */
            border-color: #ffc107;
            color: #ffd54f; /* Lighter gold text for dark mode */
        }

        .clear-preset-btn {
            margin-left: auto;
            padding: 2px 6px;
            background: transparent;
            border: none;
            cursor: pointer;
            color: #f57f17;
            transition: color 0.2s;
            font-size: 16px;
            line-height: 1;
        }

        body.dark-mode .clear-preset-btn {
            color: #ffd54f;
        }

        .clear-preset-btn:hover {
            color: #f44336;
        }

        /* Preset List Styles */
        .preset-list {
            max-height: 400px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .preset-item {
            padding: 14px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s;
        }

        .preset-item:hover {
            background: rgba(25, 118, 210, 0.05);
            border-color: var(--blue-primary);
            transform: translateX(4px);
        }

        body.dark-mode .preset-item:hover {
            background: rgba(25, 118, 210, 0.1);
        }

        .preset-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            font-size: 15px;
        }

        .preset-item-details {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }

        .preset-item-details span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .preset-item-footer {
            font-size: 11px;
            color: var(--text-tertiary);
            font-style: italic;
        }

        .preset-delete-btn {
            padding: 4px 8px;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            cursor: pointer;
            color: var(--text-secondary);
            transition: all 0.2s;
            font-size: 14px;
        }

        .preset-delete-btn:hover {
            background: #f44336;
            border-color: #f44336;
            color: white;
        }

        /* Modal input styles */
        .modal-field {
            margin-bottom: 15px;
        }

        .modal-field label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: var(--text-color);
        }

        /* Modal Section Styles (for unified category settings modal) */
        .modal-section {
            margin-bottom: 20px;
        }

        .modal-section-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }

        .modal-section-divider {
            height: 1px;
            background: var(--border-color);
            margin: 20px 0;
            opacity: 0.5;
        }

        /* Distance/Unit Input Group (Category Settings Modal) */
        .distance-unit-input-group {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .distance-unit-input-group .distance-input {
            flex: 1;
            min-width: 0; /* Prevent flex item from overflowing */
        }

        .distance-unit-input-group .unit-select {
            flex-shrink: 0;
            width: auto;
            min-width: 90px;
            max-width: 120px;
        }

        /* Mobile adjustments */
        @media (max-width: 480px) {
            .distance-unit-input-group {
                flex-direction: column;
                align-items: stretch;
            }

            .distance-unit-input-group .unit-select {
                width: 100%;
                max-width: none;
            }
        }

        /* Empty state for preset list */
        .preset-list-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 10px;
        }
        
        .stat-card {
            background: var(--card-bg);
            padding: 12px;
            border-radius: var(--radius-md);
            text-align: center;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: var(--dark-green);
            display: block;
        }
        
        body.dark-mode .stat-value {
            color: var(--light-green);
        }
        
        .stat-label {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        
        .poi-list {
            max-height: 400px;
            overflow-y: auto;
        }

        /* When POI overlay is expanded, let poi-list fill available space */
        .poi-section-overlay:not(.minimized) .poi-list {
            flex: 1;
            min-height: 0;
            max-height: none; /* Override base max-height to allow flex growth */
            overflow-y: auto;
            background: var(--sidebar-bg); /* Fill empty space with background color */
        }

        /* POI list item clickable styling */
        .poi-list-item {
            padding: 8px 12px;
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: background 0.2s;
            position: relative;
        }

        .poi-list-item.has-route-indicator {
            padding-left: 16px;
        }

        .poi-route-indicator {
            position: absolute;
            left: 0;
            top: 4px;
            bottom: 4px;
            width: 4px;
            border-radius: 2px;
        }

        .poi-list-item:hover {
            background: var(--card-bg);
        }

        body.dark-mode .poi-list-item:hover {
            background: var(--button-hover);
        }

        /* POI list item header layout */
        .poi-list-item-header {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .poi-list-name {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 600;
            font-size: 13px;
        }

        .poi-list-item-actions {
            display: flex;
            align-items: center;
            gap: 2px;
            flex-shrink: 0;
            margin-left: auto;
        }

        .poi-star-icon {
            cursor: pointer;
            color: #ffc107;
            font-size: 14px;
            padding: 2px;
        }

        .poi-star-icon:hover {
            transform: scale(1.2);
        }

        .poi-delete-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
            font-size: 14px;
            color: #dc3545;
            line-height: 1;
            display: flex;
            align-items: center;
        }

        .poi-delete-btn:hover {
            background: rgba(220, 53, 69, 0.1);
        }

        body.dark-mode .poi-delete-btn {
            color: #dc3545;
            background: none;
        }

        body.dark-mode .poi-delete-btn:hover {
            background: rgba(220, 53, 69, 0.15);
        }

        /* POI list item stats */
        .poi-list-item-stats {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-top: 3px;
            padding-left: 24px;
            font-size: 12px;
        }

        .poi-offset {
            color: var(--text-secondary);
        }

        /* ===== POI List Category Collapse Styles ===== */
        .poi-category-section {
            margin-bottom: 15px;
        }

        .poi-category-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--card-bg);
            border-radius: 4px;
            margin-bottom: 0px;
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
        }

        .poi-category-header:hover {
            background: var(--border-color);
        }

        /* Group color bar - shows group's marker color */
        .poi-group-color-bar {
            width: 4px;
            height: 20px;
            border-radius: 2px;
            flex-shrink: 0;
            margin-right: 4px;
        }

        /* Category color bar - shows custom color override */
        .poi-category-color-bar {
            width: 3px;
            height: 16px;
            border-radius: 2px;
            flex-shrink: 0;
            margin-right: 2px;
        }

        .poi-category-header-icon {
            flex-shrink: 0;
            font-size: 14px;
        }

        .poi-category-header-text {
            flex-grow: 1;
            text-align: left;
            font-weight: 600;
            font-size: 13px;
        }

        .category-count-badge {
            font-size: 11px;
            color: var(--text-secondary);
            background: var(--bg-color);
            padding: 2px 6px;
            border-radius: 10px;
            flex-shrink: 0;
        }

        .category-count-badge.has-selection {
            background: var(--primary-green);
            color: white;
        }

        .poi-category-toggle-icon {
            font-size: 14px;
            transition: transform 0.3s ease;
            transform: rotate(0deg);
            display: inline-block;
            flex-shrink: 0;
        }

        .poi-category-header.collapsed .poi-category-toggle-icon {
            transform: rotate(-90deg);
        }

        .poi-category-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 600;
            font-size: 13px;
            color: var(--text-color);
        }

        .poi-category-icon {
            font-size: 14px;
            display: inline-block;
            opacity: 0.9;
        }

        .poi-category-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .poi-category-arrow {
            font-size: 12px;
            transition: transform 0.3s;
            transform: rotate(180deg);
            display: inline-block;
        }

        .poi-category-arrow.collapsed {
            transform: rotate(0deg);
        }

        .poi-category-items {
            overflow: hidden;
            transition: max-height 0.25s ease-out, opacity 0.25s ease-out;
            opacity: 1;
        }

        .poi-category-items.collapsed {
            max-height: 0 !important;
            overflow: hidden;
            opacity: 0;
        }

        .poi-item {
            padding: 12px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: background 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        
        .poi-item:hover {
            background: rgba(46, 125, 50, 0.1);
        }

        body.dark-mode .poi-item:hover {
            background: rgba(76, 175, 80, 0.15);
        }
        
        .poi-info {
            flex: 1;
        }
        
        .poi-name {
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 4px;
        }
        
        .poi-category {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }
        
        .poi-distance {
            font-size: 12px;
            color: var(--dark-green);
            font-weight: 500;
        }
        
        body.dark-mode .poi-distance {
            color: var(--light-green);
        }
        
        .poi-actions {
            display: flex;
            gap: 5px;
        }
        
        .poi-action-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            transition: background 0.2s;
            color: #f44336; /* Red color for delete icon - consistent in both light and dark modes */
        }
        
        .poi-action-btn:hover {
            background: var(--button-hover);
        }

        /* ===== POI Bulk Selection Styles ===== */

        /* Checkbox styling - always visible, replaces trash button */
        .poi-item-checkbox {
            /* Inherits from universal checkbox styles */
            margin: 0;
        }

        /* Sticky footer for bulk actions */
        .poi-selection-footer {
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--card-bg);
            border-top: 2px solid var(--primary-green);
            padding: 8px 12px;
            display: none;
            flex-direction: column;
            gap: 6px;
            z-index: 100;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }

        body.dark-mode .poi-selection-footer {
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
        }

        .poi-selection-footer.active {
            display: flex;
        }

        /* Footer content layout */
        .poi-selection-footer-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        /* Selection info container */
        .poi-selection-footer-info {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        .poi-selection-footer-info i {
            color: var(--primary-green);
            font-size: 13px;
            flex-shrink: 0;
        }

        .poi-selection-footer-info span {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Selection summary text */
        .poi-selection-summary {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .poi-selection-summary i {
            color: var(--primary-green);
            font-size: 16px;
        }

        /* Footer action buttons container */
        .poi-selection-footer-actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }

        /* Footer action buttons */
        .poi-selection-action-btn {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .poi-selection-action-btn i {
            font-size: 12px;
        }

        .poi-selection-action-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .poi-selection-action-btn:not(:disabled):hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }

        /* Delete Selected button - red */
        .poi-selection-action-btn.delete {
            background: #fff;
            color: #f44336;
            border: 1px solid #f44336;
        }

        .poi-selection-action-btn.delete:not(:disabled):hover {
            background: #f44336;
            color: white;
        }

        body.dark-mode .poi-selection-action-btn.delete {
            background: #2a2a2a;
        }

        body.dark-mode .poi-selection-action-btn.delete:not(:disabled):hover {
            background: #f44336;
            color: white;
        }

        /* Keep Only Selected button - green */
        .poi-selection-action-btn.keep {
            background: var(--primary-green);
            color: white;
        }

        .poi-selection-action-btn.keep:not(:disabled):hover {
            background: var(--dark-green);
        }

        /* Mobile responsive styles */
        @media (max-width: 768px) {
            .poi-item-checkbox {
                /* Mobile uses same 18px size for consistency */
            }

            .poi-selection-footer {
                padding: 8px 10px;
            }

            .poi-selection-footer-content {
                gap: 6px;
            }

            .poi-selection-footer-info {
                font-size: 10px;
                flex: 1;
                min-width: 0;
            }

            .poi-selection-footer-info i {
                font-size: 12px;
            }

            .poi-selection-summary {
                justify-content: center;
            }

            .poi-selection-footer-actions {
                gap: 4px;
            }

            .poi-selection-action-btn {
                padding: 6px 8px;
                font-size: 10px;
                gap: 3px;
            }

            .poi-selection-action-btn i {
                font-size: 11px;
            }
        }

        .message {
            position: fixed;
            top: 70px; /* Below header */
            right: 20px;
            padding: 15px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            z-index: 10010; /* Above header (10005) */
            display: none;
            animation: slideIn 0.3s;
            display: flex;
            align-items: center;
            gap: 10px;
            pointer-events: none; /* Prevent blocking clicks when hidden */
        }

        /* Enable pointer events when message is visible */
        .message.success,
        .message.error,
        .message.warning,
        .message.info {
            pointer-events: auto;
        }

        .message-icon {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
        }

        .message-icon svg {
            width: 100%;
            height: 100%;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .message-text {
            flex: 1;
        }
        
        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        .message.success {
            background: var(--primary-green);
            color: white;
        }

        .message.error {
            background: #f44336;
            color: white;
        }

        .message.warning {
            background: var(--warning-color);
            color: white;
        }

        .message.info {
            background: #2196f3;
            color: white;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .loading-spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--dark-green);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .filter-controls {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
            flex-shrink: 0;
        }

        .delete-non-favorites-container {
            padding: 8px 12px;
            margin-bottom: 8px;
            background: rgba(244, 67, 54, 0.08);
            border: 1px solid rgba(244, 67, 54, 0.2);
            border-radius: var(--radius-md);
        }

        .delete-non-favorites-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            padding: 8px 12px;
            background: transparent;
            border: 1px solid #f44336;
            border-radius: 4px;
            color: #f44336;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .delete-non-favorites-btn:hover {
            background: #f44336;
            color: white;
        }

        body.dark-mode .delete-non-favorites-container {
            background: rgba(244, 67, 54, 0.12);
            border-color: rgba(244, 67, 54, 0.3);
        }

        body.dark-mode .delete-non-favorites-btn {
            color: #ef5350;
            border-color: #ef5350;
        }

        body.dark-mode .delete-non-favorites-btn:hover {
            background: #ef5350;
            color: white;
        }
        
        .filter-btn {
            padding: 6px 12px;
            border: 1px solid var(--border-color);
            background: var(--button-bg);
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
            color: var(--text-color);
        }
        
        .filter-btn:hover {
            background: var(--button-hover);
        }

        .filter-btn.active {
            background: var(--dark-green);
            color: white;
            border-color: var(--dark-green);
        }

        /* ===== Route Manager Section (Multi-route support) ===== */
        .route-manager-container {
            margin-bottom: 0;
        }

        .route-manager-section {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            padding: 12px;
            border: 1px solid var(--border-color);
            transition: padding 0.2s ease;
        }

        .route-manager-section.collapsed {
            padding: 6px 10px;
        }

        .route-manager-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            margin-bottom: 10px;
        }

        .route-manager-section.collapsed .route-manager-header {
            margin-bottom: 0;
        }

        .route-manager-section.collapsed .route-manager-title {
            font-size: 12px;
        }

        .route-manager-section.collapsed .route-manager-title i:first-child {
            font-size: 12px;
        }

        .route-manager-header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .route-manager-section.collapsed .route-manager-header-actions {
            gap: 6px;
        }

        .route-manager-summary {
            font-size: 12px;
            color: var(--text-secondary);
            display: none;
        }

        .route-manager-section.collapsed .route-manager-summary {
            display: inline;
            font-size: 11px;
            flex: 1;
            text-align: left;
            margin-left: 8px;
        }

        .route-manager-chevron {
            font-size: 12px;
            color: var(--text-secondary);
            transition: transform 0.2s ease;
        }

        .route-manager-chevron.rotated {
            transform: rotate(180deg);
        }

        .route-manager-section.collapsed .route-list,
        .route-manager-section.collapsed .route-combined-stats {
            display: none;
        }

        .route-count-badge {
            background: var(--primary-green);
            color: white;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 4px;
        }

        .route-manager-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .route-manager-title i:first-child {
            font-size: 14px;
            color: var(--primary-green);
        }

        .route-add-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            background: var(--primary-green);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s ease, transform 0.1s ease;
        }

        .route-add-btn:hover {
            background: var(--dark-green);
            transform: scale(1.05);
        }

        .route-manager-section.collapsed .route-add-btn {
            width: 22px;
            height: 22px;
            font-size: 12px;
        }

        .route-manager-section.collapsed .route-count-badge {
            font-size: 9px;
            padding: 1px 5px;
        }

        /* GPX Export Route Options */
        .gpx-export-route-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 8px;
        }

        .gpx-export-route-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .gpx-export-route-option:hover {
            background: var(--card-bg);
        }

        .gpx-export-route-option input[type="checkbox"] {
            margin: 0;
        }

        .gpx-export-route-option .route-color-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .gpx-export-route-option .route-name {
            flex: 1;
            font-size: 13px;
        }

        .gpx-export-route-option .route-distance {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .gpx-export-mode-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 8px;
        }

        /* Sticker Route Selection */
        .sticker-route-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 8px;
        }

        .sticker-route-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .sticker-route-option:hover {
            background: var(--card-bg);
        }

        .sticker-route-option input[type="radio"] {
            margin: 0;
        }

        .sticker-route-option .route-color-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .sticker-route-option .route-name {
            flex: 1;
            font-size: 13px;
        }

        .sticker-route-option .route-stats {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .u-radio-label {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .u-text-muted {
            color: var(--text-secondary);
        }

        .u-text-sm {
            font-size: 12px;
        }

        .route-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .route-card {
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 10px 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .route-card:hover {
            background: var(--hover-bg);
        }

        .route-card.active {
            background: rgba(76, 175, 80, 0.1);
            border-color: var(--primary-green);
        }

        body.dark-mode .route-card.active {
            background: rgba(76, 175, 80, 0.15);
        }

        .route-card-main {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .route-color-indicator {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            flex-shrink: 0;
        }

        .route-drag-handle {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            cursor: grab;
            padding: 0 2px;
            margin-left: -4px;
            opacity: 0.5;
            transition: opacity 0.2s ease, color 0.2s ease;
        }

        .route-drag-handle:hover {
            opacity: 1;
            color: var(--text-secondary);
        }

        .route-drag-handle:active {
            cursor: grabbing;
        }

        /* SortableJS drag states */
        .route-card.sortable-ghost {
            opacity: 0.4;
            background: var(--primary-color);
            border: 1px dashed var(--primary-color);
        }

        .route-card.sortable-chosen {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            cursor: grabbing;
        }

        .route-card.sortable-drag {
            opacity: 1;
            background: var(--bg-color);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        }

        .route-name {
            flex: 1;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: text;
        }

        .route-name:hover {
            text-decoration: underline;
            text-decoration-style: dotted;
        }

        .route-name-input {
            flex: 1;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-color);
            background: var(--input-bg);
            border: 1px solid var(--primary);
            border-radius: var(--radius-sm);
            padding: 2px 6px;
            min-width: 0;
            outline: none;
        }

        .route-name-input:focus {
            box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
        }

        .route-card-actions {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
        }

        .route-poi-visibility-btn,
        .route-visibility-btn,
        .route-settings-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 12px;
            transition: background 0.2s ease, color 0.2s ease;
        }

        .route-poi-visibility-btn:hover,
        .route-visibility-btn:hover,
        .route-settings-btn:hover {
            background: rgba(0, 0, 0, 0.1);
            color: var(--text-color);
        }

        body.dark-mode .route-poi-visibility-btn:hover,
        body.dark-mode .route-visibility-btn:hover,
        body.dark-mode .route-settings-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .route-poi-visibility-btn {
            color: var(--text-muted);
        }

        .route-poi-visibility-btn.showing-pois {
            color: var(--text-color);
        }

        .route-visibility-btn.hidden-route {
            color: var(--text-muted);
        }

        .route-card-stats {
            display: flex;
            gap: 12px;
            margin-top: 6px;
            padding-left: 20px;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .route-expand-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            color: var(--text-tertiary);
            cursor: pointer;
            font-size: 10px;
            margin-left: auto;
            padding: 0;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .route-expand-btn:hover {
            color: var(--text-color);
        }

        .route-card.expanded .route-expand-btn i {
            transform: rotate(180deg);
        }

        .route-card-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease;
        }

        .route-card.expanded .route-card-details {
            max-height: 200px;
        }

        .route-detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px 16px;
            padding: 8px 0 2px 20px;
            font-size: 11px;
        }

        .route-detail-stat {
            display: flex;
            justify-content: space-between;
            color: var(--text-secondary);
        }

        .route-detail-stat .detail-label {
            color: var(--text-tertiary);
        }

        .route-detail-stat .detail-value {
            font-weight: 500;
            color: var(--text-secondary);
        }

        .route-elevation {
            display: flex;
            align-items: center;
            gap: 2px;
        }

        .route-elevation i {
            font-size: 10px;
        }

        /* Route Search Selection Checkbox */
        .route-search-checkbox {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
            cursor: pointer;
            position: relative;
            width: 18px;
            height: 18px;
        }

        .route-search-checkbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            width: 0;
            height: 0;
        }

        .route-search-checkmark {
            position: absolute;
            width: 16px;
            height: 16px;
            background: var(--bg-color);
            border: 2px solid var(--border-color);
            border-radius: 3px;
            transition: all 0.15s ease;
        }

        .route-search-checkbox:hover .route-search-checkmark {
            border-color: var(--primary-green);
        }

        .route-search-checkbox input:checked ~ .route-search-checkmark {
            background: var(--primary-green);
            border-color: var(--primary-green);
        }

        .route-search-checkmark::after {
            content: '';
            position: absolute;
            display: none;
            left: 4px;
            top: 1px;
            width: 4px;
            height: 8px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .route-search-checkbox input:checked ~ .route-search-checkmark::after {
            display: block;
        }

        /* Dark mode checkbox */
        body.dark-mode .route-search-checkmark {
            background: var(--card-bg);
        }

        body.dark-mode .route-search-checkbox input:checked ~ .route-search-checkmark {
            background: var(--primary-green);
        }

        .route-combined-stats {
            display: flex;
            gap: 8px;
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px solid var(--border-color);
            font-size: 12px;
            color: var(--text-secondary);
        }

        .combined-label {
            font-weight: 500;
        }

        .combined-distance {
            color: var(--text-color);
            font-weight: 600;
        }

        .combined-elevation {
            display: flex;
            align-items: center;
            gap: 2px;
            color: var(--text-secondary);
        }

        .combined-elevation i {
            font-size: 10px;
        }

        /* Route Search Indicator */
        .route-search-indicator {
            margin: 8px 0;
            padding: 0 2px;
            cursor: help;
        }

        .route-search-indicator-line {
            display: flex;
            height: 4px;
            border-radius: 2px;
            overflow: hidden;
            background: var(--border-color);
        }

        .route-search-indicator-segment {
            flex: 1;
            min-width: 20px;
            transition: opacity 0.2s ease;
        }

        .route-search-indicator:hover .route-search-indicator-segment {
            opacity: 0.8;
        }

        /* Route Settings Modal Styles */
        .route-color-picker {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        .route-color-option {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-md);
            border: 2px solid transparent;
            cursor: pointer;
            transition: transform 0.1s ease, border-color 0.2s ease;
        }

        .route-color-option:hover {
            transform: scale(1.1);
        }

        .route-color-option.selected {
            border-color: var(--text-color);
            box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--text-secondary);
        }

        .route-stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .route-stat-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .route-stat-label {
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .route-stat-value {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-color);
        }

        /* Route Compare Button */
        .route-compare-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-left: 6px;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 12px;
            transition: background 0.2s ease, color 0.2s ease;
            vertical-align: middle;
        }

        .route-compare-btn:hover {
            background: rgba(0, 0, 0, 0.1);
            color: var(--primary-color);
        }

        body.dark-mode .route-compare-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Route Comparison Modal Styles */
        .route-comparison-section-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-color);
            margin: 0 0 16px 0;
        }

        .route-comparison-section-title i {
            color: var(--primary-color);
        }

        .route-comparison-chart-section {
            margin-bottom: 24px;
        }

        .route-comparison-chart-container {
            height: 300px;
            background: var(--card-bg);
            border-radius: var(--radius-md);
            padding: 16px;
            border: 1px solid var(--border-color);
        }

        .route-comparison-chart-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 12px;
            padding: 12px;
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
        }

        .route-comparison-legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .route-comparison-legend-color {
            width: 16px;
            height: 4px;
            border-radius: 2px;
        }

        .route-comparison-legend-name {
            font-size: 13px;
            color: var(--text-color);
        }

        .route-comparison-table-section {
            margin-bottom: 16px;
        }

        .route-comparison-table-wrapper {
            overflow-x: auto;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
        }

        .route-comparison-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .route-comparison-table th,
        .route-comparison-table td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .route-comparison-table th {
            background: var(--bg-secondary);
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .route-comparison-table td {
            background: var(--card-bg);
            color: var(--text-color);
        }

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

        .route-comparison-table tr:hover td {
            background: var(--bg-secondary);
        }

        .route-comparison-color {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 3px;
            margin-right: 8px;
            vertical-align: middle;
        }

        /* ===== Replace Route Toggle ===== */
        .replace-route-toggle {
            position: relative;
            display: inline-block;
            width: 36px;
            height: 20px;
            flex-shrink: 0;
        }

        .replace-route-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }

        .replace-route-toggle-slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background-color: #ccc;
            border-radius: 20px;
            transition: background-color 0.2s;
        }

        .replace-route-toggle-slider::before {
            content: '';
            position: absolute;
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            border-radius: 50%;
            transition: transform 0.2s;
        }

        .replace-route-toggle input:checked + .replace-route-toggle-slider {
            background-color: #4caf50;
        }

        .replace-route-toggle input:checked + .replace-route-toggle-slider::before {
            transform: translateX(16px);
        }

        /* ===== Sidebar Tab Navigation ===== */
        .sidebar-tab-bar {
            display: flex;
            gap: 4px;
            padding: 8px;
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            margin-bottom: 16px;
        }

        .sidebar-tab {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 16px;
            background: transparent;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            position: relative;
            transition: all 0.2s ease;
        }

        .sidebar-tab:hover:not(.active) {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text-color);
        }

        body.dark-mode .sidebar-tab:hover:not(.active) {
            background: rgba(255, 255, 255, 0.05);
        }

        .sidebar-tab.active {
            background: var(--primary-green);
            color: white;
            box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
        }

        body.dark-mode .sidebar-tab.active {
            background: var(--primary-green);
            box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
        }

        /* Disabled state for sidebar tabs */
        .sidebar-tab:disabled,
        .sidebar-tab.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
            color: var(--text-muted);
        }

        .sidebar-tab:disabled:hover,
        .sidebar-tab.disabled:hover {
            background: var(--button-bg);
            transform: none;
        }

        body.dark-mode .sidebar-tab:disabled,
        body.dark-mode .sidebar-tab.disabled {
            opacity: 0.4;
        }

        /* Notification badge for List tab showing POI count */
        .sidebar-tab[data-tab="list"][data-count]:not([data-count="0"])::after {
            content: attr(data-count);
            position: absolute;
            top: 4px;
            right: 8px;
            background: #ff5722;
            color: white;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 10px;
            min-width: 18px;
            text-align: center;
            line-height: 1.2;
        }

        /* Hide badge when tab is active (green background makes it redundant) */
        .sidebar-tab.active[data-tab="list"]::after {
            display: none;
        }

        .sidebar-tab i {
            font-size: 16px;
        }

        .sidebar-tab .tab-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #f44336;
            color: white;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 10px;
            min-width: 20px;
            text-align: center;
        }

        .poi-section-static-header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 0;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .poi-header-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            font-weight: 600;
            color: var(--text-color);
        }

        .poi-header-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .sidebar-tab {
                font-size: 13px;
                padding: 10px 8px;
            }

            .sidebar-tab span:not(.tab-badge) {
                font-size: 12px;
            }
        }

        .undo-notification {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 12px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            display: none;
            z-index: 11000; /* Above footer bar (10002), below modals (50000) */
            animation: slideUp 0.3s;
        }
        
        @keyframes slideUp {
            from {
                transform: translateX(-50%) translateY(100px);
                opacity: 0;
            }
            to {
                transform: translateX(-50%) translateY(0);
                opacity: 1;
            }
        }

        /* Update Available Notification */
        .update-notification {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
            color: white;
            padding: 0;
            z-index: 100000;
            transform: translateY(-100%);
            transition: transform 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .update-notification.visible {
            transform: translateY(0);
        }

        .update-notification-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 10px 16px;
            font-size: 14px;
            font-weight: 500;
        }

        .update-notification-content i {
            font-size: 18px;
        }

        .update-notification-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 6px 14px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: background 0.2s;
        }

        .update-notification-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .update-notification-btn.update-now {
            background: white;
            color: #1976d2;
        }

        .update-notification-btn.update-now:hover {
            background: #f5f5f5;
        }

        .update-notification-btn.update-dismiss {
            padding: 6px 8px;
            margin-left: 4px;
        }

        @media (max-width: 480px) {
            .update-notification-content {
                font-size: 13px;
                gap: 8px;
                padding: 8px 12px;
            }

            .update-notification-content > span {
                flex: 1;
            }
        }

        /* Darkness Warning Icon Pulsing Animation */
        @keyframes darkness-pulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.6;
                transform: scale(1.15);
            }
        }

        #darknessWarningIcon {
            animation: darkness-pulse 2s ease-in-out infinite;
            filter: drop-shadow(0 0 3px rgba(255, 152, 0, 0.5));
        }

        #darknessWarningIcon:hover {
            animation-play-state: paused;
        }

        .undo-btn {
            background: var(--primary-green);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
            font-size: 12px;
        }
        
        .undo-btn:hover {
            background: #45a049;
        }

        /* ========================================================================
           UNIFIED MODAL SYSTEM
           ========================================================================
           A consolidated modal system replacing 4 separate patterns:
           - .modal (standard modals)
           - .poi-stats-modal (stats/diagnostics)
           - .progress-modal-content (progress indicators)
           - Custom modals (reload-confirm, poi-tip, etc.)

           Usage:
           <div class="ps-modal [ps-modal--informative|ps-modal--action]">
               <div class="ps-modal__container [ps-modal--sm|ps-modal--md|ps-modal--lg|ps-modal--xl]">
                   <div class="ps-modal__header">...</div>
                   <div class="ps-modal__body">...</div>
                   <div class="ps-modal__footer">...</div>
               </div>
           </div>
           ======================================================================== */

        /* Base Modal Overlay */
        .ps-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 50000; /* Above footer bar (10002), map controls, and all UI elements */
            align-items: center;
            justify-content: center;
            padding: 20px;
            overflow-y: auto;
        }

        .ps-modal:not(.u-hidden) {
            display: flex;
        }

        /* Modal Container */
        .ps-modal__container {
            background: var(--bg-color);
            border-radius: var(--radius-lg);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            max-height: calc(100vh - 40px);
            display: flex;
            flex-direction: column;
            position: relative;
            width: 100%;
            animation: modalSlideIn 0.2s ease-out;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Size Modifiers */
        .ps-modal__container.ps-modal--sm {
            max-width: 350px;
        }

        .ps-modal__container.ps-modal--md {
            max-width: 500px;
        }

        .ps-modal__container.ps-modal--lg {
            max-width: 650px;
        }

        .ps-modal__container.ps-modal--xl {
            max-width: 850px;
        }

        .ps-modal__container.ps-modal--fullscreen {
            width: calc(100vw - 32px);
            height: calc(100vh - 32px);
            max-width: none;
            max-height: none;
        }

        .ps-modal__container.ps-modal--fullscreen .ps-modal__body {
            flex: 1;
            height: auto;
            overflow-y: auto;
        }

        /* Default size if no modifier specified */
        .ps-modal__container:not(.ps-modal--sm):not(.ps-modal--md):not(.ps-modal--lg):not(.ps-modal--xl):not(.ps-modal--fullscreen) {
            max-width: 500px;
        }

        /* Modal Header */
        .ps-modal__header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 20px;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }

        .ps-modal__title {
            flex: 1;
            font-size: 18px;
            font-weight: 600;
            color: var(--text-color);
            margin: 0;
        }

        .ps-modal__close {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            color: var(--text-secondary);
            transition: color 0.2s;
            flex-shrink: 0;
        }

        .ps-modal__close:hover {
            color: var(--text-color);
        }

        .ps-modal__close svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
        }

        .ps-modal__close i {
            font-size: 18px;
        }

        /* Modal Body */
        .ps-modal__body {
            padding: 20px;
            overflow-y: auto;
            flex: 1 1 auto;
            min-height: 0;
        }

        /* Modal Footer */
        .ps-modal__footer {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            padding: 15px 20px;
            border-top: 1px solid var(--border-color);
            flex-shrink: 0;
        }

        /* Mobile: Full-screen modals */
        @media (max-width: 768px) {
            .ps-modal {
                padding: 0 !important; /* Remove padding around modal */
                align-items: stretch !important;
                justify-content: stretch !important;
            }

            .ps-modal__container,
            .ps-modal__container.ps-modal--sm,
            .ps-modal__container.ps-modal--md,
            .ps-modal__container.ps-modal--lg,
            .ps-modal__container.ps-modal--xl,
            .ps-modal__container.ps-modal--fullscreen {
                width: 100% !important;
                height: 100% !important;
                max-width: 100% !important;
                max-height: 100% !important;
                min-height: 100vh !important;
                border-radius: 0 !important;
                margin: 0 !important;
            }

            .ps-modal__header {
                padding: 15px;
                position: sticky;
                top: 0;
                background: var(--bg-color);
                z-index: 1;
            }

            .ps-modal__title {
                font-size: 16px;
            }

            .ps-modal__body {
                padding: 15px;
                flex: 1;
                overflow-y: auto;
            }

            .ps-modal__footer {
                padding: 12px 15px;
                position: sticky;
                bottom: 0;
                background: var(--bg-color);
                flex-wrap: wrap;
            }

            .ps-modal__footer .ps-btn {
                flex: 1;
                min-width: 100px;
            }
        }

        /* Modal Field (for forms within modals) */
        .ps-modal__field {
            margin-bottom: 15px;
        }

        .ps-modal__field label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: var(--text-secondary);
            font-size: 14px;
        }

        .ps-modal__field input[type="text"],
        .ps-modal__field input[type="number"],
        .ps-modal__field input[type="email"],
        .ps-modal__field input[type="date"],
        .ps-modal__field input[type="time"],
        .ps-modal__field textarea,
        .ps-modal__field select {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
            background: var(--input-bg);
            color: var(--text-color);
            box-sizing: border-box;
        }

        .ps-modal__field input:focus,
        .ps-modal__field textarea:focus,
        .ps-modal__field select:focus {
            outline: none;
            border-color: var(--dark-green);
        }

        /* Modal Address Section (Add POI modal) */
        .modal-address-section {
            margin-top: 10px;
            padding: 8px 10px;
            background: var(--card-bg);
            border-radius: 4px;
            border: 1px solid var(--border-color);
        }

        .modal-address-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .modal-address-row i {
            color: var(--text-tertiary);
            flex-shrink: 0;
            margin-top: 2px;
        }

        .modal-address-content {
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex: 1;
            min-width: 0;
        }

        .modal-address-text {
            word-break: break-word;
        }

        .modal-address-details {
            font-size: 11px;
            color: var(--text-tertiary);
            display: none;
        }

        .modal-address-copy-btn {
            background: transparent;
            border: none;
            color: var(--text-tertiary);
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 3px;
            flex-shrink: 0;
            transition: color 0.15s, background-color 0.15s;
        }

        .modal-address-copy-btn:hover {
            color: var(--primary-green);
            background: var(--button-hover);
        }

        .modal-address-copy-btn i {
            font-size: 12px;
            margin: 0;
            color: inherit;
        }

        /* ========================================================================
           REUSABLE MODAL INPUT COMPONENTS
           ========================================================================
           Shared components for modal forms:
           - .input-with-toggle: Input field with unit toggle buttons
           - .unit-toggle-buttons/.unit-toggle-btn: km/mi style toggle buttons
           - .preview-info-box: Info/preview box with icon
           ======================================================================== */

        /* Input with toggle layout */
        .input-with-toggle {
            display: flex;
            gap: 12px;
            align-items: stretch;
        }

        .input-with-toggle input {
            flex: 1;
            min-width: 0;
        }

        /* Unit toggle buttons (km/mi, etc.) */
        .unit-toggle-buttons {
            display: flex;
            gap: 0;
        }

        .unit-toggle-btn {
            padding: 10px 16px;
            background: var(--button-bg);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .unit-toggle-btn:first-child {
            border-radius: var(--radius-md) 0 0 6px;
        }

        .unit-toggle-btn:last-child {
            border-radius: 0 6px 6px 0;
            border-left: none;
        }

        .unit-toggle-btn:hover {
            background: var(--button-hover);
        }

        .unit-toggle-btn.active {
            background: var(--dark-green);
            border-color: var(--dark-green);
            color: white;
        }

        /* Preview/info box */
        .preview-info-box {
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 12px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }

        .preview-info-box__icon {
            font-size: 20px;
            line-height: 1;
            flex-shrink: 0;
            color: var(--text-secondary);
        }

        .preview-info-box__text {
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.5;
            flex: 1;
        }

        .preview-info-box.has-data {
            background: rgba(46, 125, 50, 0.05);
            border-color: rgba(46, 125, 50, 0.2);
        }

        .preview-info-box.has-data .preview-info-box__icon {
            color: var(--dark-green);
        }

        .preview-info-box.has-data .preview-info-box__text {
            color: var(--text-color);
            font-weight: 500;
        }

        /* Mobile responsive for input-with-toggle */
        @media (max-width: 480px) {
            .input-with-toggle {
                flex-direction: column;
                gap: 10px;
            }

            .unit-toggle-buttons {
                width: 100%;
            }

            .unit-toggle-btn {
                flex: 1;
            }

            .unit-toggle-btn:first-child {
                border-radius: var(--radius-md) 0 0 6px;
            }

            .unit-toggle-btn:last-child {
                border-radius: 0 6px 6px 0;
                border-left: none;
            }
        }

        /* ========================================================================
           TYPE SELECTOR (Add Manual POI Modal)
           ========================================================================
           Displays color-coded button options for POI types (INFO, Alert, Danger, Event Sticker).
           IMPORTANT: Alert is ORANGE, not blue!
           ======================================================================== */

        .type-selector {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .type-option {
            flex: 1;
            min-width: 100px;
            padding: 10px;
            border: 2px solid var(--border-color);
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            font-weight: 500;
            background: var(--button-bg);
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .type-option:hover {
            border-color: var(--text-tertiary);
            transform: translateY(-1px);
        }

        .type-option:active {
            transform: translateY(0);
        }

        /* INFO Type (Blue) */
        .type-option.info {
            background: #e3f2fd;
            border-color: #2196F3;
            color: var(--blue-primary);
        }

        .type-option.info.selected {
            border-width: 3px;
            background: #bbdefb;
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
        }

        /* Alert Type (Orange - CHANGED FROM BLUE) */
        .type-option.alert {
            background: #fff3e0;
            border-color: var(--warning-color);
            color: #f57c00;
        }

        .type-option.alert.selected {
            border-width: 3px;
            background: #ffe0b2;
            box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
        }

        /* Danger Type (Red) */
        .type-option.danger {
            background: #ffebee;
            border-color: #f44336;
            color: #c62828;
        }

        .type-option.danger.selected {
            border-width: 3px;
            background: #ffcdd2;
            box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2);
        }

        /* Event Sticker Type (Purple) */
        .type-option.event-sticker {
            background: #f3e5f5;
            border-color: #9c27b0;
            color: #6a1b9a;
        }

        .type-option.event-sticker.selected {
            border-width: 3px;
            background: #e1bee7;
            box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.2);
        }

        /* Dark Mode Type Selector Styles */
        body.dark-mode .type-option {
            background: var(--card-bg);
        }

        body.dark-mode .type-option.info {
            background: #1a3a4a;
            border-color: #64b5f6;
            color: #64b5f6;
        }

        body.dark-mode .type-option.info.selected {
            background: #1e4a60;
            box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.3);
        }

        body.dark-mode .type-option.alert {
            background: #3a2a1a;
            border-color: #ffb74d;
            color: #ffb74d;
        }

        body.dark-mode .type-option.alert.selected {
            background: #4a3a2a;
            box-shadow: 0 0 0 3px rgba(255, 183, 77, 0.3);
        }

        body.dark-mode .type-option.danger {
            background: #3a1a1a;
            border-color: #ef5350;
            color: #ef5350;
        }

        body.dark-mode .type-option.danger.selected {
            background: #4a2a2a;
            box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.3);
        }

        body.dark-mode .type-option.event-sticker {
            background: #2a1a3a;
            border-color: #ba68c8;
            color: #ba68c8;
        }

        body.dark-mode .type-option.event-sticker.selected {
            background: #3a2a4a;
            box-shadow: 0 0 0 3px rgba(186, 104, 200, 0.3);
        }

        /* System Dark Mode Preference - Match body.dark-mode styling */
        @media (prefers-color-scheme: dark) {
            .type-option {
                background: var(--card-bg);
            }

            .type-option.info {
                background: #1a3a4a;
                border-color: #64b5f6;
                color: #64b5f6;
            }

            .type-option.info.selected {
                background: #1e4a60;
                box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.3);
            }

            .type-option.alert {
                background: #3a2a1a;
                border-color: #ffb74d;
                color: #ffb74d;
            }

            .type-option.alert.selected {
                background: #4a3a2a;
                box-shadow: 0 0 0 3px rgba(255, 183, 77, 0.3);
            }

            .type-option.danger {
                background: #3a1a1a;
                border-color: #ef5350;
                color: #ef5350;
            }

            .type-option.danger.selected {
                background: #4a2a2a;
                box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.3);
            }

            .type-option.event-sticker {
                background: #2a1a3a;
                border-color: #ba68c8;
                color: #ba68c8;
            }

            .type-option.event-sticker.selected {
                background: #3a2a4a;
                box-shadow: 0 0 0 3px rgba(186, 104, 200, 0.3);
            }
        }

        /* Mobile Responsive - 2x2 grid with compact buttons */
        @media (max-width: 768px) {
            .type-selector {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 6px;
            }

            .type-option {
                flex: none;
                width: auto;
                min-width: unset;
                padding: 6px 4px;
                font-size: 11px;
                gap: 1px;
                border-width: 1.5px;
            }

            .type-option i {
                font-size: 14px;
            }

            .type-option.selected {
                border-width: 2px;
            }
        }

        /* ========================================================================
           PROGRESS MODAL COMPONENTS (POI Search & Query Progress)
           ========================================================================
           Styles for action modals with loading spinners and progress bars.
           Used by: #poiSearchModal, #queryPoiProgressModal
           ======================================================================== */

        /* Progress Modal Container Padding */
        #poiSearchModal .ps-modal__container,
        #queryPoiProgressModal .ps-modal__container {
            padding: 32px 24px;
        }

        .progress-spinner {
            width: 100px;
            height: 100px;
            margin: 0 auto 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* Bicycle wheel spinning animation */
        .progress-spinner svg {
            animation: spin 2s linear infinite;
        }

        /* Size variants for bicycle spinner */
        .progress-spinner--sm {
            width: 60px;
            height: 60px;
            margin: 0 auto 12px;
        }

        .progress-spinner--lg {
            width: 140px;
            height: 140px;
            margin: 0 auto 24px;
        }

        /* Text below spinner */
        .progress-text {
            margin-top: 12px;
            color: var(--text-secondary);
            font-size: 14px;
            text-align: center;
        }

        .progress-spinner--sm .progress-text {
            font-size: 12px;
            margin-top: 8px;
        }

        /* Simple spinner container */
        .simple-spinner-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 20px auto;
        }

        .spinner-text {
            color: var(--text-secondary);
            font-size: 14px;
            text-align: center;
        }

        /* Spinner size variants */
        .spinner-border-sm {
            width: 1.5rem;
            height: 1.5rem;
        }

        .spinner-border-lg {
            width: 3rem;
            height: 3rem;
        }

        /* Completion checkmark */
        .spinner-checkmark {
            font-size: 48px;
            color: var(--success-color);
            animation: checkmark-pop 0.3s ease-out;
        }

        @keyframes checkmark-pop {
            0% { transform: scale(0); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        #bicycleWheelSpinner, #queryBicycleWheelSpinner, #apiTestBicycleWheelSpinner, #roadObstaclesBicycleSpinner {
            width: 100%;
            height: 100%;
            animation: spin 2.5s linear infinite;
            display: block;
        }

        /* When search completes, hide SVG and show checkmark */
        .progress-spinner.complete #bicycleWheelSpinner,
        .progress-spinner.complete #queryBicycleWheelSpinner,
        .progress-spinner.complete #apiTestBicycleWheelSpinner {
            display: none;
        }

        .progress-spinner.complete {
            border: none;
            font-size: 48px;
            color: #4CAF50;
            font-weight: bold;
            animation: none;
        }

        .progress-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 12px;
            line-height: 1.3;
            color: var(--text-color);
            text-align: center;
        }

        .progress-status {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 16px;
            min-height: 20px;
            line-height: 1.4;
            text-align: center;
        }

        .progress-bar-container {
            width: 100%;
            height: 8px;
            background: var(--border-color);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 12px;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--dark-green), var(--primary-green));
            transition: width 0.3s ease;
            border-radius: 4px;
        }

        .progress-details {
            font-size: 13px;
            color: var(--text-tertiary);
            text-align: center;
        }

        .progress-server {
            font-size: 11px;
            color: var(--text-tertiary);
            text-align: center;
            margin-top: 8px;
            opacity: 0.7;
            min-height: 16px;
        }

        .progress-server .server-success {
            color: var(--primary-green);
        }

        .progress-server .server-retry {
            color: var(--warning-color);
        }

        .progress-server .server-fail {
            color: #f44336;
        }

        .progress-log {
            font-size: 10px;
            color: var(--text-secondary);
            text-align: center;
            margin-top: 10px;
            padding: 6px 12px;
            background: var(--card-bg);
            border-radius: 4px;
            font-family: monospace;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Dark Mode for Progress Components */
        body.dark-mode .progress-spinner {
            border-color: rgba(255, 255, 255, 0.1);
        }

        @media (prefers-color-scheme: dark) {
            .progress-spinner {
                border-color: rgba(255, 255, 255, 0.1);
            }
        }

        /* ========================================================================
           API TEST RESULTS
           ======================================================================== */

        .api-test-results {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .api-test-result {
            padding: 12px;
            background: var(--card-bg);
            border-radius: 6px;
            border-left: 3px solid;
        }

        .api-test-result__header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .api-test-result__header i {
            font-size: 16px;
        }

        .api-test-result__service {
            flex: 1;
            font-size: 14px;
        }

        .api-test-result__time {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .api-test-result__message {
            font-size: 13px;
            color: var(--text-secondary);
            margin-left: 24px;
        }

        /* ========================================================================
           UNIFIED BUTTON SYSTEM
           ========================================================================
           Replaces 4 separate button families:
           - .modal-btn-*
           - .distance-markers-btn-*
           - .reload-modal-btn-*
           - .poi-tip-modal-btn-*
           ======================================================================== */

        .ps-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }

        .ps-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Primary Button - Green for action modals, Blue for informative modals */
        .ps-btn--primary {
            background: var(--dark-green);
            color: white;
            border: none;
        }

        .ps-btn--primary:hover:not(:disabled) {
            background: #1b5e20;
        }

        .ps-btn--primary:active:not(:disabled) {
            background: #0d3d12;
        }

        /* Secondary Button - Neutral */
        .ps-btn--secondary {
            background: var(--button-bg);
            color: var(--text-color);
            border: 1px solid var(--border-color);
        }

        .ps-btn--secondary:hover:not(:disabled) {
            background: var(--button-hover);
        }

        /* Danger Button - Red */
        .ps-btn--danger {
            background: #f44336;
            color: white;
            border: none;
        }

        .ps-btn--danger:hover:not(:disabled) {
            background: #c62828;
        }

        .ps-btn--danger:active:not(:disabled) {
            background: #8b0000;
        }

        /* Compact Button Variant */
        .ps-btn--compact {
            padding: 6px 12px;
            font-size: 12px;
        }

        /* Full Width Button */
        .ps-btn--full {
            width: 100%;
            justify-content: center;
        }

        /* Icon-Only Button */
        .ps-btn--icon {
            width: 32px;
            height: 32px;
            padding: 0;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        /* ========================================================================
           TYPE-SPECIFIC THEMING
           ======================================================================== */

        /* Informative Modal Theme - Blue Color Scheme */
        .ps-modal--informative .ps-modal__header i,
        .ps-modal--informative .ps-modal__title i {
            color: var(--blue-primary);
        }

        .ps-modal--informative .ps-btn--primary {
            background: var(--blue-primary);
        }

        .ps-modal--informative .ps-btn--primary:hover:not(:disabled) {
            background: #1565c0;
        }

        .ps-modal--informative .ps-btn--primary:active:not(:disabled) {
            background: #0d47a1;
        }

        .ps-modal--informative .ps-modal__field input:focus,
        .ps-modal--informative .ps-modal__field textarea:focus,
        .ps-modal--informative .ps-modal__field select:focus {
            border-color: var(--blue-primary);
        }

        .ps-modal--informative a {
            color: var(--blue-primary);
        }

        .ps-modal--informative a:hover {
            color: #1565c0;
        }

        /* Action Modal Theme - Green Color Scheme (default) */
        .ps-modal--action .ps-modal__header i,
        .ps-modal--action .ps-modal__title i {
            color: var(--dark-green);
        }

        /* ========================================================================
           MODAL CONTENT SPECIFIC STYLES
           ========================================================================
           Styles for specific modal content (POI stats, etc.)
           ======================================================================== */

        /* POI Statistics Modal Content */
        .poi-stats-warning {
            background: #fff3e0;
            border-left: 3px solid var(--warning-color);
            padding: 8px 12px;
            border-radius: 4px;
            margin-bottom: 10px;
            color: #e65100;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.4;
        }

        body.dark-mode .poi-stats-warning {
            background: #3a2a1a;
            color: #ffb74d;
        }

        .poi-stats-section {
            margin-bottom: 14px;
        }

        .poi-stats-section:last-child {
            margin-bottom: 0;
        }

        .poi-stats-section-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .poi-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
            gap: 8px;
        }

        .poi-stats-card {
            background: var(--card-bg);
            padding: 8px 10px;
            border-radius: 4px;
            border-left: 2px solid var(--dark-green);
        }

        .poi-stats-card-label {
            font-size: 11px;
            color: var(--text-secondary);
            margin-bottom: 3px;
            line-height: 1.3;
        }

        .poi-stats-card-value {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-color);
            line-height: 1.2;
        }

        .poi-stats-empty {
            text-align: center;
            padding: 20px;
            color: var(--text-secondary);
            font-style: italic;
        }

        /* Route Tabs (used in POI Stats and other modals) */
        .route-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 10px;
            background: var(--card-bg);
            border-radius: 6px;
            border: 1px solid var(--border-color);
        }

        .route-tab {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 500;
            background: var(--modal-bg);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .route-tab:hover {
            background: var(--hover-bg);
            color: var(--text-color);
        }

        .route-tab.active {
            background: var(--dark-green);
            color: white;
            border-color: var(--dark-green);
        }

        .route-tab-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        body.dark-mode .route-tab {
            background: var(--card-bg);
        }

        body.dark-mode .route-tab:hover {
            background: var(--hover-bg);
        }

        body.dark-mode .route-tab.active {
            background: var(--dark-green);
        }

        /* ========================================================================
           ELEVATION CHECK MODAL
           ======================================================================== */

        .elevation-check-status {
            text-align: center;
            padding: 40px 20px;
        }

        .elevation-check-progress {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 14px;
            color: var(--text-secondary);
        }

        .elevation-check-progress .spinning {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .elevation-check-summary h4 {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .elevation-check-summary h4 i {
            color: var(--dark-green);
        }

        .elevation-check-comparison {
            background: var(--bg-secondary);
            border-radius: 8px;
            padding: 12px;
        }

        .elevation-check-variations {
            background: var(--bg-secondary);
            border-radius: 8px;
            padding: 12px;
        }

        .elevation-check-variations h4 {
            color: var(--warning-color);
        }

        .elevation-check-variations h4 i {
            color: var(--warning-color);
        }

        .elevation-check-table-wrapper {
            max-height: 250px;
            overflow-y: auto;
        }

        .elevation-check-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .elevation-check-table th,
        .elevation-check-table td {
            padding: 8px 10px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .elevation-check-table th {
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 11px;
            text-transform: uppercase;
            background: var(--card-bg);
            position: sticky;
            top: 0;
        }

        .elevation-check-table td {
            color: var(--text-color);
        }

        .elevation-check-table .diff-warning {
            color: var(--warning-color);
            font-weight: 600;
        }

        .elevation-check-table .diff-severe {
            color: var(--error-color);
            font-weight: 600;
        }

        .elev-check-map-btn,
        .elev-check-copy-btn {
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 4px 8px;
            cursor: pointer;
            color: var(--text-secondary);
            transition: all 0.2s ease;
        }

        .elev-check-map-btn:hover {
            background: var(--info-color, #2196F3);
            color: white;
            border-color: var(--info-color, #2196F3);
        }

        .elev-check-copy-btn:hover {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .elev-check-map-btn i {
            font-size: 12px;
        }

        .elev-check-copy-btn i {
            font-size: 12px;
        }

        .elev-check-verify-btn {
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 4px 8px;
            cursor: pointer;
            color: var(--text-secondary);
            transition: all 0.2s ease;
            margin-left: 4px;
        }

        .elev-check-verify-btn:hover {
            background: var(--info-color, #2196F3);
            color: white;
            border-color: var(--info-color, #2196F3);
        }

        .elev-check-verify-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .elev-check-verify-btn i {
            font-size: 12px;
        }

        .variation-count {
            font-size: 14px;
            font-weight: normal;
            color: var(--warning-color);
            margin-left: 8px;
        }

        /* Comparison table styling */
        .elevation-comparison-table {
            margin-top: 10px;
        }

        .elevation-comparison-table td:first-child {
            font-weight: 600;
            color: var(--text-secondary);
        }

        .elevation-comparison-table td:not(:first-child) {
            text-align: right;
            font-family: monospace;
            font-size: 14px;
        }

        .elevation-comparison-table th:not(:first-child) {
            text-align: right;
        }

        .elev-diff-cell {
            font-weight: 600;
        }

        .elev-diff-positive {
            color: var(--warning-color);
        }

        .elev-diff-negative {
            color: var(--info-color, #2196F3);
        }

        .elev-diff-neutral {
            color: var(--text-secondary);
        }

        .elevation-check-error {
            text-align: center;
            padding: 40px 20px;
            color: var(--error-color);
        }

        .elevation-check-error i {
            font-size: 32px;
            display: block;
            margin-bottom: 12px;
        }

        /* Quality indicators */
        .quality-excellent {
            color: var(--success-color) !important;
        }

        .quality-good {
            color: var(--dark-green) !important;
        }

        .quality-fair {
            color: var(--warning-color) !important;
        }

        .quality-poor {
            color: var(--error-color) !important;
        }

        .elevation-check-description {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-bottom: 15px;
            padding: 10px 12px;
            background: var(--bg-secondary);
            border-radius: 6px;
            border-left: 3px solid var(--dark-green);
        }

        .elevation-check-chart {
            background: var(--bg-secondary);
            border-radius: 8px;
            padding: 12px;
        }

        .elevation-check-chart-container {
            height: 150px;
            position: relative;
        }

        .elevation-check-chart-container canvas {
            width: 100% !important;
            height: 100% !important;
        }

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

        @media (max-width: 768px) {
            .ps-modal {
                padding: 10px;
            }

            .ps-modal__container {
                max-height: calc(100vh - 20px);
            }

            .ps-modal__container.ps-modal--sm,
            .ps-modal__container.ps-modal--md,
            .ps-modal__container.ps-modal--lg,
            .ps-modal__container.ps-modal--xl {
                max-width: 100%;
            }

            .ps-modal__header {
                padding: 15px;
            }

            .ps-modal__body {
                padding: 15px;
            }

            .ps-modal__footer {
                padding: 12px 15px;
                flex-wrap: wrap;
            }

            .ps-btn {
                flex: 1;
                justify-content: center;
                min-width: 0;
            }
        }

        /* POI Statistics Modal Content - Mobile Responsive */
        @media (max-width: 768px) {
            .poi-stats-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 columns instead of auto-fill for better space usage */
                gap: 6px; /* Tighter gap on mobile */
            }

            .poi-stats-section-title {
                font-size: 11px; /* Smaller section titles on mobile */
            }
        }

        /* ========================================================================
           LEGACY COMPATIBILITY
           ========================================================================
           Keep existing modal classes for backward compatibility during migration.
           These will be removed in Phase 5.
           ======================================================================== */

        /* Third-Party Services Styles */
        .services-section {
            margin-top: 24px;
            padding-top: 20px;
            border-top: 2px solid var(--border-color);
        }

        .services-section h4 {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 12px;
            padding-left: 12px;
            border-left: 4px solid var(--dark-green);
        }

        .services-section.optional h4 {
            border-left-color: var(--blue-primary);
        }

        .services-category {
            margin-bottom: 16px;
        }

        .services-category-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .service-card {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 10px;
            background: var(--card-bg);
            border-radius: var(--radius-md);
            margin-bottom: 6px;
            border: 1px solid var(--border-color);
        }

        .service-icon {
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            stroke: var(--text-color);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            margin-top: 2px;
        }

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

        .service-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 2px;
        }

        .service-name a {
            color: var(--link-color);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .service-name a:hover {
            color: var(--link-hover);
            text-decoration: underline;
        }

        .service-description {
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .services-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 10px 12px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            margin-bottom: 12px;
            transition: all 0.2s ease;
        }

        .services-toggle:hover {
            background: var(--button-hover);
        }

        .services-toggle-icon {
            width: 14px;
            height: 14px;
            stroke: var(--text-color);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform 0.3s ease;
        }

        .services-toggle-icon.expanded {
            transform: rotate(90deg);
        }

        .services-toggle-text {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-color);
        }

        .services-attribution {
            margin-top: 16px;
            padding: 10px 12px;
            background: var(--card-bg);
            border-left: 4px solid var(--blue-primary);
            border-radius: 4px;
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .services-attribution a {
            color: var(--blue-primary);
            text-decoration: none;
        }

        .services-attribution a:hover {
            text-decoration: underline;
        }

        .collapsible-content {
            max-height: none; /* Remove height limit to allow all content to be visible */
            overflow: visible; /* Allow content to flow naturally */
            transition: max-height 0.3s ease;
        }

        .collapsible-content.collapsed {
            max-height: 0;
            overflow: hidden; /* Hide when collapsed */
        }

        .distance-marker-icon {
            background: transparent !important;
            border: none !important;
        }

        /* Distance Marker Editor Popup */
        .distance-marker-popup .leaflet-popup-content-wrapper {
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .distance-marker-popup .leaflet-popup-content {
            margin: 0;
        }

        .distance-marker-editor input {
            background: var(--card-bg);
            color: var(--text-color);
        }

        .distance-marker-editor input:focus {
            outline: none;
            border-color: var(--primary-green);
        }

        body.dark-mode .distance-marker-popup .leaflet-popup-content-wrapper {
            background: var(--card-bg);
            color: var(--text-color);
        }

        body.dark-mode .distance-marker-popup .leaflet-popup-tip {
            background: var(--card-bg);
        }

        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) .distance-marker-popup .leaflet-popup-content-wrapper {
                background: var(--card-bg);
                color: var(--text-color);
            }
            body:not(.light-mode) .distance-marker-popup .leaflet-popup-tip {
                background: var(--card-bg);
            }
        }

        /* ============================================
           Peak and Valley Markers
           ============================================ */

        .peak-marker,
        .valley-marker {
            background: transparent !important;
            border: none !important;
        }

        .peak-marker-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(135deg, #ff6b35, #f7931a);
            color: white;
            padding: 4px 8px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            position: relative;
        }

        .peak-marker-content::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid #f7931a;
        }

        .peak-marker-rank {
            font-size: 10px;
            opacity: 0.9;
        }

        .peak-marker-elevation {
            font-size: 12px;
            font-weight: 700;
        }

        .valley-marker-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(135deg, #2196F3, #1976D2);
            color: white;
            padding: 4px 8px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            position: relative;
        }

        .valley-marker-content::before {
            content: '';
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #2196F3;
        }

        .valley-marker-rank {
            font-size: 10px;
            opacity: 0.9;
        }

        .valley-marker-elevation {
            font-size: 12px;
            font-weight: 700;
        }

        /* Clickable elevation stats in footer */
        .footer-elevation-clickable {
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 4px;
            transition: background-color 0.2s ease;
        }

        .footer-elevation-clickable:hover {
            background-color: rgba(76, 175, 80, 0.15);
        }

        .footer-elevation-clickable.active {
            background-color: rgba(76, 175, 80, 0.25);
        }

        #footerElevationGain.active {
            background-color: rgba(255, 107, 53, 0.25);
        }

        #footerElevationGain:hover {
            background-color: rgba(255, 107, 53, 0.15);
        }

        #footerElevationLoss.active {
            background-color: rgba(33, 150, 243, 0.25);
        }

        #footerElevationLoss:hover {
            background-color: rgba(33, 150, 243, 0.15);
        }

        /* Helper text classes */
        .text-secondary {
            color: var(--text-secondary);
        }

        .text-tertiary {
            color: var(--text-tertiary);
        }

        .text-muted {
            color: var(--text-tertiary);
            font-size: 12px;
        }

        .text-center-muted {
            text-align: center;
            color: var(--text-tertiary);
            padding: 20px;
        }

        /* Leaflet Popup Dark Mode Styles */
        body.dark-mode .leaflet-popup-content-wrapper {
            background-color: #2a2a2a;
            color: #e0e0e0;
        }

        body.dark-mode .leaflet-popup-tip {
            background-color: #2a2a2a;
        }
        
        body.dark-mode .leaflet-popup-content {
            color: #e0e0e0;
        }
        
        body.dark-mode .leaflet-popup-content a {
            color: var(--light-green);
        }
        
        body.dark-mode .leaflet-popup-close-button {
            color: #e0e0e0 !important;
        }
        
        body.dark-mode .leaflet-popup-close-button:hover {
            color: #ffffff !important;
        }

        /* Leaflet Control Styling - Light Mode */
        .leaflet-control-zoom,
        .leaflet-control-layers {
            background: #f8f9fa !important;
            border: 1px solid rgba(0, 0, 0, 0.2) !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
        }

        .leaflet-control-zoom a,
        .leaflet-control-layers-toggle {
            background-color: white !important;
            color: #333 !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        }

        .leaflet-control-zoom a:hover,
        .leaflet-control-layers-toggle:hover {
            background-color: #f0f0f0 !important;
        }

        .leaflet-control-zoom {
            z-index: 1000;
        }

        /* Top-right controls layout */
        /* Scale at top of the map, just to the left of buttons */
        /* Vertical strip: Zoom +/- at top, then map features, then layers */

        .leaflet-control-scale {
            position: absolute !important;
            top: -8px;
            right: 30px;
        }

        .leaflet-control-zoom-level {
            position: absolute !important;
            top: 12px;
            right: 55px;
        }

        /* Mobile: Hide zoom controls, scale, and zoom level display */
        @media (max-width: 768px) {
            .leaflet-control-zoom {
                display: none !important;
            }

            .leaflet-control-scale {
                display: none !important;
            }

            .leaflet-control-zoom-level,
            .zoom-level-container {
                display: none !important;
            }
        }

        /* Zoom buttons - top of vertical strip on right edge */
        .leaflet-top.leaflet-right .leaflet-control-zoom {
            position: absolute !important;
            top: 10px;
            right: 10px;
        }

        /* Layers control - directly under zoom +/- */
        .leaflet-control-layers {
            position: absolute !important;
            top: 75px;
            right: 10px;
        }

        .leaflet-control-layers-expanded {
            min-width: 130px;
        }

        /* Map features - continues vertical strip below layers */
        .leaflet-control-map-features {
            position: absolute !important;
            top: -9px;
            right: -8px;
        }

        /* Scale control styling */
        .leaflet-control-scale {
            background: var(--card-bg, #fff);
            border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 11px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .leaflet-control-scale-line {
            border: none !important;
            background: transparent !important;
            font-size: 11px;
            padding: 0;
            margin: 0;
            line-height: 1.2;
        }

        /* Zoom level display styling */
        .leaflet-control-zoom-level {
            background: var(--card-bg, #fff);
            border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 11px;
            font-weight: 500;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            white-space: nowrap;
        }

        .leaflet-control-layers {
            z-index: 999;
            margin-top: 10px;
        }

        /* Resize layers button to match feature buttons (30x30px) */
        .leaflet-control-layers-toggle {
            width: 30px !important;
            height: 30px !important;
            background-size: 16px 16px !important;
            background-position: center !important;
            background-image: none !important; /* Remove default Leaflet icon */
            position: relative;
        }

        /* Add monochrome SVG icon for layers control */
        .leaflet-control-layers-toggle::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3E%3Cg fill="none" stroke="%23333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="2" y="2" width="12" height="3" rx="0.5"/%3E%3Crect x="2" y="6.5" width="12" height="3" rx="0.5"/%3E%3Crect x="2" y="11" width="12" height="3" rx="0.5"/%3E%3C/g%3E%3C/svg%3E');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* Dark mode icon - light colored */
        body.dark-mode .leaflet-control-layers-toggle::before {
            background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3E%3Cg fill="none" stroke="%23e0e0e0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="2" y="2" width="12" height="3" rx="0.5"/%3E%3Crect x="2" y="6.5" width="12" height="3" rx="0.5"/%3E%3Crect x="2" y="11" width="12" height="3" rx="0.5"/%3E%3C/g%3E%3C/svg%3E');
        }

        /* Skip Animation Button */
        #skipAnimationBtn:hover {
            background: #1565c0 !important;
        }

        #skipAnimationBtn:active {
            background: #0d47a1 !important;
        }

        /* Leaflet Control Styling - Dark Mode */
        /* Container backgrounds for all control types */
        body.dark-mode .leaflet-control-zoom,
        body.dark-mode .leaflet-control-layers,
        body.dark-mode .leaflet-bar,
        body.dark-mode .leaflet-control-attribution,
        body.dark-mode .leaflet-control-scale {
            background: #2a2a2a !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
        }

        /* Zoom button styling - covers all anchor elements in control bars */
        body.dark-mode .leaflet-control-zoom a,
        body.dark-mode .leaflet-bar a,
        body.dark-mode .leaflet-control-layers-toggle {
            background-color: #333 !important;
            background-image: none !important;
            color: #e0e0e0 !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        /* Ensure zoom symbols (+/-) are visible - light grey to match other controls */
        body.dark-mode .leaflet-control-zoom-in,
        body.dark-mode .leaflet-control-zoom-out {
            color: #e0e0e0 !important;
            text-shadow: none !important;
        }

        /* Override Leaflet's background-image for zoom buttons */
        body.dark-mode .leaflet-control-zoom-in::before,
        body.dark-mode .leaflet-control-zoom-out::before {
            filter: invert(1) !important;
        }

        /* Hover states for all controls */
        body.dark-mode .leaflet-control-zoom a:hover,
        body.dark-mode .leaflet-bar a:hover,
        body.dark-mode .leaflet-control-layers-toggle:hover {
            background-color: #404040 !important;
            background-image: none !important;
        }

        /* Active/pressed states */
        body.dark-mode .leaflet-control-zoom a:active,
        body.dark-mode .leaflet-bar a:active,
        body.dark-mode .leaflet-control-layers-toggle:active {
            background-color: #4a4a4a !important;
            background-image: none !important;
        }

        /* Focus states for keyboard navigation */
        body.dark-mode .leaflet-control-zoom a:focus,
        body.dark-mode .leaflet-bar a:focus,
        body.dark-mode .leaflet-control-layers-toggle:focus {
            outline: 2px solid rgba(255, 255, 255, 0.3) !important;
            outline-offset: -2px !important;
        }

        /* Disabled state */
        body.dark-mode .leaflet-disabled,
        body.dark-mode .leaflet-control-zoom-in.leaflet-disabled,
        body.dark-mode .leaflet-control-zoom-out.leaflet-disabled {
            background-color: #2a2a2a !important;
            color: #666 !important;
            cursor: default !important;
            opacity: 0.4 !important;
        }

        /* Layers control expanded state */
        body.dark-mode .leaflet-control-layers-expanded {
            background: #2a2a2a !important;
            color: #e0e0e0 !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
        }

        /* Layer selection labels and inputs */
        body.dark-mode .leaflet-control-layers-base label,
        body.dark-mode .leaflet-control-layers-overlays label {
            color: #e0e0e0 !important;
        }

        /* Layer selection radio/checkbox inputs */
        body.dark-mode .leaflet-control-layers-selector {
            filter: brightness(1.2) !important;
        }

        /* Separator between layer groups */
        body.dark-mode .leaflet-control-layers-separator {
            border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        /* Attribution control */
        body.dark-mode .leaflet-control-attribution,
        body.dark-mode .leaflet-control-attribution a {
            background: #2a2a2a !important;
            color: #999 !important;
        }

        body.dark-mode .leaflet-control-attribution a:hover {
            color: #e0e0e0 !important;
        }

        /* Dark mode for scale and zoom level controls */
        body.dark-mode .leaflet-control-scale {
            background: #2a2a2a;
            border-color: rgba(255, 255, 255, 0.2);
        }

        body.dark-mode .leaflet-control-scale-line {
            background: transparent !important;
            border: none !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .leaflet-control-zoom-level {
            background: #2a2a2a;
            color: #e0e0e0;
            border-color: rgba(255, 255, 255, 0.2);
        }

        /* Custom Map Feature Controls */
        .leaflet-control-map-features {
            background: white;
            border: 2px solid rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
            margin-top: 10px;
        }

        .map-feature-btn {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: background 0.2s ease;
            padding: 0;
        }

        .map-feature-btn:last-child {
            border-bottom: none;
        }

        .map-feature-btn:hover {
            background: #f4f4f4;
        }

        .map-feature-btn:active {
            background: #e8e8e8;
        }

        .map-feature-btn.hidden {
            display: none;
        }

        .map-feature-btn .bi {
            font-size: 16px;
            color: #333;
        }

        .map-feature-btn.inactive .bi {
            opacity: 0.4;
        }

        /* Dark mode styling for map feature controls */
        body.dark-mode .leaflet-control-map-features {
            background: #2a2a2a !important;
            border: 2px solid rgba(255, 255, 255, 0.2) !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
        }

        body.dark-mode .map-feature-btn {
            background: #333 !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        body.dark-mode .map-feature-btn:hover {
            background: #404040 !important;
        }

        body.dark-mode .map-feature-btn:active {
            background: #4a4a4a !important;
        }

        body.dark-mode .map-feature-btn .bi {
            color: #e0e0e0 !important;
        }

        body.dark-mode .map-feature-btn.inactive .bi {
            opacity: 0.4 !important;
        }

        /* Query POIs mode button active state */
        .map-feature-btn.query-active {
            background: rgba(255, 152, 0, 0.3) !important;
            border-left: 4px solid var(--warning-color) !important;
        }

        /* Live tracking button active state */
        .map-feature-btn#liveTrackingBtn.active {
            background: rgba(var(--tracking-color-rgb), 0.25) !important;
            border-left: 4px solid var(--tracking-color) !important;
        }

        .map-feature-btn#liveTrackingBtn.active .bi {
            color: var(--tracking-color) !important;
            opacity: 1;
        }

        /* Query mode disabled state */
        .map-feature-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* Query POI markers (orange) */
        .query-poi-marker .poi-marker-circle {
            background-color: var(--warning-color) !important;
            opacity: 0.85;
        }

        .query-poi-marker:hover .poi-marker-circle {
            background-color: #f57c00 !important;
        }

        /* Query results section in sidebar */
        .query-results-section {
            background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
            border: 2px solid var(--warning-color);
            border-radius: var(--radius-lg);
            margin-bottom: 16px;
            padding: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            min-height: 0;
        }

        /* POI Clustering Styles */
        .marker-cluster-small {
            background-color: rgba(110, 204, 57, 0.6);
        }

        .marker-cluster-small div {
            background-color: rgba(110, 204, 57, 0.8);
        }

        .marker-cluster-medium {
            background-color: rgba(255, 196, 0, 0.6);
        }

        .marker-cluster-medium div {
            background-color: rgba(255, 196, 0, 0.8);
        }

        .marker-cluster-large {
            background-color: rgba(253, 156, 115, 0.6);
        }

        .marker-cluster-large div {
            background-color: rgba(253, 156, 115, 0.8);
        }

        .marker-cluster {
            background-clip: padding-box;
            border-radius: 20px;
        }

        .marker-cluster div {
            width: 30px;
            height: 30px;
            margin-left: 5px;
            margin-top: 5px;
            text-align: center;
            border-radius: 15px;
            font-weight: 700;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .marker-cluster span {
            line-height: 30px;
            font-size: 13px;
        }

        /* Dark mode support for clusters */
        body.dark-mode .marker-cluster-small {
            background-color: rgba(76, 175, 80, 0.6);
        }

        body.dark-mode .marker-cluster-small div {
            background-color: rgba(76, 175, 80, 0.8);
        }

        body.dark-mode .marker-cluster-medium {
            background-color: rgba(255, 152, 0, 0.6);
        }

        body.dark-mode .marker-cluster-medium div {
            background-color: rgba(255, 152, 0, 0.8);
        }

        body.dark-mode .marker-cluster-large {
            background-color: rgba(244, 67, 54, 0.6);
        }

        body.dark-mode .marker-cluster-large div {
            background-color: rgba(244, 67, 54, 0.8);
        }

        body.dark-mode .query-results-section {
            background: linear-gradient(135deg, #2a2420 0%, #1e1e1e 100%);
            border-color: var(--warning-color);
        }

        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) .query-results-section {
                background: linear-gradient(135deg, #2a2420 0%, #1e1e1e 100%);
                border-color: var(--warning-color);
            }
        }

        /* Hide the normal sidebar sections when query results are displayed */
        .sidebar-content:has(.query-results-section) .sidebar-sections-container {
            display: none;
        }

        .query-results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .query-results-header h3 {
            margin: 0;
            font-size: 1.1rem;
            color: var(--warning-color);
        }

        .query-location-info {
            font-size: 0.85rem;
            opacity: 0.8;
            margin-bottom: 12px;
            font-family: monospace;
        }

        .query-radius-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-left: 8px;
            padding: 3px 8px;
            font-size: 0.75rem;
            font-family: inherit;
            background: var(--warning-color);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.2s ease;
            vertical-align: middle;
        }

        .query-radius-btn:hover {
            background: #e67e00;
            transform: scale(1.05);
        }

        .query-radius-btn i {
            font-size: 0.7rem;
        }

        .query-actions {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }

        #queryResultsList {
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }

        .query-action-btn {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid var(--primary-green);
            background: transparent;
            color: var(--primary-green);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .query-action-btn:hover {
            background: var(--primary-green);
            color: white;
            transform: translateY(-1px);
        }

        .query-action-btn i {
            font-size: 1rem;
        }

        /* Dark mode support for query action buttons */
        body.dark-mode .query-action-btn {
            border-color: var(--light-green);
            color: var(--light-green);
        }

        body.dark-mode .query-action-btn:hover {
            background: var(--light-green);
            color: #1a1a1a;
        }

        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) .query-action-btn {
                border-color: var(--light-green);
                color: var(--light-green);
            }

            body:not(.light-mode) .query-action-btn:hover {
                background: var(--light-green);
                color: #1a1a1a;
            }
        }

        .query-category-group {
            margin-bottom: 12px;
        }

        .query-category-group h4 {
            font-size: 0.95rem;
            margin: 8px 0 6px 0;
            color: var(--text-color);
        }

        .query-poi-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            background: var(--surface);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            margin-bottom: 4px;
            transition: all 0.2s;
            cursor: pointer;
        }

        .query-poi-item:hover {
            background: var(--surface-alt);
            border-color: var(--warning-color);
            box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
        }

        .query-poi-item label {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            cursor: pointer;
        }

        .query-poi-name {
            font-weight: 500;
        }

        .query-poi-details {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            opacity: 0.8;
        }

        .add-query-poi-btn {
            padding: 4px 8px;
            border: 1px solid var(--link-color);
            background: transparent;
            color: var(--link-color);
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.2s;
        }

        .add-query-poi-btn:hover {
            background: var(--link-color);
            color: white;
        }

        /* Query result marker popup styles */
        .query-result-popup-container .leaflet-popup-content-wrapper {
            border: 2px solid var(--warning-color);
            border-radius: var(--radius-lg);
        }

        .query-result-popup {
            min-width: 180px;
            padding: 4px 0;
        }

        .query-result-popup-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .query-result-popup-icon {
            font-size: 1.2rem;
        }

        .query-result-popup-header strong {
            font-size: 1rem;
            color: var(--text-color);
        }

        .query-result-popup-category {
            font-size: 0.85rem;
            color: #888;
            margin-bottom: 4px;
        }

        .query-result-popup-distance {
            font-size: 0.85rem;
            color: var(--warning-color);
            margin-bottom: 10px;
        }

        .query-result-add-btn {
            width: 100%;
            padding: 8px 12px;
            border: 2px solid var(--primary-green);
            background: var(--primary-green);
            color: white;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .query-result-add-btn:hover:not(:disabled) {
            background: #43a047;
            border-color: #43a047;
            transform: translateY(-1px);
        }

        .query-result-add-btn:disabled,
        .query-result-add-btn.added {
            background: #e0e0e0;
            border-color: #e0e0e0;
            color: #888;
            cursor: not-allowed;
        }

        body.dark-mode .query-result-add-btn:disabled,
        body.dark-mode .query-result-add-btn.added {
            background: #444;
            border-color: #444;
            color: #888;
        }

        .query-result-popup-links {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border-color);
            font-size: 0.8rem;
            color: #666;
        }

        .query-result-popup-links a {
            color: var(--link-color);
            text-decoration: none;
        }

        .query-result-popup-links a:hover {
            text-decoration: underline;
        }

        /* Extended popup for OSM details */
        .query-result-popup-extended {
            min-width: 260px;
        }

        .query-result-popup-extended .query-result-popup-header {
            flex-wrap: wrap;
        }

        /* OSM Type Badge */
        .osm-type-badge {
            display: inline-block;
            padding: 1px 6px;
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            border-radius: 3px;
            letter-spacing: 0.5px;
        }

        .osm-type-node {
            background: #e3f2fd;
            color: #1565c0;
            border: 1px solid #90caf9;
        }

        .osm-type-way {
            background: #f3e5f5;
            color: #7b1fa2;
            border: 1px solid #ce93d8;
        }

        .osm-type-relation {
            background: #fff3e0;
            color: #e65100;
            border: 1px solid #ffcc80;
        }

        body.dark-mode .osm-type-node {
            background: #1a3a4a;
            color: #64b5f6;
            border-color: #1565c0;
        }

        body.dark-mode .osm-type-way {
            background: #2a1a3a;
            color: #ba68c8;
            border-color: #7b1fa2;
        }

        body.dark-mode .osm-type-relation {
            background: #3a2a1a;
            color: #ffb74d;
            border-color: #e65100;
        }

        /* OSM Details Section */
        .query-result-popup-details,
        .closest-poi-popup-details {
            margin: 8px 0;
            padding: 8px;
            background: var(--card-bg-alt, #f8f9fa);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-color);
            font-size: 0.8rem;
            line-height: 1.5;
        }

        body.dark-mode .query-result-popup-details,
        body.dark-mode .closest-poi-popup-details {
            background: rgba(255, 255, 255, 0.05);
        }

        .osm-detail {
            display: block;
            padding: 2px 0;
            border-bottom: 1px dotted var(--border-color);
        }

        .osm-detail:last-child {
            border-bottom: none;
        }

        .osm-detail-label {
            font-weight: 600;
            color: var(--text-secondary);
            margin-right: 4px;
        }

        .osm-detail a {
            color: var(--link-color);
            text-decoration: none;
        }

        .osm-detail a:hover {
            text-decoration: underline;
        }

        /* Closest POI Popup Styles */
        .closest-poi-popup-container .leaflet-popup-content-wrapper {
            border: 2px solid var(--primary-green);
            border-radius: var(--radius-lg);
        }

        .closest-poi-popup {
            min-width: 200px;
            padding: 4px 0;
        }

        .closest-poi-popup-extended {
            min-width: 260px;
        }

        .closest-poi-popup-header {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 4px;
        }

        .closest-poi-popup-header strong {
            font-size: 1rem;
            color: var(--text-color);
        }

        .closest-poi-popup-category {
            font-size: 0.85rem;
            color: #888;
            margin-bottom: 4px;
        }

        .closest-poi-popup-distance {
            font-size: 0.9rem;
            color: var(--primary-green);
            font-weight: 500;
            margin-bottom: 4px;
        }

        .closest-poi-popup-distance i {
            margin-right: 2px;
        }

        .closest-poi-popup-address {
            font-size: 0.75rem;
            color: #888;
            margin-bottom: 4px;
        }

        .closest-poi-popup-actions {
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px solid var(--border-color);
        }

        .closest-poi-add-btn {
            width: 100%;
            background: var(--primary-green);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .closest-poi-add-btn:hover {
            background: #43a047;
            transform: translateY(-1px);
        }

        .closest-poi-popup-links {
            margin-top: 8px;
            font-size: 0.75rem;
            color: #666;
        }

        .closest-poi-popup-links a {
            color: var(--link-color);
            text-decoration: none;
        }

        .closest-poi-popup-links a:hover {
            text-decoration: underline;
        }

        @media (prefers-color-scheme: dark) {
            body:not(.light-mode) .osm-type-node {
                background: #1a3a4a;
                color: #64b5f6;
                border-color: #1565c0;
            }

            body:not(.light-mode) .osm-type-way {
                background: #2a1a3a;
                color: #ba68c8;
                border-color: #7b1fa2;
            }

            body:not(.light-mode) .osm-type-relation {
                background: #3a2a1a;
                color: #ffb74d;
                border-color: #e65100;
            }

            body:not(.light-mode) .query-result-popup-details,
            body:not(.light-mode) .closest-poi-popup-details {
                background: rgba(255, 255, 255, 0.05);
            }

            body:not(.light-mode) .query-result-add-btn:disabled,
            body:not(.light-mode) .query-result-add-btn.added {
                background: #444;
                border-color: #444;
                color: #888;
            }
        }

        /* Dark mode via browser preference */
        @media (prefers-color-scheme: dark) {
            .elevation-crosshair-tooltip {
                background: rgba(255, 255, 255, 0.95);
                color: #1a1a1a;
            }

            .file-upload:hover {
                background: linear-gradient(to bottom, rgba(102, 187, 106, 0.08), rgba(102, 187, 106, 0.15));
                transform: translateY(-2px);
                box-shadow: 0 6px 20px var(--shadow);
            }

            .poi-group-toggle-all {
                background: var(--button-bg);
            }

            .poi-group-toggle-all:hover {
                background: var(--button-hover);
            }

            .poi-group-header:hover {
                background: rgba(76, 175, 80, 0.15);
            }

            .quick-action-btn:hover {
                background: rgba(76, 175, 80, 0.15);
                border-color: var(--light-green);
            }

            .quick-action-btn-reset {
                background: var(--blue-primary);
                border-color: var(--blue-primary);
            }

            .quick-action-btn-reset:hover {
                background: #1565c0;
                border-color: #1565c0;
            }

            .preset-btn:hover {
                background: #1e3a1e;
                border-color: var(--primary-green);
                color: var(--light-green);
                transform: translateY(-1px);
            }

            .preset-btn:active {
                background: #2a4a2a;
                transform: translateY(0);
            }

            .stat-value {
                color: var(--light-green);
            }

            .poi-distance {
                color: #90caf9;
            }

            .progress-spinner {
                border-color: rgba(255, 255, 255, 0.1);
                border-top-color: var(--light-green);
            }

            .leaflet-popup-content-wrapper {
                background-color: #2a2a2a;
                color: var(--text-color);
            }

            body.dark-mode .leaflet-popup-content-wrapper {
                background-color: #2a2a2a;
            }

            .leaflet-popup-tip {
                background-color: #2a2a2a;
            }

            body.dark-mode .leaflet-popup-tip {
                background-color: #2a2a2a;
            }

            .leaflet-popup-content {
                color: var(--text-color);
            }

            .leaflet-popup-content a {
                color: var(--light-green);
            }

            .leaflet-popup-close-button {
                color: #e0e0e0 !important;
            }

            .leaflet-popup-close-button:hover {
                color: #ffffff !important;
            }

            /* Leaflet Map Controls Dark Mode via Browser Preference */
            .leaflet-control-zoom,
            .leaflet-control-layers,
            .leaflet-bar,
            .leaflet-control-attribution,
            .leaflet-control-scale {
                background: #2a2a2a !important;
                border: 1px solid rgba(255, 255, 255, 0.2) !important;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
            }

            /* Zoom button styling - covers all anchor elements in control bars */
            .leaflet-control-zoom a,
            .leaflet-bar a,
            .leaflet-control-layers-toggle {
                background-color: #333 !important;
                background-image: none !important;
                color: #e0e0e0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            }

            /* Ensure zoom symbols (+/-) are visible - light grey to match other controls */
            .leaflet-control-zoom-in,
            .leaflet-control-zoom-out {
                color: #e0e0e0 !important;
                text-shadow: none !important;
            }

            /* Override Leaflet's background-image for zoom buttons */
            .leaflet-control-zoom-in::before,
            .leaflet-control-zoom-out::before {
                filter: invert(1) !important;
            }

            /* Hover states for all controls */
            .leaflet-control-zoom a:hover,
            .leaflet-bar a:hover,
            .leaflet-control-layers-toggle:hover {
                background-color: #404040 !important;
                background-image: none !important;
            }

            /* Active/pressed states */
            .leaflet-control-zoom a:active,
            .leaflet-bar a:active,
            .leaflet-control-layers-toggle:active {
                background-color: #4a4a4a !important;
                background-image: none !important;
            }

            /* Focus states for keyboard navigation */
            .leaflet-control-zoom a:focus,
            .leaflet-bar a:focus,
            .leaflet-control-layers-toggle:focus {
                outline: 2px solid rgba(255, 255, 255, 0.3) !important;
                outline-offset: -2px !important;
            }

            /* Disabled state */
            .leaflet-disabled,
            .leaflet-control-zoom-in.leaflet-disabled,
            .leaflet-control-zoom-out.leaflet-disabled {
                background-color: #2a2a2a !important;
                color: #666 !important;
                cursor: default !important;
                opacity: 0.4 !important;
            }

            /* Layers control expanded state */
            .leaflet-control-layers-expanded {
                background: #2a2a2a !important;
                color: #e0e0e0 !important;
                border: 1px solid rgba(255, 255, 255, 0.2) !important;
            }

            /* Layer selection labels and inputs */
            .leaflet-control-layers-base label,
            .leaflet-control-layers-overlays label {
                color: #e0e0e0 !important;
            }

            /* Layer selection radio/checkbox inputs */
            .leaflet-control-layers-selector {
                filter: brightness(1.2) !important;
            }

            /* Separator between layer groups */
            .leaflet-control-layers-separator {
                border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
            }

            /* Attribution control */
            .leaflet-control-attribution,
            .leaflet-control-attribution a {
                background: #2a2a2a !important;
                color: #999 !important;
            }

            .leaflet-control-attribution a:hover {
                color: #e0e0e0 !important;
            }

            /* Scale control */
            .leaflet-control-scale-line {
                background: rgba(42, 42, 42, 0.8) !important;
                border: 2px solid rgba(255, 255, 255, 0.3) !important;
                color: #e0e0e0 !important;
            }

            /* Position scale control above mobile footer */
            .leaflet-control-scale {
                bottom: 75px !important; /* Above 60px mobile footer + 15px margin */
            }

            /* Custom Map Feature Controls */
            .leaflet-control-map-features {
                background: #2a2a2a !important;
                border: 2px solid rgba(255, 255, 255, 0.2) !important;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
            }

            .map-feature-btn {
                background: #333 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            }

            .map-feature-btn:hover {
                background: #404040 !important;
            }

            .map-feature-btn:active {
                background: #4a4a4a !important;
            }

            .map-feature-btn .bi {
                color: #e0e0e0 !important;
            }

            .map-feature-btn.inactive .bi {
                opacity: 0.4 !important;
            }

            /* Layer selector icon - light colored for dark mode */
            .leaflet-control-layers-toggle::before {
                background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3E%3Cg fill="none" stroke="%23e0e0e0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="2" y="2" width="12" height="3" rx="0.5"/%3E%3Crect x="2" y="6.5" width="12" height="3" rx="0.5"/%3E%3Crect x="2" y="11" width="12" height="3" rx="0.5"/%3E%3C/g%3E%3C/svg%3E');
            }
        }

        /* Mobile Responsive Styles */
        @media (max-width: 768px) {
            body {
                padding-top: 70px; /* Adjust for smaller mobile header */
            }

            .container {
                padding: 8px;
            }

            header {
                padding: 12px 15px;
            }

            /* Mobile responsive for header actions */
            .header-actions {
                top: 12px;
            }

            .landing-language-btn {
                padding: 0.4rem 0.8rem;
            }

            #landingLanguageText {
                display: none; /* Hide text on mobile, show flag only */
            }

            /* Mobile language dropdown adjustments */
            .language-dropdown {
                min-width: 160px;
                right: -10px;
            }

            .language-dropdown-item {
                padding: 0.6rem 0.8rem;
                font-size: 13px;
            }

            .language-item-flag {
                font-size: 18px;
            }

            h1 {
                font-size: 22px;
                margin-bottom: 6px;
            }

            .tagline {
                font-size: 13px;
            }

            .upload-section-wrapper {
                padding: 20px 16px;
                border-radius: 10px;
            }

            /* Stack horizontal options vertically on mobile */
            .options-horizontal-container {
                flex-direction: column;
                gap: 16px;
            }

            .option-card {
                padding: 16px;
                margin-bottom: 16px;
            }

            .option-card-title {
                font-size: 18px;
            }

            .option-card-title .emoji {
                font-size: 24px;
            }

            .option-divider {
                margin: 16px 0;
            }

            .feature-list {
                grid-template-columns: 1fr;
                gap: 8px;
                margin-top: 12px;
                padding-top: 12px;
            }

            /* Landing help link on mobile */
            .landing-help-link {
                padding: 12px 20px;
                font-size: 14px;
                gap: 10px;
            }

            .landing-help-link svg:last-child {
                display: none; /* Hide arrow icon on mobile */
            }
            
            .main-content {
                margin-top: 15px;
                margin-left: 20px; /* Standard mobile margin */
                margin-right: 20px;
                width: calc(100vw - 40px); /* Full width minus margins */
            }

            /* Mobile: sidebar collapses to full overlay */
            .main-content.sidebar-collapsed {
                margin-left: 20px;
                margin-right: 20px;
                width: calc(100vw - 40px);
            }

            .sidebar {
                padding: 15px;
                max-height: none;
                height: auto;
                order: 2;
                width: 100%;
                position: relative; /* Reset to relative on mobile */
                top: auto; /* Reset positioning */
                left: auto;
            }

            .sidebar.collapsed {
                display: none;
            }

            .map-section {
                order: 1;
            }
            
            .map-container {
                height: 350px;
                padding: 8px;
            }
            
            .section {
                margin-bottom: 20px;
            }
            
            .section-title {
                font-size: 16px;
                margin-bottom: 10px;
            }
            
            .file-upload {
                padding: 16px;
            }

            .upload-icon {
                font-size: 32px;
                margin-bottom: 6px;
            }
            
            .poi-categories {
                max-height: 200px;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }
            
            .stat-card {
                padding: 10px;
            }
            
            .stat-value {
                font-size: 20px;
            }
            
            .stat-label {
                font-size: 11px;
            }
            
            .poi-list {
                max-height: 300px;
            }

            /* Override for expanded POI section - allow flex to control height */
            .poi-section-overlay:not(.minimized) .poi-list {
                max-height: none;
            }
            
            .poi-item {
                padding: 10px;
                flex-direction: column;
                gap: 8px;
            }
            
            .poi-actions {
                align-self: flex-end;
            }
            
            .btn {
                padding: 8px 16px;
                font-size: 13px;
                width: 100%;
                justify-content: center;
            }
            
            .search-controls {
                gap: 8px;
            }
            
            .filter-controls {
                flex-wrap: wrap;
                gap: 8px;
            }
            
            .filter-btn {
                flex: 1;
                min-width: calc(33.333% - 6px);
            }
            
            .message {
                top: 10px;
                right: 10px;
                left: 10px;
                padding: 12px 15px;
                font-size: 13px;
            }
            
            .undo-notification {
                bottom: 10px;
                left: 10px;
                right: 10px;
                transform: none;
                font-size: 13px;
            }
            
            @keyframes slideUp {
                from {
                    transform: translateY(100px);
                    opacity: 0;
                }
                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            .elevation-content.expanded {
                max-height: 350px; /* Reduced by 30% from 500px to 350px for mobile */
            }

            /* Remove padding from elevation chart on mobile for more chart space */
            .elevation-content {
                padding: 5px 0 5px 0 !important; /* No horizontal padding on mobile */
            }

            .elevation-container:not(.collapsed) {
                padding: 0;
                left: 0 !important; /* Full width on mobile regardless of sidebar state */
                right: 0 !important;
            }

            /* Remove padding from chart wrapper on mobile */
            .elevation-chart-wrapper {
                padding: 5px 0 !important; /* Minimal vertical, no horizontal */
                border-radius: 0;
                border-left: none;
                border-right: none;
            }

            /* Elevation chart canvas container - maximize space */
            .elevation-chart-container,
            #elevationChartContainer {
                padding: 0 !important;
                margin: 0 !important;
            }

            .preset-buttons {
                grid-template-columns: repeat(2, 1fr);
                gap: 5px;
            }
            
            .preset-btn {
                padding: 6px 8px;
                font-size: 11px;
            }

            /* Hide slider arrow buttons on mobile - sliders work fine without them */
            .slider-arrow {
                display: none !important;
            }

            .slider-controls {
                gap: 8px;
            }

            /* Mobile-friendly toggle icon - maintain landscape orientation */
            .elevation-toggle-icon {
                width: 50px; /* Slightly smaller but maintain landscape orientation */
                height: 22px;
                top: -22px; /* Adjust for new height */
                touch-action: manipulation;
                -webkit-tap-highlight-color: transparent;
            }

            /* Mobile: Elevation panel bottom-right corner widget adjustments */
            .elevation-container.collapsed {
                width: 160px;
                bottom: 8px;
                right: -4px;
            }

            .elevation-mini-view {
                padding: 6px;  /* Reduce padding on mobile to prevent overflow */
            }

            .elevation-mini-chart-container {
                width: 148px;  /* Adjusted for smaller padding: 160 - (6×2) = 148 */
                height: 60px;
                padding: 4px;  /* Reduce internal padding on mobile */
            }

            .elevation-container.collapsed .elevation-toggle-icon {
                right: 55px;     /* Recenter for smaller width (160/2 - 25px) */
            }

            /* Mobile: Map sync button adjustments */
            .elevation-map-sync-btn {
                width: 45px;     /* Slightly smaller on mobile */
                height: 22px;
                top: -22px;
                right: 80px;     /* Adjust for mobile layout */
            }

            /* Search button row mobile adjustments - use shorter text */
            .search-button-row .btn-text-full {
                display: none;
            }

            .search-button-row .btn-text-short {
                display: inline;
            }

            /* All buttons equal width on mobile: 33.33% each */
            .search-button-row .quick-action-btn {
                flex: 0 1 33.33%;
                font-size: 10px;
            }

            .search-button-row .btn-primary {
                flex: 0 1 33.33%;
                font-size: 12px;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 20px;
            }

            .tagline {
                font-size: 13px;
            }

            .map-container {
                height: 300px;
            }

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

            .upload-section-wrapper {
                padding: 20px 16px;
            }

            .landing-intro {
                margin-bottom: 16px;
                padding-bottom: 16px;
            }

            .landing-intro h2 {
                font-size: 18px;
                margin-bottom: 8px;
            }

            .landing-intro p {
                font-size: 12px;
            }

            .option-card {
                padding: 16px;
            }

            .option-card-title {
                font-size: 16px;
            }

            .file-upload {
                padding: 20px 16px;
            }

            .upload-icon {
                font-size: 36px;
                margin-bottom: 10px;
            }

            .show-more-options-btn {
                padding: 10px 16px;
                margin: 20px 0;
                font-size: 13px;
            }

            .option-divider {
                margin: 20px 0;
            }

            .feature-list {
                margin-top: 24px;
                margin-bottom: 32px;
                padding-top: 24px;
            }
        }

        /* ============================================
           Application Menu Bar
           ============================================ */

        .app-menu-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 36px;
            background: var(--header-gradient);
            display: none;
            align-items: center;
            z-index: 10002;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .app-menu-bar.active {
            display: flex;
        }

        /* Hamburger button for mobile */
        .app-menu-hamburger {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            padding: 8px 12px;
            cursor: pointer;
        }

        .app-menu-hamburger:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .app-menu-hamburger.active {
            background: rgba(255, 255, 255, 0.15);
        }

        /* Menu items container */
        .app-menu-items {
            display: flex;
            align-items: center;
            height: 100%;
        }

        /* Individual menu item (dropdown container) */
        .app-menu-item {
            position: relative;
            height: 100%;
        }

        /* Menu trigger button */
        .app-menu-trigger {
            height: 100%;
            padding: 0 14px;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.9);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s ease;
            font-family: inherit;
        }

        .app-menu-trigger:hover {
            background: rgba(255, 255, 255, 0.12);
            color: white;
        }

        .app-menu-trigger:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.15);
        }

        /* Dropdown panel */
        .app-menu-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 260px;
            background: var(--sidebar-bg);
            border: 1px solid var(--border-color);
            border-radius: 0 0 var(--radius-md) var(--radius-md);
            box-shadow: 0 4px 16px var(--shadow);
            display: none;
            z-index: 10003;
            max-height: calc(100vh - 100px);
            overflow-y: auto;
        }

        .app-menu-dropdown.active {
            display: block;
        }

        /* Menu option styling - matches footer tools pattern */
        .app-menu-option {
            padding: 10px 14px;
            cursor: pointer;
            color: var(--text-color);
            font-size: 14px;
            transition: background 0.15s ease;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .app-menu-option:last-child {
            border-bottom: none;
        }

        .app-menu-option:hover {
            background: rgba(46, 125, 50, 0.1);
        }

        body.dark-mode .app-menu-option:hover {
            background: rgba(76, 175, 80, 0.15);
        }

        /* Disabled menu option */
        .app-menu-option.app-menu-option-disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .app-menu-option.app-menu-option-disabled:hover {
            background: transparent;
        }

        /* Primary/highlighted option */
        .app-menu-option-primary {
            background: rgba(46, 125, 50, 0.08);
        }

        .app-menu-option-primary:hover {
            background: rgba(46, 125, 50, 0.18);
        }

        body.dark-mode .app-menu-option-primary {
            background: rgba(76, 175, 80, 0.12);
        }

        body.dark-mode .app-menu-option-primary:hover {
            background: rgba(76, 175, 80, 0.22);
        }

        /* Help mode active state */
        .app-menu-option.help-mode-active {
            background: rgba(255, 152, 0, 0.15);
            border-left: 3px solid #ff9800;
        }

        .app-menu-option.help-mode-active:hover {
            background: rgba(255, 152, 0, 0.25);
        }

        .app-menu-option.help-mode-active > i:first-child {
            color: #ff9800;
            opacity: 1;
        }

        body.dark-mode .app-menu-option.help-mode-active {
            background: rgba(255, 152, 0, 0.2);
        }

        body.dark-mode .app-menu-option.help-mode-active:hover {
            background: rgba(255, 152, 0, 0.3);
        }

        /* Option icon */
        .app-menu-option > i:first-child {
            width: 18px;
            font-size: 15px;
            opacity: 0.75;
            flex-shrink: 0;
            text-align: center;
        }

        .app-menu-option:hover > i:first-child {
            opacity: 1;
        }

        /* Option text container */
        .app-menu-option > div {
            flex: 1;
            min-width: 0;
        }

        /* Option title */
        .app-menu-option-title {
            font-weight: 600;
            font-size: 13px;
            display: block;
            margin-bottom: 1px;
        }

        /* Option description */
        .app-menu-option-desc {
            font-size: 11px;
            color: var(--text-tertiary);
            display: block;
        }

        /* Checkmark for active states */
        .app-menu-checkmark {
            display: none;
            color: var(--primary-green);
            font-size: 14px;
            margin-left: auto;
        }

        /* Divider between sections */
        .app-menu-divider {
            height: 1px;
            background: var(--border-color);
            margin: 6px 0;
        }

        /* Version display at bottom of About menu */
        .app-menu-version {
            padding: 10px 14px;
            font-size: 12px;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: 10px;
            border-top: 1px solid var(--border-color);
        }

        .app-menu-version i {
            opacity: 0.6;
        }

        /* Submenu styling */
        .app-menu-submenu-parent {
            position: relative;
        }

        .app-menu-submenu-arrow {
            font-size: 12px;
            opacity: 0.5;
            transition: transform 0.2s ease;
            margin-left: auto;
        }

        .app-menu-submenu-arrow.rotated {
            transform: rotate(90deg);
        }

        .app-menu-submenu {
            display: none;
            background: var(--surface-alt);
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: max-height 0.2s ease, opacity 0.2s ease;
        }

        .app-menu-submenu.expanded {
            display: block;
            max-height: 300px;
            opacity: 1;
        }

        .app-menu-submenu-option {
            padding: 9px 14px 9px 44px;
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-color);
            transition: background 0.15s ease;
        }

        .app-menu-submenu-option:hover {
            background: rgba(46, 125, 50, 0.12);
        }

        body.dark-mode .app-menu-submenu-option:hover {
            background: rgba(76, 175, 80, 0.18);
        }

        .app-menu-submenu-option i:first-child {
            font-size: 14px;
            opacity: 0.7;
        }

        .app-menu-submenu-option i:last-child {
            margin-left: auto;
            color: var(--primary-green);
            display: none;
        }

        /* Stats dropdown specific styling */
        .app-menu-dropdown-stats {
            min-width: 220px;
        }

        .app-menu-stats-item {
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-color);
            border-bottom: 1px solid var(--border-color);
        }

        .app-menu-stats-item:last-child {
            border-bottom: none;
        }

        .app-menu-stats-item.clickable {
            cursor: pointer;
            transition: background 0.15s ease;
        }

        .app-menu-stats-item.clickable:hover {
            background: rgba(46, 125, 50, 0.1);
        }

        body.dark-mode .app-menu-stats-item.clickable:hover {
            background: rgba(76, 175, 80, 0.15);
        }

        .app-menu-stats-item > i:first-child {
            font-size: 14px;
            opacity: 0.7;
            width: 18px;
            text-align: center;
        }

        .app-menu-stats-label {
            flex: 1;
            font-size: 13px;
        }

        .app-menu-stats-value {
            font-weight: 600;
            font-size: 13px;
            color: var(--primary-green);
        }

        /* Routes section in Route menu */
        .app-menu-routes-section {
            max-height: 200px;
            overflow-y: auto;
        }

        .app-menu-section-header {
            padding: 6px 14px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--text-tertiary);
            letter-spacing: 0.5px;
        }

        .app-menu-route-item {
            padding: 8px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: background 0.15s ease;
            border-bottom: 1px solid var(--border-color);
        }

        .app-menu-route-item:last-child {
            border-bottom: none;
        }

        .app-menu-route-item:hover {
            background: rgba(46, 125, 50, 0.1);
        }

        body.dark-mode .app-menu-route-item:hover {
            background: rgba(76, 175, 80, 0.15);
        }

        .app-menu-route-item.active {
            background: rgba(46, 125, 50, 0.15);
        }

        body.dark-mode .app-menu-route-item.active {
            background: rgba(76, 175, 80, 0.2);
        }

        .app-menu-route-color {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            flex-shrink: 0;
        }

        .app-menu-route-name {
            flex: 1;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .app-menu-route-distance {
            font-size: 11px;
            color: var(--text-tertiary);
        }

        .app-menu-route-active-indicator {
            color: var(--primary-green);
            font-size: 12px;
        }

        /* Brand logo on the right side */
        .app-menu-brand {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
            padding: 0 12px;
            height: 36px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.9);
            transition: color 0.15s ease;
        }

        .app-menu-brand:hover {
            color: #fff;
        }

        .app-menu-brand-logo {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }

        .app-menu-brand-text {
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
        }

        /* Hide brand on smaller screens */
        @media (max-width: 900px) {
            .app-menu-brand-text {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .app-menu-brand {
                display: none;
            }
        }

        /* Adjust map view and menu bar position when menu bar is active */
        /* Menu bar sits below the header (45px) */
        .app-menu-bar {
            top: 45px;
        }

        /* Map view needs extra space for menu bar (45px header + 36px menu bar) */
        body.app-menu-active .map-view-container {
            top: 81px !important;
        }

        /* When header is hidden, menu bar moves to top */
        body.header-hidden .app-menu-bar {
            top: 0;
        }

        /* When header is hidden but menu bar visible, map starts at 36px */
        body.header-hidden.app-menu-active .map-view-container {
            top: 36px !important;
        }

        /* Mobile responsive styles */
        @media (max-width: 768px) {
            .app-menu-hamburger {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .app-menu-items {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                height: auto;
                flex-direction: column;
                align-items: stretch;
                background: var(--header-gradient);
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
                z-index: 10003;
                max-height: calc(100vh - 81px);
                overflow-y: auto;
            }

            .app-menu-items.mobile-expanded {
                display: flex;
            }

            .app-menu-item {
                height: auto;
                flex-shrink: 0;
            }

            .app-menu-trigger {
                width: 100%;
                height: auto;
                padding: 14px 16px;
                text-align: left;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                font-size: 15px;
            }

            .app-menu-dropdown {
                position: static;
                border-radius: 0;
                box-shadow: none;
                border: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                background: rgba(0, 0, 0, 0.3);
                padding: 8px 0;
            }

            body.light-mode .app-menu-dropdown {
                background: rgba(255, 255, 255, 0.2);
            }

            .app-menu-dropdown.active {
                display: block;
            }

            /* Hide brand on mobile */
            .app-menu-brand {
                display: none;
            }
        }

        /* Custom scrollbar for menu dropdowns */
        .app-menu-dropdown::-webkit-scrollbar {
            width: 6px;
        }

        .app-menu-dropdown::-webkit-scrollbar-track {
            background: transparent;
        }

        .app-menu-dropdown::-webkit-scrollbar-thumb {
            background: var(--text-secondary);
            border-radius: 3px;
        }

        .app-menu-dropdown::-webkit-scrollbar-thumb:hover {
            background: var(--text-color);
        }

        /* Sticky Footer Statistics Bar */
        .footer-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 38px; /* Reduced from 45px (15% reduction) */
            background: #2A2A2A;
            color: white;
            display: none; /* Hidden by default */
            align-items: center;
            justify-content: space-between;
            padding: 0 13px; /* Reduced from 15px (15% reduction) */
            box-shadow: 0 -2px 10px var(--shadow);
            z-index: 10002; /* Above modal (10001) so footer buttons remain clickable */
            transition: all 0.3s ease;
        }

        .footer-bar.active {
            display: flex;
        }

        /* Info Button with Menu */
        .footer-info-container {
            position: relative;
            margin-right: 13px; /* Reduced from 15px (15% reduction) */
        }

        .footer-info-btn {
            display: flex;
            align-items: center;
            gap: 5px; /* Reduced from 6px (15% reduction) */
            padding: 7px 10px; /* Reduced from 8px 12px (15% reduction) */
            background: var(--blue-primary);
            border: 2px solid var(--blue-primary);
            border-radius: 5px; /* Reduced from 6px (15% reduction) */
            color: white;
            font-size: 12px; /* Reduced from 14px (15% reduction) */
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .footer-info-btn:hover {
            background: var(--blue-primary);
            border-color: black;
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
        }

        .footer-info-btn i {
            font-size: 14px; /* Reduced from 16px (15% reduction) */
        }

        .footer-info-menu {
            position: absolute;
            bottom: 100%;
            left: 0;
            margin-bottom: 8px;
            background: var(--sidebar-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            min-width: 180px;
            display: none;
            z-index: 1000;
        }

        .footer-info-menu.active {
            display: block;
        }

        .footer-info-option {
            padding: 12px 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-color);
            transition: background 0.2s ease;
            font-size: 14px;
        }

        .footer-info-option:first-child {
            border-radius: var(--radius-md) 6px 0 0;
        }

        .footer-info-option:last-child {
            border-radius: 0 0 6px 6px;
        }

        .footer-info-option:hover {
            background: rgba(76, 175, 80, 0.15);
        }

        body.dark-mode .footer-info-option:hover {
            background: rgba(76, 175, 80, 0.15);
        }

        .footer-info-option-icon {
            font-size: 16px;
            color: var(--text-secondary);
        }

        /* Version display in info menu */
        .footer-info-version {
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-secondary);
            font-size: 12px;
            border-top: 1px solid var(--border-color);
            background: rgba(0, 0, 0, 0.02);
            cursor: default;
        }

        body.dark-mode .footer-info-version {
            background: rgba(255, 255, 255, 0.02);
        }

        .footer-info-version .footer-info-option-icon {
            font-size: 14px;
            opacity: 0.7;
        }

        /* Dark mode Info button styles */
        body.dark-mode .footer-info-btn {
            background: #64b5f6;
            color: #1a1a1a;
            border-color: #64b5f6;
        }

        body.dark-mode .footer-info-btn:hover {
            background: #64b5f6;
            color: #1a1a1a;
            border-color: white;
        }

        .footer-stats {
            display: flex;
            align-items: center;
            gap: 21px; /* Reduced from 25px (15% reduction) */
            flex-wrap: wrap;
            flex: 1;
        }

        /* Footer Route Selector */
        .footer-route-selector {
            display: flex;
            align-items: center;
        }

        .footer-route-selector select {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: var(--radius-sm);
            color: white;
            font-size: 11px;
            font-weight: 500;
            padding: 4px 24px 4px 8px;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 6px center;
            min-width: 100px;
            max-width: 150px;
        }

        .footer-route-selector select:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .footer-route-selector select:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .footer-route-selector select option {
            background: var(--bg-color);
            color: var(--text-color);
        }

        .footer-stats-group {
            display: flex;
            align-items: center;
            gap: 2px;
            background: rgba(255, 255, 255, 0.05);
            padding: 2px;
            border-radius: 5px;
        }

        .footer-stat-item {
            display: flex;
            align-items: center;
            gap: 5px; /* Reduced from 6px (15% reduction) */
            font-size: 11px; /* Reduced from 13px (15% reduction) */
            font-weight: 500;
            white-space: nowrap;
            padding: 5px 9px; /* Reduced from 6px 10px (15% reduction) */
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px; /* Reduced from 4px (15% reduction) */
            transition: all 0.2s ease;
        }

        .footer-stat-item.clickable {
            cursor: pointer;
            padding: 7px 12px; /* Reduced from 8px 14px (15% reduction) */
            border: 1px solid var(--dark-green);
            background: rgba(255, 255, 255, 0.15);
            transition: all 0.2s ease;
        }

        .footer-stat-item.clickable:hover {
            background: rgba(46, 125, 50, 0.2);
            border-color: var(--primary-green);
            transform: translateY(-1px);
        }

        .footer-stat-icon {
            font-size: 15px; /* Reduced from 18px (15% reduction) */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .footer-stat-value {
            font-weight: 600;
        }

        .footer-warning {
            color: #ffd700;
            font-size: 16px;
            margin-left: 4px;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* ===== POI Marker Hover Highlight Animation ===== */
        @keyframes poi-marker-pulse {
            0% {
                transform: scale(1);
                filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4)) drop-shadow(0 0 0 var(--marker-color, #ff9800));
            }
            50% {
                transform: scale(1.3);
                filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4)) drop-shadow(0 0 15px var(--marker-color, #ff9800));
            }
            100% {
                transform: scale(1);
                filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4)) drop-shadow(0 0 0 var(--marker-color, #ff9800));
            }
        }

        .poi-marker-highlighted {
            z-index: 1000 !important;
        }

        /* Target the SVG inside the highlighted marker */
        .poi-marker-highlighted > div > svg {
            animation: poi-marker-pulse 1.5s ease-in-out infinite;
            transform-origin: center center;
        }

        /* ===== Temporary Location Marker (Search Location Feature) ===== */
        .temp-location-marker {
            background: transparent;
            border: none;
        }

        .pulsing-marker {
            font-size: 30px;
            text-align: center;
            line-height: 1;
            animation: pulsing-glow 1.5s ease-in-out infinite;
            transform-origin: center center;
        }

        @keyframes pulsing-glow {
            0%, 100% {
                transform: scale(1);
                filter: drop-shadow(0 0 8px var(--warning-color));
            }
            50% {
                transform: scale(1.2);
                filter: drop-shadow(0 0 16px var(--warning-color));
            }
        }

        /* Change the SVG path fill to marker color when highlighted */
        .poi-marker-highlighted > div > svg path {
            fill: var(--marker-color, var(--warning-color)) !important;
        }

        /* POI Marker Delete Animation */
        .poi-marker-deleting {
            animation: poi-marker-delete 0.5s ease-out forwards;
            pointer-events: none;
        }

        .poi-marker-deleting > div > svg path {
            animation: poi-marker-delete-color 0.2s ease-out forwards;
        }

        @keyframes poi-marker-delete {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            40% {
                opacity: 1;
                transform: scale(1.1);
            }
            100% {
                opacity: 0;
                transform: scale(1.8);
            }
        }

        @keyframes poi-marker-delete-color {
            0% {
                fill: inherit;
            }
            100% {
                fill: #f44336 !important;
            }
        }

        .poi-item.active {
            background: rgba(76, 175, 80, 0.2) !important;
            border-left: 4px solid var(--primary-green);
            padding-left: 8px;
        }

        body.dark-mode .poi-item.active {
            background: rgba(76, 175, 80, 0.25) !important;
        }

        .footer-actions {
            display: flex;
            align-items: center;
            gap: 9px; /* Reduced from 10px (15% reduction) */
        }

        .footer-download-container {
            position: relative;
        }

        /* Footer Tools Button */
        .footer-tools-container {
            position: relative;
        }

        .footer-tools-btn {
            display: flex;
            align-items: center;
            gap: 5px; /* Reduced from 6px (15% reduction) */
            padding: 7px 10px; /* Reduced from 8px 12px (15% reduction) */
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid var(--dark-green);
            border-radius: 3px; /* Reduced from 4px (15% reduction) */
            color: white;
            font-size: 11px; /* Reduced from 13px (15% reduction) */
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .footer-tools-btn:hover {
            background: rgba(46, 125, 50, 0.2);
            border-color: var(--primary-green);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
        }

        .footer-tools-btn svg {
            width: 15px; /* Reduced from 18px (15% reduction) */
            height: 15px; /* Reduced from 18px (15% reduction) */
            fill: white;
            margin-right: 5px; /* Reduced from 6px (15% reduction) */
        }

        /* Undo/Redo Buttons - Unified Button Group */
        .footer-undo-redo-container {
            display: flex;
            gap: 0; /* No gap - buttons touch each other */
            align-items: center;
        }

        .footer-undo-redo-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px; /* Reduced from 38px (15% reduction) */
            height: 32px; /* Reduced from 38px (15% reduction) */
            padding: 0;
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid var(--dark-green);
            border-radius: 0; /* Default: no radius, overridden by specific buttons */
            color: white;
            font-size: 15px; /* Icon size reduced from 18px (15% reduction) */
            cursor: pointer;
            transition: all 0.2s ease;
        }

        /* Undo button - left side with rounded left corners */
        #undoBtn {
            border-radius: 4px 0 0 4px;
            border-right: 1px solid rgba(46, 125, 50, 0.5); /* Separator line */
        }

        /* Redo button - right side with rounded right corners */
        #redoBtn {
            border-radius: 0 4px 4px 0;
            border-left: none; /* Remove left border to avoid double border with separator */
        }

        .footer-undo-redo-btn:hover:not(:disabled) {
            background: rgba(46, 125, 50, 0.2);
            border-color: var(--primary-green);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
            z-index: 1; /* Ensure hover state appears on top */
        }

        /* Keep separator visible on undo hover */
        #undoBtn:hover:not(:disabled) {
            border-right-color: rgba(76, 175, 80, 0.6);
        }

        .footer-undo-redo-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(46, 125, 50, 0.3);
        }

        /* Keep separator visible when undo is disabled */
        #undoBtn:disabled {
            border-right-color: rgba(46, 125, 50, 0.3);
        }

        .footer-undo-redo-btn i {
            font-size: 15px; /* Reduced from 18px (15% reduction) */
        }

        /* Language Switcher - Removed (now in Tools menu) */

        .footer-tools-menu {
            position: absolute;
            bottom: 100%;
            right: 0;
            margin-bottom: 8px;
            background: var(--sidebar-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            box-shadow: 0 4px 16px var(--shadow);
            min-width: 240px; /* Wider for better readability */
            max-height: calc(100vh - 120px); /* Limit height on short screens */
            overflow-y: auto;
            display: none;
            z-index: 1000;
        }

        /* Custom scrollbar for tools menu */
        .footer-tools-menu::-webkit-scrollbar {
            width: 6px;
        }

        .footer-tools-menu::-webkit-scrollbar-track {
            background: transparent;
        }

        .footer-tools-menu::-webkit-scrollbar-thumb {
            background: var(--text-secondary);
            border-radius: 3px;
        }

        .footer-tools-menu::-webkit-scrollbar-thumb:hover {
            background: var(--text-color);
        }

        /* Scroll indicator gradient at bottom */
        .footer-tools-menu.can-scroll::after {
            content: '';
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            background: linear-gradient(to top, var(--sidebar-bg) 0%, transparent 100%);
            pointer-events: none;
            display: block;
            margin-top: -40px;
        }

        .footer-tools-menu.active {
            display: block;
        }

        .footer-tools-option {
            padding: 12px 16px;
            cursor: pointer;
            color: var(--text-color);
            font-size: 14px;
            transition: background 0.2s ease;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .footer-tools-option:last-child {
            border-bottom: none;
        }

        .footer-tools-option:hover {
            background: rgba(46, 125, 50, 0.1);
        }

        body.dark-mode .footer-tools-option:hover {
            background: rgba(76, 175, 80, 0.15);
        }

        .footer-tools-option-icon {
            width: 16px;
            height: 16px;
            stroke: var(--text-color);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            margin-right: 12px;
            opacity: 0.7;
            flex-shrink: 0;
            transition: opacity 0.2s ease;
            vertical-align: middle;
            display: inline-block;
        }

        .footer-tools-option:hover .footer-tools-option-icon {
            opacity: 1;
        }

        /* Add visual hierarchy with descriptions */
        .footer-tools-option-title {
            font-weight: 600;
            font-size: 13px;
            display: block;
            margin-bottom: 2px;
        }

        .footer-tools-option-description {
            font-size: 11px;
            color: var(--text-tertiary);
            display: block;
        }

        /* System Tools Submenu Styles */
        .footer-tools-option.submenu-parent {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .footer-tools-submenu {
            display: none;
            background: var(--surface-alt);
            border-radius: 4px;
            margin: 4px 0;
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
        }

        .footer-tools-submenu.expanded {
            display: block;
            max-height: 300px;
            opacity: 1;
            margin: 8px 0;
        }

        .footer-tools-option.submenu-item {
            padding: 10px 16px 10px 32px;
            font-size: 13px;
            border-bottom: none;
        }

        .footer-tools-option.submenu-item:hover {
            background: rgba(46, 125, 50, 0.15);
        }

        body.dark-mode .footer-tools-option.submenu-item:hover {
            background: rgba(76, 175, 80, 0.2);
        }

        /* Language submenu item styling */
        #languageSubmenu .language-item-flag {
            font-size: 16px;
            display: inline-block;
        }

        #languageSubmenu .language-item-name {
            flex: 1;
        }

        #languageSubmenu .language-item-check {
            color: var(--primary-green);
            font-size: 14px;
            display: none; /* Hidden by default, shown via JS */
        }

        .submenu-arrow {
            width: 14px;
            height: 14px;
            stroke: var(--text-color);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform 0.2s ease;
            opacity: 0.5;
        }

        .submenu-arrow.rotated {
            transform: rotate(90deg);
        }

        .footer-tools-option.submenu-parent .footer-tools-option-icon {
            fill: var(--text-color);
            stroke: none;
        }

        .footer-tools-divider {
            height: 1px;
            background: var(--border-color);
            margin: 8px 0;
        }

        /* MOBILE OVERFLOW MENU */
        .footer-overflow-container {
            display: none; /* Hidden by default, shown only on mobile */
            position: relative;
        }

        .footer-overflow-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: var(--surface-alt);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            cursor: pointer;
            color: var(--text-color);
            font-size: 16px;
            transition: all 0.2s ease;
        }

        .footer-overflow-btn:hover {
            background: rgba(46, 125, 50, 0.1);
            border-color: var(--primary-green);
        }

        body.dark-mode .footer-overflow-btn:hover {
            background: rgba(76, 175, 80, 0.2);
        }

        .footer-overflow-menu {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 0;
            background: var(--sidebar-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            min-width: 220px;
            max-height: calc(100vh - 100px);
            overflow-y: auto;
            display: none;
            z-index: 1000;
            box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
        }

        body.dark-mode .footer-overflow-menu {
            box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
        }

        .footer-overflow-menu.active {
            display: block;
        }

        .footer-overflow-section {
            padding: 8px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .footer-overflow-section:last-child {
            border-bottom: none;
        }

        .footer-overflow-section-title {
            padding: 6px 16px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .footer-overflow-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            cursor: pointer;
            color: var(--text-color);
            font-size: 13px;
            transition: background 0.2s ease;
        }

        .footer-overflow-option:hover {
            background: rgba(46, 125, 50, 0.1);
        }

        body.dark-mode .footer-overflow-option:hover {
            background: rgba(76, 175, 80, 0.2);
        }

        .footer-overflow-option i {
            font-size: 14px;
            color: var(--text-secondary);
            width: 18px;
            text-align: center;
        }

        .footer-overflow-stat {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 16px;
            color: var(--text-color);
            font-size: 13px;
        }

        .footer-overflow-stat.clickable {
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .footer-overflow-stat.clickable:hover {
            background: rgba(46, 125, 50, 0.1);
        }

        body.dark-mode .footer-overflow-stat.clickable:hover {
            background: rgba(76, 175, 80, 0.2);
        }

        .footer-overflow-stat i {
            font-size: 14px;
            color: var(--text-secondary);
            width: 18px;
            text-align: center;
        }

        /* Elevation stat with clickable ascent/descent */
        .footer-overflow-elevation {
            justify-content: flex-start;
        }

        .overflow-elevation-clickable {
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: background-color 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .overflow-elevation-clickable:hover {
            background-color: rgba(76, 175, 80, 0.15);
        }

        .overflow-elevation-clickable:active {
            background-color: rgba(76, 175, 80, 0.25);
        }

        .overflow-elevation-clickable i {
            width: auto;
        }

        .footer-overflow-actions {
            display: flex;
            gap: 8px;
            padding: 8px 16px;
        }

        .footer-overflow-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex: 1;
            padding: 8px 12px;
            background: var(--surface-alt);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            cursor: pointer;
            color: var(--text-color);
            font-size: 12px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .footer-overflow-action-btn:hover:not(:disabled) {
            background: rgba(46, 125, 50, 0.1);
            border-color: var(--primary-green);
        }

        body.dark-mode .footer-overflow-action-btn:hover:not(:disabled) {
            background: rgba(76, 175, 80, 0.2);
        }

        .footer-overflow-action-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .footer-overflow-action-btn i {
            font-size: 14px;
        }

        /* Project Save/Load Styles */
        .saved-projects-section {
            margin-bottom: 20px;
            padding: 12px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
        }

        .saved-projects-section h4 {
            margin: 0 0 16px 0;
            font-size: 16px;
            color: var(--text-color);
            font-weight: 600;
        }

        /* 3-column grid layout for project cards */
        #recentProjectCards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .saved-project-card {
            background: var(--surface-alt);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 8px;
            margin-bottom: 0;
            cursor: pointer;
            transition: all 0.2s ease;
            height: auto;
            min-height: 45px;
        }

        .saved-project-card:hover {
            background: rgba(46, 125, 50, 0.1);
            border-color: var(--primary-green);
            transform: translateX(2px);
        }

        body.dark-mode .saved-project-card:hover {
            background: rgba(76, 175, 80, 0.15);
        }

        .project-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            gap: 4px;
        }

        .project-card-buttons {
            display: flex;
            gap: 0;
            flex-shrink: 0;
        }

        .project-card-name {
            font-weight: 600;
            font-size: 12px;
            color: var(--text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .project-card-load-btn {
            padding: 4px 12px;
            background: var(--primary-green);
            color: white;
            border: none;
            border-radius: 4px 0 0 4px;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s ease;
            min-width: 60px;
        }

        .project-card-load-btn:hover {
            background: #45a049;
        }

        .project-card-delete-btn {
            padding: 4px 8px;
            background: #d32f2f;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .project-card-delete-btn:hover {
            background: #c62828;
        }

        .project-card-details {
            font-size: 10px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .project-card-date {
            font-size: 9px;
            opacity: 0.7;
        }

        .view-all-projects-btn {
            background: none;
            border: none;
            color: var(--primary-green);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: underline;
            padding: 8px 0;
            margin-top: 8px;
            display: inline-block;
            transition: color 0.2s ease;
        }

        .view-all-projects-btn:hover {
            color: var(--light-green);
        }

        /* Mobile responsive: stack cards vertically */
        @media (max-width: 768px) {
            #recentProjectCards {
                grid-template-columns: 1fr;
            }
        }

        .project-list {
            max-height: 400px;
            overflow-y: auto;
        }

        .project-item {
            background: var(--surface-alt);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 16px;
            margin-bottom: 12px;
            transition: all 0.2s ease;
        }

        .project-item:hover {
            background: rgba(46, 125, 50, 0.1);
            border-color: var(--primary-green);
        }

        body.dark-mode .project-item:hover {
            background: rgba(76, 175, 80, 0.15);
        }

        .project-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .project-item-header h4 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: var(--text-color);
        }

        .project-item-details {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 8px;
            line-height: 1.6;
        }

        .project-item-badges {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }

        .project-badge {
            padding: 4px 8px;
            background: rgba(76, 175, 80, 0.15);
            border: 1px solid rgba(76, 175, 80, 0.3);
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-color);
        }

        .project-item-actions {
            display: flex;
            gap: 8px;
        }

        .project-item-actions button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .project-load-btn {
            background: var(--primary-green);
            color: white;
        }

        .project-load-btn:hover {
            background: #45a049;
        }

        .project-delete-btn {
            background: #f44336;
            color: white;
        }

        .project-delete-btn:hover {
            background: #da190b;
        }

        .project-warning-box {
            background: rgba(255, 193, 7, 0.1);
            border: 1px solid rgba(255, 193, 7, 0.3);
            border-radius: var(--radius-md);
            padding: 12px;
            margin-bottom: 16px;
            font-size: 13px;
            color: var(--text-color);
        }

        .project-warning-box strong {
            display: block;
            margin-bottom: 4px;
            color: #ffc107;
        }

        .gpx-export-summary {
            background: var(--surface-alt);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 16px;
            margin-top: 16px;
            font-size: 14px;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .gpx-export-summary i {
            color: var(--primary-color);
            font-size: 18px;
        }

        .gpx-export-summary #gpxExportCount {
            font-weight: 600;
            color: var(--primary-color);
        }

        .project-summary-box {
            background: var(--surface-alt);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 12px;
            margin-bottom: 16px;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .project-summary-box strong {
            display: block;
            margin-bottom: 8px;
            color: var(--text-color);
            font-size: 14px;
        }

        .project-summary-item {
            margin-bottom: 4px;
            line-height: 1.6;
        }

        .project-empty-state {
            text-align: center;
            padding: 32px;
            color: var(--text-secondary);
        }

        .project-empty-state i {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.5;
        }


        .footer-download-btn {
            display: flex;
            align-items: center;
            gap: 5px; /* Reduced from 6px (15% reduction) */
            padding: 7px 10px; /* Reduced from 8px 12px (15% reduction) */
            background: var(--blue-primary);
            border: 2px solid var(--blue-primary); /* Blue border for prominence */
            border-radius: 3px; /* Reduced from 4px (15% reduction) */
            color: white;
            font-size: 11px; /* Reduced from 13px (15% reduction) */
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .footer-download-btn:hover {
            background: var(--blue-primary); /* Blue background on hover */
            border-color: black;
            color: white; /* White text on hover */
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4); /* Blue glow */
        }

        .footer-download-btn svg {
            width: 14px; /* Reduced from 16px (15% reduction) */
            height: 14px; /* Reduced from 16px (15% reduction) */
            stroke: white;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: stroke 0.2s ease;
        }

        .footer-download-btn:hover svg {
            stroke: white; /* White icon on hover */
        }

        .footer-download-menu {
            position: absolute;
            bottom: 100%;
            right: 0;
            margin-bottom: 8px;
            background: var(--sidebar-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            box-shadow: 0 4px 16px var(--shadow);
            min-width: 240px; /* Wider for better readability */
            display: none;
            z-index: 1000;
        }

        .footer-download-menu.active {
            display: block;
        }

        .footer-download-option {
            padding: 12px 16px;
            cursor: pointer;
            color: var(--text-color);
            font-size: 14px;
            transition: background 0.2s ease;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .footer-download-option:last-child {
            border-bottom: none;
        }

        .footer-download-option:hover {
            background: rgba(46, 125, 50, 0.1);
        }

        .footer-download-option-icon {
            width: 16px;
            height: 16px;
            stroke: var(--text-color);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            opacity: 0.7;
            flex-shrink: 0;
            transition: opacity 0.2s ease;
        }

        .footer-download-option:hover .footer-download-option-icon {
            opacity: 1;
        }

        /* Add visual hierarchy with descriptions */
        .footer-download-option-title {
            font-weight: 600;
            font-size: 13px;
            display: block;
            margin-bottom: 2px;
        }

        .footer-download-option-description {
            font-size: 11px;
            color: var(--text-tertiary);
            display: block;
        }

        /* Primary download option - Enhanced GPX with POIs */
        .footer-download-option-primary {
            background: linear-gradient(135deg, rgba(46, 125, 50, 0.12) 0%, rgba(76, 175, 80, 0.08) 100%);
            border-left: 4px solid var(--primary-green);
            padding-left: 12px; /* Compensate for left border */
        }

        .footer-download-option-primary .footer-download-option-title {
            color: var(--primary-green);
            font-size: 14px; /* Slightly larger than default 13px */
            font-weight: 700; /* Bolder than default 600 */
        }

        .footer-download-option-primary .footer-download-option-icon {
            color: var(--primary-green);
            opacity: 1; /* Always full opacity, not 0.7 */
            font-size: 18px; /* Larger than default 14px */
        }

        .footer-download-option-primary:hover {
            background: linear-gradient(135deg, rgba(46, 125, 50, 0.18) 0%, rgba(76, 175, 80, 0.12) 100%);
            border-left-color: var(--dark-green); /* Darker green on hover */
        }

        /* Dark mode variants */
        body.dark-mode .footer-download-option-primary {
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(102, 187, 106, 0.10) 100%);
        }

        /* Disabled state for export options */
        .footer-download-option.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .footer-download-option.disabled:hover {
            background: transparent;
        }

        .footer-download-option-primary.disabled {
            background: rgba(46, 125, 50, 0.05);
            border-left-color: rgba(46, 125, 50, 0.3);
        }

        body.dark-mode .footer-download-option-primary:hover {
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.22) 0%, rgba(102, 187, 106, 0.15) 100%);
        }

        @media (prefers-color-scheme: dark) {
            .footer-download-option-primary {
                background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(102, 187, 106, 0.10) 100%);
            }

            .footer-download-option-primary:hover {
                background: linear-gradient(135deg, rgba(76, 175, 80, 0.22) 0%, rgba(102, 187, 106, 0.15) 100%);
            }
        }

        /* FIT source highlight - shown when .fit file was imported (round-trip available) */
        .footer-download-option-fit-source {
            background: linear-gradient(135deg, rgba(33, 150, 243, 0.10) 0%, rgba(100, 181, 246, 0.06) 100%);
            border-left: 4px solid #2196F3;
            padding-left: 12px;
        }

        .footer-download-option-fit-source .footer-download-option-title {
            color: #1976D2;
            font-weight: 700;
        }

        .footer-download-option-fit-source .footer-download-option-icon {
            color: #1976D2;
            opacity: 1;
        }

        .footer-download-option-fit-source:hover {
            background: linear-gradient(135deg, rgba(33, 150, 243, 0.18) 0%, rgba(100, 181, 246, 0.10) 100%);
        }

        body.dark-mode .footer-download-option-fit-source {
            background: linear-gradient(135deg, rgba(100, 181, 246, 0.15) 0%, rgba(144, 202, 249, 0.08) 100%);
        }

        body.dark-mode .footer-download-option-fit-source .footer-download-option-title {
            color: #90CAF9;
        }

        body.dark-mode .footer-download-option-fit-source .footer-download-option-icon {
            color: #90CAF9;
        }

        body.dark-mode .footer-download-option-fit-source:hover {
            background: linear-gradient(135deg, rgba(100, 181, 246, 0.22) 0%, rgba(144, 202, 249, 0.12) 100%);
        }

        /* App menu FIT source highlight */
        .app-menu-option-fit-source {
            background: rgba(33, 150, 243, 0.08);
        }

        .app-menu-option-fit-source .app-menu-option-title {
            color: #1976D2;
            font-weight: 700;
        }

        .app-menu-option-fit-source:hover {
            background: rgba(33, 150, 243, 0.18) !important;
        }

        body.dark-mode .app-menu-option-fit-source {
            background: rgba(100, 181, 246, 0.12);
        }

        body.dark-mode .app-menu-option-fit-source .app-menu-option-title {
            color: #90CAF9;
        }

        body.dark-mode .app-menu-option-fit-source:hover {
            background: rgba(100, 181, 246, 0.22) !important;
        }

        body.dark-mode .footer-download-option:hover {
            background: rgba(76, 175, 80, 0.15);
        }

        /* Dark mode Download button styles */
        body.dark-mode .footer-download-btn {
            background: #64b5f6;
            color: #1a1a1a;
            border-color: #64b5f6;
        }

        body.dark-mode .footer-download-btn svg {
            stroke: #1a1a1a;
        }

        body.dark-mode .footer-download-btn:hover {
            background: #64b5f6;
            color: #1a1a1a; /* Dark text on light blue */
            border-color: white;
        }

        body.dark-mode .footer-download-btn:hover svg {
            stroke: #1a1a1a;
        }

        .footer-collapse-toggle {
            display: none !important; /* Hide toggle button - footer always expanded */
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            color: white;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            font-size: 14px;
        }

        .footer-collapse-toggle:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .footer-collapse-arrow {
            transition: transform 0.3s ease;
            display: inline-block;
            transform: rotate(0deg); /* Down arrow when expanded (default - to collapse) */
        }

        .footer-bar.collapsed {
            height: 30px; /* Reduced from 35px (15% reduction) */
            justify-content: flex-end; /* Position buttons on right when collapsed */
        }

        .footer-bar.collapsed .footer-stats {
            display: none;
        }

        .footer-bar.collapsed .footer-download-container {
            display: flex; /* Keep download visible when collapsed */
        }

        .footer-bar.collapsed .footer-actions {
            gap: 8px;
        }

        .footer-bar.collapsed .footer-collapse-arrow {
            transform: rotate(180deg); /* Up arrow when collapsed (to expand) */
        }

        /* ============================================
           Search Location Modal Tabs
           ============================================ */

        .search-location-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--border-color);
        }

        .search-location-tab {
            flex: 1;
            padding: 10px 12px;
            background: transparent;
            border: none;
            border-bottom: 3px solid transparent;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .search-location-tab:hover {
            color: var(--text-color);
            background: var(--card-bg);
        }

        .search-location-tab.active {
            color: var(--link-color);
            border-bottom-color: var(--link-color);
            font-weight: 600;
        }

        .search-location-tab-content {
            display: none;
        }

        .search-location-tab-content.active {
            display: block;
        }

        /* Mobile: Horizontal scrollable tabs with fade indicators */
        @media (max-width: 768px) {
            .search-location-tabs-wrapper {
                position: relative;
            }

            .search-location-tabs-wrapper::before,
            .search-location-tabs-wrapper::after {
                content: '';
                position: absolute;
                top: 0;
                bottom: 2px;
                width: 60px;
                pointer-events: none;
                z-index: 2;
                transition: opacity 0.3s ease;
            }

            .search-location-tabs-wrapper::before {
                left: 0;
                background: linear-gradient(to right, var(--primary-green) 0%, transparent 100%);
                opacity: 0; /* Hidden by default since we start at left */
            }

            .search-location-tabs-wrapper::after {
                right: 0;
                background: linear-gradient(to left, var(--primary-green) 0%, transparent 100%);
            }

            /* Hide gradients at scroll boundaries */
            .search-location-tabs-wrapper.at-start::before {
                opacity: 0;
            }

            .search-location-tabs-wrapper.at-end::after {
                opacity: 0;
            }

            .search-location-tabs-wrapper.can-scroll-left::before {
                opacity: 1;
            }

            .search-location-tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none; /* Firefox */
                gap: 4px;
                padding-bottom: 2px; /* Prevent active border from being cut off */
                /* Add right padding to ensure last tab is partially cut off */
                padding-right: 40px;
            }

            .search-location-tabs::-webkit-scrollbar {
                display: none; /* Chrome/Safari/Edge */
            }

            .search-location-tab {
                flex: 0 0 auto;
                min-width: 90px; /* Slightly smaller to fit more tabs and show partial peek */
                padding: 10px 8px;
                font-size: 12px;
            }

            /* Scroll hint arrows */
            .scroll-hint-arrow {
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 24px;
                height: 24px;
                color: #ffffff;
                font-size: 18px;
                font-weight: bold;
                z-index: 3;
                pointer-events: none; /* Let taps pass through to scroll */
                opacity: 1;
                transition: opacity 0.3s ease;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }

            .scroll-hint-left {
                left: 2px;
            }

            .scroll-hint-right {
                right: 2px;
                animation: scrollHintPulse 1.5s ease-in-out 2; /* Pulse twice on load */
            }

            /* Hide arrows based on scroll position */
            .search-location-tabs-wrapper.at-start .scroll-hint-left {
                opacity: 0;
            }

            .search-location-tabs-wrapper.at-end .scroll-hint-right {
                opacity: 0;
            }

            /* Pulse animation for scroll hint */
            @keyframes scrollHintPulse {
                0%, 100% {
                    transform: translateY(-50%) translateX(0);
                    opacity: 1;
                }
                50% {
                    transform: translateY(-50%) translateX(3px);
                    opacity: 1;
                }
            }
        }

        /* Hide scroll hint arrows on desktop (only show on mobile) */
        @media (min-width: 769px) {
            .scroll-hint-arrow {
                display: none !important;
            }
        }

        .search-location-input-group {
            margin-bottom: 16px;
        }

        .search-location-label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-color);
            margin-bottom: 6px;
        }

        .search-location-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--card-bg);
            color: var(--text-color);
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .search-location-input:focus {
            outline: none;
            border-color: var(--link-color);
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }

        .search-location-input::placeholder {
            color: var(--text-secondary);
            opacity: 0.7;
        }

        .search-location-helper {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 4px;
            line-height: 1.4;
        }

        /* Landing Page Input + Button Row */
        .landing-input-button-row {
            display: flex;
            gap: 10px;
        }

        @media (max-width: 768px) {
            .landing-input-button-row {
                flex-direction: column;
                gap: 8px;
            }

            .landing-input-button-row .ps-btn {
                width: 100%;
                white-space: normal;
                justify-content: center;
            }
        }

        .search-location-results {
            margin-top: 16px;
            padding: 12px;
            background: var(--card-bg);
            border-radius: var(--radius-md);
            border-left: 3px solid var(--link-color);
        }

        .search-location-result-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-bottom: 1px solid var(--border-color);
            transition: background 0.2s ease;
        }

        .search-location-result-item:last-child {
            border-bottom: none;
        }

        .search-location-result-item:hover {
            background: var(--sidebar-bg);
        }

        .search-result-content {
            flex: 1;
            min-width: 0;
        }

        .search-location-result-name {
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 4px;
        }

        .search-location-result-metadata {
            font-size: 13px;
            opacity: 0.8;
            margin-top: 2px;
            margin-bottom: 4px;
            color: var(--text-secondary);
        }

        .search-location-result-details {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .search-location-type-badge {
            font-size: 11px;
            margin-top: 6px;
            padding: 3px 8px;
            background: var(--surface-alt);
            border-radius: 12px;
            display: inline-block;
        }

        .search-result-content {
            flex: 1;
        }

        .search-clear-markers-btn {
            margin-top: 10px;
            padding: 8px 12px;
            background: var(--button-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            color: var(--text-color);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            justify-content: center;
        }

        .search-clear-markers-btn:hover {
            background: var(--button-hover);
            border-color: var(--link-color);
        }

        .search-clear-markers-btn i {
            font-size: 14px;
        }

        .search-location-error {
            padding: 12px;
            background: #ffebee;
            border-left: 3px solid #d32f2f;
            border-radius: var(--radius-md);
            color: #c62828;
            font-size: 13px;
            margin-top: 16px;
        }

        body.dark-mode .search-location-error {
            background: #3a1a1a;
            color: #ef5350;
        }

        .search-location-success {
            padding: 12px;
            background: #e8f5e9;
            border-left: 3px solid var(--primary-green);
            border-radius: var(--radius-md);
            color: var(--dark-green);
            font-size: 13px;
            margin-top: 16px;
        }

        body.dark-mode .search-location-success {
            background: #1a3a1a;
            color: #81c784;
        }

        /* Search Result Highlighting */
        .search-location-result-item.highlighted {
            background: var(--link-color);
            color: white;
        }

        .search-location-result-item.highlighted .search-location-result-name,
        .search-location-result-item.highlighted .search-location-result-details {
            color: white;
        }

        /* Search result actions container */
        .search-result-actions {
            display: flex;
            gap: 6px;
            align-items: center;
            margin-left: auto;
            padding-left: 10px;
        }

        /* Compact action buttons */
        .search-action-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 10px;
            border: 1px solid var(--border-color);
            background: var(--surface);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 12px;
            white-space: nowrap;
            transition: all 0.2s;
        }

        .search-action-btn:hover {
            background: var(--surface-alt);
            transform: translateY(-1px);
            box-shadow: 0 2px 4px var(--shadow);
        }

        .search-action-btn i {
            font-size: 14px;
        }

        /* Create POI button - green accent */
        .search-action-create {
            color: var(--link-color);
            border-color: var(--link-color);
        }

        .search-action-create:hover {
            background: rgba(76, 175, 80, 0.1);
            border-color: var(--link-color);
        }

        /* Show in Map button - orange accent */
        .search-action-show {
            color: var(--warning-color);
            border-color: var(--warning-color);
        }

        .search-action-show:hover {
            background: rgba(255, 152, 0, 0.1);
            border-color: var(--warning-color);
        }

        /* Copy Coordinates Button */
        .copy-coords-btn {
            padding: 6px 10px;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s ease;
            color: var(--text-secondary);
        }

        .copy-coords-btn:hover {
            background: var(--surface-alt);
            color: var(--text-color);
        }

        .search-location-result-item.highlighted .copy-coords-btn {
            border-color: rgba(255, 255, 255, 0.5);
            color: white;
        }

        .search-location-result-item.highlighted .copy-coords-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: white;
        }

        /* Responsive design for mobile */
        @media (max-width: 768px) {
            .search-result-actions {
                flex-direction: column;
                gap: 4px;
                width: 100%;
                margin-left: 0;
                margin-top: 8px;
            }

            .search-action-btn {
                width: 100%;
                justify-content: center;
            }

            .search-location-result-item {
                flex-direction: column;
                align-items: stretch;
            }
        }

        /* Search Radius Section in Modal */
        .search-radius-section {
            margin-top: 15px;
            padding: 12px;
            background: var(--card-bg);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
        }

        .radius-toggle-btn {
            width: 100%;
            padding: 10px 12px;
            background: transparent;
            border: none;
            color: var(--text-color);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            transition: all 0.2s ease;
        }

        .radius-toggle-btn:hover {
            color: var(--link-color);
        }

        .radius-toggle-btn i:last-child {
            transition: transform 0.2s ease;
        }

        .radius-toggle-btn.expanded i:last-child {
            transform: rotate(180deg);
        }

        #modalRadiusControls {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }

        #modalRadiusSlider {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: var(--border-color);
            outline: none;
            -webkit-appearance: none;
        }

        #modalRadiusSlider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--link-color);
            cursor: pointer;
        }

        #modalRadiusSlider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--link-color);
            cursor: pointer;
            border: none;
        }

        /* Input group wrapper for positioning dropdown */
        .search-location-input-wrapper {
            position: relative;
        }

        /* Autocomplete Dropdown */
        .autocomplete-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            max-height: 280px;
            overflow-y: auto;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-top: none;
            border-radius: 0 0 var(--radius-md) var(--radius-md);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 1000;
        }

        .autocomplete-item {
            padding: 10px 14px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
            transition: background-color 0.15s;
        }

        .autocomplete-item:last-child {
            border-bottom: none;
        }

        .autocomplete-item:hover {
            background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        }

        .autocomplete-item-name {
            font-weight: 600;
            font-size: 14px;
            color: var(--text-primary);
        }

        .autocomplete-item-subtitle {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 2px;
        }

        .autocomplete-no-results {
            padding: 12px 14px;
            font-style: italic;
            text-align: center;
            color: var(--text-secondary);
            font-size: 13px;
        }

        body.dark-mode .autocomplete-dropdown {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        body.dark-mode .autocomplete-item:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        /* Route Filter Section in Search Location Modal */
        .route-filter-section {
            margin-top: 15px;
            padding: 12px;
            background: var(--card-bg);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
        }

        #routeFilterControls {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }

        #routeFilterSlider {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: var(--border-color);
            outline: none;
            -webkit-appearance: none;
        }

        #routeFilterSlider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--link-color);
            cursor: pointer;
        }

        #routeFilterSlider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--link-color);
            cursor: pointer;
            border: none;
        }

        #routeFilterSlider:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* ============================================
           Search Preview Marker Styles
           ============================================ */

        .search-preview-marker {
            background: transparent;
        }

        .search-preview-marker-inner {
            width: 24px;
            height: 24px;
            background: #2196f3;
            border-radius: 50% 50% 50% 0;
            transform: rotate(-45deg);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid white;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            transition: all 0.2s ease;
        }

        .search-preview-marker-inner i {
            transform: rotate(45deg);
            color: white;
            font-size: 14px;
        }

        .search-preview-marker-inner:hover {
            background: var(--blue-primary);
            transform: rotate(-45deg) scale(1.1);
            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.5);
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .footer-bar {
                padding: 0 9px; /* Reduced from 10px (15% reduction) */
                height: auto;
                min-height: 38px; /* Reduced from 45px (15% reduction) to match desktop */
            }

            /* Show overflow menu button on mobile */
            .footer-overflow-container {
                display: block;
                margin-right: 7px;
            }

            /* Hide elements that are moved to overflow menu */
            .footer-info-container {
                display: none !important;
            }

            .footer-undo-redo-container {
                display: none !important;
            }

            .footer-stats-group {
                display: none !important;
            }

            /* Info button on mobile - kept for reference but hidden via container */
            .footer-info-btn {
                padding: 5px 7px; /* Reduced from 6px 8px (15% reduction) */
                font-size: 11px; /* Reduced from 13px (15% reduction) */
            }

            .footer-info-btn span {
                display: none; /* Hide "Info" text on mobile, show only icon */
            }

            /* Theme button on mobile */
            .footer-theme-btn {
                padding: 5px 7px; /* Reduced from 6px 8px (15% reduction) */
                font-size: 11px; /* Reduced from 13px (15% reduction) */
            }

            .footer-theme-btn span {
                display: none; /* Hide "Theme" text on mobile, show only icon */
            }

            .footer-theme-container {
                margin-right: 7px; /* Reduced from 8px (15% reduction) */
            }

            .footer-stats {
                gap: 9px; /* Reduced from 10px (15% reduction) */
                flex-wrap: nowrap;
            }

            .footer-stat-item {
                font-size: 10px; /* Reduced from 12px (15% reduction) */
                padding: 5px 9px; /* Reduced from 6px 10px (15% reduction) */
            }

            /* POI count is always visible on mobile (distance/elevation/time moved to overflow) */
            #footerPOI {
                display: flex !important;
            }

            /* Hide "Tools" button text on mobile */
            .footer-tools-btn span {
                display: none;
            }

            .footer-tools-btn {
                padding: 7px !important; /* Reduced from 8px (15% reduction) */
                gap: 0 !important;
            }

            /* Hide "Download" button text on mobile */
            .footer-download-btn span {
                display: none;
            }

            .footer-download-btn svg:last-child {
                display: none; /* Hide dropdown chevron */
            }

            .footer-download-btn {
                padding: 7px !important; /* Reduced from 8px (15% reduction) */
                gap: 0 !important;
            }

            .footer-collapse-toggle {
                display: flex;
            }

            .footer-bar.collapsed {
                min-height: 34px; /* Reduced from 40px (15% reduction) */
            }

            /* POI Popup Mobile Styles */
            .poi-popup-wrapper {
                min-width: unset;  /* Remove min-width on mobile */
                max-width: calc(100vw - 24px) !important;   /* Don't exceed screen width with margin */
                max-height: 400px; /* Shorter on mobile */
                width: calc(100vw - 24px) !important;
                box-sizing: border-box;
                overflow: hidden;
            }

            .poi-popup-content {
                max-height: 300px;
            }

            .leaflet-popup-content-wrapper {
                max-height: 350px;
                max-width: calc(100vw - 20px) !important; /* Prevent overflow */
                width: auto !important;
                overflow: hidden;
            }

            .leaflet-popup-content {
                margin: 6px 8px !important; /* Tighter margins on mobile */
                width: auto !important;
                max-width: 100% !important;
                overflow: hidden;
            }

            /* Ensure all popup children respect container width */
            .poi-popup-content-scrollable {
                max-width: 100%;
                overflow-x: hidden;
                box-sizing: border-box;
            }

            .poi-info-grid-2col {
                grid-template-columns: 1fr;  /* Single column on mobile */
                gap: 3px;
                margin-bottom: 6px;
                max-width: 100%;
                box-sizing: border-box;
            }

            .poi-info-item {
                font-size: 11px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 2px 0;
            }

            .poi-info-item i {
                margin-right: 3px;
                font-size: 11px;
            }

            .poi-info-label {
                font-size: 10px;
            }

            .poi-name-edit {
                gap: 4px;
            }

            .poi-popup-input {
                font-size: 16px; /* Prevent zoom on iOS */
            }

            .poi-popup-save-btn,
            .poi-popup-cancel-btn {
                min-width: 36px;
                padding: 8px;
            }

            .poi-popup-save-btn svg,
            .poi-popup-cancel-btn svg {
                width: 18px;
                height: 18px;
            }

            /* Compact action buttons on mobile */
            .poi-popup-actions-footer {
                gap: 2px;
                padding-top: 6px;
                max-width: 100%;
                box-sizing: border-box;
                flex-wrap: wrap; /* Allow wrapping if needed */
            }

            .poi-popup-btn-navigate,
            .poi-popup-btn-street,
            .poi-popup-btn-osm,
            .poi-popup-btn-delete,
            .poi-popup-btn-coords {
                padding: 6px 8px !important;
                font-size: 0 !important;  /* Hide text */
                gap: 0 !important;
                min-width: unset !important;
                flex: 0 0 auto !important;
            }

            /* Hide button text on mobile, show only icons */
            .poi-popup-btn-navigate span,
            .poi-popup-btn-street span,
            .poi-popup-btn-osm span,
            .poi-popup-btn-delete span,
            .poi-popup-btn-coords span {
                display: none !important;
            }

            .poi-popup-btn-navigate svg,
            .poi-popup-btn-street svg,
            .poi-popup-btn-osm svg,
            .poi-popup-btn-delete svg,
            .poi-popup-btn-coords svg,
            .poi-popup-btn-navigate i,
            .poi-popup-btn-street i,
            .poi-popup-btn-osm i,
            .poi-popup-btn-delete i,
            .poi-popup-btn-coords i {
                width: 14px !important;
                height: 14px !important;
                font-size: 14px !important;
            }

            .poi-popup-header {
                margin-bottom: 6px;
            }

            .poi-popup-title {
                font-size: 14px;
            }

            .poi-popup-badge {
                padding: 1px 6px;
                font-size: 10px;
                margin-left: 4px;
            }

            /* Similar POIs section compact */
            .poi-nearby-header {
                padding: 6px 8px;
                font-size: 12px;
            }

            .poi-nearby-content {
                max-width: 100%;
                overflow: hidden;
            }

            /* Category row compact */
            .poi-category-row {
                font-size: 11px;
            }
        }


        /* POI Popup Styling */
        .poi-popup-wrapper {
            display: flex;
            flex-direction: column;
            min-width: 380px;
            max-width: 450px;
            max-height: 600px;
        }

        .poi-popup-content-scrollable {
            flex: 1;
            overflow-y: visible;  /* No inner scroll */
            overflow-x: hidden;
            padding-bottom: 8px; /* Add bottom padding to prevent content from touching buttons */
        }


        /* Constrain popup wrapper to prevent excessive height */
        .leaflet-popup-content-wrapper {
            max-height: 600px;  /* Taller on desktop */
        }

        @media (max-width: 768px) {
            .leaflet-popup-content-wrapper {
                max-height: 400px;  /* Shorter on mobile */
            }
        }

        /* Compact popup content margins */
        .leaflet-popup-content {
            margin: 8px 10px !important;
        }

        /* Reduce paragraph margins in popup */
        .leaflet-popup-content p {
            margin: 3px 0 !important;
        }

        /* Light mode popup background with solid color */
        .leaflet-popup-content-wrapper {
            background-color: var(--sidebar-bg);
        }

        .leaflet-popup-tip {
            background-color: var(--sidebar-bg);
        }

        /* Dark mode popup background with solid color */
        body.dark-mode .leaflet-popup-content-wrapper {
            background-color: #2a2a2a;
        }

        body.dark-mode .leaflet-popup-tip {
            background-color: #2a2a2a;
        }

        /* Position popup higher above marker */
        .leaflet-popup {
            margin-bottom: 60px; /* Moves popup significantly higher (increased from 30px) */
            z-index: 2000 !important; /* Above map controls (1000) to ensure visibility on mobile */
        }

        .poi-popup-header {
            margin-bottom: 8px;
        }

        .poi-name-display {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .poi-name-edit {
            display: none;
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap !important;
        }

        .poi-name-edit[style*="display: block"],
        .poi-name-edit[style*="display: flex"] {
            display: flex !important;
        }

        /* Hide Leaflet's close button when editing POI name */
        .poi-editing-name .leaflet-popup-close-button {
            display: none !important;
        }

        .poi-popup-title {
            margin: 0;
            flex: 1;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 16px;
            font-weight: 600;
        }

        /* Badge Styles */
        .poi-popup-badge {
            display: inline-block;
            color: white;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: bold;
            margin-left: 8px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .poi-popup-badge svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }

        .poi-popup-badge-info {
            background: #2196f3;
        }

        .poi-popup-badge-alert {
            background: var(--blue-primary);
        }

        .poi-popup-badge-danger {
            background: #d32f2f;
        }

        .poi-popup-badge-event {
            background: #9c27b0;
        }

        body.dark-mode .poi-popup-badge-info {
            background: #42a5f5;
        }

        body.dark-mode .poi-popup-badge-alert {
            background: #2196f3;
        }

        body.dark-mode .poi-popup-badge-danger {
            background: #ef5350;
        }

        body.dark-mode .poi-popup-badge-event {
            background: #ba68c8;
        }

        /* Clickable type badge */
        .poi-type-clickable {
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
        }

        .poi-type-clickable:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        /* POI Type Selector Dropdown */
        .poi-type-selector {
            background: var(--card-bg, #fff);
            border: 1px solid var(--border-color, #e0e0e0);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            padding: 4px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 120px;
        }

        .poi-type-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            background: transparent;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-color, #333);
            transition: background-color 0.15s;
        }

        .poi-type-option:hover {
            background: var(--surface-hover, #f5f5f5);
        }

        .poi-type-option.selected {
            font-weight: 600;
        }

        .poi-type-option svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .poi-type-option--info svg {
            color: #2196F3;
        }

        .poi-type-option--alert svg {
            color: #ff9800;
        }

        .poi-type-option--danger svg {
            color: #f44336;
        }

        .poi-type-option--event svg {
            color: #9c27b0;
        }

        .poi-type-option--info.selected {
            background: #e3f2fd;
        }

        .poi-type-option--alert.selected {
            background: #fff3e0;
        }

        .poi-type-option--danger.selected {
            background: #ffebee;
        }

        .poi-type-option--event.selected {
            background: #f3e5f5;
        }

        body.dark-mode .poi-type-selector {
            background: var(--card-bg, #1e1e1e);
            border-color: var(--border-color, #333);
        }

        body.dark-mode .poi-type-option:hover {
            background: var(--surface-hover, #2a2a2a);
        }

        body.dark-mode .poi-type-option--info.selected {
            background: #1a3a4a;
        }

        body.dark-mode .poi-type-option--alert.selected {
            background: #3a2a1a;
        }

        body.dark-mode .poi-type-option--danger.selected {
            background: #3a1a1a;
        }

        body.dark-mode .poi-type-option--event.selected {
            background: #2a1a3a;
        }

        /* POI Tags Section */
        .poi-tags-section {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px 0;
            margin: 4px 0;
            border-top: 1px solid var(--border-color, #e0e0e0);
            border-bottom: 1px solid var(--border-color, #e0e0e0);
        }

        .poi-tag-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            background: var(--tag-bg, #f5f5f5);
            border-radius: var(--radius-md);
            color: var(--tag-color, #555);
            font-size: 14px;
            cursor: default;
            transition: background-color 0.2s, transform 0.1s;
        }

        .poi-tag-icon:hover {
            background: var(--tag-hover-bg, #e8e8e8);
            transform: scale(1.1);
        }

        .poi-tag-link {
            cursor: pointer;
            color: var(--link-color, #1976d2);
        }

        .poi-tag-link:hover {
            background: var(--link-hover-bg, #e3f2fd);
        }

        body.dark-mode .poi-tags-section {
            border-color: var(--border-color-dark, #444);
        }

        body.dark-mode .poi-tag-icon {
            background: var(--tag-bg-dark, #333);
            color: var(--tag-color-dark, #ccc);
        }

        body.dark-mode .poi-tag-icon:hover {
            background: var(--tag-hover-bg-dark, #444);
        }

        body.dark-mode .poi-tag-link {
            color: var(--link-color-dark, #64b5f6);
        }

        body.dark-mode .poi-tag-link:hover {
            background: var(--link-hover-bg-dark, #1a3a4a);
        }

        /* POI Popup Navigation Buttons */
        .poi-popup-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 48px;
            background: var(--primary-color, #4caf50);
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            opacity: 0.9;
            transition: opacity 0.2s, background-color 0.2s;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .poi-popup-nav-btn:hover {
            opacity: 1;
            background: var(--primary-dark, #388e3c);
        }

        .poi-popup-nav-btn:active {
            transform: translateY(-50%) scale(0.95);
        }

        .poi-popup-nav-prev {
            left: -40px;
            border-radius: 4px 0 0 4px;
        }

        .poi-popup-nav-next {
            right: -40px;
            border-radius: 0 4px 4px 0;
        }

        body.dark-mode .poi-popup-nav-btn {
            background: var(--primary-color-dark, #66bb6a);
        }

        body.dark-mode .poi-popup-nav-btn:hover {
            background: var(--primary-dark, #4caf50);
        }

        @media (max-width: 480px) {
            .poi-popup-nav-btn {
                width: 28px;
                height: 40px;
                font-size: 16px;
            }

            .poi-popup-nav-prev {
                left: -32px;
            }

            .poi-popup-nav-next {
                right: -32px;
            }
        }

        /* Edit Button */
        .poi-popup-edit-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            color: var(--blue-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s;
        }

        .poi-popup-edit-btn:hover {
            color: #1565c0;
        }

        .poi-popup-edit-btn svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }

        body.dark-mode .poi-popup-edit-btn {
            color: #ffffff;
        }

        body.dark-mode .poi-popup-edit-btn:hover {
            color: #e0e0e0;
        }

        /* Edit Input Container */
        .poi-popup-edit-container {
            display: none;
            margin-bottom: 8px;
        }

        .poi-popup-edit-container.active {
            display: block;
        }

        .poi-popup-input {
            padding: 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            background: white;
            color: #333;
            box-sizing: border-box;
            min-width: 0;
            flex: 1 1 auto !important;
            max-width: none !important;
        }

        body.dark-mode .poi-popup-input {
            background: #1a1a1a;
            border-color: #444;
            color: #e0e0e0;
        }

        /* Edit Button Group */
        .poi-popup-edit-buttons {
            display: flex;
            gap: 4px;
        }

        .poi-popup-save-btn,
        .poi-popup-cancel-btn {
            padding: 6px 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            flex: 0 0 auto;
            min-width: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            font-weight: 500;
            transition: background 0.2s;
        }

        .poi-popup-save-btn svg,
        .poi-popup-cancel-btn svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
            flex-shrink: 0;
        }

        .poi-popup-save-btn {
            background: var(--primary-green);
            color: white;
        }

        .poi-popup-save-btn:hover {
            background: #45a049;
        }

        .poi-popup-cancel-btn {
            background: #999;
            color: white;
        }

        .poi-popup-cancel-btn:hover {
            background: #888;
        }

        body.dark-mode .poi-popup-save-btn {
            background: var(--light-green);
        }

        body.dark-mode .poi-popup-save-btn:hover {
            background: #81c784;
        }

        body.dark-mode .poi-popup-cancel-btn {
            background: #666;
        }

        body.dark-mode .poi-popup-cancel-btn:hover {
            background: #777;
        }

        /* Info Paragraphs */
        .poi-popup-info {
            margin: 4px 0;
            font-size: 13px;
        }

        .poi-popup-info strong {
            font-weight: 600;
        }

        .opening-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 8px;
        }

        .opening-status-badge.open {
            background: #e8f5e9;
            color: var(--dark-green);
        }

        .opening-status-badge.closed {
            background: #ffebee;
            color: #c62828;
        }

        body.dark-mode .opening-status-badge.open {
            background: #1b3d1f;
            color: #81c784;
        }

        body.dark-mode .opening-status-badge.closed {
            background: #3d1b1b;
            color: #e57373;
        }

        .opening-status-badge i {
            font-size: 10px;
        }

        .gap-warning-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            margin-top: 6px;
        }

        .gap-warning-badge.last-chance {
            background: #fff3e0;
            color: #e65100;
        }

        .gap-warning-badge.significant-gap {
            background: #ffebee;
            color: #c62828;
        }

        body.dark-mode .gap-warning-badge.last-chance {
            background: #3d2a1a;
            color: #ffb74d;
        }

        body.dark-mode .gap-warning-badge.significant-gap {
            background: #3d1b1b;
            color: #e57373;
        }

        .gap-warning-badge i {
            font-size: 10px;
        }

        .gap-info {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            margin: 4px 0;
            font-size: 12px;
            border-radius: 4px;
            background: var(--info-section-bg);
        }

        .gap-info.warning {
            background: #fff3e0;
            color: #e65100;
        }

        .gap-info.first-on-route,
        .gap-info.last-on-route {
            background: #e3f2fd;
            color: #1565c0;
        }

        body.dark-mode .gap-info.warning {
            background: #3d2a1a;
            color: #ffb74d;
        }

        body.dark-mode .gap-info.first-on-route,
        body.dark-mode .gap-info.last-on-route {
            background: #1a3a4a;
            color: #64b5f6;
        }

        .gap-info i {
            font-size: 11px;
        }

        /* POI Info Section Styles */
        .poi-info-section {
            background: var(--info-section-bg);
            border: 1px solid var(--info-section-border);
            border-radius: var(--radius-md);
            padding: 8px 10px;
            margin: 8px 0;
        }

        .poi-info-section:first-of-type {
            margin-top: 4px;
        }

        .poi-info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 4px;
        }

        .poi-info-grid-2col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 12px;
        }

        .poi-info-item {
            display: flex;
            align-items: center;
            font-size: 13px;
            line-height: 1.5;
        }

        .poi-info-item i {
            margin-right: 6px;
            font-size: 14px;
            color: var(--link-color);
            flex-shrink: 0;
        }

        .poi-info-item strong {
            font-weight: 600;
            margin-right: 4px;
        }

        .poi-info-label {
            color: var(--text-secondary);
            font-size: 12px;
            margin-right: 4px;
        }

        .poi-info-value {
            font-weight: 500;
            color: var(--text-color);
        }

        .poi-side-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            color: white;
            margin-left: 4px;
        }

        .poi-side-badge.left {
            background: var(--side-left-color);
        }

        .poi-side-badge.right {
            background: var(--side-right-color);
        }

        .poi-elevation-warning {
            background: var(--elevation-warning-bg);
            border-left: 3px solid var(--warning-color);
        }

        .poi-elevation-diff {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 4px;
        }

        .poi-elevation-diff-value {
            font-weight: 600;
        }

        .poi-elevation-diff-value.normal {
            color: var(--link-color);
        }

        .poi-elevation-diff-value.warning {
            color: var(--warning-color);
        }

        .poi-elevation-diff i.bi-exclamation-triangle {
            color: var(--danger-color);
            font-size: 16px;
        }

        /* Fuel data display */
        .fuel-data-display {
            font-size: 0.9em;
        }

        .fuel-amenity-badge {
            display: inline-block;
            padding: 2px 6px;
            font-size: 0.7em;
            background: var(--badge-bg, #e8f5e9);
            color: var(--badge-text, #2e7d32);
            border-radius: 3px;
            white-space: nowrap;
        }

        body.dark-mode .fuel-amenity-badge {
            background: #1b3a1b;
            color: #81c784;
        }

        .fuel-status-badge {
            display: inline-block;
            padding: 2px 6px;
            font-size: 0.7em;
            border-radius: 3px;
            font-weight: 600;
            white-space: nowrap;
        }

        .fuel-badge-motorway {
            background: #e3f2fd;
            color: #1565c0;
        }

        body.dark-mode .fuel-badge-motorway {
            background: #1a2a3a;
            color: #64b5f6;
        }

        .fuel-badge-supermarket {
            background: #fff3e0;
            color: #e65100;
        }

        body.dark-mode .fuel-badge-supermarket {
            background: #3a2a1a;
            color: #ffb74d;
        }

        .fuel-badge-closed {
            background: #ffebee;
            color: #c62828;
        }

        body.dark-mode .fuel-badge-closed {
            background: #3a1a1a;
            color: #ef5350;
        }

        .fuel-hours-details {
            margin-top: 4px;
            font-size: 0.85em;
        }

        .fuel-hours-details summary {
            cursor: pointer;
            color: var(--link-color);
            font-size: 0.9em;
            user-select: none;
        }

        .fuel-hours-table {
            margin-top: 4px;
        }

        .fuel-hours-row {
            display: flex;
            justify-content: space-between;
            padding: 2px 0;
            font-size: 0.9em;
            color: var(--text-secondary);
        }

        .fuel-hours-today {
            font-weight: 600;
            color: var(--text-color);
        }

        .fuel-hours-bh {
            border-top: 1px dashed var(--border-color, #ddd);
            margin-top: 2px;
            padding-top: 3px;
        }

        .fuel-hours-day {
            min-width: 60px;
        }

        .fuel-hours-closed {
            color: #c62828;
        }

        body.dark-mode .fuel-hours-closed {
            color: #ef5350;
        }

        /* Nearby POI distance color coding */
        .nearby-poi-close {
            color: var(--primary-green);
            font-weight: 500;
        }

        .nearby-poi-far {
            color: var(--warning-color);
            font-weight: 500;
        }

        body.dark-mode .nearby-poi-close {
            color: var(--light-green);
        }

        body.dark-mode .nearby-poi-far {
            color: #ffb74d;
        }

        /* Clickable POI names in nearby summary */
        .nearby-poi-link {
            cursor: pointer;
            text-decoration: underline;
            text-decoration-style: dotted;
        }

        .nearby-poi-link:hover {
            text-decoration-style: solid;
            opacity: 0.8;
        }

        /* Collapsible Nearby Section */
        .poi-nearby-section {
            margin: 12px 0;
        }

        .poi-nearby-header {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px;
            background: var(--card-bg);
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 8px;
            transition: background 0.2s;
        }

        .poi-nearby-header:hover {
            background: var(--button-hover);
        }

        .poi-nearby-header i {
            transition: transform 0.2s;
        }

        .poi-nearby-header i.rotated {
            transform: rotate(90deg);
        }

        .poi-nearby-count {
            margin-left: auto;
            font-size: 0.9em;
            opacity: 0.7;
        }

        .poi-nearby-content {
            transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        }

        /* Action Buttons Container - now in sticky footer */
        .poi-popup-actions-footer {
            position: sticky;
            bottom: 0;
            background: var(--sidebar-bg);
            border-top: 1px solid var(--border-color);
            padding-top: 8px;
            z-index: 10;
            display: flex;
            gap: 4px;
            flex-wrap: nowrap; /* Changed from wrap to nowrap to keep all buttons on one line */
        }

        body.dark-mode .poi-popup-actions-footer {
            background: #2a2a2a;
        }

        /* Action Buttons */
        .poi-popup-btn-navigate,
        .poi-popup-btn-street,
        .poi-popup-btn-osm,
        .poi-popup-btn-coords,
        .poi-popup-btn-delete {
            padding: 6px 8px; /* Reduced horizontal padding from 12px to 8px */
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px; /* Reduced from 12px */
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px; /* Reduced from 4px */
            transition: background 0.2s;
            flex: 1; /* Make buttons evenly sized */
            min-width: 44px; /* Ensure minimum touch target size */
            white-space: nowrap; /* Prevent text wrapping */
        }

        .poi-popup-btn-navigate i,
        .poi-popup-btn-street i,
        .poi-popup-btn-osm i,
        .poi-popup-btn-coords i,
        .poi-popup-btn-delete i {
            font-size: 13px;
            flex-shrink: 0; /* Prevent icon from shrinking */
        }

        .poi-popup-btn-navigate {
            background: var(--blue-primary);
        }

        .poi-popup-btn-navigate:hover {
            background: #1565c0;
        }

        .poi-popup-btn-street {
            background: var(--primary-green);
        }

        .poi-popup-btn-street:hover {
            background: #45a049;
        }

        .poi-popup-btn-osm {
            background: #7092FF;
        }

        .poi-popup-btn-osm:hover {
            background: #5A7FE6;
        }

        .poi-popup-btn-coords {
            background: #9c27b0;
        }

        .poi-popup-btn-coords:hover {
            background: #7b1fa2;
        }

        .poi-popup-btn-delete {
            background: #f44336;
        }

        .poi-popup-btn-delete:hover {
            background: #e53935;
        }

        body.dark-mode .poi-popup-btn-navigate {
            background: #2196f3;
        }

        body.dark-mode .poi-popup-btn-navigate:hover {
            background: #42a5f5;
        }

        body.dark-mode .poi-popup-btn-street {
            background: var(--light-green);
        }

        body.dark-mode .poi-popup-btn-street:hover {
            background: #81c784;
        }

        body.dark-mode .poi-popup-btn-osm {
            background: #8AA7FF;
        }

        body.dark-mode .poi-popup-btn-osm:hover {
            background: #A4BBFF;
        }

        body.dark-mode .poi-popup-btn-coords {
            background: #ab47bc;
        }

        body.dark-mode .poi-popup-btn-coords:hover {
            background: #ba68c8;
        }

        body.dark-mode .poi-popup-btn-delete {
            background: #ef5350;
        }

        body.dark-mode .poi-popup-btn-delete:hover {
            background: #f44336;
        }

        /* Fetch Elevation Button */
        .poi-popup-btn-fetch-elevation {
            padding: 8px 12px;
            background: var(--link-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: background 0.2s;
        }

        .poi-popup-btn-fetch-elevation:hover {
            background: var(--link-hover);
        }

        .poi-popup-btn-fetch-elevation i {
            font-size: 14px;
        }

        /* Fetch All Elevations Button */
        .poi-popup-btn-fetch-all-elevations {
            padding: 8px 12px;
            background: var(--warning-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: background 0.2s;
        }

        .poi-popup-btn-fetch-all-elevations:hover {
            background: #f57c00;
        }

        .poi-popup-btn-fetch-all-elevations i {
            font-size: 14px;
        }

        /* Show Coordinates Button */
        .poi-popup-btn-show-coords {
            padding: 8px 12px;
            background: var(--link-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: background 0.2s;
        }

        .poi-popup-btn-show-coords:hover {
            background: var(--link-hover);
        }

        .poi-popup-btn-show-coords i {
            font-size: 14px;
        }

        /* Coordinates Section (Collapsible) */
        .poi-coordinates-section {
            display: none;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 8px;
            margin-top: 8px;
        }

        .poi-coordinates-content {
            display: flex;
            gap: 8px;
            align-items: center;
            font-size: 0.85em;
            font-family: monospace;
        }

        .poi-coordinates-copy-btn {
            background: transparent;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            color: var(--text-color);
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .poi-coordinates-copy-btn:hover {
            background: var(--primary-green);
            color: white;
        }

        .poi-coordinates-copy-btn i {
            font-size: 12px;
        }

        /* Spinner animation for loading state */
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        /* ===== Reload Confirmation Modal ===== */
        .reload-confirm-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 100000;
            align-items: center;
            justify-content: center;
        }

        .reload-confirm-modal.active {
            display: flex;
        }

        .reload-confirm-modal-content {
            background: var(--card-bg);
            border-radius: 12px;
            width: 90%;
            max-width: 480px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            animation: modalSlideIn 0.3s ease;
        }

        .reload-confirm-modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color);
        }

        .reload-confirm-modal-header h3 {
            margin: 0;
            font-size: 20px;
            color: var(--text-color);
        }

        .reload-confirm-modal-body {
            padding: 24px;
        }

        .reload-confirm-modal-body p {
            margin: 0 0 12px 0;
            color: var(--text-color);
            line-height: 1.5;
        }

        .reload-confirm-modal-body p:first-child {
            font-size: 15px;
        }

        .reload-confirm-modal-body ul {
            margin: 12px 0 0 0;
            padding-left: 24px;
            color: var(--text-secondary);
            list-style-type: disc;
        }

        .reload-confirm-modal-body ul li {
            margin: 8px 0;
            font-size: 14px;
        }

        .reload-confirm-modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }

        .reload-modal-last-saved {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 8px;
            padding: 8px 12px;
            background: var(--surface-alt);
            border-radius: var(--radius-md);
            border-left: 3px solid var(--primary-color);
        }

        .reload-modal-last-saved i {
            font-size: 14px;
        }


        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


        /* Mobile responsiveness */
        @media (max-width: 480px) {
            .reload-confirm-modal-content {
                width: 95%;
                max-width: none;
            }

            .reload-confirm-modal-header,
            .reload-confirm-modal-body,
            .reload-confirm-modal-footer {
                padding: 16px;
            }

            .reload-confirm-modal-footer {
                flex-direction: column-reverse;
            }
        }

        /* ===== Mobile Onboarding Modal ===== */
        .mobile-onboarding-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 100000;
            align-items: center;
            justify-content: center;
        }

        .mobile-onboarding-modal.active {
            display: flex;
        }

        .mobile-onboarding-modal-content {
            background: var(--card-bg);
            border-radius: 16px;
            width: 90%;
            max-width: 360px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            animation: modalSlideIn 0.3s ease;
            overflow: hidden;
        }

        .mobile-onboarding-modal-header {
            padding: 20px 24px;
            background: linear-gradient(135deg, var(--blue-primary) 0%, #0d47a1 100%);
            text-align: center;
        }

        .mobile-onboarding-modal-header h3 {
            margin: 0;
            font-size: 20px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .mobile-onboarding-modal-header i {
            font-size: 24px;
        }

        .mobile-onboarding-modal-body {
            padding: 24px;
            text-align: center;
        }

        .mobile-onboarding-illustration {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            margin-bottom: 20px;
        }

        .mobile-onboarding-icon-container {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            background: var(--surface-alt, #f5f5f5);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--border-color);
        }

        .mobile-onboarding-icon-container i {
            font-size: 28px;
            color: var(--primary-green);
        }

        .mobile-onboarding-arrow {
            color: var(--text-secondary);
            font-size: 20px;
        }

        .mobile-onboarding-modal-body p {
            margin: 0;
            color: var(--text-color);
            font-size: 14px;
            line-height: 1.6;
        }

        .mobile-onboarding-modal-body strong {
            color: var(--primary-green);
        }

        .mobile-onboarding-modal-footer {
            padding: 16px 24px 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
        }

        .mobile-onboarding-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
        }

        .mobile-onboarding-checkbox input {
            cursor: pointer;
        }

        .mobile-onboarding-modal-btn {
            width: 100%;
            padding: 12px 24px;
            border-radius: var(--radius-lg);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            background: var(--primary-green);
            color: white;
        }

        .mobile-onboarding-modal-btn:hover {
            background: #45a049;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
        }

        .mobile-onboarding-modal-btn:active {
            transform: translateY(0);
        }

        /* ===== GPX Summary Modal ===== */
        .gpx-summary-stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
            background: var(--card-bg);
            padding: 10px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
        }

        .gpx-summary-stat {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            padding: 6px 8px;
            background: var(--bg-color);
            border-radius: 4px;
            min-width: 0;
        }

        .gpx-summary-stat i {
            font-size: 11px;
            flex-shrink: 0;
        }

        .gpx-summary-stat .stat-label {
            color: var(--text-secondary);
            font-weight: 500;
            font-size: 10px;
            white-space: nowrap;
        }

        .gpx-summary-stat .stat-value {
            color: var(--link-color);
            font-weight: 600;
            font-size: 11px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        @media (max-width: 768px) {
            #gpxSummaryModal .modal-content {
                max-width: 95%;
                margin: 20px auto;
            }

            .gpx-summary-stats-grid {
                gap: 4px;
                padding: 8px;
            }

            .gpx-summary-stat {
                padding: 4px 6px;
                gap: 4px;
            }

            .gpx-summary-stat i {
                font-size: 10px;
            }

            .gpx-summary-stat .stat-label {
                font-size: 9px;
            }

            .gpx-summary-stat .stat-value {
                font-size: 10px;
            }
        }

        @media (min-width: 769px) {
            #gpxSummaryModal .modal-content {
                max-height: 95vh;
            }
        }

        /* ===== Start/Finish Flag Markers ===== */
        .custom-flag-marker {
            pointer-events: auto !important;
        }

        .simple-flag-marker {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
        }

        .simple-flag-marker i {
            font-size: 24px;
            color: var(--blue-primary);
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
            line-height: 1;
        }

        .flag-marker {
            pointer-events: auto !important;
        }

        .flag-marker i {
            font-size: 28px;
            filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
            line-height: 1;
        }

        .flag-marker.start-flag i {
            color: #4CAF50;
        }

        .flag-marker.finish-flag i {
            color: #E53935;
        }

        /* ===== Daylight Information Styles ===== */
        #daylightInfoSection .daylight-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.4rem;
        }

        #daylightInfoSection .daylight-icon {
            font-size: 1.1rem;
            width: 24px;
            text-align: center;
        }

        #daylightInfoSection .daylight-label {
            font-weight: 500;
            color: var(--text-color);
            min-width: 90px;
        }

        #daylightInfoSection .daylight-time {
            color: var(--text-color);
            opacity: 0.85;
        }

        #daylightInfoSection .daylight-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem 1rem;
        }

        #daylightInfoSection .daylight-row-compact {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 11px;
        }

        #daylightInfoSection .daylight-row-compact .daylight-icon {
            font-size: 1rem;
            width: 20px;
            text-align: center;
        }

        #daylightInfoSection .daylight-row-compact .daylight-label {
            font-weight: 500;
            color: var(--text-color);
            min-width: auto;
        }

        #daylightInfoSection .daylight-row-compact .daylight-time {
            color: var(--text-color);
            opacity: 0.85;
            font-weight: 600;
        }

        #daylightInfoSection .daylight-day-length {
            grid-column: 1 / -1;
            margin-top: 0.3rem;
            padding-top: 0.5rem;
            border-top: 1px solid var(--border-color);
        }

        #addDaylightPOIsBtn {
            background: var(--link-color);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        #addDaylightPOIsBtn:hover {
            background: var(--link-hover);
            transform: translateY(-1px);
        }

        #addDaylightPOIsBtn:active {
            transform: translateY(0);
        }

/* ============================================================================
   UTILITY CLASSES
   ============================================================================
   Common utility classes to replace inline styles
   Organized by category for maintainability
   ============================================================================ */

/* Display utilities */
.u-hidden { display: none !important; }
.u-block { display: block !important; }
.u-flex { display: flex !important; }
.u-grid { display: grid !important; }
.u-inline { display: inline !important; }
.u-inline-block { display: inline-block !important; }
.u-inline-flex { display: inline-flex !important; }

/* Flexbox utilities */
.u-flex-center {
    display: flex;
    align-items: center;
}
.u-flex-center-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.u-flex-center-justify {
    display: flex;
    align-items: center;
    justify-content: center;
}
.u-align-center { align-items: center !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-1 { flex: 1 !important; }

/* Spacing utilities - Margin */
.u-m-0 { margin: 0 !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mr-0 { margin-right: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-ml-0 { margin-left: 0 !important; }

.u-mt-4 { margin-top: 4px !important; }
.u-mr-4 { margin-right: 4px !important; }
.u-mb-4 { margin-bottom: 4px !important; }
.u-ml-4 { margin-left: 4px !important; }

.u-mt-6 { margin-top: 6px !important; }
.u-mr-6 { margin-right: 6px !important; }
.u-mb-6 { margin-bottom: 6px !important; }
.u-ml-6 { margin-left: 6px !important; }

.u-mt-8 { margin-top: 8px !important; }
.u-mr-8 { margin-right: 8px !important; }
.u-mb-8 { margin-bottom: 8px !important; }
.u-ml-8 { margin-left: 8px !important; }

.u-mt-10 { margin-top: 10px !important; }
.u-mr-10 { margin-right: 10px !important; }
.u-mb-10 { margin-bottom: 10px !important; }
.u-ml-10 { margin-left: 10px !important; }

.u-mt-12 { margin-top: 12px !important; }
.u-mr-12 { margin-right: 12px !important; }
.u-mb-12 { margin-bottom: 12px !important; }
.u-ml-12 { margin-left: 12px !important; }

.u-mt-16 { margin-top: 16px !important; }
.u-mr-16 { margin-right: 16px !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-ml-16 { margin-left: 16px !important; }

.u-mt-20 { margin-top: 20px !important; }
.u-mr-20 { margin-right: 20px !important; }
.u-mb-20 { margin-bottom: 20px !important; }
.u-ml-20 { margin-left: 20px !important; }

.u-ml-auto { margin-left: auto !important; }
.u-mr-auto { margin-right: auto !important; }

/* Spacing utilities - Padding */
.u-p-0 { padding: 0 !important; }
.u-pt-0 { padding-top: 0 !important; }
.u-pr-0 { padding-right: 0 !important; }
.u-pb-0 { padding-bottom: 0 !important; }
.u-pl-0 { padding-left: 0 !important; }

.u-p-8 { padding: 8px !important; }
.u-p-10 { padding: 10px !important; }
.u-p-12 { padding: 12px !important; }
.u-p-15 { padding: 15px !important; }
.u-p-20 { padding: 20px !important; }

/* Gap utilities */
.u-gap-4 { gap: 4px !important; }
.u-gap-6 { gap: 6px !important; }
.u-gap-8 { gap: 8px !important; }
.u-gap-10 { gap: 10px !important; }
.u-gap-12 { gap: 12px !important; }
.u-gap-16 { gap: 16px !important; }
.u-gap-20 { gap: 20px !important; }

/* Typography utilities */
.u-font-12 { font-size: 12px !important; }
.u-font-13 { font-size: 13px !important; }
.u-font-14 { font-size: 14px !important; }
.u-font-16 { font-size: 16px !important; }
.u-font-18 { font-size: 18px !important; }
.u-font-20 { font-size: 20px !important; }
.u-font-24 { font-size: 24px !important; }

.u-font-normal { font-weight: normal !important; }
.u-font-bold { font-weight: bold !important; }
.u-font-600 { font-weight: 600 !important; }

.u-text-center { text-align: center !important; }
.u-text-left { text-align: left !important; }
.u-text-right { text-align: right !important; }

/* Width utilities */
.u-w-100 { width: 100% !important; }
.u-w-auto { width: auto !important; }

/* Color utilities */
.u-color-primary { color: var(--link-color) !important; }
.u-color-secondary { color: var(--text-secondary) !important; }
.u-color-tertiary { color: var(--text-tertiary) !important; }

/* Misc utilities */
.u-cursor-pointer { cursor: pointer !important; }
.u-no-wrap { white-space: nowrap !important; }
.u-valign-middle { vertical-align: middle !important; }
.u-valign-top { vertical-align: top !important; }
.u-valign-bottom { vertical-align: bottom !important; }

/* Combined utility classes for common patterns */
.u-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
}

.u-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.u-icon-mr { margin-right: 8px; cursor: pointer; }
.u-icon-sm { font-size: 16px; }
.u-icon-md { font-size: 20px; margin-right: 10px; }

/* SVG icon utility */
.u-svg-icon-sm {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-right: 4px;
    vertical-align: middle;
}

/* Label utilities */
.u-label-bold {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.u-label-bold-13 {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
}

.u-label-bold-12-compact {
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    min-width: 120px;
}

/* Description text utility */
.u-desc-text {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
}

.u-desc-text-sm {
    margin: 4px 0 0 22px;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Heading utilities */
.u-heading-16 {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text-color);
}

/* Max-width utilities */
.u-max-w-500 { max-width: 500px !important; }
.u-max-w-600 { max-width: 600px !important; }
.u-max-w-700 { max-width: 700px !important; }
.u-max-w-800 { max-width: 800px !important; }

/* Link utilities */
.u-link-secondary {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s;
}

.u-link-primary-no-decoration {
    color: var(--link-color);
    text-decoration: none;
}

/* Icon with text utilities */
.u-icon-text-16 {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
}

.u-icon-text-14 {
    font-size: 14px;
    margin-right: 4px;
    vertical-align: middle;
}

.u-icon-text-12 {
    font-size: 12px;
    margin-right: 4px;
}

/* Font size utilities (additional) */
.u-font-11 { font-size: 11px !important; }

/* Input field utilities */
.u-input-field {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-color);
}

.u-input-field-14 {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 14px;
}

.u-input-field-12 {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 12px;
}

.u-input-field-time {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    background: var(--bg-color);
    color: var(--text-color);
}

/* Position utilities */
.u-pos-absolute { position: absolute !important; }
.u-pos-relative { position: relative !important; }
.u-top-15 { top: 15px !important; }
.u-right-15 { right: 15px !important; }

/* Padding utilities (additional) */
.u-p-6-8 { padding: 6px 8px !important; }
.u-p-8-16 { padding: 8px 16px !important; }
.u-p-12-24 { padding: 12px 24px !important; }

/* Margin utilities (additional) */
.u-mb-20 { margin-bottom: 20px !important; }
.u-mb-10 { margin-bottom: 10px !important; }
.u-mb-8 { margin-bottom: 8px !important; }
.u-mb-6 { margin-bottom: 6px !important; }

/* Display utilities (additional) */
.u-hidden-mb-8 {
    display: none;
    margin-bottom: 8px;
}

/* Flex utilities */
.u-flex-1 { flex: 1 !important; }

/* Font size utilities (additional) */
.u-font-14 { font-size: 14px !important; }

/* Max-width utilities (additional) */
.u-max-w-450 { max-width: 450px !important; }
.u-max-w-550 { max-width: 550px !important; }

/* Position combo utilities */
.u-pos-abs-tr-15 {
    position: absolute;
    right: 15px;
    top: 15px;
}

/* Padding utilities (more) */
.u-p-12 { padding: 12px !important; }
.u-p-w-100-12 {
    width: 100%;
    padding: 12px;
}

/* Margin utilities (more) */
.u-mt-15 { margin-top: 15px !important; }
.u-ml-18 { margin-left: 18px !important; }
.u-ml-18-italic {
    margin-left: 18px;
    font-style: italic;
}
.u-m-0-lh-16 {
    margin: 0;
    line-height: 1.6;
}
.u-m-0-16-0-lh-16 {
    margin: 0 0 16px 0;
    line-height: 1.6;
}
.u-m-20-0 { margin: 20px 0 !important; }
.u-m-25-0-15 {
    margin: 25px 0 15px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Font utilities (more) */
.u-font-10-secondary {
    font-size: 10px;
    color: var(--text-secondary);
}
.u-font-12-secondary-mb-8 {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.u-font-16-mr-6 {
    font-size: 16px;
    margin-right: 6px;
}

/* Display combo utilities */
.u-flex-ai-gap-8 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.u-flex-ai-flex-1 {
    display: flex;
    align-items: center;
    flex: 1;
}
.u-flex-jc-sb-12-op7-mt6 {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    opacity: 0.7;
    margin-top: 6px;
}
.u-flex-ai-mb-8-gap-8 {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Width utilities */
.u-w-100-p-ws-nowrap-p-12-24 {
    white-space: nowrap;
    padding: 12px 24px;
}

/* Modal/scrollable content utilities */
.u-modal-scroll-content {
    max-height: 400px;
    overflow-y: auto;
    background: var(--card-bg);
    padding: 15px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

/* Label utilities (more) */
.u-label-11-bold-block {
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
    font-size: 11px;
}
.u-label-12-bold-block-mb-4 {
    display: block;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 4px;
}
.u-label-14-bold-mb-2 {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

/* Radio button / selectable card styles */
.u-radio-card {
    flex: 1;
    padding: 8px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
.u-input-flex-1-sm {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 12px;
}
.u-input-flex-1-lg {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 14px;
    background: var(--input-bg);
    color: var(--text-color);
    transition: border-color 0.2s;
}

/* Display utilities (more) */
.u-block-max-w-100 {
    display: block;
    max-width: 100%;
}

/* Color utilities */
.u-color-warning { color: var(--warning-color) !important; }

/* Divider utilities */
.u-divider-h {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 20px 0;
}

/* Preview frame utilities */
.u-preview-frame {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   Deleted POIs Management
   ============================================================================ */

/* Search Controls - Two Row Layout */
.search-button-row-single {
    margin-bottom: 8px;
}

.search-button-row-single .btn-primary {
    width: 100%;
    justify-content: center;
}

.search-button-row-multi {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Deleted POIs Badge */
.deleted-count-badge {
    display: inline-block;
    background: #f44336;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    min-width: 18px;
    text-align: center;
}

/* Deleted POIs List */
.deleted-pois-list {
    max-height: 400px;
    overflow-y: auto;
}

.deleted-poi-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    transition: background 0.2s ease;
}

.deleted-poi-item:hover {
    background: var(--bg-color);
}

.deleted-poi-info {
    flex: 1;
    min-width: 0;
}

.deleted-poi-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deleted-poi-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: 12px;
}

.deleted-poi-actions {
    display: flex;
    gap: 6px;
}

.deleted-poi-restore-btn {
    padding: 6px 12px;
    background: var(--primary-green);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.deleted-poi-restore-btn:hover {
    background: var(--primary-green-hover);
}

/* ============================================================================
   Time Estimation Section (GPX Summary & Clock Time Modals)
   ============================================================================ */

/* Warning box for rough estimate disclaimer */
.time-estimate-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 152, 0, 0.1);
    border-left: 3px solid var(--warning-color);
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-color);
}

.time-estimate-warning i {
    color: var(--warning-color);
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

body.dark-mode .time-estimate-warning {
    background: rgba(255, 152, 0, 0.15);
}

/* Speed input row */
.time-estimate-input-row {
    margin-bottom: 12px;
}

/* Speed input with unit toggle container */
.time-estimate-speed-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Unit toggle button group */
.time-estimate-unit-toggle {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

/* Individual unit toggle button */
.time-estimate-unit-btn {
    padding: 6px 10px;
    background: var(--card-bg);
    border: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-estimate-unit-btn:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

.time-estimate-unit-btn:hover {
    background: var(--bg-color);
}

.time-estimate-unit-btn.active {
    background: var(--primary-green);
    color: white;
}

body.dark-mode .time-estimate-unit-btn {
    background: #333;
}

body.dark-mode .time-estimate-unit-btn:hover {
    background: #444;
}

body.dark-mode .time-estimate-unit-btn.active {
    background: var(--primary-green);
}

/* Terrain adjustment row */
.time-estimate-terrain-row {
    margin-bottom: 12px;
}

/* Checkbox label styling */
.time-estimate-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-color);
}

.time-estimate-checkbox-label input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* Terrain info text */
.time-estimate-terrain-info {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    margin-left: 24px;
    font-style: italic;
}

/* Result display container */
.time-estimate-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: 8px;
}

.time-estimate-result-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

/* Large value display for estimated time */
.time-estimate-result-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-green);
}

body.dark-mode .time-estimate-result-value {
    color: var(--light-green);
}

/* Row container for result + button on same line */
.time-estimate-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.time-estimate-result-row .time-estimate-result {
    flex: 1;
    margin-top: 0;
}

.time-estimate-result-row .ps-btn {
    white-space: nowrap;
}

/* ===== 3D Map Styles ===== */

/* 3D Map Controls Overlay */
.map3d-controls-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.map3d-control-group {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 180px;
}

.map3d-control-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
}

.map3d-control-group input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 2px;
    cursor: pointer;
}

.map3d-control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--primary-green);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.map3d-control-group input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.map3d-control-group input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--primary-green);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

#map3dExaggerationValue {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-green);
    min-width: 32px;
    text-align: right;
}

/* Map Style Selector */
.map3d-style-select {
    flex: 1;
    padding: 6px 28px 6px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 100px;
    transition: border-color 0.15s ease;
}

.map3d-style-select:hover {
    border-color: var(--primary-green);
}

.map3d-style-select:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.map3d-style-select option {
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 8px;
}

/* Dark mode adjustments for select dropdown arrow */
body.dark-mode .map3d-style-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23aaa' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .map3d-style-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23aaa' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    }
}

/* POI Toggle Styling */
.map3d-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-color);
}

.map3d-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-green);
}

/* Route Selector for Multi-Route */
.map3d-route-selector {
    max-height: 120px;
    overflow-y: auto;
}

.map3d-route-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.map3d-route-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-color);
    padding: 4px 6px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.map3d-route-checkbox-label:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.dark-mode .map3d-route-checkbox-label:hover {
    background: rgba(255, 255, 255, 0.1);
}

.map3d-route-checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--primary-green);
}

.map3d-route-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.map3d-route-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* Reset View Button */
.map3d-reset-btn {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    color: var(--text-color);
}

.map3d-reset-btn:hover {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: white;
}

.map3d-reset-btn i {
    font-size: 16px;
}

/* MapLibre GL container styles */
#map3dContainer {
    background: var(--card-bg);
}

/* Loading state animation */
#map3dLoading .loading-spinner {
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-green);
    animation: spin 1s linear infinite;
}

/* Dark mode adjustments */
body.dark-mode .map3d-control-group {
    background: #2a2a2a;
    border-color: #444;
}

body.dark-mode .map3d-reset-btn {
    background: #2a2a2a;
    border-color: #444;
}

body.dark-mode .map3d-reset-btn:hover {
    background: var(--light-green);
    border-color: var(--light-green);
}

body.dark-mode #map3dExaggerationValue {
    color: var(--light-green);
}

body.dark-mode .map3d-control-group input[type="range"] {
    background: #444;
}

body.dark-mode .map3d-control-group input[type="range"]::-webkit-slider-thumb {
    background: var(--light-green);
}

body.dark-mode .map3d-control-group input[type="range"]::-moz-range-thumb {
    background: var(--light-green);
}

/* 3D Map Popup Styles */
.maplibregl-popup.map3d-popup .maplibregl-popup-content {
    background: white;
    color: #333333;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.maplibregl-popup.map3d-popup .maplibregl-popup-close-button {
    color: #333333;
    font-size: 18px;
    padding: 4px 8px;
}

.maplibregl-popup.map3d-popup .maplibregl-popup-close-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 3D Map Popup Content Styles */
.map3d-popup-content {
    color: #333333;
}

.map3d-popup-category {
    color: #666666;
}

/* Dark mode popup styles */
body.dark-mode .maplibregl-popup.map3d-popup .maplibregl-popup-content {
    background: #2a2a2a;
    color: #e0e0e0;
}

body.dark-mode .map3d-popup-content {
    color: #e0e0e0;
}

body.dark-mode .map3d-popup-category {
    color: #aaaaaa;
}

body.dark-mode .maplibregl-popup.map3d-popup .maplibregl-popup-close-button {
    color: #e0e0e0;
}

body.dark-mode .maplibregl-popup.map3d-popup .maplibregl-popup-close-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Fix MapLibre GL marker positioning - restore default MapLibre styles */
/* The universal selector * { margin: 0; padding: 0; box-sizing: border-box } can interfere */
.maplibregl-marker {
    /* Restore exact MapLibre defaults for transform-based positioning */
    left: 0 !important;
    top: 0 !important;
    position: absolute !important;
    transition: opacity .2s !important;
    will-change: transform !important;
    /* Additional safeguards */
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    box-sizing: content-box !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .map3d-controls-overlay {
        top: 8px;
        right: 8px;
    }

    .map3d-control-group {
        padding: 8px 10px;
        min-width: 150px;
    }

    .map3d-control-group label {
        font-size: 11px;
    }

    #map3dExaggerationValue {
        font-size: 11px;
    }
}

/* Auto dark mode for system preference */
@media (prefers-color-scheme: dark) {
    .map3d-control-group {
        background: #2a2a2a;
        border-color: #444;
    }

    .map3d-reset-btn {
        background: #2a2a2a;
        border-color: #444;
    }

    .map3d-reset-btn:hover {
        background: var(--light-green);
        border-color: var(--light-green);
    }

    #map3dExaggerationValue {
        color: var(--light-green);
    }

    .map3d-control-group input[type="range"] {
        background: #444;
    }

    .map3d-control-group input[type="range"]::-webkit-slider-thumb {
        background: var(--light-green);
    }

    .map3d-control-group input[type="range"]::-moz-range-thumb {
        background: var(--light-green);
    }

    /* Popup styles for system dark mode */
    .maplibregl-popup.map3d-popup .maplibregl-popup-content {
        background: #2a2a2a;
        color: #e0e0e0;
    }

    .maplibregl-popup.map3d-popup .maplibregl-popup-close-button {
        color: #e0e0e0;
    }

    .maplibregl-popup.map3d-popup .maplibregl-popup-close-button:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* Famous Climbs Modal Styles */
.famous-climbs-loading,
.famous-climbs-no-route {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    gap: 12px;
}

.famous-climbs-loading i,
.famous-climbs-no-route i {
    font-size: 32px;
    opacity: 0.5;
}

.famous-climbs-loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.famous-climbs-summary {
    margin-bottom: 8px;
}

.famous-climbs-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Road Obstacles Panel Styles */
.road-obstacles-panel {
    position: fixed;
    top: 36px;  /* Start from under Header */
    left: 0;
    width: 320px;
    height: calc(100vh - 36px);  /* Full height minus header */
    background: var(--bg-color);
    border-right: 1px solid var(--border-color);
    z-index: 1001;  /* Above sidebar */
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
    transition: width 0.2s ease-out;
}

/* Panel content wrapper */
.road-obstacles-panel-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Collapse tab (visible when collapsed) */
.road-obstacles-panel-tab {
    display: none;
    position: absolute;
    top: 174px; /* Third tab slot (122 + 44 + 8) */
    left: 0;
    width: 40px;
    height: 44px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-color);
    transition: all 0.15s ease;
}

.road-obstacles-panel-tab:hover {
    background: var(--button-hover);
    width: 46px;
}

/* Collapsed state */
.road-obstacles-panel.collapsed {
    width: 0;
    box-shadow: none;
    border-right: none;
}

.road-obstacles-panel.collapsed .road-obstacles-panel-content {
    display: none;
}

.road-obstacles-panel.collapsed .road-obstacles-panel-tab {
    display: flex;
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.road-obstacles-panel.closing {
    animation: slideOutToLeft 0.2s ease-in forwards;
}

@keyframes slideOutToLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.road-obstacles-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.road-obstacles-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.road-obstacles-panel-title i {
    font-size: 20px;
    color: var(--primary);
}

/* Beta pill for new features */
.beta-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
    border-radius: 10px;
    cursor: help;
    margin-left: 4px;
}

.beta-pill:hover {
    background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
}

.road-obstacles-panel-close {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.road-obstacles-panel-close:hover {
    background: var(--button-hover);
    color: var(--text-color);
}

.road-obstacles-panel-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .road-obstacles-panel-close {
        padding: 12px;  /* Larger touch target on mobile */
    }
}

.road-obstacles-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.road-obstacles-section {
    margin-bottom: 16px;
}

.road-obstacles-search-btn {
    width: 100%;
    margin-top: 8px;
}

.road-obstacles-panel-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.road-obstacles-panel-footer .ps-btn {
    flex: 1;
}

/* Panel list adjustments */
.road-obstacles-panel .road-obstacles-list {
    max-height: none;  /* Let it use available space */
}

.road-obstacles-panel .road-obstacle-item {
    padding: 10px;
    gap: 8px;
}

.road-obstacles-panel .road-obstacles-summary {
    padding: 10px;
    margin-bottom: 12px;
}

.road-obstacles-panel .road-obstacles-summary p {
    margin: 0;
    font-size: 13px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .road-obstacles-panel {
        width: 100%;
        height: auto;
        bottom: 0;
    }
}

/* Road Obstacles Component Styles */
.road-obstacles-intro {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.road-obstacles-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.road-obstacle-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.road-obstacle-checkbox:hover {
    background: var(--button-hover);
    border-color: var(--primary);
}

.road-obstacle-checkbox:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.road-obstacle-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.obstacle-count-badge {
    background: var(--primary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: 4px;
    min-width: 18px;
    text-align: center;
}

.obstacle-count-badge.zero {
    background: var(--text-secondary);
    opacity: 0.6;
}

/* Obstacle Settings Button (cog icon) */
.obstacle-settings-btn {
    background: transparent;
    border: none;
    padding: 4px;
    margin-left: auto;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.obstacle-settings-btn:hover {
    color: var(--primary);
    background: var(--button-hover);
}

/* Multi-route support for obstacles */
.obstacle-route-indicators {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.obstacle-route-indicator {
    flex: 1;
    width: 4px;
    border-radius: 2px 0 0 2px;
}

.road-obstacle-item.has-route-indicator {
    position: relative;
    padding-left: 12px;
}


.obstacle-settings-btn i {
    font-size: 14px;
}

/* Steep Settings Modal Content */
.steep-settings-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.steep-setting-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.steep-setting-group > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text-color);
}

.steep-setting-label {
    font-weight: 500;
}

.steep-setting-value {
    font-weight: 600;
    color: var(--primary);
    font-size: 16px;
}

.steep-setting-hint {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: normal;
    margin-top: 2px;
}

.steep-setting-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.steep-setting-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.steep-setting-group input[type="range"] {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    background: var(--border-color);
    border-radius: 4px;
    outline: none;
}

.steep-setting-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.steep-setting-group input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.steep-setting-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Obstacle Search Distance Slider */
.road-obstacles-slider-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.road-obstacles-slider-section > label {
    display: block;
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.road-obstacle-checkbox .obstacle-icon {
    font-size: 16px;
}

.road-obstacles-loading,
.road-obstacles-no-route {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    gap: 12px;
}

.road-obstacles-loading .progress-spinner {
    width: 64px;
    height: 64px;
}

.road-obstacles-no-route i {
    font-size: 32px;
    opacity: 0.5;
}

.road-obstacles-status {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.8;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.road-obstacles-summary {
    margin-bottom: 8px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.road-obstacles-summary-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.road-obstacles-summary-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.road-obstacles-list {
    max-height: 350px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.road-obstacle-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.road-obstacle-item:hover {
    background: var(--button-hover);
    border-color: var(--primary);
}

.road-obstacle-item.clickable {
    cursor: pointer;
}

.road-obstacle-item.highlighted {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.road-obstacle-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 18px;
}

.road-obstacle-icon.tunnel { background: rgba(229, 57, 53, 0.15); color: #E53935; }
.road-obstacle-icon.bridge { background: rgba(65, 105, 225, 0.15); color: #4169E1; }
.road-obstacle-icon.ford { background: rgba(0, 206, 209, 0.15); color: #00CED1; }
.road-obstacle-icon.level_crossing { background: rgba(255, 69, 0, 0.15); color: #FF4500; }

.road-obstacle-info {
    flex: 1;
    min-width: 0;
}

.road-obstacle-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.road-obstacle-details {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.road-obstacle-actions {
    display: flex;
    gap: 6px;
}

.road-obstacle-actions button {
    padding: 6px 10px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.road-obstacle-actions .show-btn {
    background: var(--button-bg);
    color: var(--text-color);
}

.road-obstacle-actions .show-btn:hover {
    background: var(--primary);
    color: white;
}

.road-obstacle-actions .add-btn {
    background: var(--primary);
    color: white;
}

.road-obstacle-actions .add-btn:hover {
    background: var(--primary-hover);
}

.road-obstacle-actions .add-btn:disabled {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* Obstacle Category Groups (Collapsible) */
.obstacle-category-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.obstacle-group {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--card-bg);
}

.obstacle-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--card-bg);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.obstacle-group-header:hover {
    background: var(--button-hover);
}

.obstacle-group-header:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.obstacle-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.obstacle-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.obstacle-group-count {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: normal;
}

.obstacle-group-total-length {
    font-size: 11px;
    color: var(--primary-green);
    font-weight: 500;
    margin-left: 4px;
}

.obstacle-group-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.obstacle-group-arrow {
    font-size: 12px;
    transition: transform 0.3s;
    transform: rotate(180deg);
    display: inline-block;
}

.obstacle-group-arrow.collapsed {
    transform: rotate(0deg);
}

.obstacle-group-content {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 1000px;
    overflow: visible;
    transition: all 0.3s ease;
}

.obstacle-group-content.collapsed {
    max-height: 0;
    padding: 0 12px;
    overflow: hidden;
}

/* Adjusted obstacle item within category groups */
.obstacle-group-content .road-obstacle-item {
    padding: 8px;
    gap: 8px;
}

.obstacle-group-content .obstacle-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.obstacle-group-content .obstacle-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

.obstacle-group-content .obstacle-length {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.obstacle-group-content .obstacle-description {
    width: 100%;
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.3;
}

.obstacle-group-content .obstacle-distance {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.obstacle-group-content .obstacle-actions {
    display: flex;
    gap: 4px;
}

/* Obstacle Popup Styles */
.obstacle-popup-actions {
    margin: 8px 0;
}

.obstacle-popup-actions .ps-btn {
    width: 100%;
}

/* ============================================================================
   Surface Info Panel Styles
   ============================================================================ */

.surface-info-panel {
    position: fixed;
    top: 36px;
    left: 0;
    width: 320px;
    height: calc(100vh - 36px);
    background: var(--bg-color);
    border-right: 1px solid var(--border-color);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
    transition: width 0.2s ease-out;
}

.surface-info-panel-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.surface-info-panel-tab {
    display: none;
    position: absolute;
    top: 122px; /* Second tab slot (70 + 44 + 8) */
    left: 0;
    width: 40px;
    height: 44px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-color);
    transition: all 0.15s ease;
}

.surface-info-panel-tab:hover {
    background: var(--button-hover);
    width: 46px;
}

.surface-info-panel.collapsed {
    width: 0;
    box-shadow: none;
    border-right: none;
}

.surface-info-panel.collapsed .surface-info-panel-content {
    display: none;
}

.surface-info-panel.collapsed .surface-info-panel-tab {
    display: flex;
}

.surface-info-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.surface-info-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.surface-info-panel-title i {
    font-size: 20px;
    color: var(--primary);
}

.surface-info-panel-close {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.surface-info-panel-close:hover {
    background: var(--button-hover);
    color: var(--text-color);
}

.surface-info-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.surface-info-section {
    margin-bottom: 16px;
}

.surface-info-intro {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.surface-info-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.surface-info-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.surface-info-checkbox:hover {
    background: var(--button-hover);
    border-color: var(--primary);
}

.surface-info-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.surface-info-checkbox span {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.surface-info-checkbox i {
    font-size: 16px;
    color: var(--text-secondary);
}

.surface-count-badge {
    background: var(--primary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: auto;
    min-width: 18px;
    text-align: center;
}

.surface-count-badge.zero {
    background: var(--text-secondary);
    opacity: 0.6;
}

.surface-info-search-btn {
    width: 100%;
    margin-top: 8px;
}

.surface-info-loading,
.surface-info-no-route {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    gap: 12px;
}

.surface-info-loading .progress-spinner {
    width: 64px;
    height: 64px;
}

.surface-info-no-route i {
    font-size: 32px;
    opacity: 0.5;
}

.surface-info-panel-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.surface-info-panel-footer .ps-btn {
    flex: 1;
}

/* Surface Info Results */
.surface-info-summary {
    margin-bottom: 16px;
}

.surface-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.surface-stat {
    flex: 1;
    min-width: 80px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    text-align: center;
}

.surface-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary);
    display: block;
}

.surface-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    display: block;
    margin-top: 4px;
}

.surface-display-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.surface-type-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.surface-type-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    color: var(--text-color);
    text-align: left;
}

.surface-type-btn:hover {
    background: var(--button-hover);
    border-color: var(--primary);
}

.surface-type-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.surface-type-btn i {
    font-size: 16px;
}

/* Surface Legend (map control) */
.surface-legend {
    background: var(--bg-color);
    padding: 12px;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    max-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 50px;
    margin-right: 50px;
    z-index: 1001; /* Above zoom controls (z-index: 1000) */
}

.surface-legend-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.surface-legend-header i {
    color: var(--primary);
}

.surface-legend-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.surface-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.surface-legend-color {
    width: 16px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.surface-legend-label {
    flex: 1;
    color: var(--text-color);
}

.surface-legend-count {
    color: var(--text-secondary);
    font-size: 11px;
}

/* Surface Popup */
.surface-popup {
    min-width: 180px;
}

.surface-popup-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 13px;
}

.surface-popup-row span:first-child {
    color: var(--text-secondary);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .surface-info-panel {
        width: 100%;
        height: auto;
        bottom: 0;
    }

    .surface-info-panel-close {
        padding: 12px;
    }
}

/* Climb Database Modal Styles */
.climb-db-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.climb-db-search {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.climb-db-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.climb-db-search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-color);
    font-size: 14px;
}

.climb-db-filters {
    display: flex;
    gap: 8px;
}

.climb-db-filters select {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-color);
    font-size: 14px;
    cursor: pointer;
}

.climb-db-stats {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* ============================================ */
/* Bulk POI Editor                              */
/* ============================================ */

.bulk-editor-container {
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
}

.bulk-editor-body {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.bulk-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.bulk-editor-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 300px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-color, #fff);
}

.bulk-editor-search input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    width: 100%;
    color: var(--text-color);
}

.bulk-editor-search i {
    color: var(--text-secondary);
    font-size: 13px;
}

.bulk-editor-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.bulk-editor-table-wrapper {
    overflow: auto;
    flex: 1;
}

.bulk-editor-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    gap: 12px;
}

.bulk-editor-empty i {
    font-size: 48px;
    opacity: 0.3;
}

.bulk-editor-count {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: 8px;
}

/* Route sections for multi-route */
.bulk-editor-route-section {
    margin-bottom: 4px;
}

.bulk-editor-route-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-hover, #f5f5f5);
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1;
}

.bulk-editor-route-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bulk-editor-route-count {
    margin-left: auto;
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 12px;
}

/* Table */
.bulk-editor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.bulk-editor-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-color, #fff);
}

.bulk-editor-route-section .bulk-editor-table thead {
    top: 35px;
}

.bulk-editor-table th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    user-select: none;
}

.bulk-editor-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.bulk-editor-row:hover {
    background: var(--bg-hover, #f9f9f9);
}

/* Column widths */
.be-col-fav { width: 32px; text-align: center; }
.be-col-cat { width: 36px; text-align: center; }
.be-col-name { min-width: 180px; }
.be-col-note { min-width: 160px; }
.be-col-dist { width: 100px; text-align: right; white-space: nowrap; }
.be-col-side { width: 50px; text-align: center; }
.be-col-off { width: 80px; text-align: right; white-space: nowrap; }
.be-col-actions { width: 70px; text-align: center; white-space: nowrap; }

/* Input fields */
.be-name-input,
.be-note-input {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    background: transparent;
    color: var(--text-color);
    transition: border-color 0.15s, background 0.15s;
}

.be-name-input:hover,
.be-note-input:hover {
    border-color: var(--border-color);
    background: var(--bg-color, #fff);
}

.be-name-input:focus,
.be-note-input:focus {
    outline: none;
    border-color: var(--primary-green);
    background: var(--bg-color, #fff);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15);
}

.be-note-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
}

.be-note-expanded {
    white-space: pre-wrap;
    min-height: 60px;
}

/* Star button */
.be-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--text-secondary);
    font-size: 14px;
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s;
}

.be-star-btn:hover {
    opacity: 1;
}

.be-star-btn.starred {
    color: #f4b400;
    opacity: 1;
}

/* Action buttons */
.be-locate-btn,
.be-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
}

.be-locate-btn:hover {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.be-delete-btn:hover {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

/* Row delete animation */
.be-row-deleting {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s, transform 0.3s;
}

/* Dark mode */
body.dark-mode .bulk-editor-search {
    background: var(--dark-bg, #2a2a2a);
}

body.dark-mode .bulk-editor-table thead {
    background: var(--dark-bg, #1a1a1a);
}

body.dark-mode .bulk-editor-route-header {
    background: var(--dark-bg-hover, #2a2a2a);
}

body.dark-mode .bulk-editor-row:hover {
    background: var(--dark-bg-hover, #333);
}

body.dark-mode .be-name-input:hover,
body.dark-mode .be-note-input:hover {
    background: var(--dark-bg, #2a2a2a);
}

body.dark-mode .be-name-input:focus,
body.dark-mode .be-note-input:focus {
    background: var(--dark-bg, #2a2a2a);
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .bulk-editor-search {
        background: var(--dark-bg, #2a2a2a);
    }

    body:not(.light-mode) .bulk-editor-table thead {
        background: var(--dark-bg, #1a1a1a);
    }

    body:not(.light-mode) .bulk-editor-route-header {
        background: var(--dark-bg-hover, #2a2a2a);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .bulk-editor-container {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        height: 100vh;
        max-height: 100vh;
    }

    .bulk-editor-body {
        max-height: calc(100vh - 120px);
    }

    .bulk-editor-toolbar {
        flex-wrap: wrap;
    }

    .bulk-editor-search {
        max-width: none;
    }

    .be-col-side,
    .be-col-off {
        display: none;
    }

    .bulk-editor-table th,
    .bulk-editor-table td {
        padding: 6px 6px;
    }
}

.climb-db-table-wrapper {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.climb-db-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.climb-db-table thead {
    position: sticky;
    top: 0;
    background: var(--bg-tertiary);
    z-index: 1;
}

.climb-db-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

.climb-db-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.climb-db-table tbody tr:hover {
    background: var(--button-hover);
}

.climb-db-table .climb-name {
    font-weight: 500;
}

.climb-db-table .climb-country {
    white-space: nowrap;
}

.climb-db-table .climb-source {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
}

.climb-db-table .climb-actions {
    white-space: nowrap;
}

.climb-db-table .climb-actions button {
    padding: 4px 8px;
    margin-right: 4px;
    border: none;
    border-radius: 4px;
    background: var(--primary);
    color: white;
    cursor: pointer;
    font-size: 12px;
}

.climb-db-table .climb-actions button:hover {
    opacity: 0.9;
}

.climb-db-table .climb-actions a {
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text-color);
    text-decoration: none;
    font-size: 12px;
}

.climb-db-table .climb-actions a:hover {
    background: var(--button-hover);
}

.climb-db-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.climb-db-pagination button {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-color);
    cursor: pointer;
}

.climb-db-pagination button:hover:not(:disabled) {
    background: var(--button-hover);
}

.climb-db-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.climb-db-pagination span {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ===== Flyover Animation Styles ===== */

/* Flyover Elevation Container */
.flyover-elevation-container {
    height: 100px;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    position: relative;
    padding: 8px 12px;
}

.flyover-elevation-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Elevation position marker */
.flyover-elevation-marker {
    position: absolute;
    width: 2px;
    background: #ff5722;
    pointer-events: none;
    z-index: 5;
    display: none;
}

/* Controls Overlay */
.flyover-controls-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 100px; /* Above elevation chart */
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
}

/* Settings group (top-left) */
.flyover-settings-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    pointer-events: auto;
    max-width: 200px;
}

.flyover-control-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.flyover-control-item label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
}

.flyover-select {
    flex: 1;
    padding: 4px 24px 4px 8px;
    font-size: 11px;
    color: var(--text-color);
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.flyover-select:focus {
    outline: none;
    border-color: var(--primary-green);
}

.flyover-select-sm {
    min-width: 60px;
}

.flyover-toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-color);
}

.flyover-toggle-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--primary-green);
}

/* Fullscreen button */
.flyover-fullscreen-btn {
    cursor: pointer;
    justify-content: center;
    min-width: auto;
    padding: 8px 12px;
}

.flyover-fullscreen-btn i {
    font-size: 14px;
}

/* Record button */
.flyover-record-btn {
    cursor: pointer;
    justify-content: center;
    min-width: auto;
    padding: 8px 12px;
}

.flyover-record-btn i {
    font-size: 14px;
    color: #ccc;
    transition: color 0.2s ease;
}

.flyover-record-btn:hover i {
    color: #ff4444;
}

.flyover-record-btn.recording {
    background: rgba(255, 68, 68, 0.3);
}

.flyover-record-btn.recording i {
    color: #ff4444;
    animation: pulse-record 1s infinite;
}

@keyframes pulse-record {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Playback Controls (bottom) */
.flyover-playback-controls {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
    padding: 16px 16px 12px 16px;
    pointer-events: auto;
}

/* Progress bar container */
.flyover-progress-container {
    position: relative;
    height: 6px;
    margin-bottom: 12px;
}

.flyover-progress-bar {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.flyover-progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s ease;
}

.flyover-progress-bar::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.flyover-progress-bar::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.flyover-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 6px;
    background: var(--primary-green);
    border-radius: 3px 0 0 3px;
    pointer-events: none;
    z-index: 1;
}

/* Controls row */
.flyover-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Info display */
.flyover-info {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.flyover-info-separator {
    opacity: 0.5;
}

/* Play controls */
.flyover-play-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flyover-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.flyover-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.flyover-btn i {
    font-size: 16px;
}

.flyover-btn-play {
    width: 48px;
    height: 48px;
    background: var(--primary-green);
}

.flyover-btn-play:hover {
    background: #43a047;
}

.flyover-btn-play i {
    font-size: 22px;
}

/* Speed control */
.flyover-speed-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 12px;
    min-width: 100px;
    justify-content: flex-end;
}

.flyover-speed-control label {
    opacity: 0.7;
}

.flyover-speed-control .flyover-select {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.flyover-speed-control .flyover-select option {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Position marker on map */
.flyover-position-marker {
    position: relative;
    width: 24px;
    height: 24px;
}

.flyover-marker-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: var(--primary-green);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.flyover-marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: rgba(76, 175, 80, 0.4);
    border-radius: 50%;
    animation: flyover-pulse 1.5s ease-out infinite;
}

@keyframes flyover-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* POI markers */
.flyover-poi-marker {
    cursor: pointer;
    transition: transform 0.15s ease;
}

.flyover-poi-marker:hover {
    transform: scale(1.15);
}

/* Position popup */
.flyover-position-popup {
    position: absolute;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 20;
    pointer-events: none;
}

.flyover-popup-content {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-color);
}

/* Dark mode adjustments */
body.dark-mode .flyover-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23aaa' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    body:not(.light-mode) .flyover-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23aaa' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    }
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .flyover-settings-group {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: none;
    }

    .flyover-control-item {
        padding: 6px 8px;
    }

    .flyover-controls-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .flyover-info {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    .flyover-speed-control {
        min-width: auto;
    }

    .flyover-elevation-container {
        height: 80px;
    }

    .flyover-controls-overlay {
        bottom: 80px;
    }
}

/* ============================================
   Route Animation (2D) Styles
   ============================================ */

/* Position marker (reuses flyover pulse animation) */
.route-animation-position-marker {
    position: relative;
    width: 24px;
    height: 24px;
}

/* POI markers with progressive reveal animation */
.route-animation-poi-marker {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center bottom;
}

.route-animation-poi-marker.hidden {
    transform: scale(0);
    opacity: 0;
}

.route-animation-poi-marker.visible {
    transform: scale(1);
    opacity: 1;
}

/* Route Animation Recording Tip */
.route-animation-tip {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    max-width: 500px;
    width: calc(100% - 24px);
}

.route-animation-tip-content {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--info-bg, #e3f2fd);
    border: 1px solid var(--info-border, #2196F3);
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.route-animation-tip-content > i {
    font-size: 20px;
    color: var(--info-border, #2196F3);
    flex-shrink: 0;
}

.route-animation-tip-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-color);
}

.route-animation-tip-text strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text-color);
}

.route-animation-tip-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-secondary);
    flex-shrink: 0;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

.route-animation-tip-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-color);
}

body.dark-mode .route-animation-tip-content {
    background: #1a3a4a;
    border-color: #64b5f6;
}

body.dark-mode .route-animation-tip-content > i {
    color: #64b5f6;
}

body.dark-mode .route-animation-tip-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
    .route-animation-tip-content {
        background: #1a3a4a;
        border-color: #64b5f6;
    }

    .route-animation-tip-content > i {
        color: #64b5f6;
    }

    .route-animation-tip-close:hover {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* Ensure Leaflet map container has correct dimensions in modal */
#routeAnimationMapContainer {
    width: 100%;
    height: 100%;
}

#routeAnimationMapContainer .leaflet-container {
    width: 100%;
    height: 100%;
    background: var(--background-color, #f5f5f5);
}

/* ============================================================================
   Onboarding Hints
   ============================================================================ */

.onboarding-hint {
    position: fixed;
    z-index: 10000;
    animation: hintFadeIn 0.3s ease;
}

@keyframes hintFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.onboarding-hint-content {
    background: var(--card-bg);
    border: 2px solid var(--primary-green);
    border-radius: 8px;
    padding: 12px 16px;
    max-width: 240px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    position: relative;
}

.onboarding-hint-content p {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.4;
}

.onboarding-hint-content p:last-of-type {
    margin-bottom: 12px;
}

.onboarding-hint-arrow {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--primary-green);
}

.onboarding-hint-btn {
    background: var(--primary-green);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    width: 100%;
    transition: background 0.2s ease;
}

.onboarding-hint-btn:hover {
    background: var(--dark-green);
}

/* Blue variant for export hint */
.onboarding-hint--blue .onboarding-hint-content {
    border-color: var(--blue-primary);
}

.onboarding-hint--blue .onboarding-hint-arrow {
    border-top-color: var(--blue-primary);
}

.onboarding-hint--blue .onboarding-hint-btn {
    background: var(--blue-primary);
}

.onboarding-hint--blue .onboarding-hint-btn:hover {
    background: var(--blue-light);
}

/* Pulse animation for highlighted element (green) */
.hint-pulse {
    animation: hintPulse 1.5s ease-in-out infinite;
}

@keyframes hintPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
}

/* Blue pulse animation for export button */
.hint-pulse-blue {
    animation: hintPulseBlue 1.5s ease-in-out infinite;
}

@keyframes hintPulseBlue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(25, 118, 210, 0); }
}

/* ============================================================================
   Draft Recovery Prompt
   ============================================================================ */

.draft-recovery-container {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.draft-recovery-container.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.draft-recovery-prompt {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--blue-primary);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 90vw;
}

.draft-recovery-icon {
    font-size: 24px;
    color: var(--blue-primary);
}

.draft-recovery-content {
    flex: 1;
    min-width: 0;
}

.draft-recovery-content strong {
    display: block;
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 2px;
}

.draft-recovery-content p {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.draft-recovery-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .draft-recovery-prompt {
        flex-wrap: wrap;
    }

    .draft-recovery-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }
}

/* ============================================================================
   POI Context Menu
   ============================================================================ */

.poi-context-menu {
    position: fixed;
    z-index: 10010;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    min-width: 180px;
    padding: 6px 0;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.poi-context-menu.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.poi-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.poi-context-menu-item:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.05));
}

.poi-context-menu-item i {
    font-size: 14px;
    width: 16px;
    text-align: center;
    color: var(--text-secondary);
}

.poi-context-menu-item:hover i {
    color: var(--text-color);
}

.poi-context-menu-item--danger {
    color: var(--danger-red, #dc3545);
}

.poi-context-menu-item--danger i {
    color: var(--danger-red, #dc3545);
}

.poi-context-menu-item--danger:hover {
    background: rgba(220, 53, 69, 0.1);
}

.poi-context-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

.poi-context-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    background: var(--surface-hover, rgba(0, 0, 0, 0.03));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poi-context-menu-header i {
    color: var(--primary-green);
    font-size: 14px;
}

/* Dark mode adjustments */
body.dark-mode .poi-context-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
    .poi-context-menu-item:hover {
        background: rgba(255, 255, 255, 0.08);
    }
}

/* ===== POI Icon Picker ===== */
.poi-icon-picker {
    min-width: 280px;
}

.poi-icon-picker-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text-color);
}

.poi-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.poi-icon-option {
    width: 44px;
    height: 44px;
    font-size: 22px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg, #fff);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.poi-icon-option:hover {
    background: var(--hover-bg, #f0f0f0);
    border-color: var(--primary-green);
    transform: scale(1.1);
}

.poi-icon-picker-custom {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.poi-icon-picker-custom input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 16px;
    background: var(--input-bg, #fff);
    color: var(--text-color);
}

.poi-icon-picker-custom button {
    padding: 8px 16px;
    background: var(--primary-green);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.poi-icon-picker-custom button:hover {
    background: var(--dark-green);
}

/* POI Marker Moving State */
.poi-marker-moving {
    animation: poi-marker-pulse 1s ease-in-out infinite;
    filter: drop-shadow(0 0 12px #ff9800) drop-shadow(0 0 20px #ff9800) !important;
    z-index: 10000 !important;
}

@keyframes poi-marker-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px var(--marker-color, #ff9800)) drop-shadow(0 0 20px var(--marker-color, #ff9800)); }
    50% { transform: scale(1.2); filter: drop-shadow(0 0 16px var(--marker-color, #ff9800)) drop-shadow(0 0 28px var(--marker-color, #ff9800)); }
}

/* POI Move Mode - crosshair cursor on map */
.poi-move-mode {
    cursor: crosshair !important;
}

.poi-move-mode * {
    cursor: crosshair !important;
}

/* ===== Map Context Menu ===== */
.map-context-menu {
    position: fixed;
    z-index: 10010;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    min-width: 220px;
    padding: 6px 0;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.map-context-menu.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.map-context-menu-coords {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: monospace;
}

.map-context-menu-coords i {
    color: var(--primary-green);
}

.map-context-menu-address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 12px 8px 12px;
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.3;
}

.map-context-menu-address i {
    color: var(--text-tertiary);
    flex-shrink: 0;
    margin-top: 2px;
}

.map-context-menu-address-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.map-context-menu-address-text {
    word-break: break-word;
    max-width: 200px;
}

.map-context-menu-address-details {
    font-size: 10px;
    color: var(--text-tertiary);
    opacity: 0.85;
    display: none;
}

.map-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s;
}

.map-context-menu-item:hover {
    background: var(--surface-hover, rgba(0, 0, 0, 0.05));
}

.map-context-menu-item:disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
}

.map-context-menu-item:disabled:hover {
    background: transparent;
}

.map-context-menu-item i,
.map-context-menu-item svg {
    font-size: 14px;
    color: var(--text-secondary);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.map-context-menu-item span:first-of-type {
    flex: 1;
}

.map-context-menu-value {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 50px;
    text-align: right;
}

.map-context-menu-value.loading {
    color: var(--primary-green);
}

.map-context-menu-value.success {
    color: var(--primary-green);
    font-weight: 600;
}

.map-context-menu-value.error {
    color: var(--danger-red);
}

.map-context-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

.map-context-menu-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-green);
    background: var(--surface-hover, rgba(76, 175, 80, 0.08));
}

.map-context-menu-header i {
    font-size: 12px;
}

.map-context-menu-copy-btn {
    margin-left: auto;
    padding: 4px 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
}

.map-context-menu-copy-btn:hover {
    background: var(--surface-hover, rgba(0, 0, 0, 0.08));
    color: var(--primary-green);
}

.map-context-menu-copy-btn i {
    font-size: 12px;
}

.map-context-menu-zoom-row {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
}

.map-context-menu-zoom-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    background: var(--input-bg, #fff);
    color: var(--text-color);
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.15s;
}

.map-context-menu-zoom-btn:hover {
    background: var(--surface-hover, rgba(0, 0, 0, 0.05));
    border-color: var(--primary-green);
    color: var(--primary-green);
}

.map-context-menu-zoom-btn i {
    font-size: 14px;
}

/* Dark mode for map context menu */
body.dark-mode .map-context-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .map-context-menu-zoom-btn {
    background: var(--card-bg);
}

body.dark-mode .map-context-menu-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ============================================
   Live Location Tracking Styles
   ============================================ */

/* Pulsing position marker container */
.live-position-marker {
    background: transparent;
    border: none;
}

.live-position-marker-outer {
    position: relative;
    width: 24px;
    height: 24px;
}

/* Inner dot (solid blue) */
.live-position-marker-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    background: var(--tracking-color);
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(var(--tracking-color-rgb), 0.4);
    z-index: 2;
}

/* Pulsing ring animation */
.live-position-marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    background: rgba(var(--tracking-color-rgb), 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: live-pulse 1.5s ease-out infinite;
    z-index: 1;
}

@keyframes live-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Direction arrow (shown when moving) */
.live-position-marker-arrow {
    position: absolute;
    top: -8px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid var(--tracking-color);
    transform-origin: center 20px;
    margin-left: -6px;
    z-index: 3;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Footer tracking controls container */
.footer-tracking-container {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    margin-left: 8px;
    border-left: 1px solid var(--border-color);
}

/* Tracking indicator with pulsing dot */
.footer-tracking-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 8px;
    background: rgba(var(--tracking-color-rgb), 0.1);
    border-radius: 12px;
}

.footer-tracking-indicator .tracking-pulse {
    width: 8px;
    height: 8px;
    background: var(--tracking-color);
    border-radius: 50%;
    animation: tracking-blink 1s ease-in-out infinite;
}

@keyframes tracking-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* Tracking control buttons - grouped together */
.footer-tracking-buttons {
    display: flex;
    align-items: center;
}

.footer-tracking-buttons button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    background: var(--button-bg);
    color: var(--text-color);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: -1px;
    position: relative;
}

.footer-tracking-buttons button:first-child {
    border-radius: 6px 0 0 6px;
    margin-left: 0;
}

.footer-tracking-buttons button:last-child {
    border-radius: 0 6px 6px 0;
}

.footer-tracking-buttons button:hover {
    background: var(--button-hover);
    border-color: #2196f3;
    color: #2196f3;
    z-index: 1;
}

.footer-tracking-buttons button.active {
    background: rgba(33, 150, 243, 0.15);
    border-color: #2196f3;
    color: #2196f3;
    z-index: 1;
}

.footer-tracking-buttons button i {
    font-size: 14px;
}

/* Live tracking checkbox option on landing page */
.live-tracking-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
}

.live-tracking-option label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-color);
    cursor: pointer;
}

.live-tracking-option label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #2196f3;
}

.live-tracking-option small {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-left: 24px;
}

.live-tracking-option small i {
    color: #ff9800;
}

/* Hide tracking option if geolocation not supported */
.live-tracking-option.u-hidden {
    display: none;
}

/* Dark mode adjustments */
body.dark-mode .footer-tracking-indicator {
    background: rgba(33, 150, 243, 0.2);
}

body.dark-mode .footer-tracking-buttons button.active {
    background: rgba(33, 150, 243, 0.25);
}

/* Mobile responsive - tracking controls on separate line above footer */
@media (max-width: 768px) {
    .footer-stats {
        position: relative;
    }

    .footer-tracking-container {
        position: absolute;
        top: -44px;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 12px;
        margin-left: 0;
        gap: 10px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        z-index: 100;
    }

    .footer-tracking-indicator {
        padding: 3px 8px;
        font-size: 11px;
        background: rgba(33, 150, 243, 0.15);
    }

    /* Show "Tracking" text on mobile in floating bar */
    .footer-tracking-indicator span:last-child {
        display: inline;
    }

    .footer-tracking-buttons button {
        width: 30px;
        height: 30px;
    }

    .footer-tracking-buttons button i {
        font-size: 13px;
    }
}

/* ===== Street Photos Modal ===== */
.street-photos-loading {
    text-align: center;
    padding: 40px 20px;
}

.street-photos-loading .spinner-border {
    width: 3rem;
    height: 3rem;
}

.street-photos-error {
    text-align: center;
    padding: 20px;
}

.street-photos-info {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.street-photos-info p {
    font-size: 14px;
    margin-bottom: 5px;
}

.street-photos-info i {
    width: 16px;
    margin-right: 6px;
    color: var(--text-secondary);
}

.street-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
}

.street-photo-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--card-bg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.street-photo-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.street-photo-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
}

.street-photo-info {
    padding: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.street-photo-direction {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.street-photo-direction i {
    color: var(--primary-green);
}

.street-photo-distance {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    color: var(--text-secondary);
}

.street-photo-distance i {
    color: var(--primary-green);
}

.street-photo-coordinates {
    font-family: monospace;
    margin-top: 4px;
    cursor: pointer;
    color: var(--accent-color);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.street-photo-coordinates:hover {
    color: var(--dark-green);
}

.street-photo-coordinates i {
    font-size: 10px;
}

.street-photo-timestamp {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.street-photo-timestamp i {
    font-size: 10px;
}

.street-photo-description {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .street-photo-item:hover {
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
    }
}

body.dark-mode .street-photo-item:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* Temporary photo marker styles */
.temp-photo-marker {
    background: var(--accent-color);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
}

.temp-photo-marker:hover {
    background: var(--dark-green);
    transform: scale(1.1);
}

/* Photo popup styles */
.photo-popup-content {
    min-width: 250px;
}

.photo-popup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.photo-popup-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
    border-radius: 2px;
    transition: all 0.2s;
}

.photo-popup-close:hover {
    background: var(--button-hover);
    color: var(--text-color);
}

.photo-popup-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}

.photo-popup-title {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 14px;
}

.photo-popup-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.3;
}

.photo-popup-coordinates {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-family: monospace;
}

.photo-popup-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.photo-popup .ps-btn--compact {
    padding: 4px 8px;
    font-size: 11px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .street-photos-grid {
        grid-template-columns: 1fr;
        max-height: 300px;
    }

    .street-photo-image {
        height: 180px;
    }
}

/* ============================================================================
   Location Explorer Sidebar
   ============================================================================ */

/* Main container - slides in from left */
.location-explorer {
    position: fixed;
    top: 36px;
    left: 0;
    bottom: 0;
    width: 400px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    box-shadow: 2px 0 10px var(--shadow);
    z-index: 1002;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.location-explorer.visible {
    transform: translateX(0);
}

/* Collapsed tab button */
.location-explorer__tab {
    display: none;
    position: absolute;
    top: 70px; /* First tab slot */
    left: 0;
    width: 40px;
    height: 44px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 0 8px var(--shadow);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary-green);
    transition: all 0.2s ease;
}

.location-explorer__tab:hover {
    background: var(--button-hover);
    width: 46px;
    box-shadow: 3px 0 12px var(--shadow);
}

.location-explorer__tab i {
    color: #ffffff;
}

/* Collapsed state */
.location-explorer.collapsed {
    width: 0;
    box-shadow: none;
    border-right: none;
}

.location-explorer.collapsed .location-explorer__container {
    display: none;
}

.location-explorer.collapsed .location-explorer__tab {
    display: flex;
}

/* Main container content */
.location-explorer__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Header section */
.location-explorer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.location-explorer__header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.location-explorer__header-title i {
    color: var(--primary-green);
    font-size: 20px;
}

.location-explorer__header-title h3 {
    margin: 0;
    font-size: 18px;
}

.location-explorer__header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-explorer__close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-explorer__close:hover {
    background: var(--button-hover);
    color: var(--text-color);
}

/* Toggle markers button - hidden on desktop, shown on mobile */
.location-explorer__toggle-markers {
    display: none;
}

/* Tab navigation */
.location-explorer__nav {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.location-explorer__nav-item {
    flex: 1;
    background: none;
    border: none;
    padding: 14px 16px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    position: relative;
}

.location-explorer__nav-item:hover {
    color: var(--text-color);
    background: var(--button-hover);
}

.location-explorer__nav-item.active {
    color: var(--primary-green);
    border-bottom-color: var(--primary-green);
    background: var(--surface-alt);
    font-weight: 600;
}

.location-explorer__nav-item i {
    font-size: 16px;
}

/* Location display */
.location-explorer__location {
    padding: 12px 16px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.location-explorer__location i {
    color: var(--primary-green);
    font-size: 14px;
}

/* Content area - scrollable */
.location-explorer__content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Tab panes */
.location-explorer__tab-pane {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.location-explorer__tab-pane.active {
    display: flex;
}

/* Loading state */
.location-explorer__loading {
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.location-explorer__loading .spinner-border {
    width: 48px;
    height: 48px;
    color: var(--primary-green);
}

.location-explorer__loading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Error state */
.location-explorer__error {
    padding: 32px 24px;
    text-align: center;
}

.location-explorer__error .alert {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

/* Info section */
.location-explorer__info {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.location-explorer__info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.location-explorer__info i {
    margin-right: 6px;
    color: var(--primary-green);
}

/* Info header with route search button */
.location-explorer__info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Route search section */
.location-explorer__route-search {
    margin-top: 12px;
}

.location-explorer__route-search .ps-btn {
    width: 100%;
    justify-content: center;
}

/* Search options section (unified wider search + route search) */
.location-explorer__search-options {
    padding: 16px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    background: var(--surface-alt);
}

.location-explorer__search-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.location-explorer__search-buttons .ps-btn {
    min-width: 140px;
    flex: 0 0 auto;
}

/* Route search section (legacy - can be removed if not used elsewhere) */
.location-explorer__route-search-section {
    border-bottom: 1px solid var(--border-color);
}

.location-explorer__route-search-section .ps-btn {
    width: 100%;
    max-width: 200px;
}

/* Route indicators for Wikipedia articles */
.location-explorer__article-compact.has-route-indicator {
    position: relative;
    padding-left: 16px;
}

.location-explorer__route-indicator {
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 2px;
}

/* Photos content */
.location-explorer__photos {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.location-explorer__photos-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    flex: 1;
}

/* Photo list item */
.location-explorer__photo-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    cursor: pointer;
}

.location-explorer__photo-item:hover,
.location-explorer__photo-item.highlighted {
    background: var(--button-hover);
    border-color: var(--primary-green);
    box-shadow: 0 2px 8px var(--shadow);
}

.location-explorer__photo-thumbnail {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-alt);
}

.location-explorer__photo-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.location-explorer__photo-thumbnail:hover img {
    transform: scale(1.08);
}

.location-explorer__photo-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.location-explorer__photo-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.location-explorer__photo-description {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.location-explorer__photo-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-tertiary);
    flex-wrap: wrap;
}

.location-explorer__photo-meta i {
    margin-right: 3px;
}

.location-explorer__photo-distance {
    color: var(--primary-green);
    font-weight: 500;
}

.location-explorer__photo-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

/* Articles content */
.location-explorer__articles {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.location-explorer__articles-list {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 0;
    flex: 1;
}

/* Article list item */
.location-explorer__article-item {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.location-explorer__article-item:last-child {
    border-bottom: none;
}

.location-explorer__article-item:hover {
    background: var(--surface-alt);
}

.location-explorer__article-item.highlighted {
    background: var(--primary-green-light);
    border-left: 4px solid var(--primary-green);
    padding-left: 12px;
}

.location-explorer__article-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.location-explorer__article-thumbnail {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-explorer__article-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-explorer__article-thumbnail .placeholder {
    color: var(--text-secondary);
    font-size: 26px;
}

.location-explorer__article-content {
    flex: 1;
    min-width: 0;
}

.location-explorer__article-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 6px 0;
    line-height: 1.3;
    word-wrap: break-word;
}

.location-explorer__article-extract {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.location-explorer__article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.location-explorer__article-distance {
    display: flex;
    align-items: center;
    gap: 4px;
}

.location-explorer__article-distance i {
    color: var(--primary-green);
}

.location-explorer__article-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* Compact article layout */
.location-explorer__article-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.location-explorer__article-compact:last-child {
    border-bottom: none;
}

.location-explorer__article-compact:hover {
    background: var(--surface-alt);
}

.location-explorer__article-compact.highlighted {
    background: var(--primary-green-light);
    border-left: 3px solid var(--primary-green);
    padding-left: 9px;
}

.location-explorer__article-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0645ad;
    color: white;
    font-size: 12px;
    flex-shrink: 0;
}

.location-explorer__article-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.location-explorer__article-compact .location-explorer__article-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    margin: 0;
    line-height: 1.3;
    word-wrap: break-word;
}

.location-explorer__article-compact .location-explorer__article-distance {
    font-size: 11px;
    color: var(--text-secondary);
}

.location-explorer__article-compact .location-explorer__article-actions {
    display: flex;
    gap: 4px;
    margin: 0;
}

.location-explorer__article-compact .ps-btn--icon {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wider search sections */
.location-explorer__wider-search {
    padding: 24px 16px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    background: var(--surface-alt);
}

.location-explorer__wider-search p {
    margin: 0 0 12px 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.location-explorer__wider-search i {
    margin-right: 6px;
}

/* Footer actions */
.location-explorer__footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.location-explorer__footer .ps-btn {
    width: 100%;
}

/* Map markers */

/* Photo marker */
.location-explorer-photo-marker {
    background: var(--primary-green);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.location-explorer-photo-marker:hover,
.location-explorer-photo-marker.highlighted {
    transform: scale(1.15);
    background: var(--dark-green);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

/* Article marker */
.location-explorer-article-marker {
    background: #0645ad;
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
    cursor: pointer;
}

.location-explorer-article-marker:hover {
    transform: scale(1.15);
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.location-explorer-article-marker.highlighted {
    background: var(--warning-color);
    transform: scale(1.2);
    z-index: 1001;
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.6);
}

/* Marker popups */
.location-explorer-marker-popup {
    min-width: 220px;
    max-width: 280px;
}

.location-explorer-marker-popup__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-color);
    font-size: 14px;
}

.location-explorer-marker-popup__header i {
    color: var(--primary-green);
    font-size: 16px;
}

.location-explorer-marker-popup__image {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.location-explorer-marker-popup__image:hover {
    opacity: 0.9;
}

.location-explorer-marker-popup__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 6px;
    line-height: 1.3;
}

.location-explorer-marker-popup__description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.4;
}

.location-explorer-marker-popup__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .location-explorer {
        width: 100%;
        max-width: 400px;
    }

    /* Show toggle markers button on mobile */
    .location-explorer__toggle-markers {
        display: inline-flex;
    }

    .location-explorer__photo-item {
        flex-direction: column;
    }

    .location-explorer__photo-thumbnail {
        width: 100%;
        height: 200px;
    }

    .location-explorer__photo-actions {
        flex-direction: column;
    }

    .location-explorer__photo-actions .ps-btn {
        width: 100%;
    }

    /* Keep article action buttons horizontal but compact */
    .location-explorer__article-actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .location-explorer__article-actions .ps-btn {
        flex: 1;
        min-width: 0;
        padding: 6px 8px;
        font-size: 12px;
    }

    .location-explorer__article-actions .ps-btn i {
        font-size: 14px;
    }
}

/* Dark mode support */
body.dark-mode .location-explorer {
    background: var(--sidebar-bg);
    border-right-color: var(--border-color);
}

body.dark-mode .location-explorer__tab {
    background: var(--bg-color);
    border-color: var(--border-color);
}

body.dark-mode .location-explorer-photo-marker,
body.dark-mode .location-explorer-article-marker {
    border-color: var(--bg-color);
}

@media (prefers-color-scheme: dark) {
    .location-explorer {
        background: var(--sidebar-bg);
        border-right-color: var(--border-color);
    }

    .location-explorer__tab {
        background: var(--bg-color);
        border-color: var(--border-color);
    }

    .location-explorer-photo-marker,
    .location-explorer-article-marker {
        border-color: var(--bg-color);
    }
}

/* ==========================================================================
   HELP MODE
   ========================================================================== */

/* Help Mode Icons - small question marks next to UI elements */
.help-mode-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 6px;
    background: #ff9800;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.6), 0 0 16px rgba(255, 152, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    vertical-align: middle;
    flex-shrink: 0;
}

.help-mode-icon i {
    font-size: 11px;
}

.help-mode-icon:hover {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(255, 152, 0, 1), 0 0 24px rgba(255, 152, 0, 0.6);
}

.help-mode-icon:focus {
    outline: 2px solid #ff9800;
    outline-offset: 2px;
}

/* Show icons when help mode is active */
body.help-mode-active .help-mode-icon {
    display: inline-flex;
    animation: helpIconAppear 0.3s ease-out;
}

@keyframes helpIconAppear {
    from {
        opacity: 0;
        transform: scale(0.5);
        box-shadow: 0 0 0 rgba(255, 152, 0, 0);
    }
    to {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 8px rgba(255, 152, 0, 0.6), 0 0 16px rgba(255, 152, 0, 0.3);
    }
}

/* Help Mode Floating Indicator */
.help-mode-indicator {
    position: fixed;
    bottom: 70px;
    right: 20px;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #ff9800;
    color: white;
    border-radius: 24px;
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.4), 0 0 20px rgba(255, 152, 0, 0.3);
    z-index: 10001;
    font-size: 14px;
    font-weight: 500;
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.help-mode-indicator-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.help-mode-indicator-content > i {
    font-size: 20px;
}

.help-mode-indicator-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.help-mode-indicator-text span {
    font-weight: 600;
}

.help-mode-indicator-text small {
    font-size: 11px;
    opacity: 0.9;
    font-weight: 400;
}

.help-mode-indicator button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 4px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.help-mode-indicator button:hover {
    background: rgba(255, 255, 255, 0.3);
}

.help-mode-indicator button i {
    font-size: 14px;
}

/* Show indicator when help mode is active */
body.help-mode-active .help-mode-indicator {
    display: flex;
}

/* Help mode checkmark in menu */
.help-mode-checkmark {
    margin-left: auto;
    color: #ff9800;
    font-weight: bold;
}

/* Dark mode adjustments */
body.dark-mode .help-mode-icon {
    background: #ffb74d;
    box-shadow: 0 0 8px rgba(255, 183, 77, 0.6), 0 0 16px rgba(255, 183, 77, 0.3);
}

body.dark-mode .help-mode-indicator {
    background: #ffb74d;
    color: #1a1a1a;
    box-shadow: 0 4px 16px rgba(255, 183, 77, 0.4), 0 0 20px rgba(255, 183, 77, 0.3);
}

/* Help icons inside footer buttons - need to contrast with button backgrounds */
.footer-tools-btn .help-mode-icon,
.footer-download-btn .help-mode-icon,
.footer-info-btn .help-mode-icon {
    background: white;
    color: #ff9800;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    box-shadow: 0 0 6px rgba(255, 152, 0, 0.5);
}

.footer-tools-btn .help-mode-icon i,
.footer-download-btn .help-mode-icon i,
.footer-info-btn .help-mode-icon i {
    font-size: 10px;
}

.footer-tools-btn .help-mode-icon:hover,
.footer-download-btn .help-mode-icon:hover,
.footer-info-btn .help-mode-icon:hover {
    background: #fff3e0;
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Help icons inside modal titles */
.ps-modal__title .help-mode-icon {
    margin-left: 8px;
}

/* Help icons inside tools menu items */
.footer-tools-option-title .help-mode-icon,
.footer-download-option-title .help-mode-icon {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: middle;
}

.footer-tools-option-title .help-mode-icon i,
.footer-download-option-title .help-mode-icon i {
    font-size: 9px;
}

/* Help icons next to Leaflet controls */
.leaflet-control-layers + .help-mode-icon,
.leaflet-control-zoom + .help-mode-icon {
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
}

/* Footer Help Toggle Button */
.footer-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-right: 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 152, 0, 0.5);
    border-radius: 50%;
    color: #ff9800;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.footer-help-btn:hover {
    background: rgba(255, 152, 0, 0.2);
    border-color: #ff9800;
    box-shadow: 0 0 12px rgba(255, 152, 0, 0.5);
    transform: translateY(-1px);
}

/* Active state when help mode is on */
body.help-mode-active .footer-help-btn {
    background: #ff9800;
    color: white;
    border-color: #ff9800;
    box-shadow: 0 0 16px rgba(255, 152, 0, 0.6), 0 0 24px rgba(255, 152, 0, 0.3);
    animation: helpBtnPulse 2s ease-in-out infinite;
}

@keyframes helpBtnPulse {
    0%, 100% {
        box-shadow: 0 0 16px rgba(255, 152, 0, 0.6), 0 0 24px rgba(255, 152, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 152, 0, 0.8), 0 0 32px rgba(255, 152, 0, 0.5);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .help-mode-indicator {
        bottom: 80px;
        right: 10px;
        left: 10px;
        justify-content: center;
        border-radius: 20px;
    }

    .help-mode-icon {
        width: 22px;
        height: 22px;
        font-size: 14px;
    }

    .help-mode-icon i {
        font-size: 13px;
    }

    /* Hide help icons in footer buttons on mobile - use floating indicator instead */
    .footer-tools-btn .help-mode-icon,
    .footer-download-btn .help-mode-icon,
    .footer-info-btn .help-mode-icon {
        display: none !important;
    }

    /* Smaller help toggle button on mobile */
    .footer-help-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
        margin-right: 6px;
    }
}

/* ============================================================================
   HISTORICAL WEATHER MODAL
   ============================================================================ */

.weather-section {
    margin-bottom: 20px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.weather-section-title {
    margin: 0;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    background: var(--card-bg, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
}

.weather-section-title i {
    color: #4caf50;
    font-size: 15px;
}

.weather-summary {
    padding: 10px 14px;
    background: var(--card-bg, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.weather-summary-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.weather-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 80px;
}

.weather-summary-label {
    font-size: 11px;
    color: var(--text-secondary, #999);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.weather-summary-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}

.weather-table-wrapper {
    overflow-x: auto;
}

.weather-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.weather-table th {
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary, #999);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    white-space: nowrap;
}

.weather-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    color: var(--text-color);
    white-space: nowrap;
}

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

.weather-table tr:hover td {
    background: rgba(76, 175, 80, 0.05);
}

.weather-temp-high {
    color: #e65100;
    font-weight: 500;
}

body.dark-mode .weather-temp-high {
    color: #ff8a65;
}

.weather-temp-low {
    color: #1565c0;
    font-weight: 500;
}

body.dark-mode .weather-temp-low {
    color: #64b5f6;
}

.weather-temp-sep {
    color: var(--text-secondary, #999);
    margin: 0 2px;
    font-size: 11px;
}

.weather-wind-gust {
    font-size: 11px;
    color: var(--text-secondary, #999);
}

.weather-desc-text {
    font-size: 12px;
}

@media (max-width: 600px) {
    .weather-summary-grid {
        gap: 10px;
    }

    .weather-summary-item {
        min-width: 60px;
    }

    .weather-table {
        font-size: 12px;
    }

    .weather-table th,
    .weather-table td {
        padding: 6px 8px;
    }

    .weather-desc-text {
        display: none;
    }
}