:root{--bg: #0f1419;--panel: #1a2332;--text: #e8eef4;--muted: #8b9cb3;--accent: #3d9be9;--shade-route: #10b981;--short-route: #f97316;--user-route: #a78bfa;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text)}.app{display:grid;grid-template-columns:320px 1fr;height:100%}.panel{background:var(--panel);padding:1rem 1.25rem;overflow-y:auto;border-right:1px solid #2a3548}.panel h1{font-size:1.25rem;margin:0 0 .25rem;font-weight:600}.panel .subtitle{color:var(--muted);font-size:.8rem;margin-bottom:1.25rem}.field{margin-bottom:1rem}.field label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:.35rem}.field input,.field select{width:100%;padding:.5rem .6rem;border-radius:6px;border:1px solid #2a3548;background:var(--bg);color:var(--text)}.location-searches{display:grid;gap:.75rem}.location-search,.location-search-box{position:relative}.location-search input{padding-right:4.9rem}.location-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #3d9be92e}.location-search.origin input:focus{border-color:#22c55e;box-shadow:0 0 0 2px #22c55e29}.location-search.destination input:focus{border-color:#ef4444;box-shadow:0 0 0 2px #ef444429}.location-search-status{position:absolute;top:50%;right:.55rem;transform:translateY(-50%);color:var(--muted);font-size:.68rem;pointer-events:none}.location-results{position:absolute;left:0;right:0;top:calc(100% + .3rem);z-index:6;list-style:none;padding:.25rem;margin:0;max-height:220px;overflow-y:auto;background:#111821;border:1px solid #2a3548;border-radius:8px;box-shadow:0 12px 28px #00000061}.location-results li{border-radius:6px;cursor:pointer;padding:.5rem .55rem}.location-results li.active,.location-results li:hover{background:#243149}.location-results span,.location-results small{display:block}.location-results span{font-size:.76rem;line-height:1.25}.location-results small{margin-top:.2rem;color:var(--muted);font-size:.66rem;text-transform:capitalize}.location-search-note{color:#fdba74;font-size:.7rem;margin:.25rem 0 0}.datetime-control{display:grid;grid-template-columns:1fr 64px;gap:.5rem}.datetime-control input{min-width:0}.datetime-control button,.time-stepper button{border-radius:6px;border:1px solid #2a3548;background:#243149;color:var(--text);font-size:.78rem;font-weight:600;cursor:pointer}.datetime-control button{padding:0 .55rem}.time-stepper{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.5rem}.time-stepper button{padding:.45rem .5rem}.datetime-control button:hover,.time-stepper button:hover{border-color:var(--accent);background:#1e3a5f}.alpha-row{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--accent)}.btn{width:100%;padding:.65rem;border:none;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;margin-top:.5rem}.btn:disabled{opacity:.5;cursor:not-allowed}.hint{font-size:.75rem;color:var(--muted);line-height:1.4;margin-top:.75rem}.routes-list{margin-top:1rem}.route-card{background:var(--bg);border-radius:8px;padding:.65rem .75rem;margin-bottom:.5rem;border-left:3px solid var(--accent)}.route-card.shortest{border-left-color:var(--short-route)}.route-card.coolest{border-left-color:var(--shade-route)}.route-card.custom{border-left-color:var(--user-route)}.route-legend .legend-swatch{font-weight:600}.legend-shortest{color:var(--short-route)}.legend-coolest{color:var(--shade-route)}.legend-custom{color:var(--user-route)}.route-card h3{margin:0 0 .25rem;font-size:.85rem}.route-card p{margin:0;font-size:.75rem;color:var(--muted)}.error{color:#f87171;font-size:.8rem;margin-top:.5rem}#map{width:100%;height:100%}.map-wrap{position:relative}.map-overlay{position:absolute;top:12px;right:12px;background:#0f1419d9;padding:.5rem .75rem;border-radius:8px;font-size:.75rem;z-index:3;pointer-events:none;-webkit-user-select:none;user-select:none}.demo-bbox-screen-overlay{position:absolute;border:3px dashed #fbbf24;background:#fbbf2414;box-shadow:0 0 0 1px #0f1419b3,0 0 22px #fbbf2433;z-index:2;pointer-events:none}.map-hud{display:flex;flex-direction:column;gap:.35rem;pointer-events:none}.pick-hint{color:var(--muted);font-size:.7rem}.pick-mode-active{color:#e8eef4;font-weight:600}.demo-boundary-legend{color:#fde68a;font-size:.7rem;font-weight:700}.shade-banner{position:absolute;bottom:12px;left:12px;max-width:420px;background:#0f1419e6;padding:.5rem .75rem;border-radius:8px;font-size:.75rem;z-index:2;border:1px solid #2a3548;pointer-events:none;-webkit-user-select:none;user-select:none}.night-shade-wash{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000052;z-index:1;pointer-events:none;-webkit-user-select:none;user-select:none}.shade-banner-ok{border-color:#2dd4bf44;color:#99f6e4}.shade-banner-warn{border-color:#f9731644;color:#fdba74}.shade-banner code{font-size:.7rem;background:#0f1419;padding:.1rem .3rem;border-radius:4px}.pick-toggle{display:flex;gap:.5rem}.pick-toggle button{flex:1;padding:.5rem .6rem;border-radius:8px;border:1px solid #2a3548;background:var(--bg);color:var(--text);font-size:.8rem;cursor:pointer}.pick-toggle button.active{border-color:var(--accent);background:#1e3a5f;font-weight:600}.pick-toggle button[data-mode=origin].active{border-color:#22c55e}.pick-toggle button[data-mode=destination].active{border-color:#ef4444}