*{box-sizing:border-box;margin:0;padding:0}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:16px;line-height:1.5;font-weight:400;color:#333;background-color:#f8f6f3;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{width:100%;height:100%;min-height:100vh}.spider-map-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#f8f6f3;position:relative;overflow:hidden}.spider-map{width:100%;height:100%;max-width:1200px;max-height:100vh}.route-path{transition:opacity .2s ease}.stop-marker circle{transition:r .2s ease}.stop-marker:hover circle{r:7}.stop-label{pointer-events:none;-webkit-user-select:none;user-select:none;font-weight:500}@media(max-width:480px){.spider-map text{display:none}}.zoom-controls{position:absolute;bottom:134px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:100}.zoom-button{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #ccc;box-shadow:0 2px 6px #00000026;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;transition:all .2s ease}.zoom-button:hover{background:#f5f5f5;border-color:#999;color:#333}.zoom-button:active{transform:scale(.95)}@media(max-width:480px){.zoom-controls{display:none}}.recenter-button{position:absolute;bottom:80px;right:16px;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #ccc;box-shadow:0 2px 6px #00000026;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;transition:all .2s ease;z-index:100}.recenter-button:hover{background:#f5f5f5;border-color:#999;color:#333}.recenter-button:active{transform:scale(.95)}.recenter-button svg{width:20px;height:20px}.map-mode-toggle{position:absolute;bottom:24px;right:16px;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #ccc;box-shadow:0 2px 6px #00000026;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;transition:all .2s ease;z-index:100}.map-mode-toggle:hover{background:#f5f5f5;border-color:#999;color:#333}.map-mode-toggle:active{transform:scale(.95)}.map-mode-toggle svg{width:20px;height:20px}.status-bar{display:flex;align-items:center;gap:16px;padding:8px 16px;background-color:#fff;border-bottom:1px solid #E0E0E0;font-size:13px;color:#666}@media(min-width:481px){.status-bar{position:absolute;bottom:16px;left:16px;padding:10px 14px;border-radius:10px;border-bottom:none;background:#fffffff2;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:90}}.status-indicator{display:flex;align-items:center;gap:6px}.status-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.status-text{font-weight:500}.status-info{display:flex;align-items:center;gap:8px}.separator{color:#ccc}.vehicle-count{font-weight:500;color:var(--line-color, #00843D)}.last-update{color:#888}.status-error{color:#da291c;font-size:12px;margin-left:auto}@media(max-width:480px){.status-bar{order:99;border-bottom:none;border-top:1px solid #E0E0E0}}.debug-panel{display:flex;flex-direction:column;width:420px;height:100%;background:#1a1a1a;color:#e0e0e0;font-family:SF Mono,Monaco,Menlo,monospace;font-size:12px;overflow:hidden}.debug-panel-section{flex:1;overflow:hidden;display:flex;flex-direction:column;border-bottom:1px solid #333}.debug-panel-section:last-child{border-bottom:none}.debug-panel-audit{flex:1.2}.train-list{display:flex;flex-direction:column;height:100%;overflow:hidden}.train-list h3{margin:0;padding:12px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#888;background:#222;border-bottom:1px solid #333}.train-list-empty{margin:0;padding:16px;color:#666;font-style:italic}.train-list-items{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}.train-list-item{padding:10px 16px;border-bottom:1px solid #2a2a2a}.train-list-item:hover{background:#252525}.train-list-item-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.train-route-badge{display:inline-block;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:600;color:#fff}.train-label{font-weight:600;color:#fff}.train-direction{color:#888;font-size:11px}.train-terminal{color:#aaa;font-size:11px}.train-list-item-details{display:flex;gap:8px;margin-bottom:4px;color:#aaa}.train-status{color:#888}.train-stop{color:#ccc}.train-list-item-meta{display:flex;justify-content:space-between;font-size:10px;color:#555}.train-id{font-family:monospace}.train-updated{color:#666}.audit-log{display:flex;flex-direction:column;height:100%;overflow:hidden}.audit-log h3{margin:0;padding:12px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#888;background:#222;border-bottom:1px solid #333}.audit-log-empty{margin:0;padding:16px;color:#666;font-style:italic}.audit-log-items{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}.audit-log-item{display:flex;align-items:center;gap:8px;padding:6px 16px;border-bottom:1px solid #222;font-size:11px}.audit-log-item.appeared{background:#00843d1a}.audit-log-item.disappeared{background:#c832321a}.audit-log-item.position_update{background:#6495ed1a}.audit-log-time{color:#666;font-family:monospace;min-width:60px}.audit-log-type{font-weight:700;width:14px;text-align:center}.audit-log-type.appeared{color:#4caf50}.audit-log-type.disappeared{color:#e57373}.audit-log-type.position_update{color:#64b5f6}.audit-log-route{display:inline-block;padding:1px 4px;border-radius:2px;font-size:9px;font-weight:600;color:#fff}.audit-log-label{color:#ccc;min-width:40px}.audit-log-pos{display:flex;flex-direction:column;align-items:flex-end;font-size:9px;color:#666;font-family:monospace;line-height:1.1;min-width:32px}.audit-log-stop{color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}.audit-log-terminal{color:#888;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.station-selector{display:flex;flex-direction:column;gap:8px}.station-selector-label{font-size:12px;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:.5px}.station-selector-input-wrapper{position:relative}.station-selector-input{width:100%;padding:16px 20px;font-size:18px;font-family:inherit;border:2px solid #ddd;border-radius:12px;background:#fff;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.station-selector-input:focus{border-color:#333;box-shadow:0 0 0 3px #00000014}.station-selector-input::placeholder{color:#aaa}.station-selector-list{position:absolute;top:100%;left:0;right:0;margin:4px 0 0;padding:8px 0;list-style:none;background:#fff;border:1px solid #ddd;border-radius:12px;box-shadow:0 8px 24px #0000001f;max-height:300px;overflow-y:auto;z-index:100}.station-selector-item{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;cursor:pointer;transition:background-color .1s ease}.station-selector-item:hover,.station-selector-item.highlighted{background-color:#f5f5f5}.station-selector-item-name{font-size:16px;color:#333}.station-selector-item-routes{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.station-selector-route-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;font-size:11px;font-weight:700;color:#fff;border-radius:4px}.station-selector-empty{padding:16px 20px;background:#fff;border:1px solid #ddd;border-radius:12px;margin-top:4px;color:#888;font-style:italic}.station-selector-selected{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;font-size:18px;font-family:inherit;background:var(--line-color, #00843D);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:background-color .15s ease}.station-selector-selected:hover{background:var(--line-color-dark, #006d32)}.station-selector-name{font-weight:600}.station-selector-change{font-size:14px;opacity:.8}.route-filter{display:flex;flex-direction:column;gap:8px}.route-filter-label{font-size:12px;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:.5px}.route-filter-options{display:flex;flex-wrap:wrap;gap:8px}.route-filter-option{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:14px;font-family:inherit;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .15s ease}.route-filter-option.enabled{background:var(--line-color, #00843D);color:#fff;border-color:var(--line-color, #00843D)}.route-filter-option.enabled:hover{background:var(--line-color-dark, #006d32);border-color:var(--line-color-dark, #006d32)}.route-filter-option.disabled{background:#f5f5f5;color:#888;border-color:#ddd}.route-filter-option.disabled:hover{background:#eee;border-color:#ccc;color:#666}.route-filter-destination{font-weight:500}.route-filter-letter{font-weight:600;opacity:.8}.direction-toggle-arrow{display:flex;align-items:center;gap:8px;padding:12px 20px;background:#f0f0f0;border:none;border-radius:8px;cursor:pointer;transition:background-color .15s ease}.direction-toggle-arrow:hover{background:#e5e5e5}.arrow-icon{font-size:24px;font-weight:300;color:#ccc;transition:color .15s ease,transform .15s ease}.arrow-icon.active{color:var(--line-color, #00843D);transform:scale(1.2)}.map-view-toggle{display:flex;align-items:center;gap:4px;padding:6px 8px;background:#f5f5f5;border:1px solid #ddd;border-radius:8px;cursor:pointer;transition:background-color .15s ease}.map-view-toggle:hover{background:#eee}.view-option{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:6px;color:#888;transition:all .2s ease}.view-option.active{background:var(--line-color, #00843D);color:#fff}.view-option svg{flex-shrink:0}.view-label{font-size:12px;font-weight:500}.upcoming-trains{background:#fff;border-radius:8px;padding:12px;box-shadow:0 2px 8px #0000001a}@media(min-width:481px){.desktop-sidebar .upcoming-trains{box-shadow:none;border-radius:0;padding:20px;height:100%}.desktop-sidebar .upcoming-trains-header h3{font-size:18px;margin-bottom:16px}.desktop-sidebar .upcoming-train-item{padding:12px;gap:12px}.desktop-sidebar .upcoming-train-route{width:auto;height:auto;padding:6px 10px;font-size:13px;border-radius:6px}.desktop-sidebar .upcoming-train-destination{font-size:14px}.desktop-sidebar .upcoming-train-time{font-size:16px;min-width:60px}}.upcoming-trains-header h3{margin:0 0 12px;font-size:14px;font-weight:600;color:#333}.upcoming-trains-empty,.upcoming-trains-loading{color:#888;font-size:13px;margin:0;font-style:italic}.upcoming-trains-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.upcoming-train-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#f8f8f8;border-radius:6px}.upcoming-train-item--immediate{background:#e8f5e9}.upcoming-train-route{flex-shrink:0;width:26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff}.upcoming-train-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.upcoming-train-destination{font-size:13px;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upcoming-train-id{font-size:11px;color:#666;font-weight:400}.upcoming-train-time{flex-shrink:0;font-size:15px;font-weight:600;color:#333;min-width:50px;text-align:right}.upcoming-train-time--immediate{color:#2e7d32}.line-selector{display:flex;gap:8px;padding:8px;background:#f5f5f5;border-radius:10px;margin-bottom:12px}.line-option{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#fff;border:2px solid #ddd;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:500;color:#666}.line-option:hover{border-color:var(--line-color, #888);background:#fafafa}.line-option.active{border-color:var(--line-color, #888);background:var(--line-color, #888);color:#fff}.line-option.active .line-indicator{background-color:#fff!important}.line-indicator{width:12px;height:12px;border-radius:50%;flex-shrink:0}.line-name{white-space:nowrap}.control-panel{position:absolute;top:20px;left:20px;display:none;flex-direction:column;gap:16px;width:320px;max-width:calc(100vw - 40px);z-index:50}.arrival-cards{padding:8px 12px 12px}.arrival-cards-loading,.arrival-cards-empty{color:var(--text-secondary, #666);font-size:14px;text-align:center;padding:12px}.arrival-cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:150px;overflow:hidden}.arrival-card{display:flex;align-items:center;gap:4px;padding:5px 6px;background:var(--card-bg, #f5f5f5);border-radius:6px;min-width:0}.arrival-card--immediate{background:var(--immediate-bg, #fff8e6)}.arrival-card-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 4px;font-size:11px;font-weight:700;color:#fff;border-radius:4px;flex-shrink:0}.arrival-card-time{font-size:11px;font-weight:500;color:var(--text-primary, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arrival-card--immediate .arrival-card-time{color:var(--immediate-text, #d4a300);font-weight:600}@media(prefers-color-scheme:dark){.arrival-card{background:var(--card-bg-dark, #2a2a2a)}.arrival-card--immediate{background:var(--immediate-bg-dark, #3a3520)}.arrival-card-time{color:var(--text-primary-dark, #eee)}.arrival-card--immediate .arrival-card-time{color:var(--immediate-text-dark, #ffc107)}.arrival-cards-loading,.arrival-cards-empty{color:var(--text-secondary-dark, #999)}}@media(max-width:320px){.arrival-cards-grid{grid-template-columns:repeat(3,1fr)}}.mobile-station-bar{display:none;background:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 4px #0000000d}@media(max-width:480px){.mobile-station-bar{display:block}}.search-bar{position:relative;width:100%;padding:8px 16px;background:#fff;z-index:200}@media(min-width:481px){.search-bar{position:absolute;top:20px;left:50%;transform:translate(-50%);width:auto;max-width:500px;min-width:400px;padding:12px 20px;border-radius:12px;background:#fffffffa;box-shadow:0 4px 16px #0000001f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}.search-bar--selected{display:flex;align-items:center;justify-content:space-between;gap:12px}.search-bar-actions{display:flex;align-items:center;gap:8px}.search-bar-title{font-size:16px;font-weight:600;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.search-bar-clear{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:#f0f0f0;border-radius:50%;cursor:pointer;color:#666;transition:all .15s ease;flex-shrink:0}.search-bar-clear:hover{background:#e0e0e0;color:#333}.search-bar-clear:active{transform:scale(.95)}.search-bar-input-wrapper{position:relative;display:flex;align-items:center}.search-bar-icon{position:absolute;left:12px;color:#999;pointer-events:none}.search-bar-input{width:100%;padding:12px 12px 12px 42px;font-size:16px;border:1px solid #ddd;border-radius:8px;background:#f8f8f8;outline:none;transition:all .15s ease}.search-bar-input:focus{border-color:#999;background:#fff;box-shadow:0 2px 8px #00000014}.search-bar-input::placeholder{color:#999}.search-bar-list{position:absolute;top:100%;left:16px;right:16px;max-height:300px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #00000026;margin:0;padding:4px 0;list-style:none;z-index:300}.search-bar-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;transition:background .1s ease}.search-bar-item:hover,.search-bar-item.highlighted{background:#f5f5f5}.search-bar-item-name{font-size:15px;color:#333}.search-bar-item-routes{display:flex;gap:4px}.search-bar-route-badge{font-size:11px;font-weight:600;color:#fff;padding:2px 6px;border-radius:4px}.search-bar-empty{position:absolute;top:100%;left:16px;right:16px;padding:16px;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #00000026;text-align:center;color:#666;font-size:14px}.train-card{padding:12px 16px;background:var(--card-bg, #fff);border-top:1px solid var(--border-color, #e0e0e0)}@media(min-width:481px){.desktop-sidebar .train-card{padding:20px;border-top:none}.desktop-sidebar .train-card-destination{font-size:18px}.desktop-sidebar .train-card-status-text{font-size:14px}.desktop-sidebar .train-card-current-stop{font-size:16px}.desktop-sidebar .train-card-badge{min-width:auto;height:auto;padding:6px 10px;font-size:13px}}.train-card--disappeared{background:var(--warning-bg, #fff8e6)}.train-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.train-card-route{display:flex;align-items:center;gap:8px}.train-card-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 6px;font-size:13px;font-weight:700;color:#fff;border-radius:4px}.train-card-destination{font-size:15px;font-weight:600;color:var(--text-primary, #333)}.train-card-status{margin-bottom:8px}.train-card-active{display:flex;align-items:baseline;gap:6px}.train-card-status-text{font-size:13px;color:var(--text-secondary, #666)}.train-card-current-stop{font-size:14px;font-weight:500;color:var(--text-primary, #333)}.train-card-disappeared{display:flex;align-items:center;gap:8px}.train-card-warning{font-size:18px}.train-card-warning-text{font-size:14px;color:var(--warning-text, #b36b00)}.train-card-remaining{padding-top:8px;border-top:1px solid var(--border-light, #eee)}.train-card-remaining-count{font-size:12px;color:var(--text-secondary, #888)}@media(prefers-color-scheme:dark){.train-card{background:var(--card-bg-dark, #1a1a1a);border-top-color:var(--border-color-dark, #333)}.train-card--disappeared{background:var(--warning-bg-dark, #3a3520)}.train-card-destination,.train-card-current-stop{color:var(--text-primary-dark, #eee)}.train-card-status-text,.train-card-remaining-count{color:var(--text-secondary-dark, #999)}.train-card-warning-text{color:var(--warning-text-dark, #ffc107)}.train-card-remaining{border-top-color:var(--border-light-dark, #333)}}.view-cycler{display:flex;align-items:center;gap:6px;padding:0 12px;height:52px;background:#f5f5f5;border:none;border-radius:12px;cursor:pointer;transition:background-color .15s ease,transform .15s ease;flex-shrink:0}.view-cycler:hover{background:#eee}.view-cycler:active{transform:scale(.97)}.view-cycler-line{display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 6px;font-size:12px;font-weight:700;color:#fff;border-radius:4px}.view-cycler-direction{font-size:13px;font-weight:600;color:#333;min-width:28px}.view-cycler-flip{font-size:18px;color:#666;transition:transform .3s ease}.view-cycler:hover .view-cycler-flip{transform:rotate(180deg)}.view-cycler-dots{display:flex;gap:4px;margin-left:4px}.view-cycler-dot{width:6px;height:6px;border-radius:50%;background:#ccc;transition:background-color .15s ease}.view-cycler-dot.active{background:var(--view-color, #333)}@media(max-width:480px){.view-cycler{height:48px;padding:0 10px;gap:5px}.view-cycler-line{min-width:24px;height:22px;font-size:11px}.view-cycler-direction{font-size:12px;min-width:24px}.view-cycler-flip{font-size:16px}}.app{display:flex;flex-direction:column;width:100%;height:100dvh;background-color:#f8f6f3}.app-header{display:none;align-items:center;justify-content:space-between;padding:16px 24px;color:#fff;box-shadow:0 2px 4px #0000001a;transition:background-color .3s ease}.app-header h1{font-size:1.25rem;font-weight:600;margin:0}.mode-toggle{padding:6px 12px;font-size:12px;font-weight:500;color:var(--line-color, #00843D);background:#ffffffe6;border:none;border-radius:4px;cursor:pointer;transition:all .15s ease}.mode-toggle:hover{background:#fff}.mode-toggle--active{background:#1a1a1a;color:#4caf50}.mode-toggle--active:hover{background:#2a2a2a}.app-content{display:flex;flex:1;overflow:hidden}.app-main{position:relative;flex:1;overflow:hidden;padding:16px}.desktop-sidebar{display:none}@media(min-width:481px){.desktop-sidebar{display:flex;flex-direction:column;width:360px;background:#fff;border-left:1px solid #e0e0e0;overflow-y:auto}}.app--debug .app-main{padding:8px}.mobile-search-bar{display:block}.mobile-train-card,.mobile-view-cycler,.desktop-view-cycler{display:none}@media(min-width:481px){.desktop-view-cycler{display:block}}@media(max-width:480px){.app-header{display:none}.app-main{padding:0}.mobile-search-bar,.mobile-train-card{display:block}.mobile-view-cycler{display:block;position:absolute;bottom:16px;left:16px;z-index:100}}