/* =====================================================
   core.css — UI shared by mapbox.html and leaflet.html
   Auto-extracted: rules byte-identical across both maps.
   Map-specific rules remain in mapbox.css / leaflet.css.
   ===================================================== */
        #map {
            width: 100%;
            height: 100%;
        }

        /* Combined map controls — nav + tile switcher */
        #map-controls {
            position: absolute;
            bottom: 50px;
            left: 10px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 0;
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: 6px;
            padding: 3px;
            transition: background 0.2s, border-color 0.2s;
        }

        .controls-row {
            display: flex;
            gap: 2px;
            padding: 2px 0;
        }

        #tool-buttons .tile-btn {
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: 6px;
            padding: 4px 10px;
            transition: background 0.2s, border-color 0.2s;
        }

        body[data-theme="light"] #tool-buttons .tile-btn {
            background: var(--panel-bg-light);
            border-color: rgba(0, 0, 0, 0.10);
        }

        .nav-btn, .tile-btn {
            padding: 4px 10px;
            font-size: 11px;
            font-family: inherit;
            font-weight: 500;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background: transparent;
            color: var(--text-muted);
            text-decoration: none;
            transition: background 0.15s, color 0.15s;
            line-height: 1.6;
        }

        .nav-btn:hover, .tile-btn:hover {
            color: var(--text);
            background: var(--panel-border-muted);
        }

        .nav-btn.active, .tile-btn.active {
            background: rgba(99, 99, 160, 0.4);
            color: var(--text);
        }

        #legend {
            background: var(--panel-bg);
            color: var(--text);
            padding: 10px 14px;
            border-radius: 6px;
            font-size: 13px;
            z-index: 1000;
            border: 1px solid var(--panel-border);
            line-height: 1.8;
            transition: background 0.2s, color 0.2s, border-color 0.2s;
        }

        /* Light mode overrides */
        body[data-theme="light"] #status {
            background: var(--panel-bg-light);
            color: var(--text-dim);
            border-color: rgba(0, 0, 0, 0.10);
        }

        body[data-theme="light"] #map-controls {
            background: var(--panel-bg-light);
            border-color: rgba(0, 0, 0, 0.10);
        }

        body[data-theme="light"] .nav-btn,
        body[data-theme="light"] .tile-btn {
            color: var(--text-dim);
        }

        body[data-theme="light"] .nav-btn:hover,
        body[data-theme="light"] .tile-btn:hover {
            color: var(--text-on-light);
            background: rgba(0, 0, 0, 0.04);
        }

        body[data-theme="light"] .nav-btn.active,
        body[data-theme="light"] .tile-btn.active {
            background: rgba(0, 0, 0, 0.08);
            color: var(--text-on-light);
        }

        body[data-theme="light"] #legend {
            background: var(--panel-bg-light);
            color: var(--text-on-light);
            border-color: rgba(0, 0, 0, 0.10);
        }

        /* =====================================================
           POPUP CONTENT — dark default, light override
        ===================================================== */

        .vehicle-popup {
            font-size: 13px;
            line-height: 1.6;
            color: var(--text);
        }

        .popup-header {
            padding-bottom: 5px;
            margin-bottom: 6px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.25);
        }

        .vehicle-popup strong {
            font-size: 14px;
            color: var(--accent);
            display: block;
        }

        .popup-footer {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-top: 8px;
            padding-top: 5px;
            border-top: 1px solid rgba(148, 163, 184, 0.25);
            font-size: 11px;
            color: #6b7280;
        }

        .popup-footer .footer-type {
            font-style: italic;
        }

        .popup-footer .footer-time {
            margin-left: auto;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .vehicle-popup .data-row {
            color: var(--text-muted);
        }

        .vehicle-popup .data-row span {
            color: var(--text);
        }

        /* MMSI / plate links match the popup title's theme-aware accent so they
           read cleanly in dark mode instead of the default browser blue. */
        .vehicle-popup .data-row a {
            color: var(--accent);
        }

        body[data-theme="light"] .vehicle-popup {
            color: var(--text-on-light);
        }

        body[data-theme="light"] .vehicle-popup strong {
            color: #1d4ed8;
        }

        body[data-theme="light"] .popup-header {
            border-bottom-color: rgba(100, 116, 139, 0.3);
        }

        body[data-theme="light"] .popup-footer {
            color: var(--text-muted);
            border-top-color: rgba(100, 116, 139, 0.3);
        }

        body[data-theme="light"] .vehicle-popup .data-row {
            color: var(--text-dim);
        }

        body[data-theme="light"] .vehicle-popup .data-row span {
            color: var(--text-on-light);
        }

        body[data-theme="light"] .vehicle-popup .data-row a {
            color: #1d4ed8;
        }

        /* Tracked / reference section */
        .vehicle-popup .popup-reference {
            margin-top: 8px;
            padding-top: 6px;
            border-top: 1px solid rgba(34, 211, 238, 0.35);
        }
        .vehicle-popup .vessel-profile {
            margin-top: 6px;
        }

        /* Next stop prediction in popup */
        .popup-next-stop {
            margin-top: 6px;
            padding: 5px 8px;
            border-radius: 4px;
            background: rgba(99, 99, 160, 0.1);
            border-left: 3px solid #8ab4f8;
            font-size: 11px;
            line-height: 1.6;
        }

        .next-stop-label {
            color: var(--text-dim);
            font-weight: 500;
        }

        .next-stop-name {
            display: block;
            color: var(--text);
            font-weight: 600;
        }

        .next-stop-time {
            display: inline-block;
            color: var(--text-muted);
            margin-right: 8px;
        }

        .next-stop-delay {
            display: inline-block;
            font-weight: 600;
            font-size: 10px;
            padding: 1px 5px;
            border-radius: 3px;
        }

        .delay-on-time {
            color: #4ade80;
            background: rgba(74, 222, 128, 0.15);
        }

        .delay-early {
            color: #4ade80;
            background: rgba(74, 222, 128, 0.15);
        }

        .delay-moderate {
            color: #fbbf24;
            background: rgba(251, 191, 36, 0.15);
        }

        .delay-severe {
            color: #f87171;
            background: rgba(248, 113, 113, 0.15);
        }

        /* Route progress bar in popup */
        .popup-progress {
            margin-top: 6px;
            padding: 5px 8px;
            border-radius: 4px;
            background: rgba(99, 99, 160, 0.1);
            border-left: 3px solid #4ade80;
            font-size: 11px;
            line-height: 1.6;
        }

        .progress-label {
            color: var(--text-dim);
            font-weight: 500;
        }

        .progress-track {
            height: 5px;
            margin: 4px 0 3px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.12);
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            border-radius: 3px;
            background: #4ade80;
        }

        .progress-detail {
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
        }

        body[data-theme="light"] .popup-progress {
            background: rgba(0, 0, 0, 0.03);
            border-left-color: #16a34a;
        }

        body[data-theme="light"] .progress-track {
            background: rgba(0, 0, 0, 0.1);
        }

        body[data-theme="light"] .progress-fill {
            background: #16a34a;
        }

        body[data-theme="light"] .progress-label {
            color: #9aa0a6;
        }

        body[data-theme="light"] .progress-detail {
            color: #5f6368;
        }

        .popup-progress.off-route {
            border-left-color: #f59e0b;
        }

        .progress-offroute {
            color: #f59e0b;
            font-weight: 500;
        }

        body[data-theme="light"] .popup-progress.off-route {
            border-left-color: #d97706;
        }

        body[data-theme="light"] .progress-offroute {
            color: #d97706;
        }

        body[data-theme="light"] .popup-next-stop {
            background: rgba(0, 0, 0, 0.03);
            border-left-color: #1a73e8;
        }

        body[data-theme="light"] .next-stop-label {
            color: #9aa0a6;
        }

        body[data-theme="light"] .next-stop-name {
            color: var(--text-on-light);
        }

        body[data-theme="light"] .next-stop-time {
            color: #5f6368;
        }

        body[data-theme="light"] .delay-on-time {
            color: #15803d;
            background: rgba(22, 163, 74, 0.1);
        }

        body[data-theme="light"] .delay-early {
            color: #15803d;
            background: rgba(22, 163, 74, 0.1);
        }

        body[data-theme="light"] .delay-moderate {
            color: #b45309;
            background: rgba(245, 158, 11, 0.1);
        }

        body[data-theme="light"] .delay-severe {
            color: #dc2626;
            background: rgba(239, 68, 68, 0.1);
        }

        /* =====================================================
           CONTEXT MENU (right-click coordinates)
        ===================================================== */

        .coord-popup {
            font-size: 13px;
            line-height: 1.6;
            color: var(--text);
            min-width: 180px;
        }

        .coord-popup .coord-value {
            font-family: "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace;
            font-size: 12px;
            display: block;
            margin: 2px 0 6px;
            color: var(--text);
        }

        .coord-popup .copy-btn {
            display: inline-block;
            padding: 3px 10px;
            font-size: 11px;
            font-family: inherit;
            border: 1px solid #3a3a5c;
            border-radius: 4px;
            background: var(--panel-border-soft);
            color: var(--text-muted);
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }

        .coord-popup .copy-btn:hover {
            background: rgba(99, 99, 160, 0.4);
            color: var(--text);
        }

        body[data-theme="light"] .coord-popup {
            color: var(--text-on-light);
        }

        body[data-theme="light"] .coord-popup .coord-value {
            color: var(--text-on-light);
        }

        body[data-theme="light"] .coord-popup .copy-btn {
            border-color: rgba(0, 0, 0, 0.15);
            background: rgba(0, 0, 0, 0.04);
            color: var(--text-dim);
        }

        body[data-theme="light"] .coord-popup .copy-btn:hover {
            background: rgba(0, 0, 0, 0.08);
            color: var(--text-on-light);
        }

        /* =====================================================
           MEASURE MODE
        ===================================================== */

        .tile-btn.measure-active {
            background: #ef4444 !important;
            color: #ffffff !important;
        }

        body[data-theme="light"] .measure-label {
            color: var(--text-on-light);
            background: rgba(255, 255, 255, 0.72);
            text-shadow: 0 1px 3px rgba(255,255,255,0.8);
        }

        /* =====================================================
           LEGEND MARKERS
        ===================================================== */

        #right-panel {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        #nav-bar {
            display: flex;
            gap: 2px;
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: 6px;
            padding: 3px;
            transition: background 0.2s, border-color 0.2s;
        }

        body[data-theme="light"] #nav-bar {
            background: var(--panel-bg-light);
            border-color: rgba(0, 0, 0, 0.10);
        }

        /* =====================================================
           ROUTE SEARCH
        ===================================================== */

        #search-box {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1000;
            width: 320px;
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: 6px;
            padding: 6px 8px;
            transition: background 0.2s, border-color 0.2s;
        }

        body[data-theme="light"] #search-box {
            background: var(--panel-bg-light);
            border-color: rgba(0, 0, 0, 0.10);
        }

        #route-search {
            width: 100%;
            padding: 5px 8px;
            font-size: 13px;
            font-family: inherit;
            background: var(--panel-border-faint);
            border: 1px solid var(--panel-border-muted);
            border-radius: 4px;
            color: var(--text);
            outline: none;
            box-sizing: border-box;
        }

        #route-search:focus {
            border-color: #8ab4f8;
        }

        #route-search::placeholder {
            color: var(--text-dim);
        }

        body[data-theme="light"] #route-search {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.1);
            color: var(--text-on-light);
        }

        body[data-theme="light"] #route-search:focus {
            border-color: #1a73e8;
        }

        body[data-theme="light"] #route-search::placeholder {
            color: #9aa0a6;
        }

        #search-results {
            display: none;
            margin-top: 6px;
            max-height: 340px;
            overflow-y: auto;
        }

        .search-result {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text);
            transition: background 0.1s;
        }

        .search-result:hover {
            background: var(--panel-border-soft);
        }

        body[data-theme="light"] .search-result {
            color: var(--text-on-light);
        }

        body[data-theme="light"] .search-result:hover {
            background: rgba(0, 0, 0, 0.04);
        }

        .search-route-id {
            font-weight: 600;
            min-width: 48px;
        }

        /* Route name + operator stack between the route id and the type badge.
           min-width:0 lets the name/operator ellipsis kick in inside the flex
           row; flex:1 makes the stack absorb slack so the badge stays right. */
        .search-route-text {
            display: flex;
            flex-direction: column;
            min-width: 0;
            flex: 1;
            gap: 1px;
        }

        .search-route-name {
            color: var(--text-muted);
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        body[data-theme="light"] .search-route-name {
            color: var(--text-dim);
        }

        /* Operator (GTFS agency_name) — dimmer sub-line under the route name. */
        .search-route-operator {
            color: var(--text-dim);
            font-size: 11px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        body[data-theme="light"] .search-route-operator {
            color: #9aa0a6;
        }

        .search-route-type {
            margin-left: auto;
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 3px;
            font-weight: 500;
            flex-shrink: 0;
        }

        .search-type-bus {
            background: rgba(56, 189, 248, 0.15);
            color: var(--accent);
        }

        .search-type-train {
            background: rgba(74, 222, 128, 0.15);
            color: #4ade80;
        }

        .search-type-ferry {
            background: rgba(248, 113, 113, 0.15);
            color: #f87171;
        }

        body[data-theme="light"] .search-type-bus {
            background: rgba(56, 189, 248, 0.1);
            color: #0284c7;
        }

        body[data-theme="light"] .search-type-train {
            background: rgba(74, 222, 128, 0.1);
            color: #15803d;
        }

        body[data-theme="light"] .search-type-ferry {
            background: rgba(248, 113, 113, 0.1);
            color: #dc2626;
        }

        .search-no-results {
            padding: 8px;
            font-size: 11px;
            color: var(--text-dim);
            text-align: center;
        }

        .search-vehicle-count {
            font-size: 10px;
            color: var(--text-dim);
            margin-left: 4px;
        }

        .search-section-label {
            padding: 6px 8px 3px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-dim);
        }

        .search-stop-name {
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }

        .search-stop-code {
            font-size: 10px;
            color: var(--text-dim);
            flex-shrink: 0;
        }

        .search-type-stop {
            background: rgba(148, 163, 184, 0.15);
            color: var(--text-muted);
        }

        body[data-theme="light"] .search-type-stop {
            background: rgba(100, 116, 139, 0.1);
            color: var(--text-dim);
        }

        .legend-time {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
            text-align: center;
            padding-bottom: 5px;
            margin-bottom: 5px;
            border-bottom: 1px solid var(--panel-border-muted);
        }

        body[data-theme="light"] .legend-time {
            color: var(--text-on-light);
            border-bottom-color: rgba(0, 0, 0, 0.08);
        }

        /* Legend table — Mode | Live | NIS columns. Each mode's
           in-service and not-in-service counts share one row; the
           two count cells toggle their vehicle type independently,
           the mode name toggles both. */
        .legend-row {
            display: grid;
            grid-template-columns: 1fr 36px 36px;
            align-items: center;
            column-gap: 10px;
        }

        .legend-mode {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            user-select: none;
            transition: opacity 0.15s;
        }

        .legend-dots {
            display: flex;
            gap: 3px;
            flex-shrink: 0;
        }

        .legend-cell {
            text-align: right;
            cursor: pointer;
            user-select: none;
            transition: opacity 0.15s;
        }

        /* Single-count rows (ADS-B, Vessel) right-align across both
           number columns so there is no empty trailing cell. */
        .legend-cell-wide {
            grid-column: 2 / 4;
        }

        .legend-mode:hover,
        .legend-cell:hover {
            opacity: 0.8;
        }

        .legend-cell.hidden,
        .legend-mode.hidden {
            opacity: 0.35;
        }

        .legend-cell.hidden .legend-count,
        .legend-mode.hidden .legend-label {
            text-decoration: line-through;
        }

        .legend-count {
            font-size: 11px;
            font-variant-numeric: tabular-nums;
            color: var(--text-muted);
        }

        .legend-count.is-live {
            color: var(--text);
        }

        body[data-theme="light"] .legend-count {
            color: var(--text-dim);
        }

        body[data-theme="light"] .legend-count.is-live {
            color: var(--text-on-light);
        }

        .legend-footer {
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid var(--panel-border-muted);
        }

        body[data-theme="light"] .legend-footer {
            border-top-color: rgba(0, 0, 0, 0.08);
        }

        .legend-all {
            display: flex;
            align-items: center;
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            user-select: none;
            color: var(--text-muted);
            transition: color 0.15s;
        }

        .legend-all:hover {
            color: var(--text);
        }

        body[data-theme="light"] .legend-all {
            color: var(--text-dim);
        }

        body[data-theme="light"] .legend-all:hover {
            color: var(--text-on-light);
        }

        .legend-total {
            margin-left: auto;
            font-size: 11px;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            color: var(--text);
        }

        body[data-theme="light"] .legend-total {
            color: var(--text-on-light);
        }

        .legend-updated {
            display: flex;
            align-items: center;
            font-size: 10px;
            color: var(--text-dim);
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid var(--panel-border-muted);
        }

        body[data-theme="light"] .legend-updated {
            color: var(--text-muted);
            border-top-color: rgba(0, 0, 0, 0.08);
        }

        .legend-updated-time {
            margin-left: auto;
            font-variant-numeric: tabular-nums;
        }

        .legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* Symbol glyphs for the non-transit "Other" rows (ADS-B plane,
           Vessel anchor) — transit modes keep their colour dots. */
        .legend-icon {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            display: block;
        }

        /* =====================================================
           ALERT BANNER
        ===================================================== */

        #alert-toggle {
            display: none;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-family: inherit;
            color: var(--text);
            transition: background 0.2s, border-color 0.2s;
        }

        #alert-toggle:hover {
            background: rgba(30, 30, 60, 0.95);
        }

        .alert-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 9px;
            background: #f59e0b;
            color: #000;
            font-size: 10px;
            font-weight: 700;
        }

        .alert-badge.severe {
            background: #ef4444;
            color: #fff;
        }

        #alert-panel {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 6px;
            display: none;
            width: 380px;
            max-height: 400px;
            overflow-y: auto;
            background: rgba(20, 20, 45, 0.95);
            border: 1px solid var(--panel-border);
            border-radius: 6px;
            padding: 10px;
            font-size: 12px;
            color: var(--text);
            transition: background 0.2s, border-color 0.2s;
            z-index: 1001;
        }

        .alert-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--panel-border-muted);
            font-weight: 600;
            font-size: 13px;
        }

        .alert-panel-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 16px;
            padding: 0 4px;
            line-height: 1;
        }

        .alert-panel-close:hover {
            color: var(--text);
        }

        .alert-card {
            padding: 8px;
            margin-bottom: 6px;
            border-radius: 4px;
            background: rgba(99, 99, 160, 0.1);
            border-left: 3px solid #f59e0b;
        }

        .alert-card.severity-SEVERE {
            border-left-color: #ef4444;
        }

        .alert-card.severity-INFO {
            border-left-color: #3b82f6;
        }

        .alert-card-header {
            font-weight: 600;
            font-size: 12px;
            margin-bottom: 4px;
            line-height: 1.4;
        }

        .alert-card-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: 4px;
        }

        .alert-tag {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 500;
            background: var(--panel-border-soft);
            color: var(--text-muted);
        }

        .alert-tag.effect {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }

        .alert-tag.cause {
            background: var(--panel-border-faint);
            color: var(--text-muted);
        }

        .alert-tag.route {
            background: rgba(56, 189, 248, 0.15);
            color: var(--accent);
        }

        .alert-card-desc {
            font-size: 11px;
            color: var(--text-muted);
            line-height: 1.5;
            display: none;
            margin-top: 4px;
            white-space: pre-line;
        }

        .alert-card-desc.expanded {
            display: block;
        }

        .alert-expand {
            background: none;
            border: none;
            color: #8ab4f8;
            cursor: pointer;
            font-size: 10px;
            padding: 0;
            margin-top: 2px;
        }

        .alert-expand:hover {
            text-decoration: underline;
        }

        /* Alert indicator in vehicle popups */
        .popup-alert {
            margin-top: 6px;
            padding: 4px 8px;
            border-radius: 3px;
            background: rgba(245, 158, 11, 0.15);
            border-left: 3px solid #f59e0b;
            font-size: 11px;
            color: #fbbf24;
            line-height: 1.4;
        }

        .popup-alert.severe {
            background: rgba(239, 68, 68, 0.15);
            border-left-color: #ef4444;
            color: #f87171;
        }

        /* Light theme overrides for alerts */
        body[data-theme="light"] #alert-toggle {
            background: var(--panel-bg-light);
            border-color: rgba(0, 0, 0, 0.10);
            color: var(--text-on-light);
        }

        body[data-theme="light"] #alert-toggle:hover {
            background: rgba(245, 245, 245, 0.95);
        }

        body[data-theme="light"] #alert-panel {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(0, 0, 0, 0.10);
            color: var(--text-on-light);
        }

        body[data-theme="light"] .alert-panel-header {
            border-bottom-color: rgba(0, 0, 0, 0.08);
        }

        body[data-theme="light"] .alert-panel-close {
            color: var(--text-dim);
        }

        body[data-theme="light"] .alert-panel-close:hover {
            color: var(--text-on-light);
        }

        body[data-theme="light"] .alert-card {
            background: rgba(0, 0, 0, 0.03);
        }

        body[data-theme="light"] .alert-card-desc {
            color: var(--text-dim);
        }

        body[data-theme="light"] .alert-tag {
            color: var(--text-dim);
            background: rgba(0, 0, 0, 0.06);
        }

        body[data-theme="light"] .alert-tag.effect {
            background: rgba(245, 158, 11, 0.1);
            color: #b45309;
        }

        body[data-theme="light"] .alert-tag.route {
            background: rgba(59, 130, 246, 0.1);
            color: #1d4ed8;
        }

        body[data-theme="light"] .alert-expand {
            color: #1a73e8;
        }

        body[data-theme="light"] .popup-alert {
            background: rgba(245, 158, 11, 0.08);
            color: #b45309;
        }

        body[data-theme="light"] .popup-alert.severe {
            background: rgba(239, 68, 68, 0.08);
            color: #dc2626;
        }

        /* =====================================================
           DEPARTURE BOARD PANEL
        ===================================================== */

        #departure-panel {
            display: none;
            position: absolute;
            top: 10px;
            left: 360px;
            z-index: 1001;
            width: 320px;
            max-height: 70vh;
            background: rgba(20, 20, 45, 0.95);
            border: 1px solid var(--panel-border);
            border-radius: 8px;
            overflow: hidden;
            transition: background 0.2s, border-color 0.2s;
        }

        body[data-theme="light"] #departure-panel {
            background: rgba(255, 255, 255, 0.97);
            border-color: rgba(0, 0, 0, 0.10);
        }

        .departure-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-bottom: 1px solid var(--panel-border-muted);
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
        }

        body[data-theme="light"] .departure-header {
            color: var(--text-on-light);
            border-bottom-color: rgba(0, 0, 0, 0.08);
        }

        .departure-header-title {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .departure-stop-name {
            font-size: 15px;
            font-weight: 600;
        }

        .departure-stop-meta {
            font-size: 12px;
            font-weight: 400;
            color: var(--text-muted);
        }

        body[data-theme="light"] .departure-stop-meta {
            color: var(--text-dim);
        }

        .departure-close {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 18px;
            cursor: pointer;
            padding: 0 4px;
            line-height: 1;
        }

        .departure-close:hover {
            color: var(--text);
        }

        body[data-theme="light"] .departure-close:hover {
            color: var(--text-on-light);
        }

        .departure-filter {
            padding: 6px 12px 4px;
        }

        #departure-filter-input {
            width: 100%;
            padding: 4px 8px;
            font-size: 12px;
            font-family: inherit;
            background: var(--panel-border-faint);
            border: 1px solid var(--panel-border-muted);
            border-radius: 4px;
            color: var(--text);
            outline: none;
            box-sizing: border-box;
        }

        #departure-filter-input:focus {
            border-color: #8ab4f8;
        }

        #departure-filter-input::placeholder {
            color: var(--text-dim);
        }

        body[data-theme="light"] #departure-filter-input {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.1);
            color: var(--text-on-light);
        }

        body[data-theme="light"] #departure-filter-input:focus {
            border-color: #1a73e8;
        }

        body[data-theme="light"] #departure-filter-input::placeholder {
            color: #9aa0a6;
        }

        #departure-list {
            overflow-y: auto;
            max-height: calc(70vh - 100px);
            padding: 6px 0;
        }

        .departure-row {
            display: grid;
            grid-template-columns: 48px 1fr auto;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            font-size: 12px;
            color: var(--text);
            border-bottom: 1px solid rgba(99, 99, 160, 0.1);
        }

        .departure-row:last-child {
            border-bottom: none;
        }

        body[data-theme="light"] .departure-row {
            color: var(--text-on-light);
            border-bottom-color: rgba(0, 0, 0, 0.04);
        }

        .departure-route {
            font-weight: 700;
            font-size: 13px;
            color: var(--accent);
        }

        body[data-theme="light"] .departure-route {
            color: #0284c7;
        }

        .departure-headsign {
            font-size: 11px;
            color: var(--text-muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        body[data-theme="light"] .departure-headsign {
            color: var(--text-dim);
        }

        .departure-time {
            text-align: right;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .departure-scheduled {
            font-size: 12px;
            font-weight: 500;
        }

        .departure-delay {
            font-size: 10px;
            margin-top: 1px;
        }

        .departure-delay.on-time {
            color: #4ade80;
        }

        .departure-delay.moderate {
            color: #fbbf24;
        }

        .departure-delay.severe {
            color: #f87171;
        }

        body[data-theme="light"] .departure-delay.on-time {
            color: #15803d;
        }

        body[data-theme="light"] .departure-delay.moderate {
            color: #b45309;
        }

        body[data-theme="light"] .departure-delay.severe {
            color: #dc2626;
        }

        .departure-loading, .departure-empty {
            padding: 16px 12px;
            text-align: center;
            font-size: 12px;
            color: var(--text-dim);
        }