* { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: #1a1a1a;
            color: #fff;
            line-height: 1.4;
        }
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }

        /* Navigation */
        .main-nav {
            background: #0d1117;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #30363d;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .nav-brand a {
            color: #fff;
            text-decoration: none;
            font-size: 1.3em;
            font-weight: 600;
            padding: 15px 0;
            display: inline-block;
        }
        .nav-brand a:hover {
            color: #60a5fa;
        }
        .nav-menu {
            list-style: none;
            display: flex;
            gap: 5px;
        }
        .nav-menu a {
            color: #8b949e;
            text-decoration: none;
            padding: 15px 12px;
            display: block;
            font-size: 0.9em;
            transition: color 0.2s, background 0.2s;
            border-radius: 6px;
        }
        .nav-menu a:hover {
            color: #fff;
            background: rgba(255,255,255,0.05);
        }
        .nav-menu a.active {
            color: #fff;
            background: rgba(96, 165, 250, 0.15);
            border-bottom: 2px solid #60a5fa;
            border-radius: 6px 6px 0 0;
        }
        .nav-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 10px;
            flex-direction: column;
            gap: 4px;
        }
        .nav-toggle span {
            display: block;
            width: 22px;
            height: 2px;
            background: #fff;
            transition: transform 0.2s, opacity 0.2s;
        }
        .nav-toggle.open span:nth-child(1) {
            transform: rotate(45deg) translate(4px, 4px);
        }
        .nav-toggle.open span:nth-child(2) {
            opacity: 0;
        }
        .nav-toggle.open span:nth-child(3) {
            transform: rotate(-45deg) translate(4px, -4px);
        }

        /* Mobile Navigation */
        @media (max-width: 768px) {
            .nav-toggle {
                display: flex;
            }
            .nav-menu {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: #0d1117;
                flex-direction: column;
                padding: 10px;
                gap: 0;
                display: none;
                border-bottom: 1px solid #30363d;
            }
            .nav-menu.open {
                display: flex;
            }
            .nav-menu a {
                padding: 12px 15px;
                border-radius: 6px;
            }
            .nav-menu a.active {
                border-bottom: none;
                border-left: 3px solid #60a5fa;
                border-radius: 0 6px 6px 0;
            }
        }
        .header {
            background: #2a2a2a;
            padding: 20px 25px;
            margin-bottom: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        .header h1 { font-size: 2em; margin-bottom: 8px; font-weight: 500; }
        .header-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #999;
            font-size: 0.95em;
            margin-top: 10px;
        }
        .refresh-note { color: #666; }
        .traintime-status {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.85em;
        }
        .traintime-status.available { background: #1a5d1a; color: #4ade80; }
        .traintime-status.unavailable { background: #5d1a1a; color: #ef4444; }

        /* Departures Board */
        .departures-board {
            background: #2a2a2a;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0,0,0,0.4);
        }
        .board-row {
            display: grid;
            grid-template-columns: 140px 1fr 200px;
            gap: 20px;
            padding: 20px 25px;
            border-bottom: 1px solid #3a3a3a;
            align-items: center;
            min-height: 90px;
            transition: background 0.15s;
        }
        .board-row:hover { background: #333; }
        .board-row:last-child { border-bottom: none; }
        .board-row.confirmed {
            background: linear-gradient(90deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0) 100%);
            border-left: 4px solid #22c55e;
        }
        .board-row.static-only { opacity: 0.6; }

        .time-col {
            font-size: 2.2em;
            font-weight: 300;
            letter-spacing: -0.02em;
            color: #fff;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .scheduled-time { font-size: 0.65em; color: #999; font-weight: 400; }
        .current-time-ontime { font-size: 1em; color: #fff; }
        .current-time-delayed { font-size: 1em; color: #ff6b6b; display: flex; align-items: center; gap: 10px; }
        .current-time-departing { font-size: 0.7em; color: #ff3838; font-weight: 700; animation: pulse 1s ease-in-out infinite; }
        .current-time-boarding { font-size: 0.7em; color: #ffa500; font-weight: 700; }
        .current-time-departing-soon { font-size: 0.65em; color: #ffdb4d; font-weight: 600; }

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

        .delay-badge {
            background-color: #ff6b6b;
            color: #fff;
            font-size: 0.55em;
            font-weight: 600;
            padding: 4px 8px;
            border-radius: 4px;
            text-transform: uppercase;
        }

        .dest-col { display: flex; flex-direction: column; align-items: flex-start; }
        .dest-band {
            padding: 12px 20px;
            border-radius: 6px;
            font-size: 1.5em;
            font-weight: 600;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            display: inline-block;
        }
        .train-number { font-size: 0.9em; color: #888; margin-top: 6px; }

        /* Equipment Badge */
        .equipment-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.75em;
            font-weight: 700;
            margin-top: 6px;
            margin-right: 6px;
            letter-spacing: 0.05em;
        }
        .equipment-badge.electric { background-color: #22c55e; color: #000; }
        .equipment-badge.diesel { background-color: #f59e0b; color: #000; }
        .equipment-badge.unknown { background-color: #6b7280; color: #fff; }

        /* Approaching Badge */
        .approaching-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.7em;
            font-weight: 700;
            margin-top: 6px;
        }
        .approaching-badge.at-penn { background: #22c55e; color: #000; animation: pulse 1.5s ease-in-out infinite; }
        .approaching-badge.approaching { background: #3b82f6; color: #fff; }
        .approaching-badge.distant { background: #6b7280; color: #fff; opacity: 0.8; }

        /* Peak Badge */
        .peak-badge {
            display: inline-block;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #000;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.65em;
            font-weight: 700;
            letter-spacing: 0.05em;
            margin-left: 6px;
        }

        /* Schedule Days */
        .schedule-days {
            display: inline-flex;
            gap: 2px;
            margin-top: 4px;
            font-size: 0.7em;
        }
        .day-icon {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            background: #333;
            color: #666;
            font-weight: 600;
        }
        .day-icon.active {
            background: #3b82f6;
            color: #fff;
        }
        .day-icon.today {
            background: #22c55e;
            color: #000;
        }
        .daily-badge {
            background: #166534;
            color: #22c55e;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.65em;
            font-weight: 600;
        }

        /* Track Announcement Time */
        .track-announcement-time {
            margin-top: 8px;
            font-size: 0.75em;
            text-align: right;
        }
        .announcement-expected { color: #64748b; }
        .announcement-soon { color: #f59e0b; font-weight: 500; }
        .announcement-imminent { color: #22c55e; font-weight: 600; animation: pulse 1.5s ease-in-out infinite; }

        /* Trip Progress */
        .trip-progress {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 4px;
            font-size: 0.75em;
            color: #94a3b8;
        }
        .trip-progress-icon { font-size: 1em; }
        .trip-progress-text { color: #e2e8f0; }
        .trip-progress-speed { color: #60a5fa; }
        .trip-progress.at-station .trip-progress-text { color: #22c55e; }
        .trip-progress.approaching .trip-progress-text { color: #fbbf24; }

        /* Data Source Badges */
        .data-source-badges { display: flex; gap: 4px; margin-top: 6px; }
        .source-badge {
            width: 18px; height: 18px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.25;
            background-color: #333;
            color: #666;
        }
        .source-badge.active { opacity: 1; }
        .source-badge.source-s.active { background-color: #3b82f6; color: #fff; }
        .source-badge.source-r.active { background-color: #22c55e; color: #fff; }
        .source-badge.source-t.active { background-color: #06b6d4; color: #fff; }  /* TrainTime - cyan */
        .source-badge.source-m.active { background-color: #f59e0b; color: #000; }
        .source-badge.source-o.active { background-color: #f97316; color: #fff; }  /* Solari - orange */
        .source-badge.source-v.active { background-color: #a855f7; color: #fff; }

        .track-col { text-align: right; }
        .track-confirmed { text-align: center; }
        .track-number-confirmed {
            font-size: 3.5em;
            font-weight: 700;
            color: #22c55e;
            line-height: 1;
            text-shadow: 0 0 30px rgba(34, 197, 94, 0.6);
        }
        .track-label-confirmed {
            font-size: 0.75em;
            color: #22c55e;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .track-predicted { text-align: center; }
        .track-label-predicted {
            font-size: 0.7em;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 6px;
        }
        .track-guesses { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
        .track-guess { display: flex; align-items: center; gap: 8px; }
        .track-guess-number { font-size: 1.4em; font-weight: 700; color: #60a5fa; min-width: 50px; text-align: right; }
        .track-guess.secondary .track-guess-number { font-size: 1.0em; color: #94a3b8; }
        .track-guess-conf { font-size: 0.8em; color: #64748b; min-width: 45px; }
        .modifier-indicator { color: #60a5fa; font-weight: bold; margin-left: 1px; }

        /* Skeleton Loading */
        @keyframes skeleton-shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        .skeleton {
            background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s ease-in-out infinite;
            border-radius: 4px;
        }
        .skeleton-row {
            display: grid;
            grid-template-columns: 140px 1fr 200px;
            gap: 20px;
            padding: 20px 25px;
            border-bottom: 1px solid #3a3a3a;
            min-height: 90px;
        }
        .skeleton-time { width: 100px; height: 50px; }
        .skeleton-dest { width: 200px; height: 40px; }
        .skeleton-track { width: 80px; height: 60px; margin-left: auto; }
        .loading-spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #3a3a3a;
            border-top-color: #60a5fa;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-right: 8px;
            vertical-align: middle;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .loading-message {
            text-align: center;
            padding: 40px;
            color: #666;
            font-size: 1.1em;
        }
        .error-message {
            text-align: center;
            padding: 40px;
            color: #ef4444;
            font-size: 1.1em;
        }

        /* Collapsible Sections */
        .collapsible-section {
            margin-top: 30px;
            background: #2a2a2a;
            border-radius: 8px;
            overflow: hidden;
        }
        .collapsible-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            cursor: pointer;
            background: #333;
            user-select: none;
        }
        .collapsible-header:hover { background: #3a3a3a; }
        .collapsible-header h2 { font-size: 1.2em; font-weight: 500; }
        .collapsible-toggle { font-size: 0.8em; color: #888; transition: transform 0.3s; }
        .collapsible-toggle.collapsed { transform: rotate(-90deg); }
        .collapsible-content { display: none; }
        .collapsible-content.open { display: block; }
        .collapsible-inner { padding: 20px; }

        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
        }
        .stat-card {
            background: #1a1a1a;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }
        .stat-value { font-size: 2em; font-weight: 700; color: #60a5fa; }
        .stat-label { font-size: 0.85em; color: #888; margin-top: 5px; }
        .disclaimer { font-size: 0.8em; color: #666; margin-top: 15px; }
        .disclaimer .warning { color: #fbbf24; }

        /* OTP Section */
        .otp-summary { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
        .otp-main { text-align: center; }
        .otp-percentage { font-size: 3em; font-weight: 700; color: #22c55e; }
        .otp-percentage.warning { color: #fbbf24; }
        .otp-percentage.poor { color: #ef4444; }
        .otp-label { font-size: 0.9em; color: #888; }
        .otp-details { display: flex; gap: 15px; flex-wrap: wrap; }
        .otp-detail-card {
            background: #1a1a1a;
            padding: 12px 16px;
            border-radius: 6px;
            text-align: center;
        }
        .otp-detail-value { font-size: 1.5em; font-weight: 600; color: #e2e8f0; }
        .otp-detail-label { font-size: 0.75em; color: #888; margin-top: 4px; }

        /* Hourly Chart */
        .chart-title { font-size: 0.9em; color: #e2e8f0; margin: 20px 0 10px; }
        .hourly-chart {
            display: flex;
            align-items: flex-end;
            height: 100px;
            gap: 2px;
            background: #1a1a1a;
            padding: 10px 5px;
            border-radius: 6px;
        }
        .hour-bar {
            flex: 1;
            min-width: 10px;
            border-radius: 2px 2px 0 0;
            transition: height 0.3s;
        }
        .hour-bar.good { background: #22c55e; }
        .hour-bar.warning { background: #fbbf24; }
        .hour-bar.poor { background: #ef4444; }
        .hour-labels {
            display: flex;
            gap: 2px;
            padding: 5px;
        }
        .hour-label {
            flex: 1;
            text-align: center;
            font-size: 0.6em;
            color: #666;
        }
        .hour-label.rush { color: #fbbf24; font-weight: 600; }

        /* OTP by Destination */
        .otp-by-dest { margin-top: 15px; }
        .otp-dest-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 12px;
            border-bottom: 1px solid #3a3a3a;
        }
        .otp-dest-name { color: #e2e8f0; }
        .otp-dest-pct {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.85em;
            font-weight: 600;
        }
        .otp-dest-pct.good { background: #166534; color: #22c55e; }
        .otp-dest-pct.warning { background: #713f12; color: #fbbf24; }
        .otp-dest-pct.poor { background: #7f1d1d; color: #ef4444; }

        /* Branch Departures Section */
        .branches-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }
        .branch-card {
            background: #1a1a1a;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.2s;
        }
        .branch-card:hover { transform: translateY(-2px); }
        .branch-header { padding: 10px 12px; }
        .branch-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.85em;
            font-weight: 600;
        }
        .branch-departure-info { padding: 12px; }
        .branch-next-time {
            font-size: 1.5em;
            font-weight: 700;
            color: #fff;
        }
        .branch-destination {
            font-size: 0.9em;
            color: #888;
            margin-top: 4px;
        }
        .branch-track-info {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 0.8em;
            color: #666;
        }
        .branch-track-confirmed {
            color: #22c55e;
            font-weight: 600;
        }
        .branch-track-predicted {
            color: #60a5fa;
        }

        /* Platform Diagram Section */
        .platform-diagram-section {
            margin-top: 30px;
            padding: 30px;
            background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 12px;
            overflow-x: auto;
        }
        .platform-diagram-title {
            text-align: center;
            font-size: 1.8em;
            margin-bottom: 10px;
            font-weight: 500;
        }
        .platform-diagram-subtitle {
            text-align: center;
            font-size: 0.85em;
            color: #888;
            margin-bottom: 15px;
        }
        .platform-legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.75em;
            color: #aaa;
        }
        .legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 3px;
        }
        .legend-dot.shared { background: #6366f1; }
        .legend-dot.lirr-only { background: #0039a6; }
        .legend-dot.tunnel { background: #22c55e; }

        #track-diagram-content {
            min-height: 200px;
        }

        /* Live Train Map */
        #train-map {
            height: 400px;
            border-radius: 8px;
            background: #1a1a1a;
        }
        .map-legend {
            display: flex;
            gap: 20px;
            margin-top: 15px;
            flex-wrap: wrap;
        }
        .map-legend .legend-item { font-size: 0.85em; }
        .legend-marker {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            display: inline-block;
            margin-right: 6px;
        }
        .legend-marker.electric { background: #3b82f6; }
        .legend-marker.diesel { background: #ef4444; }
        .legend-marker.at-penn { background: #fbbf24; }
        .map-info { font-size: 0.85em; color: #666; margin-top: 10px; }

        /* Recent Verifications */
        .verifications-list { margin-top: 10px; }
        .verification-item {
            display: grid;
            grid-template-columns: 80px 1fr 60px 100px;
            gap: 15px;
            padding: 12px;
            border-bottom: 1px solid #3a3a3a;
            align-items: center;
        }
        .verification-time { font-size: 0.9em; color: #888; }
        .verification-dest { color: #e2e8f0; font-weight: 500; }
        .verification-track {
            font-size: 1.5em;
            font-weight: 700;
            color: #22c55e;
            text-align: center;
        }
        .verification-result {
            font-size: 0.85em;
            padding: 4px 8px;
            border-radius: 4px;
            text-align: center;
        }
        .verification-result.correct { background: #166534; color: #22c55e; }
        .verification-result.incorrect { background: #7f1d1d; color: #ef4444; }

        /* Prediction Legend */
        .prediction-legend {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        .legend-category h4 {
            color: #e2e8f0;
            margin-bottom: 10px;
            font-size: 1em;
        }
        .legend-item-row {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: 8px 0;
            border-bottom: 1px solid #3a3a3a;
        }
        .legend-code {
            color: #60a5fa;
            font-weight: 600;
            font-size: 0.9em;
        }
        .legend-desc {
            color: #94a3b8;
            font-size: 0.85em;
        }
        .calibration-note {
            margin-top: 20px;
            padding: 15px;
            background: #1a1a1a;
            border-radius: 8px;
            color: #94a3b8;
            font-size: 0.85em;
            line-height: 1.5;
        }
        .calibration-note strong { color: #e2e8f0; }

        /* Data Sources */
        .data-source-card {
            background: #1e293b;
            border-radius: 8px;
            padding: 15px;
            border-left: 3px solid #3b82f6;
        }
        .data-source-card h4 {
            color: #fff;
            margin-bottom: 8px;
            font-size: 1em;
        }
        .data-source-card p {
            color: #94a3b8;
            font-size: 0.85em;
            margin-bottom: 10px;
        }
        .source-stats {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .source-stats .stat {
            background: #334155;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75em;
            color: #e2e8f0;
        }
        .source-stats .stat.active { background: #166534; color: #86efac; }
        .source-stats .stat.warning { background: #854d0e; color: #fde047; }

        /* Approaching Trains Section */
        .approaching-trains-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .approaching-train-card {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-radius: 10px;
            padding: 15px;
            border-left: 4px solid #3b82f6;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 15px;
            align-items: center;
        }
        .approaching-train-card.inbound {
            border-left-color: #22c55e;
        }
        .approaching-train-info {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .approaching-train-header {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .approaching-train-num {
            font-size: 1.3em;
            font-weight: 700;
            color: #fff;
        }
        .approaching-branch-badge {
            padding: 3px 10px;
            border-radius: 4px;
            font-size: 0.8em;
            font-weight: 600;
        }
        .approaching-origin {
            font-size: 0.85em;
            color: #94a3b8;
        }
        .approaching-location {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9em;
        }
        .approaching-location-icon {
            color: #fbbf24;
        }
        .approaching-location-text {
            color: #e2e8f0;
        }
        .approaching-speed {
            color: #60a5fa;
            font-size: 0.85em;
        }
        .approaching-consist {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 4px;
        }
        .consist-badge {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75em;
            font-weight: 600;
        }
        .consist-badge.fleet { background: #22c55e; color: #000; }
        .consist-badge.cars { background: #3b82f6; color: #fff; }
        .consist-badge.occupancy-empty { background: #166534; color: #86efac; }
        .consist-badge.occupancy-few { background: #854d0e; color: #fde047; }
        .consist-badge.occupancy-many { background: #dc2626; color: #fff; }
        .approaching-arrival {
            text-align: right;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
        }
        .approaching-arrival-time {
            font-size: 1.8em;
            font-weight: 700;
            color: #fbbf24;
        }
        .approaching-arrival-track {
            font-size: 1.1em;
            color: #22c55e;
            font-weight: 600;
        }
        .approaching-arrival-track.pending {
            color: #94a3b8;
        }
        .approaching-otp {
            font-size: 0.8em;
        }
        .approaching-otp.late { color: #ef4444; }
        .approaching-otp.early { color: #22c55e; }
        .approaching-otp.ontime { color: #86efac; }

        /* Footer */
        .footer {
            margin-top: 40px;
            padding: 30px 20px;
            text-align: center;
            color: #666;
            font-size: 0.85em;
        }
        .footer-main {
            margin-bottom: 20px;
        }
        .footer-methodology {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid rgba(255,255,255,0.2);
            font-size: 0.85em;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }
        .footer-methodology ul {
            margin: 8px 0;
            padding-left: 20px;
            text-align: left;
        }
        .footer-methodology li {
            margin: 4px 0;
        }
        .footer a { color: #60a5fa; }

        /* Track Diagram Detailed Styles */
        .capacity-legend {
            display: inline-block;
            padding: 2px 5px;
            border-radius: 2px;
            color: #ccc;
        }
        .capacity-legend.short { background: #dc2626; color: #fff; }
        .capacity-legend.long { background: #16a34a; color: #fff; }
        .width-legend { width: 4px; height: 14px; border-radius: 1px; }
        .width-legend.narrow { background: #f97316; }
        .width-legend.wide { background: #22c55e; }
        .platform-footer {
            display: flex;
            justify-content: space-between;
            padding: 15px 20px 0;
            font-size: 0.75em;
            color: #666;
        }
        .platform-visual {
            display: flex;
            flex-direction: column;
            gap: 0;
            min-width: 800px;
            padding: 20px;
            background: #0d1117;
            border-radius: 8px;
            position: relative;
        }
        .platform-row {
            display: flex;
            align-items: center;
            height: 54px;
            position: relative;
            margin: 0;
        }
        .track-lane {
            height: 8px;
            background: linear-gradient(90deg, #444 0%, #666 50%, #444 100%);
            position: relative;
            border-radius: 2px;
            margin: 0 10px;
            flex: 1;
        }
        .track-lane::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: repeating-linear-gradient(90deg, #888 0px, #888 20px, transparent 20px, transparent 30px);
            transform: translateY(-50%);
        }
        .track-lane.skew-west { margin-left: 10px; margin-right: 80px; }
        .track-lane.skew-balanced { margin-left: 40px; margin-right: 40px; }
        .track-lane.skew-east { margin-left: 70px; margin-right: 10px; }
        .track-lane.cars-8 { max-width: 280px; }
        .track-lane.cars-10 { max-width: 340px; }
        .track-lane.cars-13 { max-width: 420px; }
        .track-lane.cars-14 { max-width: 460px; }
        .track-lane.cars-15 { max-width: 500px; }
        .skew-guide {
            position: absolute;
            top: 0;
            bottom: 80px;
            width: 2px;
            background: rgba(255,255,255,0.1);
            z-index: 0;
        }
        .skew-guide.west { left: 120px; }
        .skew-guide.east { right: 90px; }
        .skew-label {
            position: absolute;
            top: -25px;
            font-size: 0.65em;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .skew-label.west { left: 100px; }
        .skew-label.east { right: 70px; }
        .skew-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 10px 15px 110px;
            border-bottom: 1px solid #333;
            margin-bottom: 10px;
        }
        .skew-end {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.7em;
            color: #888;
        }
        .skew-end.west { color: #f97316; }
        .skew-end.east { color: #22c55e; }
        .skew-icon { font-size: 0.8em; }
        .skew-center {
            font-size: 0.65em;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .wsy-indicator {
            width: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .wsy-indicator.empty { visibility: hidden; }
        .wsy-arrow { color: #f97316; font-size: 0.7em; }
        .wsy-label { font-size: 0.55em; color: #f97316; font-weight: bold; letter-spacing: 0.5px; }
        .wsy-arrow-legend { color: #f97316; margin-right: 4px; }
        .wsy-legend { color: #f97316 !important; }
        .ladder-legend {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.8em;
            font-weight: bold;
            color: #fff;
        }
        .ladder-legend.a { background: #7c3aed; }
        .ladder-legend.b { background: #2563eb; }
        .ladder-legend.c { background: #0891b2; }
        .ladder-legend.d { background: #059669; }
        .consist-filter-note {
            text-align: center;
            padding: 8px 15px;
            background: rgba(220, 38, 38, 0.15);
            border: 1px solid #dc2626;
            border-radius: 4px;
            margin: 10px 20px;
            font-size: 0.8em;
            color: #fca5a5;
        }
        .consist-filter-note .filter-icon { color: #dc2626; margin-right: 6px; }
        .consist-filter-note strong { color: #fff; }
        .swing-indicator { display: inline-block; }
        .swing-alt { font-size: 0.75em; color: #22c55e; opacity: 0.6; font-style: italic; }
        .ladder-badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.7em;
            font-weight: bold;
            background: #374151;
            color: #9ca3af;
            margin-left: 4px;
        }
        .ladder-badge.a { background: #7c3aed; color: #fff; }
        .ladder-badge.b { background: #2563eb; color: #fff; }
        .ladder-badge.c { background: #0891b2; color: #fff; }
        .ladder-badge.d { background: #059669; color: #fff; }
        /* All platforms light grey, uniform height */
        .platform-divider .platform-strip { height: 10px !important; background: #666 !important; box-shadow: none !important; }
        .platform-divider.platform-7 { margin-left: 150px; margin-right: auto; }
        .platform-divider.platform-7 .platform-strip { max-width: 280px; }
        .platform-divider.platform-8 { margin-left: 150px; margin-right: auto; }
        .platform-divider.platform-8 .platform-strip { max-width: 340px; }
        .platform-divider.platform-9 { margin-left: 180px; margin-right: auto; }
        .platform-divider.platform-9 .platform-strip { max-width: 420px; }
        .platform-divider.platform-10 { margin-left: 210px; margin-right: auto; }
        .platform-divider.platform-10 .platform-strip { max-width: 460px; }
        .platform-divider.platform-11 { margin-left: 210px; margin-right: auto; }
        .platform-divider.platform-11 .platform-strip { max-width: 500px; }
        .track-label {
            width: 100px;
            text-align: center;
            font-weight: bold;
            font-size: 0.85em;
            color: #fff;
            background: #0039a6;
            padding: 6px 8px;
            border-radius: 4px;
            font-family: Arial, Helvetica, sans-serif;
            flex-shrink: 0;
            position: relative;
        }
        .track-label.shared { background: #6366f1; }
        .track-label.lirr-exclusive { background: #0039a6; }
        .track-type-badge { display: block; font-size: 0.6em; font-weight: normal; opacity: 0.8; margin-top: 2px; }
        .track-num-main { display: block; }
        .track-capacity {
            font-size: 0.65em;
            background: rgba(0,0,0,0.3);
            padding: 1px 4px;
            border-radius: 2px;
            margin-left: 4px;
            font-weight: normal;
        }
        .track-capacity.short { background: #dc2626; color: #fff; }
        .track-capacity.long { background: #16a34a; color: #fff; }
        .track-lane.narrow-platform { border-left: 2px solid #f97316; }
        .track-lane.wide-platform { border-left: 2px solid #22c55e; }
        .track-end {
            width: 70px;
            text-align: center;
            font-size: 0.7em;
            color: #666;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .tunnel-badge { padding: 2px 6px; border-radius: 3px; font-size: 0.65em; font-weight: 600; }
        .tunnel-badge.north { background: #22c55e; color: #000; }
        .tunnel-badge.south { background: #3b82f6; color: #fff; }
        .tunnel-badge.both { background: linear-gradient(135deg, #22c55e 50%, #3b82f6 50%); color: #fff; }
        .track-lane.tunnel-north { background: linear-gradient(90deg, #444 0%, #22c55e22 50%, #444 100%); }
        .tunnel-labels { display: flex; flex-direction: column; align-items: center; font-size: 0.8em; gap: 2px; }
        .tunnel-label-north { color: #22c55e; }
        .tunnel-label-south { color: #3b82f6; }
        .direct-line { font-size: 0.7em; font-weight: 600; padding: 2px 4px; border-radius: 3px; }
        .direct-line.north { color: #22c55e; }
        .direct-line.south { color: #3b82f6; }
        .track-separator { height: 8px; margin: 0 100px; border-bottom: 1px dashed #333; }
        .platform-divider.island .platform-strip { height: 10px; }
        .platform-note { position: absolute; right: 90px; font-size: 0.65em; color: #666; font-style: italic; }
        .platform-divider {
            height: 10px;
            display: flex;
            align-items: center;
            margin: -4px 110px -4px 110px;
            position: relative;
            z-index: 5;
        }
        .platform-strip {
            flex: 1;
            height: 6px;
            background: #888;
            border-radius: 3px;
            position: relative;
        }
        .platform-strip::after {
            content: 'PLATFORM ' attr(data-platform);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.55em;
            color: #000;
            font-weight: bold;
            letter-spacing: 1px;
            white-space: nowrap;
        }
        .train-on-track {
            position: absolute;
            left: 110px;
            right: 80px;  /* Leave space for track-end info */
            width: calc(90% - 190px);  /* 90% of available track space */
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(180deg, #5a6578 0%, #3d4758 10%, #2d3748 20%, #1a202c 80%, #2d3748 90%, #3d4758 100%);
            border-radius: 4px;
            padding: 6px 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,255,255,0.15), inset 0 -2px 0 rgba(0,0,0,0.3);
            border-left: 4px solid;
            animation: train-pulse 2s ease-in-out infinite;
            z-index: 10;
            min-height: 50px;
            height: 50px;
            border-top: 3px solid #667;
            border-bottom: 3px solid #222;
        }
        /* Train car indicator showing consist length and equipment type */
        .train-cars {
            display: flex;
            gap: 1px;
            margin-left: auto;
            align-items: center;
        }
        .train-car {
            width: 6px;
            height: 18px;
            background: linear-gradient(180deg, #6b7280 0%, #4b5563 50%, #374151 100%);
            border-radius: 1px;
            border: 1px solid #555;
        }
        .train-car:first-child { border-radius: 3px 1px 1px 3px; width: 8px; }
        .train-car:last-child { border-radius: 1px 3px 3px 1px; width: 8px; }

        /* M7 - Bombardier EMU - Teal/Green with white stripe */
        .train-cars.m7 .train-car {
            background: linear-gradient(180deg, #0d9488 0%, #0f766e 30%, #fff 32%, #fff 35%, #0f766e 37%, #115e59 100%);
            border-color: #0d9488;
        }

        /* M9 - Kawasaki EMU - Blue with white stripe */
        .train-cars.m9 .train-car {
            background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 30%, #fff 32%, #fff 35%, #1d4ed8 37%, #1e40af 100%);
            border-color: #2563eb;
        }

        /* M3 - Budd EMU - Classic silver/stainless */
        .train-cars.m3 .train-car {
            background: linear-gradient(180deg, #d1d5db 0%, #9ca3af 30%, #6b7280 50%, #9ca3af 70%, #d1d5db 100%);
            border-color: #9ca3af;
        }

        /* C3 - Bi-level coaches - Silver with blue band */
        .train-cars.c3 .train-car {
            background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 25%, #3b82f6 27%, #3b82f6 35%, #d1d5db 37%, #9ca3af 100%);
            border-color: #9ca3af;
            height: 22px; /* Bi-levels are taller */
        }

        /* DE/DM - Diesel locomotives - Yellow/Orange */
        .train-cars.de .train-car, .train-cars.dm .train-car {
            background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 30%, #0039a6 32%, #0039a6 40%, #f59e0b 42%, #d97706 100%);
            border-color: #f59e0b;
        }

        .train-car-count {
            font-size: 0.6em;
            color: #888;
            margin-left: 4px;
        }
        @keyframes train-pulse {
            0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
            50% { box-shadow: 0 2px 12px rgba(251, 191, 36, 0.3); }
        }
        .train-icon { font-size: 1em; }
        .train-info { display: flex; flex-direction: column; gap: 1px; }
        .train-dest-label { font-size: 0.75em; font-weight: bold; color: #fff; font-family: Arial, Helvetica, sans-serif; line-height: 1.1; }
        .train-time-label { font-size: 0.65em; color: #fbbf24; font-family: Arial, Helvetica, sans-serif; line-height: 1.1; }
        .train-status-label { font-size: 0.55em; color: #22c55e; text-transform: uppercase; font-weight: 600; line-height: 1.1; }
        .vehicle-type-badge {
            font-size: 0.55em;
            background: #374151;
            color: #9ca3af;
            padding: 1px 4px;
            border-radius: 2px;
            font-weight: bold;
            margin-left: 4px;
            vertical-align: middle;
        }
        .vehicle-type-badge.m9 { background: #1e40af; color: #93c5fd; }
        .vehicle-type-badge.m7 { background: #065f46; color: #6ee7b7; }
        .train-on-track.amtrak { background: linear-gradient(135deg, #004C9A 0%, #002D5C 100%); border-left-color: #E21836 !important; }
        .train-on-track.amtrak .train-time-label { color: #E21836; }
        .train-on-track.amtrak .train-status-label { color: #E21836; }
        .train-number-badge { font-size: 0.7em; background: #E21836; color: #fff; padding: 1px 4px; border-radius: 2px; font-weight: bold; margin-right: 4px; }
        .amtrak-label { font-size: 0.6em; color: #E21836; font-weight: bold; letter-spacing: 0.5px; }
        .track-empty { position: absolute; left: 100px; top: 50%; transform: translateY(-50%); font-size: 0.75em; color: #444; font-style: italic; }
        .tunnel-indicator { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); font-size: 0.65em; color: #666; background: #1a1a1a; padding: 2px 6px; border-radius: 3px; }
        .track-diagram-section { margin-top: 50px; padding: 30px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; }
        .track-diagram-title { text-align: center; font-size: 1.8em; margin-bottom: 25px; font-weight: 500; }
        /* Skeleton Loading Styles */
        @keyframes skeleton-shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        .skeleton {
            background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s ease-in-out infinite;
            border-radius: 4px;
        }
        .skeleton-track-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 12px; }
        .skeleton-track-label { width: 100px; height: 24px; }
        .skeleton-track-lane { flex: 1; height: 50px; }
        .skeleton-track-end { width: 60px; height: 24px; }
        .skeleton-branch-card { width: 100%; height: 120px; margin-bottom: 12px; }
        .skeleton-loading-text { text-align: center; color: #666; padding: 20px; font-size: 0.9em; }
        .skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
        .loading-spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #3a3a3a;
            border-top-color: #60a5fa;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-right: 8px;
            vertical-align: middle;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .skeleton-hidden { display: none; }
        .tracks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
        .track-card {
            background: #1a1a1a;
            border-radius: 0;
            padding: 0;
            color: #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            font-family: Arial, Helvetica, sans-serif;
            border-top: 6px solid #0039a6;
            overflow: hidden;
        }
        .track-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.2em;
            font-weight: bold;
            padding: 10px 12px;
            background: #1a1a1a;
            color: #fff;
            border-radius: 0;
            margin-bottom: 0;
            border-bottom: 1px solid #333;
            font-family: Arial, Helvetica, sans-serif;
        }
        .inbound-banner {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: linear-gradient(135deg, #92400e, #b45309);
            color: white;
            font-size: 0.85em;
            border-bottom: 1px solid #333;
        }
        .inbound-badge { background: #fbbf24; color: #000; padding: 2px 6px; border-radius: 3px; font-weight: bold; font-size: 0.75em; }
        .inbound-origin { flex: 1; }
        .inbound-time { opacity: 0.9; }
        .train-on-track.inbound { background: linear-gradient(to right, #92400e, #f59e0b, #92400e); }
        .track-status-badge.arriving { background: #f59e0b; color: #000; animation: pulse-boarding 1.5s ease-in-out infinite; }
        .track-status-badge.unloading { background: #92400e; color: #fff; }
        .schematic-legend { display: flex; justify-content: center; gap: 20px; margin-top: 10px; font-size: 0.75em; color: #888; }
        .legend-box { width: 12px; height: 12px; border-radius: 2px; }
        .legend-box.confirmed { background: #3b82f6; }
        .legend-box.predicted { background: #22c55e; }
        .legend-box.platform { background: #A0522D; }
        .legend-box.inbound { background: #f59e0b; }

        /* Track Status Grid Section */
        .track-status-section {
            margin-top: 30px;
            padding: 25px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
        }
        .track-status-title {
            text-align: center;
            font-size: 1.6em;
            margin-bottom: 20px;
            font-weight: 500;
            color: #fff;
        }
        .tracks-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
        }
        .track-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 10px;
            padding: 12px;
            color: #333;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        .track-card-header {
            text-align: center;
            font-size: 1.3em;
            font-weight: bold;
            padding: 8px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        .track-card .train-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .track-card .train-label {
            font-size: 0.7em;
            text-transform: uppercase;
            font-weight: bold;
            margin-bottom: 2px;
            opacity: 0.6;
            color: #333;
        }
        .track-card .train-item {
            padding: 6px 8px;
            border-radius: 4px;
            font-size: 0.8em;
        }
        .track-card .train-item.previous {
            background: #f0f0f0;
            border-left: 3px solid #999;
        }
        .track-card .train-item.next {
            background: #e8f5e9;
            border-left: 3px solid #4caf50;
        }
        .track-card .train-item.empty {
            background: #fafafa;
            color: #999;
            font-style: italic;
            text-align: center;
            font-size: 0.75em;
        }
        .track-card .train-dest {
            font-weight: 600;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px;
        }
        .track-card .train-time {
            font-size: 0.9em;
            color: #666;
        }
        .track-card .branch-color-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .track-card .train-badge {
            font-size: 0.7em;
            padding: 1px 5px;
            border-radius: 3px;
            font-weight: bold;
        }
        .track-card .train-badge.confirmed {
            background: #3b82f6;
            color: #fff;
        }
        .track-card .train-badge.predicted {
            background: #22c55e;
            color: #fff;
        }

        /* ===== ENHANCED PLATFORM LIVE VIEW ===== */
        .platform-live-view {
            background: #0d1117;
            border-radius: 12px;
            padding: 20px;
            margin: 20px 0;
            overflow-x: auto;
        }
        .platform-live-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #333;
        }
        .platform-live-title {
            font-size: 1.4em;
            font-weight: 500;
            color: #fff;
        }
        .platform-live-legend {
            display: flex;
            gap: 20px;
            font-size: 0.75em;
            color: #888;
        }
        .platform-live-legend span {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .legend-car {
            width: 16px;
            height: 12px;
            border-radius: 2px;
        }
        .legend-car.m7 { background: linear-gradient(180deg, #fbbf24, #d97706); }  /* M7 Yellow */
        .legend-car.m9 { background: linear-gradient(180deg, #1e40af, #1e3a8a); }  /* M9 Dark Blue */
        .legend-car.m3 { background: linear-gradient(180deg, #991b1b, #7f1d1d); }  /* M3 Burgundy */
        .legend-car.c3 { background: linear-gradient(180deg, #3b82f6, #2563eb); }  /* C3 Blue */
        .legend-car.de { background: linear-gradient(180deg, #f59e0b, #d97706); }  /* Diesel Orange */

        .platform-track-row {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            min-height: 60px;
            position: relative;
            border-left: 4px solid #0039a6; /* Default LIRR blue */
            padding-left: 10px;
            border-radius: 4px;
            background: rgba(0, 57, 166, 0.05);
        }
        .platform-track-row.shared-track {
            border-left-color: #6366f1; /* Purple for shared */
            background: rgba(99, 102, 241, 0.05);
        }
        .platform-track-row.lirr-track {
            border-left-color: #0039a6; /* LIRR Blue */
            background: rgba(0, 57, 166, 0.05);
        }
        .platform-track-type {
            font-size: 0.55em;
            padding: 1px 4px;
            border-radius: 2px;
            font-weight: 600;
        }
        .platform-track-type.shared {
            background: #6366f1;
            color: #fff;
        }
        .platform-track-type.lirr {
            background: #0039a6;
            color: #fff;
        }
        .platform-track-label {
            width: 90px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }
        .platform-track-number {
            font-size: 1.1em;
            font-weight: bold;
            color: #fff;
        }
        .platform-track-info {
            font-size: 0.65em;
            color: #666;
        }
        .platform-track-capacity {
            font-size: 0.6em;
            color: #555;
        }

        /* Platform strip between tracks */
        .platform-island {
            height: 12px;
            background: linear-gradient(90deg, #4a5568 0%, #718096 50%, #4a5568 100%);
            border-radius: 2px;
            margin: 4px 90px 4px 90px;
            position: relative;
        }
        .platform-island-label {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.55em;
            color: #a0aec0;
            background: #4a5568;
            padding: 0 8px;
            white-space: nowrap;
        }

        /* Track rail section */
        .platform-track-rail {
            flex: 1;
            height: 8px;
            background: linear-gradient(90deg, #333 0%, #555 50%, #333 100%);
            border-radius: 2px;
            position: relative;
            margin: 0 10px;
        }
        .platform-track-rail::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 0;
            right: 0;
            height: 2px;
            background: repeating-linear-gradient(90deg, #666 0px, #666 15px, transparent 15px, transparent 22px);
        }

        /* Train consist on track */
        .platform-train-consist {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 2px;
            background: rgba(0,0,0,0.7);
            padding: 4px 8px;
            border-radius: 6px;
            border-left: 3px solid #fbbf24;
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .platform-train-consist:hover {
            transform: translateY(-50%) scale(1.02);
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
            z-index: 10;
        }
        .platform-train-consist.inbound {
            border-left-color: #3b82f6;
            background: rgba(59, 130, 246, 0.15);
        }
        .platform-train-consist.outbound {
            border-left-color: #22c55e;
            background: rgba(34, 197, 94, 0.15);
        }
        .platform-train-consist.departing {
            border-left-color: #ef4444;
            animation: departing-pulse 1s ease-in-out infinite;
        }
        @keyframes departing-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
            50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
        }

        /* Individual train car */
        .platform-car {
            width: 22px;
            height: 28px;
            background: linear-gradient(180deg, #6b7280 0%, #4b5563 50%, #374151 100%);
            border-radius: 3px;
            border: 1px solid #555;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 0.5em;
            color: #fff;
            position: relative;
            cursor: pointer;
            transition: transform 0.1s;
        }
        .platform-car:hover {
            transform: scale(1.15);
            z-index: 5;
        }
        .platform-car:first-child {
            border-radius: 6px 3px 3px 6px;
            width: 24px;
        }
        .platform-car:last-child {
            border-radius: 3px 6px 6px 3px;
            width: 24px;
        }
        .platform-car.m7 {
            background: linear-gradient(180deg, #0d9488 0%, #0f766e 30%, #fff 32%, #fff 35%, #0f766e 37%, #115e59 100%);
            border-color: #0d9488;
        }
        .platform-car.m9 {
            background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 30%, #fff 32%, #fff 35%, #1d4ed8 37%, #1e40af 100%);
            border-color: #2563eb;
        }
        .platform-car.de, .platform-car.dm {
            background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 30%, #0039a6 32%, #0039a6 40%, #f59e0b 42%, #d97706 100%);
            border-color: #f59e0b;
        }
        .platform-car.c3 {
            background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 25%, #3b82f6 27%, #3b82f6 35%, #d1d5db 37%, #9ca3af 100%);
            border-color: #9ca3af;
            height: 32px;
        }

        .platform-car-number {
            font-size: 0.65em;
            font-weight: bold;
            line-height: 1;
            color: #000;
            text-shadow: 0 0 2px #fff;
        }
        .platform-car-equip {
            font-size: 0.5em;
            opacity: 0.8;
            line-height: 1;
        }

        /* Occupancy indicator on car */
        .platform-car.occ-empty::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #22c55e; }
        .platform-car.occ-few::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #fbbf24; }
        .platform-car.occ-many::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #ef4444; }

        /* Train info tooltip */
        .platform-train-info {
            display: flex;
            flex-direction: column;
            margin-left: 8px;
            min-width: 100px;
        }
        .platform-train-dest {
            font-size: 0.8em;
            font-weight: bold;
            color: #fff;
            line-height: 1.2;
        }
        .platform-train-time {
            font-size: 0.7em;
            color: #fbbf24;
        }
        .platform-train-status {
            font-size: 0.6em;
            color: #22c55e;
            text-transform: uppercase;
            font-weight: 600;
        }
        .platform-train-status.departing {
            color: #ef4444;
            animation: pulse 1s infinite;
        }
        .platform-train-status.boarding {
            color: #fbbf24;
        }

        /* Arrived-as tooltip */
        .platform-train-arrived {
            font-size: 0.55em;
            color: #888;
            margin-top: 2px;
        }
        .platform-train-arrived strong {
            color: #60a5fa;
        }

        /* Track end indicators */
        .platform-track-end {
            width: 80px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 2px;
            font-size: 0.7em;
        }
        .platform-tunnel-badge {
            padding: 2px 6px;
            border-radius: 3px;
            font-weight: bold;
            font-size: 0.85em;
        }
        .platform-tunnel-badge.l1, .platform-tunnel-badge.l2 {
            background: #3b82f6;
            color: #fff;
        }
        .platform-tunnel-badge.l3, .platform-tunnel-badge.l4 {
            background: #22c55e;
            color: #000;
        }
        .platform-ladder-badge {
            font-size: 0.75em;
            color: #888;
        }

        /* Empty track indicator */
        .platform-track-empty {
            position: absolute;
            left: 100px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.8em;
            color: #444;
            font-style: italic;
        }

        /* Equipment type badge */
        .platform-fleet-badge {
            font-size: 0.8em;
            padding: 1px 5px;
            border-radius: 3px;
            font-weight: bold;
            margin-left: 4px;
        }
        .platform-fleet-badge.m7 { background: #fbbf24; color: #000; }
        .platform-fleet-badge.m9 { background: #1e40af; color: #fff; }
        .platform-fleet-badge.m3 { background: #991b1b; color: #fff; }
        .platform-fleet-badge.c3 { background: #3b82f6; color: #fff; }
        .platform-fleet-badge.de, .platform-fleet-badge.dm { background: #f59e0b; color: #000; }

        /* Mini car indicators */
        .platform-cars-row {
            display: flex;
            gap: 2px;
            align-items: center;
            margin: 0 6px;
        }
        .platform-car-mini {
            width: 8px;
            height: 16px;
            background: linear-gradient(180deg, #6b7280 0%, #374151 100%);
            border-radius: 1px;
            border: 1px solid #555;
        }
        /* M7 - Iconic Yellow band */
        .platform-car-mini.m7 {
            background: linear-gradient(180deg, #fbbf24, #d97706);
            border-color: #f59e0b;
        }
        /* M9 - Dark Blue stripe */
        .platform-car-mini.m9 {
            background: linear-gradient(180deg, #1e40af, #1e3a8a);
            border-color: #2563eb;
        }
        /* M3 - Burgundy (seat color) */
        .platform-car-mini.m3 {
            background: linear-gradient(180deg, #991b1b, #7f1d1d);
            border-color: #b91c1c;
        }
        /* C3 - Blue (side stripe) */
        .platform-car-mini.c3 {
            background: linear-gradient(180deg, #3b82f6, #2563eb);
            border-color: #60a5fa;
            height: 20px;
        }
        /* DE/DM - Diesel Orange/Yellow */
        .platform-car-mini.de, .platform-car-mini.dm {
            background: linear-gradient(180deg, #f59e0b, #d97706);
            border-color: #f59e0b;
        }
        .platform-car-more {
            font-size: 0.6em;
            color: #888;
            margin-left: 2px;
        }

        /* ===== NEW CONSIST VISUALIZATION (Cars filling track) ===== */
        .platform-consist-wrapper {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            padding: 4px;
        }
        .consist-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
            flex-shrink: 0;
        }
        .consist-icon {
            width: 28px;
            height: 28px;
            object-fit: contain;
            border-radius: 4px;
            background: rgba(0,0,0,0.5);
        }
        .consist-icon-text {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #374151;
            border-radius: 4px;
            font-size: 0.6em;
            font-weight: bold;
            color: #fff;
        }
        .consist-dest {
            font-weight: 600;
            color: #fff;
            font-size: 0.85em;
        }
        .consist-train-num {
            color: #60a5fa;
            font-size: 0.75em;
        }
        .consist-time {
            color: #fbbf24;
            font-size: 0.75em;
        }
        .consist-status {
            font-size: 0.65em;
            padding: 2px 6px;
            border-radius: 3px;
            font-weight: 600;
            margin-left: auto;
        }
        .consist-status.arrived {
            background: #3b82f6;
            color: #fff;
        }
        .consist-status.arriving {
            background: #8b5cf6;
            color: #fff;
            animation: pulse-arriving 1.5s ease-in-out infinite;
        }
        @keyframes pulse-arriving {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        .consist-status.boarding {
            background: #22c55e;
            color: #fff;
        }
        .consist-status.departed {
            background: #6b7280;
            color: #fff;
            opacity: 0.7;
        }

        /* Cars track - the cars fill this container */
        /* flex-direction: row-reverse puts car #1 on the right (east end) */
        /* This matches the west-to-east orientation at Penn Station */
        .consist-cars-track {
            display: flex;
            flex-direction: row-reverse;
            height: 38px;
            background: linear-gradient(90deg, #222 0%, #333 50%, #222 100%);
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid #444;
        }

        /* Individual car in consist - GREY base with colored accents at ends */
        .consist-car {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-right: 1px solid rgba(0,0,0,0.4);
            position: relative;
            cursor: pointer;
            transition: filter 0.1s;
            /* Grey stainless steel base - like real trains */
            background: linear-gradient(180deg, #9ca3af 0%, #6b7280 30%, #4b5563 70%, #374151 100%);
            min-width: 28px;
        }
        .consist-car:hover {
            filter: brightness(1.2);
            z-index: 2;
        }
        .consist-car:last-child {
            border-right: none;
        }
        .consist-car.car-first {
            border-radius: 6px 0 0 6px;
        }
        .consist-car.car-last {
            border-radius: 0 6px 6px 0;
        }

        /* Color band at first/last car for fleet identification */
        .consist-car.car-first.m7, .consist-car.car-last.m7 {
            background: linear-gradient(180deg, #fbbf24 0%, #fbbf24 20%, #9ca3af 20%, #6b7280 50%, #4b5563 80%, #374151 100%);
        }
        .consist-car.car-first.m9, .consist-car.car-last.m9 {
            background: linear-gradient(180deg, #1e40af 0%, #1e40af 20%, #9ca3af 20%, #6b7280 50%, #4b5563 80%, #374151 100%);
        }
        .consist-car.car-first.m3, .consist-car.car-last.m3 {
            background: linear-gradient(180deg, #7f1d1d 0%, #7f1d1d 20%, #9ca3af 20%, #6b7280 50%, #4b5563 80%, #374151 100%);
        }
        .consist-car.car-first.c3, .consist-car.car-last.c3 {
            background: linear-gradient(180deg, #3b82f6 0%, #3b82f6 20%, #9ca3af 20%, #6b7280 50%, #4b5563 80%, #374151 100%);
        }
        .consist-car.car-first.de, .consist-car.car-last.de,
        .consist-car.car-first.dm, .consist-car.car-last.dm {
            background: linear-gradient(180deg, #f59e0b 0%, #f59e0b 20%, #9ca3af 20%, #6b7280 50%, #4b5563 80%, #374151 100%);
        }

        /* Car number labels */
        .car-pos {
            font-size: 0.5em;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
            line-height: 1;
        }
        .car-num {
            font-size: 0.45em;
            font-weight: normal;
            color: rgba(255,255,255,0.85);
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 95%;
            line-height: 1;
        }

        /* Toilet indicator */
        .car-toilet {
            position: absolute;
            bottom: 2px;
            right: 2px;
            font-size: 0.45em;
            opacity: 0.8;
        }

        /* Occupancy indicators - dot at bottom left */
        .consist-car.occ-empty::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 3px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #22c55e;
        }
        .consist-car.occ-few::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 3px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #fbbf24;
        }
        .consist-car.occ-many::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 3px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #ef4444;
        }

        /* Diesel locomotive styling - can overhang platform */
        .consist-car.locomotive {
            background: linear-gradient(180deg, #f59e0b 0%, #d97706 40%, #1a1a1a 42%, #1a1a1a 58%, #d97706 60%, #b45309 100%);
            min-width: 36px;
            border: 2px solid #f59e0b;
        }
        .consist-car.locomotive .car-pos {
            font-size: 0.55em;
            color: #000;
        }
        .locomotive-overhang {
            position: absolute;
            left: -40px;
            width: 36px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, #f59e0b 0%, #d97706 40%, #1a1a1a 42%, #1a1a1a 58%, #d97706 60%, #b45309 100%);
            border-radius: 6px 0 0 6px;
            border: 2px solid #f59e0b;
            font-size: 0.5em;
            color: #000;
            font-weight: bold;
        }
        .locomotive-overhang.right {
            left: auto;
            right: -40px;
            border-radius: 0 6px 6px 0;
        }

        /* Departed train styling - fade out */
        .platform-consist-wrapper.departed {
            opacity: 0.5;
        }
        .platform-consist-wrapper.departed .consist-cars-track {
            filter: grayscale(50%);
        }

        /* ===== APPROACHING TRAIN INDICATORS ===== */
        .approaching-indicator {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 4px;
            font-size: 0.7em;
            white-space: nowrap;
            z-index: 5;
            animation: approaching-pulse 2s ease-in-out infinite;
        }
        @keyframes approaching-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        /* From East River tunnels - show on RIGHT */
        .approaching-indicator.from-east {
            right: 85px;
            border-left: 3px solid #22c55e;
        }
        .approaching-indicator.from-east::before {
            content: '\25C0';  /* Left arrow pointing to track */
            color: #22c55e;
            font-size: 1.2em;
        }
        /* From West Side Yard - show on LEFT */
        .approaching-indicator.from-west {
            left: 95px;
            border-right: 3px solid #f59e0b;
            flex-direction: row-reverse;
        }
        .approaching-indicator.from-west::after {
            content: '\25B6';  /* Right arrow pointing to track */
            color: #f59e0b;
            font-size: 1.2em;
        }
        .approaching-origin {
            color: #e2e8f0;
            font-weight: 500;
        }
        .approaching-train-id {
            color: #60a5fa;
        }
        .approaching-eta {
            color: #fbbf24;
            font-weight: 600;
        }
        .approaching-consist-info {
            color: #9ca3af;
        }

        /* ===== TRACK LAYOUT WITH ARCHITECTURAL SKEW ===== */
        /* Track rows with offset based on capacity - longer tracks extend further right */
        .platform-track-row {
            display: flex;
            align-items: center;
            margin-bottom: 6px;
            min-height: 75px;
            position: relative;
            border-left: 4px solid #0039a6;
            padding-left: 10px;
            border-radius: 4px;
            background: rgba(0, 57, 166, 0.05);
        }
        /* Track capacity-based left margin for architectural skew */
        .platform-track-row[data-capacity="15"] { margin-left: 0; }
        .platform-track-row[data-capacity="14"] { margin-left: 15px; }
        .platform-track-row[data-capacity="13"] { margin-left: 30px; }
        .platform-track-row[data-capacity="12"] { margin-left: 45px; }
        .platform-track-row[data-capacity="11"] { margin-left: 60px; }
        .platform-track-row[data-capacity="10"] { margin-left: 75px; }
        .platform-track-row[data-capacity="9"] { margin-left: 90px; }
        .platform-track-row[data-capacity="8"] { margin-left: 105px; }

        /* Platform islands with varying widths */
        .platform-island {
            height: 14px;
            background: linear-gradient(90deg, #4a5568 0%, #718096 50%, #4a5568 100%);
            border-radius: 2px;
            margin: 2px 90px 2px 90px;
            position: relative;
        }
        .platform-island.wide {
            height: 18px;
            background: linear-gradient(90deg, #4a5568 0%, #a0aec0 50%, #4a5568 100%);
        }
        .platform-island.narrow {
            height: 10px;
        }
        /* Platform islands follow track skew */
        .platform-island[data-platform="11"] { margin-left: 0; }
        .platform-island[data-platform="10"] { margin-left: 45px; }
        .platform-island[data-platform="9"] { margin-left: 75px; }
        .platform-island[data-platform="8"] { margin-left: 75px; }
        .platform-island[data-platform="7"] { margin-left: 75px; }

        /* Legend car swatches inline */
        .platform-legend .legend-car {
            width: 20px;
            height: 14px;
            border-radius: 3px;
            vertical-align: middle;
            margin-right: 4px;
        }

        /* Hide architectural skew on mobile */
        @media (max-width: 900px) {
            .platform-track-row[data-capacity] {
                margin-left: 0 !important;
            }
            .platform-island[data-platform] {
                margin-left: 90px !important;
            }
        }

        /* Make track rail taller to accommodate consist */
        .platform-track-rail {
            flex: 1;
            min-height: 70px;
            background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
            border-radius: 4px;
            position: relative;
            margin: 0 10px;
            border: 1px solid #333;
        }

        /* Departure board consist view - full width */
        .departure-consist {
            display: flex;
            gap: 2px;
            margin-top: 6px;
            width: 100%;
            flex: 1;
        }
        .departure-car {
            flex: 1;
            min-width: 18px;
            max-width: 40px;
            height: 28px;
            background: linear-gradient(180deg, #22c55e, #16a34a);  /* Green = empty/few */
            border-radius: 3px;
            border: 1px solid rgba(255,255,255,0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 0.5em;
            color: #fff;
            cursor: pointer;
            transition: transform 0.1s;
        }
        .departure-car:hover {
            transform: scale(1.15);
            z-index: 5;
        }
        .departure-car:first-child { border-radius: 6px 3px 3px 6px; }
        .departure-car:last-child { border-radius: 3px 6px 6px 3px; }
        /* Occupancy coloring - Green (empty) -> Yellow (some) -> Red (crowded) */
        .departure-car.occ-few {
            background: linear-gradient(180deg, #eab308, #ca8a04);  /* Yellow = few seats */
        }
        .departure-car.occ-many {
            background: linear-gradient(180deg, #ef4444, #dc2626);  /* Red = crowded */
        }
        /* Fleet type subtle indicators (border only, occupancy determines fill) */
        .departure-car.m7 { border-color: #0d9488; }
        .departure-car.m9 { border-color: #3b82f6; }
        .departure-car.m3 { border-color: #991b1b; }

        /* C3 Bi-level coaches - Stainless steel with blue stripe */
        .departure-car.c3 {
            background: linear-gradient(180deg,
                #9ca3af 0%,      /* Silver top */
                #6b7280 30%,     /* Grey middle */
                #3b82f6 32%,     /* Blue stripe */
                #3b82f6 38%,
                #6b7280 40%,     /* Grey middle */
                #9ca3af 100%     /* Silver bottom */
            );
            border-color: #3b82f6;
            height: 32px;  /* Bi-levels are taller */
        }
        /* C3 occupancy styling */
        .departure-car.c3.occ-few {
            background: linear-gradient(180deg,
                #eab308 0%, #ca8a04 30%, #3b82f6 32%, #3b82f6 38%, #ca8a04 40%, #eab308 100%
            );
        }
        .departure-car.c3.occ-many {
            background: linear-gradient(180deg,
                #ef4444 0%, #dc2626 30%, #3b82f6 32%, #3b82f6 38%, #dc2626 40%, #ef4444 100%
            );
        }

        /* Diesel locomotives - Blue body with yellow/blue nose stripe */
        .departure-car.de, .departure-car.dm {
            background: linear-gradient(180deg,
                #1e40af 0%,      /* Blue top */
                #1e3a8a 100%     /* Darker blue bottom */
            );
            border-color: #fbbf24;
            position: relative;
        }
        /* Nose stripe on first car (locomotive) */
        .departure-car.de:first-child, .departure-car.dm:first-child {
            background: linear-gradient(90deg,
                #fbbf24 0%,      /* Yellow nose */
                #fbbf24 15%,
                #1e40af 18%,     /* Blue stripe */
                #1e40af 25%,
                #fbbf24 28%,     /* Yellow stripe */
                #fbbf24 35%,
                #1e3a8a 38%,     /* Main body blue */
                #1e3a8a 100%
            );
            border-color: #fbbf24;
            border-left-width: 2px;
        }
        /* Locomotives don't show occupancy colors */
        .departure-car.de.occ-few, .departure-car.de.occ-many,
        .departure-car.dm.occ-few, .departure-car.dm.occ-many {
            background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
        }
        .departure-car.de:first-child.occ-few, .departure-car.de:first-child.occ-many,
        .departure-car.dm:first-child.occ-few, .departure-car.dm:first-child.occ-many {
            background: linear-gradient(90deg,
                #fbbf24 0%, #fbbf24 15%, #1e40af 18%, #1e40af 25%,
                #fbbf24 28%, #fbbf24 35%, #1e3a8a 38%, #1e3a8a 100%
            );
        }

        .departure-car-pos { font-weight: bold; font-size: 1.1em; }
        .departure-car-num { font-size: 0.75em; opacity: 0.9; }

        @media (max-width: 768px) {
            .tracks-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 480px) {
            .tracks-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Platform Summary Stats */
        .platform-summary {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            padding: 15px 20px;
            background: rgba(0,0,0,0.3);
            border-radius: 8px;
            margin-bottom: 15px;
        }
        .summary-stat { text-align: center; }
        .summary-stat .stat-number {
            font-size: 2em;
            font-weight: bold;
            color: #fff;
            display: block;
        }
        .summary-stat .stat-label {
            font-size: 0.8em;
            color: #888;
        }
        .summary-next {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-left: 20px;
            border-left: 1px solid #444;
        }
        .next-label { color: #888; font-size: 0.9em; }
        .next-time { font-size: 1.3em; font-weight: bold; color: #fbbf24; }
        .next-dest { color: #fff; font-weight: 500; }
        .next-track { color: #60a5fa; }

        /* Mobile Track Cards */
        .mobile-track-cards {
            display: none;
            flex-direction: column;
            gap: 12px;
            padding: 10px 0;
        }
        .track-card {
            background: #1a1a2e;
            border-radius: 8px;
            padding: 15px;
            border-left: 4px solid #0039a6;
        }
        .track-card.occupied {
            border-left-color: #22c55e;
            background: linear-gradient(90deg, rgba(34,197,94,0.1) 0%, #1a1a2e 30%);
        }
        .track-card.shared-track { border-left-color: #6366f1; }
        .track-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .track-card-number {
            font-size: 1.4em;
            font-weight: bold;
            color: #fff;
        }
        .track-card-tunnel {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .track-card-train {
            font-size: 1.1em;
            color: #fbbf24;
            margin-bottom: 4px;
        }
        .track-card-status {
            font-size: 0.85em;
            color: #22c55e;
            text-transform: uppercase;
            font-weight: 600;
        }
        .track-card-empty {
            color: #666;
            font-style: italic;
        }
        .track-card-details {
            display: flex;
            justify-content: space-between;
            font-size: 0.85em;
            color: #888;
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px solid #333;
        }

        /* Tunnel line badges */
        .tunnel-line {
            padding: 2px 6px;
            border-radius: 3px;
            font-weight: bold;
            font-size: 0.8em;
        }
        .tunnel-line.tunnel-L1, .tunnel-line.tunnel-L2 {
            background: #3b82f6;
            color: #fff;
        }
        .tunnel-line.tunnel-L3, .tunnel-line.tunnel-L4 {
            background: #22c55e;
            color: #000;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .board-row {
                grid-template-columns: 1fr;
                gap: 15px;
                padding: 15px;
            }
            .time-col { font-size: 1.8em; }
            .dest-band { font-size: 1.2em; padding: 10px 15px; }
            .track-col { text-align: left; }
            .track-guesses { align-items: flex-start; }
            .otp-summary { flex-direction: column; }
            .verification-item { grid-template-columns: 1fr 1fr; }

            /* Mobile: Hide desktop diagram, show cards */
            .platform-visual { display: none !important; }
            .mobile-track-cards { display: flex; }
            .platform-summary {
                flex-direction: column;
                gap: 15px;
            }
            .summary-next {
                border-left: none;
                padding-left: 0;
                border-top: 1px solid #444;
                padding-top: 10px;
            }
        }