:root{--bg: #0f1419;--panel: #1a2230;--panel-2: #222c3d;--accent: #2dd4bf;--accent-2: #38bdf8;--text: #e6edf3;--muted: #8b98a9;--border: #2a3547;--rail: #2dd4bf;--road: #f59e0b;--good: #22c55e;--warn: #f59e0b;--bad: #ef4444}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}.app{display:flex;height:100vh;overflow:hidden}.sidebar{width:543px;min-width:420px;background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;padding:20px}.map-wrap{flex:1;position:relative}.leaflet-container{height:100%;width:100%;background:#e8eef2}h1{font-size:18px;margin:0 0 4px}.subtitle{color:var(--muted);font-size:12px;margin-bottom:18px}.field{margin-bottom:12px}.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}.field input,.field select{width:100%;padding:10px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px}button.primary{width:100%;padding:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04221f;font-weight:700;border:none;border-radius:8px;cursor:pointer;font-size:14px;margin-top:6px}button.primary:disabled{opacity:.5;cursor:not-allowed}.error{color:var(--bad);font-size:13px;margin-top:10px}.card{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:14px}.card h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}.route-line{font-size:15px;font-weight:600;line-height:1.5}.badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700}.badge.hub{background:#2dd4bf26;color:var(--accent)}.badge.direct{background:#8b98a933;color:var(--muted)}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric{background:var(--panel);border-radius:8px;padding:10px}.metric .v{font-size:18px;font-weight:700}.metric .l{font-size:11px;color:var(--muted)}.metric .v.save{color:var(--good)}.conn-Excellent{color:#22c55e}.conn-Good{color:#84cc16}.conn-Moderate{color:#f59e0b}.conn-Poor{color:#ef4444}.leg{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}.leg:last-child{border-bottom:none}.mode-rail{color:var(--rail);font-weight:700}.mode-road{color:var(--road);font-weight:700}.hub-row{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:6px;font-size:13px}.hub-row:nth-child(odd){background:#ffffff05}.hub-row .score{font-weight:700;color:var(--accent)}.bar{height:6px;background:var(--panel);border-radius:3px;overflow:hidden;margin-top:4px}.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.reason{font-size:12px;color:var(--muted);line-height:1.5;font-style:italic}.explainable{position:relative;cursor:help;border-bottom:1px dotted var(--accent)}.explainable .explain-pop{visibility:hidden;opacity:0;position:absolute;z-index:3000;bottom:125%;left:50%;transform:translate(-50%);width:max-content;max-width:320px;background:#0b1018;color:var(--text);border:1px solid var(--accent);border-radius:8px;padding:10px 12px;font-size:12px;font-weight:400;line-height:1.5;white-space:pre-line;text-align:left;box-shadow:0 8px 24px #00000080;transition:opacity .12s ease;pointer-events:none}.explainable .explain-pop:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--accent)}.explainable:hover .explain-pop{visibility:visible;opacity:1}.explain-pop .pop-title{font-weight:700;color:var(--accent);margin-bottom:4px;display:block}.legend{position:absolute;bottom:16px;left:16px;background:#10161ef0;border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:12px;z-index:1000;box-shadow:0 6px 22px #00000073}.legend .row{display:flex;align-items:center;gap:8px;margin:4px 0}.legend .swatch{width:22px;height:4px;border-radius:2px}.legend .swatch.rail{background:#2dd4bf}.legend .swatch.road{background:#f59e0b}.legend .dot{width:11px;height:11px;border-radius:50%;border:2px solid #fff}.legend .dot.src{background:#38bdf8}.legend .dot.hub{background:#2dd4bf}.legend .dot.dst{background:#a855f7}.map-summary{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:1000;background:#10161ef0;border:1px solid var(--border);border-radius:12px;padding:10px 18px;box-shadow:0 8px 28px #00000080;text-align:center;max-width:90%}.map-summary .ms-route{font-size:14px;font-weight:700;letter-spacing:.3px;margin-bottom:6px}.map-summary .ms-stats{display:flex;gap:16px;justify-content:center;font-size:12px;color:var(--muted)}.map-summary .ms-stats b{color:var(--accent);font-size:13px}.spinner-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0b101899;display:flex;align-items:center;gap:10px;justify-content:center;z-index:1200;color:var(--accent);font-weight:600}.spin-dot{width:14px;height:14px;border-radius:50%;border:3px solid rgba(45,212,191,.25);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.rail-line{animation:railflow 1.2s linear infinite;filter:drop-shadow(0 0 5px rgba(45,212,191,.7))}.road-line{filter:drop-shadow(0 0 4px rgba(245,158,11,.55))}@keyframes railflow{to{stroke-dashoffset:-22}}.bg-silo{transition:all .15s ease}.leaflet-interactive.bg-silo:hover{fill-opacity:.9!important}.route-pin-wrap{background:transparent;border:none}.route-pin{position:relative;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center}.route-pin-dot{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--pin);border:2px solid #fff;box-shadow:0 0 0 6px var(--ring),0 4px 10px #00000080;display:flex;align-items:center;justify-content:center}.route-pin .route-pin-dot{color:#04221f;font-weight:800;font-size:12px}.route-pin-glyph{transform:rotate(45deg);display:block;line-height:1}.route-pin-label{margin-top:9px;background:#10161eeb;color:var(--text);font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap;border:1px solid var(--border);box-shadow:0 2px 8px #0006}.leaflet-tooltip{background:#0b1018!important;color:var(--text)!important;border:1px solid var(--accent)!important;border-radius:8px!important;box-shadow:0 6px 20px #00000080!important;font-size:12px!important}.leaflet-tooltip-top:before{border-top-color:var(--accent)!important}.leaflet-tooltip-left:before{border-left-color:var(--accent)!important}.leaflet-tooltip-right:before{border-right-color:var(--accent)!important}.leaflet-tooltip-bottom:before{border-bottom-color:var(--accent)!important}