:root{--bg:#fff;--fg:#202124;--muted:#5f6368;--line:#dadce0;--accent:#1a73e8;--err:#d93025}
@media(prefers-color-scheme:dark){:root{--bg:#1f2124;--fg:#e8eaed;--muted:#9aa0a6;--line:#3c4043;--accent:#8ab4f8;--err:#f28b82}}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font:14px system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg)}
.hidden{display:none!important}
header{position:fixed;inset:0 0 auto 0;z-index:5;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--line)}
header strong{margin-right:8px}
#who{margin-left:auto;color:var(--muted)}
input,select,button,textarea{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px 10px}
button{cursor:pointer}button:hover{border-color:var(--accent)}button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
#map{position:fixed;inset:121px 0 0 0}
#cards{position:fixed;z-index:4;top:49px;left:0;right:0;height:72px;display:flex;gap:8px;overflow-x:auto;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--line)}
.card-k{flex:0 0 auto;min-width:128px;border:1px solid var(--line);border-left:5px solid var(--k,#888);border-radius:8px;padding:4px 10px}
.card-k b{display:block;font-size:20px;line-height:1.2;font-variant-numeric:tabular-nums}
.card-k span{font-size:12px;color:var(--muted)}
.card-k.bump{animation:bump .6s}@keyframes bump{from{background:rgba(26,115,232,.25)}to{background:transparent}}
#panel{position:fixed;z-index:6;top:129px;right:8px;bottom:8px;width:340px;max-width:calc(100vw - 16px);overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px}
#panel h3{margin:0 0 8px}#panel h4{margin:14px 0 6px}
#panel .row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
#panel textarea,#panel input[type=text]{width:100%}
.chip{display:inline-block;padding:2px 8px;border-radius:10px;color:#fff;font-size:12px}
.muted{color:var(--muted)}.err{color:var(--err)}
.st button{border-left-width:6px}
table{border-collapse:collapse;width:100%}td,th{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left}
#legend{position:fixed;z-index:4;left:8px;bottom:24px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
#legend div{display:flex;align-items:center;gap:6px;margin:2px 0}
#legend i{width:12px;height:12px;border-radius:50%;display:inline-block}
.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(0,0,0,.4)}
.card{background:var(--bg);padding:20px;border-radius:10px;display:grid;gap:10px;width:300px}
#toast{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:24px;background:#202124;color:#fff;padding:8px 14px;border-radius:6px}
.thumbs img{width:96px;height:72px;object-fit:cover;border-radius:4px;margin:2px}
.box{position:fixed;border:2px dashed var(--accent);background:rgba(26,115,232,.12);z-index:7;pointer-events:none}
@media(max-width:700px){#panel{top:auto;height:55vh;width:auto;left:8px}#map{inset:170px 0 0 0}#cards{top:96px}#panel{top:auto}}

.tlabel{pointer-events:none;white-space:nowrap;font-size:12px;line-height:1.2;color:#111;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff}
.tlabel b{display:block;font-size:15px;line-height:1.1}.tlabel span{display:block;font-size:11px;color:#333}

.vertex{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #1a73e8;cursor:grab;box-shadow:0 0 0 1px #fff}