[hidden] { display:none !important; }
:root { --bg:#1B1F23; --panel:#232830; --panel2:#2c323b; --ink:#f2f2f7; --muted:#9aa0a8; --accent:#0a84ff; --lime:#76ff03; --danger:#ff453a; --copper:#c8875a; }
* { box-sizing: border-box; }
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; }
#top { position:fixed; top:0; left:0; right:0; height:52px; display:flex; align-items:center; gap:10px; padding:0 12px; padding-top:env(safe-area-inset-top); background:rgba(27,31,35,.92); z-index:5; }
#top .logo { width:30px; height:30px; border-radius:6px; }
#top b { color:var(--copper); letter-spacing:.08em; }
.grow { flex:1; }
select, input, button { font:inherit; color:var(--ink); }
select, input[type=text], input[type=number] { background:var(--panel2); border:0; border-radius:8px; padding:7px 9px; }
button { background:var(--panel2); border:0; border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:600; }
button:hover { filter:brightness(1.15); }
button.primary { background:var(--accent); color:#fff; }
button.lime { background:var(--lime); color:#111; }
button.ghost { background:transparent; color:var(--accent); }
button.danger { color:var(--danger); }
#side { position:fixed; top:52px; left:0; bottom:0; width:360px; background:var(--panel); z-index:4; overflow-y:auto; padding:10px 12px 24px; box-shadow:2px 0 8px rgba(0,0,0,.35); }
#side[data-closed] { display:none; }
#sideToggle { position:fixed; top:62px; left:372px; z-index:4; width:36px; height:36px; padding:0; }
#side[data-closed] + #sideToggle { left:10px; }
#tabs { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
#tabs button.on { background:var(--accent); color:#fff; }
.muted { color:var(--muted); font-size:13px; }
.err { color:var(--danger); font-size:13px; }
.row { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.item { background:var(--panel2); border-radius:10px; padding:8px 10px; margin-top:6px; }
.item.sel { outline:2px solid var(--accent); }
.item .t { font-weight:700; }
.dot { display:inline-block; width:10px; height:10px; border-radius:5px; margin-right:6px; vertical-align:middle; }
label.chk { display:flex; gap:8px; align-items:center; margin-top:8px; cursor:pointer; }
#toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:rgba(28,28,30,.95); padding:10px 14px; border-radius:12px; z-index:10; max-width:90vw; }
#login { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:20; }
#login .card { background:var(--panel); border-radius:16px; padding:20px; width:min(420px, 92vw); }
#login h2 { margin:0 0 8px; }
#loginChannels button { display:block; width:100%; margin-top:8px; padding:12px; color:#fff; }
.member { width:30px; height:30px; border-radius:15px; border:3px solid #fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.mlabel { font-size:12px; font-weight:700; background:rgba(28,28,30,.85); color:#fff; padding:1px 6px; border-radius:6px; white-space:nowrap; margin-top:2px; }
.pin { width:16px; height:16px; border-radius:8px; border:3px solid #fff; background:var(--lime); box-shadow:0 1px 4px rgba(0,0,0,.5); cursor:grab; }
.pin.start { background:#30d158; } .pin.end { background:var(--danger); }
@media (max-width: 720px) {
  #side { width:100%; top:auto; height:46vh; border-radius:16px 16px 0 0; }
  #sideToggle { top:auto; bottom:calc(46vh + 10px); left:auto !important; right:10px; }
  #side[data-closed] + #sideToggle { bottom:20px; }
}
.maplibregl-ctrl-top-right { top:52px; }
#loginQr:empty { display:none; } #loginQr svg { width:100%; height:auto; display:block; } #loginQr p { color:#333; margin:6px 8px 0; }
#imgDate { position:fixed; top:60px; right:56px; z-index:5; background:rgba(28,28,30,.85); padding:4px 10px; border-radius:8px; font-size:13px; }
.chart{margin:8px 0 0}
.chart canvas{width:100%;display:block;cursor:crosshair;background:rgba(255,255,255,0.03);border-radius:8px}
.chart-tip{font-size:12px;min-height:16px;margin-top:2px}
.chart-dot{width:14px;height:14px;border-radius:7px;background:#ff9f0a;border:2px solid #fff;box-shadow:0 0 4px #000}
.chip{padding:4px 10px;border-radius:14px;background:var(--panel2);font-size:13px}
.chip.on{background:var(--accent);color:#000}
.chip.danger{color:#ff453a}
.chip:disabled{opacity:.4}
.bulk:not(:empty){background:var(--panel2);border-radius:10px;padding:8px 10px;margin-top:6px}
.trow{display:flex;align-items:center;gap:8px;padding:6px 8px;cursor:pointer}
.trow .tmain{flex:1;min-width:0}
.trow .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow.dim{opacity:.5}
.trow .eye{font-size:16px;padding:2px 4px}
.bulk .chip{background:var(--panel)}
/* Окошки на карте — тёмные, как панель: на белом светлый текст не читался */
.maplibregl-popup-content{background:var(--panel);color:var(--ink);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.5);padding:10px 26px 10px 12px;font-size:13px;line-height:1.35}
.maplibregl-popup-close-button{color:var(--muted);font-size:18px;padding:2px 6px}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--panel)}
.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--panel)}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--panel)}
.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--panel)}
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-top-color:var(--panel)}
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-bottom-color:var(--panel)}
.maplibregl-popup-content .muted{color:var(--muted)}
.maplibregl-popup-content .err{color:var(--danger)}
.lg-row{display:flex;align-items:center;gap:10px;padding:3px 0;font-size:13px}.lg-row svg{flex:none;border-radius:4px}