/* Mayoq — umumiy uslublar (Sxemasi.html dizayn tili asosida) */
:root{
  --bg:#EAF0F3;--bg2:#F4F7F9;--panel:#FFFFFF;--panel2:#F6F9FA;--ink:#0B1B26;--mute:#526673;--faint:#8499A6;
  --line:rgba(11,27,38,.14);--line2:rgba(11,27,38,.08);--grid:rgba(11,27,38,.05);
  --teal:#0A8F8A;--teal-ink:#076B67;--red:#D7263D;--amber:#B98200;
  --ok:#0ca30c;--warn:#fab219;--serious:#ec835a;--crit:#d03b3b;
  --ok-ink:#0a6e0a;--warn-ink:#8a5d00;--crit-ink:#b02828;
  --bar:#2a78d6;--bar-hi:#184f95;
  --shadow:0 1px 2px rgba(11,27,38,.06),0 8px 24px rgba(11,27,38,.06);
  --r:14px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#071019;--bg2:#0B1722;--panel:#102230;--panel2:#0D1C28;--ink:#EAF2F6;--mute:#93A9B6;--faint:#6C8290;
  --line:rgba(234,242,246,.14);--line2:rgba(234,242,246,.07);--grid:rgba(234,242,246,.04);
  --teal:#2EE6D6;--teal-ink:#2EE6D6;--red:#FF4D5E;--amber:#FFC53D;
  --ok-ink:#4fd64f;--warn-ink:#fab219;--crit-ink:#ff6b6b;
  --bar:#3987e5;--bar-hi:#86b6ef;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#071019;--bg2:#0B1722;--panel:#102230;--panel2:#0D1C28;--ink:#EAF2F6;--mute:#93A9B6;--faint:#6C8290;
  --line:rgba(234,242,246,.14);--line2:rgba(234,242,246,.07);--grid:rgba(234,242,246,.04);
  --teal:#2EE6D6;--teal-ink:#2EE6D6;--red:#FF4D5E;--amber:#FFC53D;
  --ok-ink:#4fd64f;--warn-ink:#fab219;--crit-ink:#ff6b6b;
  --bar:#3987e5;--bar-hi:#86b6ef;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{color:var(--ink);font:14px/1.45 Onest,system-ui,-apple-system,Arial,sans-serif;background:
  radial-gradient(ellipse at 85% 0,color-mix(in srgb,var(--teal) 10%,transparent),transparent 50%),
  linear-gradient(var(--grid) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/48px 48px,var(--bg)}
h1,h2,h3{font-family:Unbounded,Onest,sans-serif;font-weight:600;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.mute{color:var(--mute)}.faint{color:var(--faint)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- yuqori panel ---- */
.top{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:1200;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand b{font-family:Unbounded,sans-serif;font-size:19px;font-weight:600}
.brand small{display:block;color:var(--mute);font-size:12px;line-height:1.1}
.top .sp{flex:1}
.clock{font:600 20px Unbounded,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clock small{display:block;font:400 11px Onest,sans-serif;color:var(--mute);letter-spacing:0;text-align:right}

/* ---- tugmalar ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 14px;font-weight:600;transition:.15s;text-decoration:none;color:inherit;white-space:nowrap}
.btn:hover{border-color:var(--teal)}
.btn.pri{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.pri:hover{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}
.btn.go{background:var(--teal);color:#fff;border-color:var(--teal)}
:root[data-theme="dark"] .btn.go{color:#04201E}
.btn.danger{color:var(--crit-ink);border-color:color-mix(in srgb,var(--crit) 40%,transparent)}
.btn.danger:hover{background:color-mix(in srgb,var(--crit) 10%,transparent)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn.icon{padding:7px 9px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.big{padding:12px 18px;font-size:15px;width:100%}

.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--panel2);white-space:nowrap}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.chip.ok .dot{background:var(--ok)}.chip.warn .dot{background:var(--warn)}.chip.crit .dot{background:var(--crit)}.chip.teal .dot{background:var(--teal)}
.chip.ok{color:var(--ok-ink)}.chip.warn{color:var(--warn-ink)}.chip.crit{color:var(--crit-ink)}
.chip.p1{background:color-mix(in srgb,var(--crit) 14%,var(--panel));border-color:color-mix(in srgb,var(--crit) 40%,transparent);color:var(--crit-ink)}
.chip.p2{background:color-mix(in srgb,var(--warn) 18%,var(--panel));border-color:color-mix(in srgb,var(--warn) 50%,transparent);color:var(--warn-ink)}
.chip.p3{background:color-mix(in srgb,var(--teal) 12%,var(--panel));border-color:color-mix(in srgb,var(--teal) 35%,transparent);color:var(--teal-ink)}
.live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line2)}
.card-h h3{font-size:14px}
.card-h .sp{flex:1}
.card-b{padding:12px 14px}

.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:12px;color:var(--mute);font-weight:600}
.inp{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:9px 11px;width:100%}
.inp:focus{outline:2px solid var(--teal);outline-offset:0;border-color:transparent}
textarea.inp{resize:vertical;min-height:62px}
select.inp{appearance:auto}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel2)}
.seg button{border:0;background:transparent;padding:6px 10px;font-weight:600;font-size:13px;color:var(--mute)}
.seg button.on{background:var(--ink);color:var(--bg)}

.empty{padding:28px 16px;text-align:center;color:var(--mute)}
.empty .big{font-size:34px;margin-bottom:6px}

/* ---- xarita belgilari ---- */
.mk{background:none;border:0}
.mk .pin{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;font-size:15px;background:var(--panel);border:2px solid var(--teal);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.mk.mk-h .pin{border-radius:8px;border-color:var(--crit);color:var(--crit);font-weight:800;font-size:13px;background:#fff}
.mk.mk-h.vil .pin{border-width:3px}
.mk.mk-h.sel .pin{background:var(--crit);color:#fff;transform:scale(1.15)}
.mk.amb .pin{border-color:var(--amber);font-size:16px}
.mk.person .pin{border-color:var(--red);background:var(--red);color:#fff}
.mk.person.idle .pin{animation:ring 1.4s infinite}
.mk.block .pin{border-color:var(--crit);background:var(--crit);color:#fff;font-size:13px}
.mk.mk-i .pin{border-color:var(--red);font-size:13px}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.leaflet-container{background:var(--bg2);font:inherit}
.osm-tiles{filter:saturate(.75) contrast(.95)}
:root[data-theme="dark"] .osm-tiles{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.5)}
.leaflet-tooltip{font:13px Onest,sans-serif;border-radius:8px;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--panel);color:var(--ink)}
.leaflet-tooltip-top:before{border-top-color:var(--panel)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--ink)}
.leaflet-control-zoom a{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important}
.leaflet-control-attribution{background:color-mix(in srgb,var(--panel) 75%,transparent)!important;color:var(--mute)!important}
.leaflet-control-attribution a{color:var(--mute)!important}
.route-line{stroke-dasharray:10 8;animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-36}}

/* ---- xabarlar ---- */
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:3000}
.toast{background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow);max-width:360px;transition:.35s;font-weight:500}
.toast.crit{background:var(--crit);color:#fff}.toast.ok{background:var(--teal-ink);color:#fff}
.toast.out{opacity:0;transform:translateY(8px)}

/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(4,12,18,.55);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:2500;padding:16px}
.modal[hidden]{display:none}
.modal .card{width:min(460px,100%);padding:22px}

/* ---- jadval ---- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{position:sticky;top:0;background:var(--panel);text-align:left;font-weight:600;color:var(--mute);font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
.tbl th.s{cursor:pointer;user-select:none}
.tbl th.s:hover{color:var(--ink)}
.tbl th .ar{opacity:.4;margin-left:3px}
.tbl th.on .ar{opacity:1;color:var(--teal-ink)}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.tbl td.r,.tbl th.r{text-align:right}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--teal) 7%,transparent)}
.tbl tbody tr.sel{background:color-mix(in srgb,var(--teal) 13%,transparent)}
.meter{display:inline-block;width:56px;height:6px;border-radius:3px;background:var(--line2);vertical-align:middle;margin-right:6px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:3px;background:var(--teal)}

.scroll{overflow:auto}
.scroll::-webkit-scrollbar{width:10px;height:10px}
.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;border:3px solid transparent;background-clip:padding-box}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}