:root {
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --panel: rgba(15, 19, 25, 0.90);
  --line: rgba(255,255,255,0.14);
  --text: #f7f9fb;
  --muted: #a7b0bd;
  --blue: #2f80ff;
  --red: #ff5b55;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body, #app, #map { width:100%; height:100%; margin:0; overflow:hidden; }
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif; background:#10151c; color:var(--text); }
#map { position:absolute; inset:0; }
.glass { background:var(--panel); border:1px solid var(--line); box-shadow:0 8px 30px rgba(0,0,0,.26); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.hud-card { position:absolute; z-index:20; top:calc(var(--safe-top) + 12px); left:12px; right:296px; padding:10px 12px; border-radius:16px; min-height:58px; }
.hud-title-row,.hud-metrics { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hud-title-row strong { font-size:14px; }
.hud-metrics { margin-top:5px; color:var(--muted); font-size:12px; }
.state-badge { padding:3px 7px; border-radius:999px; font-size:11px; background:rgba(62,196,115,.16); color:#7ee3a4; white-space:nowrap; }
.state-badge.warn { background:rgba(255,190,70,.16); color:#ffd27d; }
.state-badge.bad { background:rgba(255,91,85,.16); color:#ff9b97; }
.inset-card { position:absolute; z-index:21; right:10px; top:calc(var(--safe-top) + 10px); width:282px; height:286px; border-radius:18px; overflow:hidden; }
.inset-title { height:34px; padding:0 8px 0 11px; display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:700; }
#insetMap { position:absolute; left:0; right:0; top:34px; bottom:22px; background:#ece9e9; }
.inset-empty { position:absolute; z-index:2; left:0; right:0; top:34px; bottom:22px; display:grid; place-items:center; color:#454b52; background:#e7e4e5; font-size:12px; }
.inset-foot { position:absolute; z-index:3; left:0; right:0; bottom:0; height:22px; display:grid; place-items:center; font-size:10px; color:#c0c6cf; background:rgba(12,15,20,.88); }
.mini-badge { height:25px; min-width:58px; padding:0 8px; display:grid; place-items:center; border-radius:9px; color:#fff; background:rgba(255,255,255,.12); font-size:11px; font-weight:800; }
.inset-actions { display:flex; align-items:center; gap:5px; }
.mini-icon-btn {
  width:27px; height:27px; border:0; border-radius:9px;
  color:#fff; background:rgba(255,255,255,.12);
  font-size:15px; line-height:1; font-weight:800;
}
.mini-icon-btn:active { background:rgba(255,255,255,.22); }
.inset-card {
  transition:height .18s ease, width .18s ease, border-radius .18s ease;
}
.inset-card.collapsed {
  width:178px !important;
  height:38px !important;
  border-radius:14px;
}
.inset-card.collapsed #insetMap,
.inset-card.collapsed .inset-empty,
.inset-card.collapsed .inset-foot {
  display:none !important;
}
.inset-card.collapsed .inset-title {
  height:38px;
}
.inset-card.collapsed .mini-badge,
.inset-card.collapsed #insetRecenterBtn {
  display:none;
}
.inset-card.collapsed #insetCollapseBtn {
  transform:rotate(180deg);
}
.control-stack { position:absolute; z-index:25; right:14px; bottom:calc(var(--safe-bottom) + 20px); display:flex; flex-direction:column; gap:10px; }
.round-btn { width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(18,22,28,.94); color:white; font-size:22px; font-weight:800; box-shadow:0 5px 18px rgba(0,0,0,.30); }
.round-btn.active { background:#e9edf3; color:#18202a; }
.round-btn.dest { color:#ff817c; }
.sheet { position:absolute; z-index:40; left:12px; right:12px; bottom:calc(var(--safe-bottom) + 12px); padding:18px; border-radius:22px; }
.sheet-title { font-size:18px; font-weight:800; }
.sheet-copy { margin:8px 0 14px; font-size:13px; line-height:1.45; color:var(--muted); }
.primary-btn,.secondary-btn { min-height:46px; padding:0 16px; border-radius:14px; font-size:15px; font-weight:800; border:0; }
.primary-btn { color:#fff; background:#2678ff; }
.secondary-btn { color:#e4e8ee; background:rgba(255,255,255,.10); }
.sheet .primary-btn,.sheet .secondary-btn { width:100%; margin-top:8px; }
dialog { border:0; padding:0; background:transparent; width:min(92vw,430px); color:var(--text); }
dialog::backdrop { background:rgba(0,0,0,.65); backdrop-filter:blur(5px); }
.dialog-card { border:1px solid var(--line); border-radius:22px; padding:20px; background:#171b22; box-shadow:0 16px 50px rgba(0,0,0,.5); }
.dialog-card h2 { margin:0 0 7px; font-size:19px; }
.dialog-card p { color:var(--muted); font-size:13px; line-height:1.45; margin:0 0 16px; }
.dialog-card label { display:block; font-size:13px; margin-bottom:6px; }
.dialog-card input { width:100%; height:48px; border-radius:13px; border:1px solid rgba(255,255,255,.16); background:#0d1117; color:#fff; font-size:16px; padding:0 12px; outline:none; }
.dialog-card input:focus { border-color:#4b8fff; }
.dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.error-text { min-height:20px; padding-top:5px; color:#ff8e89; font-size:12px; }
#toast { position:absolute; z-index:60; left:50%; bottom:calc(var(--safe-bottom) + 96px); transform:translateX(-50%); max-width:82vw; padding:9px 12px; border-radius:12px; background:rgba(10,13,18,.94); color:#fff; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s; }
#toast.show { opacity:1; }

.user-marker { position:relative; width:82px; height:82px; pointer-events:none; }
.user-fan { position:absolute; width:62px; height:62px; left:10px; top:-23px; transform-origin:31px 64px; background:linear-gradient(to top,rgba(53,135,255,.52),rgba(53,135,255,.10)); clip-path:polygon(50% 100%,7% 0,93% 0); filter:drop-shadow(0 2px 3px rgba(36,105,255,.18)); }
.user-dot-halo { position:absolute; width:28px; height:28px; left:27px; top:27px; border-radius:50%; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.42); }
.user-dot { position:absolute; width:20px; height:20px; left:31px; top:31px; border-radius:50%; background:#327cff; border:2px solid #327cff; }
.dest-marker { width:28px; height:36px; position:relative; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.dest-marker::before { content:""; position:absolute; width:24px; height:24px; left:2px; top:0; border-radius:50% 50% 50% 0; background:#ff574f; border:3px solid #fff; transform:rotate(-45deg); }
.dest-marker::after { content:""; position:absolute; width:7px; height:7px; left:10.5px; top:8.5px; border-radius:50%; background:white; }
.inset-dest { transform:scale(.48); }
.maplibregl-ctrl-attrib { font-size:9px !important; opacity:.62; }
.maplibregl-ctrl-bottom-right { right:72px; }

@media (max-width: 430px) {
  .hud-card { right:294px; }
  .inset-card { width:276px; height:278px; }
}
@media (max-width: 380px) {
  .hud-card { right:12px; top:calc(var(--safe-top) + 220px); }
  .inset-card { width:250px; height:260px; }
}

@media (max-width: 520px) {
  .hud-card {
    right:auto;
    width:calc(100vw - 304px);
    min-width:118px;
  }
}
@media (max-width: 430px) {
  .hud-card {
    left:10px;
    right:auto;
    width:128px;
    padding:9px 9px;
  }
  .hud-title-row { display:block; }
  .hud-title-row .state-badge { display:inline-block; margin-top:5px; }
  .hud-metrics { display:block; line-height:1.45; }
  .inset-card { right:8px; width:276px; height:278px; }
}


/* Nearby community / building entrance markers from OSM.
   These are supplemental hints only; they never replace the 581 destination pin. */
.entrance-marker-wrap {
  position: relative;
  pointer-events: auto;
  transform: translateY(-2px);
}
.entrance-marker-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.38);
  background: #1fbf75;
  position: relative;
}
.entrance-marker-dot::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  left: 3.5px;
  top: 3.5px;
}
.entrance-marker-wrap.gate .entrance-marker-dot {
  background: #ffad33;
}
.entrance-marker-label {
  position: absolute;
  left: 50%;
  top: 21px;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 7px;
  background: rgba(8,13,18,.88);
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.inset-entrance .entrance-marker-dot {
  width: 14px;
  height: 14px;
  border-width: 2px;
}
.inset-entrance .entrance-marker-label {
  top: 17px;
  font-size: 9px;
  padding: 1px 4px;
}