*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:system-ui,-apple-system,"PingFang SC","Microsoft Yahei",sans-serif;color:#152b40}body{background:#eff5f7}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}header{height:64px;background:#142840;color:white;display:flex;justify-content:space-between;align-items:center;padding:0 22px}.brand{font-weight:750;font-size:19px}.brand small{font-weight:400;font-size:11px;margin-left:14px;color:#a6c4d5}.topbutton{background:transparent;color:white;border:1px solid #60758a;border-radius:8px;padding:8px 12px;font-size:12px}main{height:calc(100dvh - 64px);display:grid;grid-template-columns:385px 1fr}aside{background:white;overflow:auto;padding:25px 25px 45px;z-index:3;border-right:1px solid #dae6ee}.intro{margin-bottom:23px}.intro span{font-size:10px;letter-spacing:3px;color:#539dc2;font-weight:750}.intro h1{font-size:28px;line-height:1.2;margin:10px 0}.intro p{color:#7e8e9c;font-size:12px;line-height:1.7}section{border-top:1px solid #e6edf2;padding:16px 0}label{font-size:13px;font-weight:750;color:#304b63;display:block;margin-bottom:11px}.row{display:flex;gap:8px}input,select{border:1px solid #d6e1e9;border-radius:8px;padding:11px;color:#183c52;min-width:0;width:100%;outline:0;background:#fbfcfd;font-size:14px}input:focus,select:focus{border-color:#2685e5}#city{width:98px;flex-shrink:0}.primary{border:0;border-radius:8px;background:#1775e5;color:white;padding:11px 14px;white-space:nowrap;font-size:13px;font-weight:650}.full{display:block;width:100%;margin-top:9px}.choice{width:100%;margin-top:7px;background:#fff;border:1px solid #dce7ee;border-radius:8px;text-align:left;padding:10px;color:#294961;font-size:12px;line-height:1.5}.choice:hover{background:#ecf6ff;border-color:#55a2eb}.success{padding:10px;border-radius:8px;background:#e9f8f1;color:#1e8260;font-size:12px;line-height:1.6;margin:9px 0 0}.hint{font-size:11px;color:#8997a4;line-height:1.6}.between{display:flex;justify-content:space-between}.between small{color:#98a3ae;font-size:11px}.empty{border-radius:9px;border:1px dashed #cddce5;color:#9aa8b7;padding:17px 10px;text-align:center;font-size:12px;line-height:1.6;background:#f7f9fb}.candidate{padding:12px;border:1px solid #e1e9ef;border-radius:10px;margin:8px 0}.candidate.best{border-color:#68c49d;background:#f2fcf7}.candidate strong{font-size:14px}.candidate p{font-size:12px;color:#63788d;margin:7px 0}.candidate button{background:transparent;border:0;padding:0;font-size:12px;color:#096ccc}.tag{font-size:10px;color:#16825b;float:right}.notice{margin-top:14px;border-radius:8px;padding:12px;background:#eef6fc;color:#44708b;font-size:12px;line-height:1.7}.notice.error{background:#fff2ee;color:#a44739}footer{font-size:11px;color:#a8b2ba;margin-top:18px}.map-wrap{position:relative;min-width:0}#map{width:100%;height:100%}.map-fail{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:#e7eef0;color:#688094;font-size:13px}.map-fail[hidden]{display:none}.legend{position:absolute;top:15px;left:15px;background:white;border-radius:9px;padding:9px 12px;font-size:11px;color:#63798c;box-shadow:0 3px 12px #18354b20}.legend b{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 5px}.red{background:#e35250}.blue{background:#2589e9}.outline{border:1px solid #c7d9e7;border-radius:8px;background:white;color:#3176b7;padding:10px 8px;font-size:12px;font-weight:650}
.outline.selected{background:#fff3df;color:#98600c;border-color:#dda451}
.flex{flex:1;min-width:0}
#origin-label{line-height:1.7;overflow-wrap:anywhere}
.nearby-list{margin-top:12px}
.nearby-title{font-size:12px;font-weight:700;color:#3c709e;margin-bottom:8px}

/* Nearby discovery: one compact selectable entry per bus route, not per POI. */
.nearby-route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}
.nearby-route{min-width:0;padding:11px 5px;border:1px solid #bfd9f0;border-radius:9px;
 background:#f5faff;color:#1768a6;font-size:13px;font-weight:700;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .1s,border-color .1s}
.nearby-route:hover,.nearby-route:focus-visible{border-color:#2587e3;background:#e4f3ff}
.nearby-route.active,.nearby-route[aria-pressed="true"]{background:#176fd1;color:#fff;
 border-color:#176fd1;box-shadow:0 2px 7px #206ecb26}
.nearby-route.active:hover{background:#125fb7}

.radius-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
 font-size:12px;color:#687e8c;margin-top:10px}
.radius-row select{width:auto;min-width:120px;font-size:12px;padding:7px 10px;
 border:1px solid #d6e3ed;border-radius:8px;background:#f8fbfd;color:#294e70}

@media(max-width:370px){.nearby-route-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.nearby-station{background:#f6f9fc;border:1px solid #e1e9ef;border-radius:9px;padding:10px;margin:8px 0}
.nearby-station strong{display:block;font-size:13px;color:#253e55}
.nearby-station small{font-size:11px;color:#8798a8}
.bus-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.bus-chip{border:1px solid #9bc6f5;border-radius:16px;color:#1269b8;background:#fff;font-size:12px;padding:5px 9px}
.bus-chip:hover{background:#d9efff}
.loading{color:#97a3ad;font-size:11px}
.choice.active{background:#e2f2ff;border-color:#1682e8;color:#085ca7;font-weight:700}
.map-tag{padding:5px 9px;border-radius:8px;color:white;font-size:11px;white-space:nowrap;font-weight:750}
.destination-tag{background:#dc524b}.origin-tag{background:#d88729}
.orange{background:#e69b29}
.pick-tip{position:absolute;top:50px;left:50%;transform:translateX(-50%);z-index:3;
 background:#14314b;color:#fff;padding:10px 15px;border-radius:8px;font-size:12px;text-align:center;box-shadow:0 4px 18px #18364d40}
.pick-tip[hidden]{display:none}
.mode-summary{display:grid;grid-template-columns:1fr;gap:8px;margin:10px 0}
.mode-box{display:flex;gap:8px;align-items:center;justify-content:space-between;border:1px solid #dfe9f1;border-radius:8px;padding:11px 10px}
.mode-box strong{font-size:12px;min-width:95px}.mode-box span{font-size:11px;color:#607a8b;flex:1}
.mode-box button{font-size:11px;border:1px solid #bfdef9;background:#eff7ff;color:#1670bb;border-radius:6px;padding:6px}
.back-choice{border:0;background:transparent;color:#226aa7;padding:7px 0}
#candidates h3{font-size:16px;margin:11px 0}

/* Bus line labels stay pinned to the real coordinates even when the map moves. */
.legend{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.map-key{white-space:nowrap}
.stop-name-toggle{display:flex;align-items:center;gap:7px;margin:0;font-size:11px;font-weight:600;color:#345b76;cursor:pointer}
.stop-name-toggle input{width:15px;height:15px;min-width:15px;margin:0;accent-color:#1679dc}
#stop-label-count{font-size:10px;color:#7991a4;font-weight:400}
.bus-stop-label{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
 color:#254766;font-size:11px;line-height:18px;font-weight:650;background:rgba(255,255,255,.95);
 border:1px solid rgba(53,127,193,.55);border-radius:7px;padding:2px 6px 2px 3px;
 box-shadow:0 2px 8px rgba(12,63,105,.18);cursor:pointer;user-select:none}
.bus-stop-label .stop-number{display:inline-flex;align-items:center;justify-content:center;
 height:16px;min-width:17px;border-radius:4px;padding:0 2px;background:#e3effb;color:#1972be;
 font-size:10px;font-weight:750}
.bus-stop-label.boarding{background:#fff3dc;border-color:#d99d31;color:#805014;font-weight:750}
.bus-stop-label.boarding .stop-number{color:white;background:#df972e}
.line-end-marker{font-size:11px;color:#fff;background:#168d72;border-radius:6px;padding:5px 8px;
 font-weight:750;white-space:nowrap;box-shadow:0 2px 8px #1d494c44}
.line-end-marker.terminal{background:#d54d4d}
.direction-control{background:#f0f6ff;border:1px solid #b9d7f3;border-radius:9px;
 margin:0 0 11px;padding:11px;color:#244b76}
#direction-details{font-size:12px;font-weight:700;line-height:1.6;overflow-wrap:anywhere}
.reverse-button{margin-top:8px;width:100%;border:1px solid #abcbed;border-radius:7px;
 background:#fff;color:#126ab1;font-weight:750;padding:8px 10px;font-size:12px}
.map-direction{position:absolute;top:13px;right:15px;z-index:4;
 max-width:min(360px,calc(100% - 40px));background:rgba(20,48,75,.95);
 color:white;border-radius:10px;padding:11px 13px;box-shadow:0 4px 15px #14283b3b}
.map-direction[hidden]{display:none}
#direction-text{font-size:12px;line-height:1.6;font-weight:750}
.map-direction-actions{display:flex;gap:7px;margin-top:8px}
.map-direction-actions button{border:1px solid #7995b0;background:#fff;color:#195180;
 font-size:11px;font-weight:650;padding:6px 9px;border-radius:6px;flex:1;cursor:pointer}
.map-direction-actions button:disabled{opacity:.45}
@media(max-width:760px){
 .legend{gap:6px;padding:8px 9px}
 .stop-name-toggle{font-size:10px}
 .bus-stop-label{font-size:10px;line-height:17px;padding:2px 4px 2px 2px}
 .map-direction{top:74px;right:8px;max-width:54%;padding:8px}
 #direction-text{font-size:10px}
 .map-direction-actions button{font-size:10px;padding:5px}
}


@media(max-width:760px){header{height:55px;padding:0 14px}.brand{font-size:16px}.brand small{display:block;margin-left:0;font-size:9px}main{height:calc(100dvh - 55px);display:block;position:relative}.map-wrap{position:absolute;inset:0}aside{position:absolute;bottom:0;left:0;right:0;max-height:63%;border:0;border-radius:19px 19px 0 0;box-shadow:0 -5px 32px #1c334620;padding:14px 17px calc(20px + env(safe-area-inset-bottom))}.intro{margin-bottom:12px}.intro h1{font-size:19px;line-height:1.3;margin:5px 0}.intro h1 br{display:none}.intro p{font-size:11px;margin:5px 0}.intro span{font-size:9px}section{padding:13px 0}.legend{font-size:10px;left:10px;top:10px}}
/* Compact, truly collapsible phone bottom sheet. No absolute 70% window obstruction. */
.sheet-toggle{display:none}
@media (max-width:760px){
  aside.bottom-sheet{padding:0;overflow:hidden;display:flex;flex-direction:column;
    height:min(56dvh,520px);max-height:calc(100% - 64px);transition:height .19s ease;
    padding-bottom:env(safe-area-inset-bottom);touch-action:pan-y}
  .sheet-toggle{display:flex;width:100%;min-height:47px;flex-shrink:0;align-items:center;
    justify-content:center;gap:9px;border:none;background:#fff;color:#2b638f;
    border-radius:20px 20px 0 0;font-weight:750;font-size:12px;position:relative}
  .sheet-grip{position:absolute;top:5px;left:calc(50% - 19px);
    background:#b6c9d6;border-radius:10px;height:4px;width:38px}
  .sheet-arrow{font-size:18px}
  .sheet-body{padding:7px 17px 22px;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1}
  aside.bottom-sheet.sheet-collapsed{height:calc(52px + env(safe-area-inset-bottom));}
  aside.bottom-sheet.sheet-collapsed .sheet-body{display:none}
  aside.bottom-sheet.sheet-expanded{height:min(84dvh,760px)}
  .pick-tip{top:10px;left:50%;right:auto;width:min(96%,410px);max-width:410px;
    display:flex;flex-direction:column;gap:7px;align-items:center;padding:8px 10px;
    line-height:1.4}
  .pick-tip[hidden]{display:none}
  .pick-tip button{padding:7px 23px;border:0;border-radius:8px;background:#fff;
    color:#14314b;font-size:12px;font-weight:750}
}
@media (min-width:761px) {
 .sheet-body{height:100%;overflow-y:auto}
 aside.bottom-sheet{overflow:hidden;padding:0}
 .sheet-body{padding:25px 25px 45px}
}