*{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}}.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}.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:var(--line-color, #00843D);box-shadow:0 0 0 3px var(--line-color-alpha, rgba(0, 132, 61, .1))}.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{font-size:12px;color:var(--line-color, #00843D);font-weight:600}.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}.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}.upcoming-train-destination{font-size:13px;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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:flex;flex-direction:column;gap:16px;width:320px;max-width:calc(100vw - 40px);z-index:50}.control-panel-section{background:#fffffff2;border-radius:12px;padding:16px;box-shadow:0 4px 16px #0000001a}.control-panel-direction{padding:8px;width:fit-content}@media(max-width:480px){.control-panel{display:none}}.mobile-station-bar{display:none;padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 4px #0000000d}@media(max-width:480px){.mobile-station-bar{display:block}}.app{display:flex;flex-direction:column;width:100%;height:100vh;background-color:#f8f6f3}.app-header{display:flex;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{flex:1;overflow:hidden;padding:16px}.app--debug .app-main{padding:8px}@media(max-width:480px){.app-header{display:none}.app-main{padding:0}}