*{box-sizing:border-box}
:root{--navy:#0b1e3a;--navy-700:#102f63;--sky:#d1e9ff;--bg:#0e1421;--panel:#111a2c;--muted:#9bb0c9;--danger:#c0392b;--white:#fff;--chip:#0f1d36;--chip-b:#23498f}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
body{background:var(--bg);color:var(--white)}
.topbar{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.5rem .75rem;background:linear-gradient(180deg,var(--navy),var(--navy-700));border-bottom:1px solid rgba(255,255,255,.08)}
.brand{font-weight:800;letter-spacing:.5px}
.actions{display:flex;align-items:center;gap:.5rem;flex:1;flex-wrap:wrap}
.field{display:flex;align-items:center;gap:.25rem}
.field label{font-size:.75rem;opacity:.8;margin-right:.25rem}
.field input{background:#0a1530;border:1px solid #1f335d;color:#fff;border-radius:.4rem;padding:.45rem .6rem;min-width:11rem}
.btn{background:#1b2e57;border:1px solid #2f4f91;border-radius:.5rem;color:#fff;padding:.5rem .7rem;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.small{padding:.35rem .55rem;font-size:.85rem}
.btn.ghost{background:transparent;border:1px solid #2f4f91}
.btn.danger{background:var(--danger);border-color:#9b2a1f}
.pill{background:#243b74;border-radius:999px;padding:.12rem .45rem;margin-left:.25rem}
/* Users dropdown — improved */
.menu{
  position:absolute;top:100%;right:0;margin-top:.35rem;
  background:rgba(17,26,44,.95);
  backdrop-filter:blur(6px);
  border:1px solid #2b478b;
  border-radius:.75rem;
  min-width:220px;
  display:none;
  max-height:50vh;
  overflow-y:auto;
  box-shadow:0 8px 18px rgba(0,0,0,.4);
  animation:fadeIn .15s ease-out;
  z-index:2000;
}
.menuItem{
  display:block;
  width:100%;
  padding:.55rem .9rem;
  text-align:left;
  background:transparent;
  border:0;
  color:#e0e8ff;
  font-size:.92rem;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.menuItem:hover{
  background:rgba(59,130,246,.25);
  color:#fff;
}
/* scrollbar гоё болгох */
.menu::-webkit-scrollbar{ width:6px }
.menu::-webkit-scrollbar-thumb{ background:#2f4f91;border-radius:4px }
.menu::-webkit-scrollbar-track{ background:transparent }

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(-4px) }
  to  { opacity:1; transform:translateY(0) }
}

.usersWrap{position:relative}
#map{position:absolute;inset:56px 0 48px 0}
.leaflet-container{background:#0b0f1a}
.sheet{position:fixed;left:0;right:0;bottom:48px;background:var(--panel);border-top:1px solid #243d77;border-radius:16px 16px 0 0;z-index:1200;padding:.5rem .75rem;max-height:60vh;overflow:auto}
.sheet.hidden{display:none}
.sheetHeader{display:flex;align-items:center;justify-content:space-between}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-top:.5rem}
.card{border:1px solid #2b478b;background:#0d1a36;border-radius:.6rem;padding:.5rem;text-align:center;cursor:pointer}
.card svg{width:28px;height:28px;display:block;margin:0 auto .25rem}
.card .label{font-size:.85rem;color:var(--sky)}
.iconBtn{background:transparent;border:0;color:#fff;font-size:1.5rem;cursor:pointer}
.orient{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,92vw);background:#0d1a2e;border:1px solid #2b478b;border-radius:12px;z-index:1400;padding:.75rem}
.orient.hidden{display:none}
.orientGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:.5rem 0}
.orientBtn{border:1px solid #2b478b;background:#102044;padding:.6rem;border-radius:.5rem;cursor:pointer}
@media (min-width:1024px){
  .orientGrid{gap:.75rem}
  .orientBtn{font-size:1rem;padding:.8rem 1rem;transition:background .2s, transform .2s}
  .orientBtn:hover{background:#1e3a8a;transform:scale(1.05)}
}
.modal{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1500}
.modal.hidden{display:none}
.modalContent{background:#0d1a2e;border:1px solid #2b478b;border-radius:12px;max-width:720px;width:92vw;max-height:82vh;overflow:auto}
.modalHeader{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid #243d77}
.modalBody{padding:1rem}
.row{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
.hint{color:var(--muted);font-size:.85rem;margin-top:.5rem}
.summary{position:fixed;left:0;right:0;bottom:0;height:48px;background:#0a1530;border-top:1px solid #203a76;z-index:1100;display:flex;align-items:center;overflow:hidden}
.summaryInner{display:flex;gap:.5rem;align-items:center;padding:.25rem .5rem;overflow-x:auto}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border:1px solid var(--chip-b);background:var(--chip);border-radius:999px;font-weight:700;white-space:nowrap}
.chip .dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.apx-icon .wrap{position:relative;width:40px;height:40px;display:grid;place-items:center}
.apx-icon .glyph{width:26px;height:26px;filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.dir{position:absolute;left:50%;top:50%;width:40px;height:6px;transform-origin:50% 50%}
.me-icon .me-dot{width:16px;height:16px;border-radius:999px;background:#00d084;border:2px solid #083a2c;box-shadow:0 0 0 2px rgba(0,0,0,.3)}
.presence .presence-dot{width:12px;height:12px;border-radius:999px;background:#ffd166;border:2px solid #5a4100;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.marker-icon{ position:relative; display:inline-block; line-height:0; }
.marker-icon .main-icon svg{ display:block; }


@media (max-width:800px){
  #map{inset:96px 0 48px 0}
  .grid{grid-template-columns:repeat(3,1fr)}
  .field{flex-basis:100%}
  .actions{gap:.4rem}
}