:root { --pad:clamp(12px,1.2vw,18px); --bg:#0b0e13; --panel:#10141b; --raised:#161b24; --ink:#e9edf2; --muted:#8a94a4; --line:#222936; --line-2:#2e3746;
  --accent:#f5b547; --accent-soft:rgba(245,181,71,.13); --blue:#8fb4ff;
  --mono:'Geist Mono',ui-monospace,monospace; --sans:'Geist',system-ui,sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink); font:13px/1.45 var(--sans); -webkit-font-smoothing:antialiased; }
body { display:flex; flex-direction:column; height:100dvh; overflow:hidden; }
button,select { font:inherit; color:inherit; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
header { display:flex; align-items:center; gap:10px; padding:calc(8px + env(safe-area-inset-top)) clamp(12px,1.6vw,24px) 8px; background:var(--panel); border-bottom:1px solid var(--line); flex:none; flex-wrap:wrap; }
.mark { width:26px; height:26px; border-radius:7px; background:var(--accent); color:#0b0e13; font-weight:700; display:grid; place-items:center; }
.brand { font-size:14px; letter-spacing:-.01em; white-space:nowrap; }
.badge { font:11px var(--mono); color:var(--muted); border:1px solid var(--line-2); padding:3px 8px; border-radius:99px; white-space:nowrap; }
.warn { font-size:12px; color:var(--accent); flex:1; min-width:180px; }
.sel { color:var(--muted); font-size:12px; display:flex; gap:6px; align-items:center; }
select,.ghost { background:var(--raised); border:1px solid var(--line-2); border-radius:8px; padding:6px 10px; min-height:34px; }
.ghost[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
main { flex:1; display:grid; grid-template-columns:minmax(0,1fr) clamp(340px,26vw,480px); min-height:0; }
#mapWrap { position:relative; min-height:0; min-width:0; }
#map { position:absolute; inset:0; }
.legend { position:absolute; left:12px; top:12px; display:flex; gap:10px; flex-wrap:wrap; max-width:calc(100% - 76px); padding:7px 10px; background:rgba(16,20,27,.94); border:1px solid var(--line-2); border-radius:8px; font-size:12px; color:var(--muted); }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.glerr,.hint { position:absolute; left:12px; bottom:14px; padding:8px 12px; background:rgba(16,20,27,.92); border:1px solid var(--line-2); border-radius:8px; color:var(--muted); font-size:12px; }
#panel { background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; overflow:auto; }
.phead { padding:14px var(--pad) 10px; border-bottom:1px solid var(--line); }
.phead h1 { margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.sub { color:var(--muted); margin-top:2px; }
.score { display:inline-block; font:12px var(--mono); color:#0b0e13; background:var(--accent); border-radius:6px; padding:2px 8px; margin-left:8px; vertical-align:middle; }
.body { padding:10px var(--pad) calc(16px + env(safe-area-inset-bottom)); }
.body h2 { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:14px 0 6px; }
dl { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; }
dt { color:var(--muted); } dd { margin:0; font-family:var(--mono); font-size:12px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; } .tags span { font-size:11px; border:1px solid var(--line-2); border-radius:99px; padding:2px 8px; color:var(--ink); }
.caveat { margin-top:14px; padding:9px 11px; background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:6px; font-size:12px; color:var(--ink); }
.empty { padding:var(--pad); color:var(--muted); }
.empty p { max-width:60ch; }
@media (max-width:820px) {
  main { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
  #panel { border-left:0; border-top:1px solid var(--line); max-height:46dvh; }
  .warn { order:9; flex-basis:100%; }
  .legend { max-width:calc(100% - 24px); }
  .hint { bottom:48px; }
}