/* ============================================================
   香港行車地圖 — UI
   ============================================================ */
:root{
  --bg:#080b12;
  --panel:rgba(12,17,27,.94);
  --panel-solid:#0c111b;
  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.14);
  --ink:#e9eff9;
  --ink-dim:#aab6c8;
  --muted:#6f7d92;
  --accent:#54d6e0;
  --accent-2:#ffb545;
  --radius:12px;
  --shadow:0 18px 50px -18px rgba(0,0,0,.85);
  --sidebar-w:342px;

  /* road palette */
  --c-motorway:#e05a3c;
  --c-trunk:#ef8b2c;
  --c-primary:#f2b21b;
  --c-secondary:#3fbf6a;
  --c-tertiary:#2f9be0;
  --c-minor:#9aa7b8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang HK","PingFang TC","Noto Sans TC",
              "Hiragino Sans","Microsoft JhengHei",system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input{font:inherit;color:inherit}
::selection{background:rgba(84,214,224,.3)}

#app{position:fixed;inset:0;display:flex}

/* ============================ 側邊欄 ============================ */
#sidebar{
  position:relative;
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  height:100%;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(84,214,224,.09), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(255,181,69,.06), transparent 55%),
    var(--panel);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border-right:1px solid var(--line);
  z-index:1200;
  transition:margin-left .28s cubic-bezier(.2,.8,.2,1);
}
#sidebar.collapsed{margin-left:calc(-1 * var(--sidebar-w))}
body.sidebar-hidden #sidebar{margin-left:calc(-1 * var(--sidebar-w))}

.brand{display:flex;align-items:center;gap:12px;padding:20px 20px 14px}
.brand-mark{
  width:38px;height:38px;border-radius:11px;position:relative;flex:0 0 auto;
  background:linear-gradient(145deg,#173042,#0d1a26);
  border:1px solid rgba(84,214,224,.35);
  box-shadow:0 0 0 4px rgba(84,214,224,.06), inset 0 0 22px rgba(84,214,224,.18);
}
.brand-mark::before,.brand-mark::after{
  content:"";position:absolute;left:50%;top:50%;border-radius:50%;
  transform:translate(-50%,-50%);
}
.brand-mark::before{width:20px;height:20px;border:1.5px solid rgba(84,214,224,.55)}
.brand-mark::after{width:6px;height:6px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.brand-text h1{margin:0;font-size:18px;letter-spacing:.02em;font-weight:700}
.brand-text p{margin:2px 0 0;font-size:9.5px;letter-spacing:.19em;color:var(--muted);font-weight:600}
#btn-collapse{margin-left:auto}

.icon-btn{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--ink-dim);cursor:pointer;
  display:grid;place-items:center;font-size:16px;line-height:1;
  transition:.16s;
}
.icon-btn:hover{background:rgba(84,214,224,.12);color:var(--accent);border-color:rgba(84,214,224,.35)}

/* search */
.search-box{position:relative;margin:2px 16px 14px}
.search-box .ico{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;
  pointer-events:none;
}
#search-input{
  width:100%;height:42px;border-radius:11px;padding:0 46px 0 36px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  color:var(--ink);outline:none;font-size:13.5px;
  transition:.18s;
}
#search-input::placeholder{color:var(--muted)}
#search-input:focus{border-color:rgba(84,214,224,.5);background:rgba(84,214,224,.07);box-shadow:0 0 0 3px rgba(84,214,224,.1)}
.search-box kbd{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:5px;
  padding:2px 6px;font-family:inherit;background:rgba(255,255,255,.03);
}
.search-results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:min(52vh,420px);overflow:auto;
  background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:var(--shadow);z-index:50;padding:6px;
}
.sr-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;
}
.sr-item:hover,.sr-item.active{background:rgba(84,214,224,.12)}
.sr-kind{
  flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.06em;padding:3px 6px;border-radius:5px;
  background:rgba(255,255,255,.07);color:var(--ink-dim);text-transform:uppercase;
}
.sr-kind.street{background:rgba(84,214,224,.16);color:#8be9f2}
.sr-kind.building{background:rgba(255,181,69,.16);color:#ffc978}
.sr-kind.poi{background:rgba(214,51,108,.18);color:#ff9dc0}
.sr-main{min-width:0;flex:1}
.sr-name{font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-empty{padding:14px 12px;color:var(--muted);font-size:12.5px;text-align:center}

/* scroll area */
.scroll-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 16px 8px;scrollbar-width:thin}
.scroll-area::-webkit-scrollbar{width:8px}
.scroll-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.scroll-area::-webkit-scrollbar-track{background:transparent}

.panel{padding:14px 0;border-top:1px solid var(--line)}
.panel:first-child{border-top:none}
.panel h2{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);font-weight:700;
}
.panel h2 small{font-weight:500;letter-spacing:.03em;color:var(--muted);text-transform:none;font-size:10.5px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.dot.amber{background:var(--accent-2);box-shadow:0 0 8px var(--accent-2)}
.dot.green{background:#3fbf6a;box-shadow:0 0 8px #3fbf6a}

/* switches */
.switch{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{
  position:relative;width:34px;height:19px;border-radius:20px;flex:0 0 auto;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.08);transition:.2s;
}
.switch .track::after{
  content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#94a3b8;transition:.2s cubic-bezier(.2,.8,.2,1);
}
.switch input:checked + .track{background:rgba(84,214,224,.28);border-color:rgba(84,214,224,.45)}
.switch input:checked + .track::after{left:17px;background:var(--accent);box-shadow:0 0 10px rgba(84,214,224,.8)}
.switch .label{font-size:13px;color:var(--ink);display:flex;align-items:baseline;gap:7px}
.switch .label em{font-style:normal;font-size:10.5px;color:var(--muted)}

.sub-checks{display:grid;gap:2px;padding:2px 0 6px 44px}
.sub-checks label{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-dim);
  cursor:pointer;padding:3px 0;
}
.sub-checks input{accent-color:var(--accent);width:13px;height:13px;margin:0}
.sw{width:16px;height:3px;border-radius:2px;flex:0 0 auto}
.sw-major{background:var(--c-primary)}
.sw-secondary{background:var(--c-secondary)}
.sw-minor{background:var(--c-minor)}

/* route planner */
.route-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.route-row .pin{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-size:10.5px;font-weight:800;color:#06121a;
}
.pin.start{background:var(--accent)}
.pin.end{background:var(--accent-2)}
.route-row input{
  flex:1;min-width:0;height:34px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--ink);font-size:12.5px;padding:0 10px;outline:none;
}
.route-row input::placeholder{color:var(--muted)}
.route-row input:focus{border-color:rgba(84,214,224,.45)}
.mini{
  width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;line-height:1;
}
.mini:hover{color:var(--ink);border-color:var(--line-strong)}
.route-actions{display:flex;gap:8px;margin:4px 0 8px}
.btn{
  height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.05);color:var(--ink);cursor:pointer;font-size:12px;font-weight:600;
  transition:.16s;
}
.btn:hover{background:rgba(255,255,255,.1)}
.btn.primary{
  background:linear-gradient(180deg,#3fc6d2,#2ba7b4);border-color:transparent;color:#03191d;
  box-shadow:0 6px 18px -8px rgba(84,214,224,.9);
}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--muted)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.hint{margin:2px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.hint.armed{color:var(--accent)}
.route-result{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.route-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.route-kpis div{
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:9px;
  padding:7px 8px;text-align:center;
}
.route-kpis strong{display:block;font-size:14px;color:var(--accent)}
.route-kpis span{font-size:9.5px;color:var(--muted);letter-spacing:.06em}
.steps{list-style:none;margin:0;padding:0;max-height:230px;overflow:auto}
.steps li{
  display:flex;gap:9px;padding:7px 4px;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px;
  line-height:1.4;
}
.steps li .ico-t{flex:0 0 20px;height:20px;display:grid;place-items:center;border-radius:5px;
  background:rgba(84,214,224,.12);color:var(--accent);font-size:12px}
.steps li .d{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap;padding-left:6px}

/* legend */
.legend{display:grid;gap:7px}
.lg-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-dim)}
.line{width:26px;height:3px;border-radius:2px;flex:0 0 auto}
.l-motorway{background:var(--c-motorway);height:5px}
.l-trunk{background:var(--c-trunk);height:4px}
.l-primary{background:var(--c-primary);height:4px}
.l-secondary{background:var(--c-secondary);height:3px}
.l-tertiary{background:var(--c-tertiary);height:3px}
.l-minor{background:var(--c-minor);height:2px}
.l-tunnel{background:repeating-linear-gradient(90deg,var(--c-primary) 0 5px,transparent 5px 9px)}
.arrow-i{
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:9px solid var(--accent);flex:0 0 auto;margin:0 7px;transform:rotate(90deg);
}
.dot-b{width:8px;height:8px;border-radius:2px;background:#ffb545;margin:0 8px;flex:0 0 auto;opacity:.85}
.dot-p{width:9px;height:9px;border-radius:50%;background:#e64980;margin:0 8px;flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(230,73,128,.25)}

/* stats */
.stats{margin:0;display:grid;gap:5px}
.stats > div{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.035)}
.stats dt{color:var(--muted);margin:0}
.stats dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.fineprint{margin:12px 0 0;font-size:10.5px;line-height:1.7;color:var(--muted)}

.sidebar-foot{
  display:flex;align-items:center;gap:10px;padding:10px 18px;
  border-top:1px solid var(--line);font-size:11px;color:var(--muted);
}
.lang{cursor:pointer;font-weight:700;letter-spacing:.08em;color:var(--ink-dim)}
.lang:hover{color:var(--accent)}
.sep{opacity:.35}
.data-state{margin-left:auto;font-size:10.5px}
.data-state.ok{color:#3fbf6a}
.data-state.warn{color:var(--accent-2)}

/* ============================ 地圖 ============================ */
#map-wrap{position:relative;flex:1;min-width:0;background:#0e1420}
#map{position:absolute;inset:0;background:#0e1420}
.leaflet-container{background:#0e1420;font-family:inherit}
.leaflet-control-attribution{
  background:rgba(8,11,18,.78)!important;color:#93a2b6!important;font-size:10px!important;
  padding:3px 8px!important;border-radius:8px 0 0 0;backdrop-filter:blur(8px);
}
.leaflet-control-attribution a{color:#7fd7e0!important}
.leaflet-bar a{
  background:var(--panel-solid)!important;color:var(--ink-dim)!important;border-color:var(--line)!important;
}
.leaflet-bar a:hover{background:#151d2b!important;color:var(--accent)!important}

/* custom canvas layer */
.hk-canvas{position:absolute;left:0;top:0;transform-origin:0 0}

/* top bar */
.topbar{
  position:absolute;top:14px;left:14px;right:14px;z-index:800;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  pointer-events:none;
}
.top-left{display:flex;gap:6px;align-items:flex-start;pointer-events:auto}
.basemaps{
  display:flex;gap:4px;padding:4px;border-radius:11px;
  background:rgba(8,11,18,.82);border:1px solid var(--line);backdrop-filter:blur(14px);
  pointer-events:auto;box-shadow:0 10px 30px -16px rgba(0,0,0,.9);
}
.basemaps button{
  border:none;background:transparent;color:var(--ink-dim);font-size:11.5px;font-weight:600;
  padding:6px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:.15s;
}
.basemaps button:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.basemaps button.active{background:rgba(84,214,224,.16);color:#9af0f7}
.top-right{display:flex;gap:6px;pointer-events:auto}
.chip-btn{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  background:rgba(8,11,18,.82);color:var(--ink-dim);cursor:pointer;backdrop-filter:blur(14px);
  display:grid;place-items:center;font-size:15px;transition:.15s;
}
.chip-btn:hover{color:var(--accent);border-color:rgba(84,214,224,.4)}
.mobile-only{display:none}

/* map hint (route arming) */
.map-hint{
  position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:850;
  background:rgba(8,11,18,.9);border:1px solid rgba(84,214,224,.4);color:var(--accent);
  padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:600;
  backdrop-filter:blur(12px);box-shadow:0 0 0 4px rgba(84,214,224,.07);
  animation:pulse 1.8s ease-in-out infinite;pointer-events:none;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.62}}

/* status bar */
.statusbar{
  position:absolute;left:14px;bottom:14px;z-index:800;
  display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:9px;
  background:rgba(8,11,18,.8);border:1px solid var(--line);backdrop-filter:blur(12px);
  font-size:11px;color:var(--ink-dim);font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.sb-sep{opacity:.3}
#sb-coord{color:var(--ink)}

/* loader */
.loader{
  position:absolute;inset:0;z-index:900;display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 40%,#0d1622,#070a11 75%);
  transition:opacity .5s ease, visibility .5s;
}
.loader.done{opacity:0;visibility:hidden}
.loader-card{width:min(340px,80vw);text-align:center}
.loader-mark{
  width:64px;height:64px;margin:0 auto 18px;border-radius:50%;position:relative;
  border:1px solid rgba(84,214,224,.25);
}
.loader-mark::before{
  content:"";position:absolute;inset:10px;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--accent);border-right-color:rgba(84,214,224,.25);
  animation:spin 1.1s linear infinite;
}
.loader-mark::after{
  content:"";position:absolute;inset:26px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 20px var(--accent);animation:pulse 1.6s ease-in-out infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-card h3{margin:0 0 6px;font-size:16px;letter-spacing:.04em}
.loader-card p{margin:0;font-size:12px;color:var(--muted)}
.bar{height:3px;border-radius:3px;background:rgba(255,255,255,.08);margin:18px 0 10px;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,#2ba7b4,#54d6e0);transition:width .3s ease;
  box-shadow:0 0 12px rgba(84,214,224,.7)}
.loader-fine{font-size:10px!important;color:#4d5a6d!important;margin-top:0!important}

/* popups */
.leaflet-popup-content-wrapper{
  background:var(--panel-solid);color:var(--ink);border-radius:12px;
  border:1px solid var(--line-strong);box-shadow:var(--shadow);
}
.leaflet-popup-content{margin:14px 16px;line-height:1.5}
.leaflet-popup-tip{background:var(--panel-solid);border:1px solid var(--line-strong)}
.leaflet-popup-close-button{color:var(--muted)!important}
.pop-title{font-size:15px;font-weight:700;letter-spacing:.01em}
.pop-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.pop-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.badge{font-size:10px;padding:2px 7px;border-radius:20px;background:rgba(255,255,255,.07);color:var(--ink-dim)}
.badge.hl{background:rgba(84,214,224,.15);color:#8be9f2}
.badge.amber{background:rgba(255,181,69,.15);color:#ffc978}
.pop-meta{font-size:11px;color:var(--muted);margin-top:8px;font-variant-numeric:tabular-nums}
.pop-actions{display:flex;gap:6px;margin-top:10px}
.pop-actions button{
  flex:1;font-size:11px;padding:6px 8px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.05);color:var(--ink);
}
.pop-actions button:hover{background:rgba(84,214,224,.14);border-color:rgba(84,214,224,.4);color:#9af0f7}

/* route markers */
.rt-marker{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#04141a;
  box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 3px rgba(8,11,18,.6);
}
.rt-marker.a{background:var(--accent)}
.rt-marker.b{background:var(--accent-2)}

/* tooltip for hovered road */
.leaflet-tooltip.hk-tip{
  background:rgba(8,11,18,.92);border:1px solid var(--line-strong);color:var(--ink);
  border-radius:7px;font-size:11.5px;padding:4px 8px;box-shadow:none;
}
.leaflet-tooltip.hk-tip::before{display:none}

/* ============================ responsive ============================ */
@media (max-width:900px){
  :root{--sidebar-w:min(86vw,342px)}
  #sidebar{
    position:fixed;left:0;top:0;bottom:0;
    box-shadow:30px 0 60px -20px rgba(0,0,0,.9);
  }
  #btn-collapse{display:none}
  .mobile-only{display:grid}
  body.sidebar-hidden #sidebar{margin-left:calc(-1 * var(--sidebar-w) - 20px)}
  .topbar{left:10px;right:10px;top:10px}
  .statusbar{left:10px;bottom:10px;max-width:calc(100vw - 120px);white-space:nowrap;
    overflow:hidden;font-size:10px;padding:5px 10px}
  #sb-visible{display:none}
  .sb-sep{display:none}
  .toast{bottom:54px;left:10px;right:10px;transform:none;max-width:none;
    font-size:10.5px;padding:7px 10px;gap:6px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .toast.hide{transform:translateY(8px)}
  .basemaps button{padding:6px 8px;font-size:10.5px}
  .map-hint{top:56px;font-size:11.5px;padding:6px 12px}
}

/* first-run toast */
.toast{
  position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:860;
  display:flex;align-items:center;gap:8px;max-width:min(560px,86vw);
  padding:9px 14px;border-radius:11px;font-size:12px;color:var(--ink-dim);
  background:rgba(8,11,18,.9);border:1px solid var(--line-strong);
  backdrop-filter:blur(14px);box-shadow:0 12px 30px -18px #000;
  transition:opacity .5s ease, transform .5s ease;pointer-events:none;
}
.toast strong{color:var(--accent);font-weight:700;font-size:11px;letter-spacing:.08em}
.toast.hide{opacity:0;transform:translateX(-50%) translateY(8px)}

/* ============ poster / export mode (?poster=1) ============ */
body.poster #sidebar,body.poster .topbar,body.poster .statusbar,
body.poster .map-hint,body.poster .toast,body.poster .leaflet-control-zoom,
body.poster .leaflet-control-scale{display:none!important}
body.poster .leaflet-control-attribution{
  display:block!important;background:rgba(8,11,18,.55)!important;color:#9fb0c4!important;
  font-size:9px!important;padding:2px 6px!important;border-radius:6px 0 0 0;
  margin:0!important;bottom:0!important;right:0!important}
body.poster #map-wrap{background:#05070c}
body.poster #map{background:#05070c}

/* ===================== map provider panel ===================== */
.provider-tabs{display:flex;gap:4px;padding:3px;border-radius:10px;background:rgba(255,255,255,.045);
  border:1px solid var(--line);margin-bottom:4px}
.provider-tabs button{
  flex:1;border:none;background:transparent;color:var(--ink-dim);font-size:12px;font-weight:700;
  padding:7px 6px;border-radius:8px;cursor:pointer;transition:.15s;letter-spacing:.02em}
.provider-tabs button:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.provider-tabs button.active{background:rgba(84,214,224,.16);color:#9af0f7;
  box-shadow:inset 0 0 0 1px rgba(84,214,224,.35)}
.key-box{margin-top:10px;padding:10px;border-radius:10px;background:rgba(255,255,255,.035);
  border:1px dashed rgba(255,255,255,.14)}
.key-box label{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.key-row{display:flex;gap:6px}
.key-row input{
  flex:1;min-width:0;height:32px;border-radius:8px;border:1px solid var(--line);
  background:rgba(0,0,0,.25);color:var(--ink);font-size:12px;padding:0 10px;outline:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.key-row input:focus{border-color:rgba(84,214,224,.5)}
.key-row .btn{height:32px;flex:0 0 auto}
.key-box .hint a{color:#8be9f2;text-decoration:none;white-space:nowrap}
.key-box .hint a:hover{text-decoration:underline}
.dot.cyan{background:#54d6e0;box-shadow:0 0 8px #54d6e0}

/* 的士範圍圖例 */
.zone-legend{margin-top:10px;display:grid;gap:6px;font-size:11.5px;color:var(--dim);line-height:1.45}
.zone-legend .row{display:flex;align-items:center;gap:8px}
.zone-legend .chip{flex:0 0 auto;width:14px;height:14px;border-radius:4px;border:1px solid rgba(255,255,255,.25)}
.zone-legend .chip.red{background:rgba(255,77,77,.35)}
.zone-legend .chip.green{background:rgba(34,197,94,.35)}
.zone-legend .chip.blue{background:rgba(59,130,246,.35)}
.zone-legend .chip.overlap{background:linear-gradient(135deg,rgba(255,77,77,.45),rgba(34,197,94,.45))}
.zone-legend .chip.line{background:none;border:none;width:18px;height:0;border-top:3px dashed #16a34a;border-radius:0}
.zone-legend .chip.line-red{background:none;border:none;width:18px;height:0;border-top:3px dashed #ef4444;border-radius:0}
.zone-legend .chip.dot{background:#fbbf24;border-color:#111;border-radius:50%;width:10px;height:10px;margin:0 2px}

.zone-legend .chip.stand-red{background:#ef4444;border-color:#111;border-radius:50%;width:10px;height:10px}
.zone-legend .chip.stand-green{background:#22c55e;border-color:#111;border-radius:50%;width:10px;height:10px}
.zone-legend .chip.stand-blue{background:#3b82f6;border-color:#111;border-radius:50%;width:10px;height:10px}
.zone-legend .chip.stand-mix{background:#a855f7;border-color:#111;border-radius:50%;width:10px;height:10px}
.zone-legend .chip.stand-pudo{background:#e5e7eb;border-color:#111;border-radius:50%;width:8px;height:8px}
.zone-legend .chip.stand-fleet{background:#f97316;border-color:#111;border-radius:50%;width:10px;height:10px}

.hk-canvas{transform-origin:0 0 !important;}