:root{
  --bg:#0e1726; --panel:#ffffff; --ink:#0f1b2d; --muted:#6b7a90;
  --line:#e7ecf3; --accent:#e23744; --accent2:#1f6feb; --soft:#f5f8fc;
  --shadow:0 10px 30px rgba(13,30,60,.10), 0 2px 8px rgba(13,30,60,.06);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--soft)}
#app{display:grid;grid-template-columns:410px 1fr;height:100vh}

/* sidebar */
#sidebar{display:flex;flex-direction:column;gap:12px;padding:16px;overflow:hidden;
  background:linear-gradient(180deg,#0e1726,#15233b);color:#eaf0fa}
.brand{display:flex;align-items:center;gap:12px;padding:4px 2px 8px}
.brand .logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),#ff7a59);color:#fff;font-size:22px;
  box-shadow:0 6px 18px rgba(226,55,68,.45)}
.brand h1{font-size:18px;margin:0;letter-spacing:.2px}
.brand p{margin:2px 0 0;font-size:12px;color:#9fb0c9}

.panel{background:var(--panel);color:var(--ink);border-radius:14px;padding:14px;box-shadow:var(--shadow);flex-shrink:0}
.panel.grow{flex:1 1 auto;display:flex;flex-direction:column;min-height:240px}
.lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}

.search-wrap{position:relative;margin-top:8px}
.search{display:flex;gap:8px}
.suggest{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;
  border:1px solid var(--line);border-radius:12px;margin-top:6px;box-shadow:var(--shadow);overflow:hidden}
.suggest .s{padding:9px 12px;cursor:pointer;border-bottom:1px solid #f1f5fa}
.suggest .s:last-child{border-bottom:0}
.suggest .s:hover,.suggest .s.on{background:var(--soft)}
.suggest .s b{font-size:13px;font-weight:600;display:block}
.suggest .s-sub{font-size:11px;color:var(--muted)}
.search input{flex:1;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;font-size:14px;outline:none}
.search input:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(31,111,235,.12)}
.search button{border:0;border-radius:10px;width:44px;background:var(--accent);color:#fff;font-size:18px;cursor:pointer;transition:.15s}
.search button:hover{background:#c92b38}
.hint{font-size:12px;color:var(--muted);margin:9px 2px 0;line-height:1.4}

select{width:100%;margin-top:8px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;background:#fff;cursor:pointer}
.stats{display:flex;gap:14px;margin-top:10px;font-size:12px;color:var(--muted)}
.stats b{display:block;font-size:16px;color:var(--ink);font-weight:700}
.stats .tag{margin-left:auto;align-self:flex-start;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px}
.tag.real{background:#e7f7 ec;background:#e6f6ed;color:#0a7a3d}
.tag.synth{background:#fff1e6;color:#c2620a}

.legend{margin-top:12px;font-size:11px;color:var(--muted)}
.legend .bar{height:9px;border-radius:6px;margin:5px 0 2px;
  background:linear-gradient(90deg,#fde68a,#fb923c,#dc2626)}
.legend .ticks{display:flex;justify-content:space-between;font-size:10px}

.results-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rh-actions{display:flex;align-items:center;gap:10px}
.cumul{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);cursor:pointer;user-select:none}
.cumul input{accent-color:var(--accent);cursor:pointer}
.results{margin-top:8px;overflow:auto;flex:1 1 auto;min-height:0}
.results .empty{color:var(--muted);font-size:13px;text-align:center;margin-top:24px}
.ghost{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:8px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer}
.ghost:hover{color:var(--accent);border-color:var(--accent)}

.pt{border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:10px}
.pt h3{margin:0 0 2px;font-size:14px}
.pt .sub{font-size:11px;color:var(--muted);margin-bottom:8px}
table{width:100%;border-collapse:collapse;font-size:12px}
th{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);text-align:right;padding:4px 5px;border-bottom:1px solid var(--line)}
th:first-child{text-align:left}
td{padding:6px 5px;border-bottom:1px solid #f1f5fa;text-align:right;white-space:nowrap}
td:first-child{text-align:left;font-weight:600;cursor:pointer}
td:first-child:hover{color:var(--accent2)}
tr:last-child td{border-bottom:0}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.regie{font-size:11px;color:var(--muted)}
.bignum{font-weight:700}
.note{font-size:10px;color:var(--muted);margin-top:7px;line-height:1.35}

.foot{font-size:10.5px;color:#8aa;line-height:1.45;padding:2px 4px 4px;color:#8597b0}

/* map */
#mapwrap{position:relative}
#map{position:absolute;inset:0}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;
  background:var(--soft);color:var(--muted);font-size:13px;z-index:5;transition:opacity .4s}
#loading.hidden{opacity:0;pointer-events:none}
.spin{width:30px;height:30px;border:3px solid #d8e1ee;border-top-color:var(--accent);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.maplibregl-popup-content{border-radius:10px;padding:9px 12px;font-family:Inter,sans-serif;box-shadow:var(--shadow)}
.pop-nom{font-weight:700;font-size:13px}
.pop-sub{font-size:11px;color:var(--muted)}

.pin{width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--accent);border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.3)}

@media(max-width:760px){#app{grid-template-columns:1fr;grid-template-rows:46vh 54vh}}