:root{--bg:#f4f1e8;--ink:#2d2a24;--muted:#6f6a5f;--accent:#e2574c;--panel:#fffdf7;--line:#e2ddcf}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1d1c19;--ink:#f1ede3;--muted:#b4ad9e;--panel:#26241f;--line:#3a372f}}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#map{position:fixed;inset:0}
.bar{position:fixed;left:12px;top:12px;display:flex;gap:8px;align-items:center;background:var(--panel);padding:8px 12px;border-radius:12px;box-shadow:0 2px 10px #0002;z-index:2}
.bar button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:4px 10px;cursor:pointer}
#fps{color:var(--muted);font-size:12px;min-width:48px}
#card{position:fixed;right:12px;top:64px;width:min(340px,calc(100vw - 24px));background:var(--panel);border-radius:14px;box-shadow:0 6px 24px #0003;padding:16px;z-index:2}
#card h2{margin:0 0 4px;font-size:18px}#card p{margin:4px 0;color:var(--muted)}
#card .svc{margin-top:12px;padding:10px;border:1px dashed var(--line);border-radius:10px;color:var(--muted)}
#close{position:absolute;right:10px;top:8px;border:0;background:none;font-size:22px;cursor:pointer;color:var(--muted)}
@media (max-width:600px){#card{left:12px;right:12px;top:auto;bottom:12px;width:auto}}