:root{
  --bg:#d9d1d3;
  --toolbar:#2a2a2f;
  --toolbar-2:#3a3a3f;
  --red:#b6333f;
  --red-dark:#8c1623;
  --red-soft:#f5dfe3;
  --ink:#222;
  --line:#2c2c2c;
  --panel:#f4f2f1;
  --muted:#6a6a6a;
  --shadow:rgba(0,0,0,.12);
}

*{box-sizing:border-box}
.top{display:flex;align-items:center;gap:12px;padding:8px 12px 10px;background:linear-gradient(180deg,var(--toolbar),var(--toolbar-2));color:#fff;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.top nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.brand{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;font:inherit}
.btn.ghost{background:transparent;color:#fff;border-radius:8px;padding:6px 10px;min-height:20px;min-width:22px}
.map-main{max-width:1120px;margin:0 auto;padding:28px 14px 40px}
.help,.panel{display:none !important}
.search{display:block;margin-top:6px}
.map-help-button{float:right;border:0;border-radius:999px;padding:8px 16px;background:var(--red-dark);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.search label{display:block;font-weight:800;font-size:1.05rem;color:#1b1b1d;margin:0 0 12px 6px}
.combo{position:relative}
#search{width:100%;min-height:52px;padding:0 18px 0 42px;font:inherit;font-size:1.05rem;border:2px solid var(--red-dark);border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.08);background:#f9f7f7;color:#333;outline:none}
#search::placeholder{color:#7a7073}
#results{position:absolute;z-index:20;left:0;right:0;margin:6px 0 0;padding:6px;list-style:none;background:#fff;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.16);max-height:220px;overflow:auto}
#results li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer}
#results li:hover,#results li.active{background:#f6e9ec}
#results li span{color:#666}
.mapwrap{position:relative;background:var(--panel);border:2px solid #d2cacc;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.06);overflow:hidden;aspect-ratio:700/470;max-height:78vh;width:100%;margin:18px auto 0}
#map{width:100%;height:100%;display:block;touch-action:none;cursor:grab;user-select:none}
.floors{position:absolute;top:16px;left:16px;display:flex;gap:8px;background:rgba(255,255,255,.85);padding:8px;border-radius:12px;border:1px solid #d8d8d8;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.floor-tab{min-height:40px;padding:0 20px;border:1px solid rgba(0,0,0,.25);background:#fff;color:#373737;border-radius:10px;font:inherit;font-weight:700;cursor:pointer}
.floor-tab[aria-pressed=true]{background:linear-gradient(180deg,var(--red),var(--red-dark));border-color:var(--red-dark);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.floor-tab.has-route::after{content:" ●";color:#f3d2d7}.floor-tab[aria-pressed=true].has-route::after{color:#ffe5e9}
.ctrl{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:grid;gap:10px}
.ctrl button{width:52px;height:52px;border:1px solid rgba(0,0,0,.12);border-radius:12px;background:#fff;color:var(--red-dark);font-size:1.8rem;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.ctrl button:hover{background:#fafafa}
.ctrl button:active{background:#f2f2f2}
.card{position:absolute;left:16px;bottom:58px;max-width:min(320px,66%);background:rgba(255,255,255,.92);padding:12px 14px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.12);border-left:4px solid var(--red)}
.card p{margin:4px 0 8px;font-size:.88rem;color:var(--muted)}.card b{font-size:1rem}
.legend{position:absolute;left:16px;right:16px;bottom:10px;display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 10px;list-style:none;margin:0;background:rgba(246,246,246,.82);border-radius:8px;font-size:.82rem;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.legend li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.k{display:inline-block;width:18px;height:12px;border-radius:3px}
.k.here{background:var(--red-dark);width:12px;height:12px;border-radius:50%}.k.dest{background:var(--red);width:12px;height:12px;border-radius:50%}
.k.route{height:0;border-top:4px dashed var(--red-dark)}.k.room{background:#fff;border:2px solid var(--line)}
.k.walk{background:#d9d9d9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* SVG map */
.bldg{fill:#f5f5f5;stroke:#1f1f1f;stroke-width:2.2;stroke-linejoin:round}
.walk{stroke:#d9d9d9;stroke-width:11;stroke-linecap:round}
.stairs{fill:#fff;stroke:#1f1f1f;stroke-width:1}.stairs-line{stroke:#1f1f1f;stroke-width:.8}
.room polygon{fill:#fff;stroke:#1e1e1e;stroke-width:1.2;stroke-linejoin:round;cursor:pointer;transition:fill .15s ease}
.room.counter polygon{fill:#f1f1f1}.room.waiting polygon{fill:#ebebeb}.room.restroom polygon{fill:#f0f0f0}
.room:hover polygon{fill:#f8ebee}.room text{fill:#111;font-weight:600;text-anchor:middle;pointer-events:none;font-size:7px}
.room:focus{outline:none}.room:focus-visible polygon{stroke:#666;stroke-width:2}
.room.sel polygon{fill:#f6dfe4;stroke:var(--red-dark);stroke-width:2}
.room.dest polygon{stroke-dasharray:4 3}
.door{fill:#fff;stroke:#1f1f1f;stroke-width:.7;pointer-events:none}
.route-casing{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.route{fill:none;stroke:var(--red-dark);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 6;animation:flow .8s linear infinite}
@keyframes flow{to{stroke-dashoffset:-13}}
.note{font-size:7px;fill:#3f3f3f;pointer-events:none}.note.strong{font-size:7px;font-weight:700;fill:var(--red-dark);paint-order:stroke;stroke:#fff;stroke-width:2px}
.here circle:last-of-type{fill:var(--red-dark);stroke:#fff;stroke-width:1.5}.here .pulse{fill:rgba(182,51,63,.18);animation:pulse 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{to{transform:scale(2.2);opacity:0}}
.here text,.pin text{font-size:7px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:2px;pointer-events:none}.here text{fill:var(--red-dark)}.pin text{fill:var(--red-dark)}
.pin path{fill:var(--red);stroke:#fff;stroke-width:1}.pin circle{fill:#fff}
@media (max-width:640px){
  .top{padding:8px 10px}.main{padding:8px 10px 14px}.search label{font-size:.95rem;margin-bottom:8px}.mapwrap{aspect-ratio:auto;height:68vh}.floors{left:12px;top:12px}.ctrl{right:12px}.legend{gap:10px;flex-wrap:wrap;font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){.route,.here .pulse{animation:none}}