:root{
  --bg-0:#0b1016;
  --bg-1:#101823;
  --panel:#141d29;
  --border:#25313f;
  --text-hi:#e8edf2;
  --text-lo:#8a97a6;
  --amber:#e0a840;
  --amber-dim:#7a5f2c;
  --red:#e2543c;
  --green:#4caf7d;
  --mono: "JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --sans: "Inter","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;}

/* Глобальний стиль скролбарів — щоб ніде не з'являвся дефолтний білий
   системний скролбар, який виглядає чужорідно на темній темі. */
::-webkit-scrollbar{ width:7px; height:7px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--text-lo); }
*{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; }

html,body{
  margin:0;padding:0;height:100%;
  background:radial-gradient(circle at 30% 0%, var(--bg-1), var(--bg-0) 70%);
  color:var(--text-hi);
  font-family:var(--sans);
  overscroll-behavior:none;
  overflow:hidden; /* саме вікно не скролиться — тільки внутрішні панелі (мапа, стрічка) */
}
.app{
  display:grid;
  grid-template-columns: 1fr 340px;
  grid-template-rows: auto 1fr;
  gap:14px;
  padding:14px;
  height:100vh;
  height:100dvh;
}
@media (max-width:820px){
  .app{grid-template-columns:1fr; grid-template-rows:auto 55vh 1fr; height:auto; min-height:100dvh;}
  /* На комп'ютері сторінка навмисно НЕ скролиться (overflow:hidden вище) —
     бо там усе завжди влазить в один екран (height:100vh), а скролять
     лише внутрішні панелі (мапа, стрічка). На телефоні макет натомість
     "природної висоти" (height:auto/min-height) — контент цілком може
     бути вищим за екран (особливо сторінки Статистика й Пристрої), тому
     тут скрол сторінки навпаки МАЄ бути дозволений, інакше решта просто
     не гортається і не видно. */
  html,body{overflow-y:auto; overflow-x:hidden;}
  /* Внутрішній скрол цих панелей був для комп'ютера, де ЗОВНІШНЯ сторінка
     навмисно нерухома. На телефоні зовнішня сторінка тепер сама гортається
     (правило вище) — подвійний вкладений скрол (зовні й усередині одночасно)
     на дотик поводиться незручно, тож тут просто дозволяємо контенту
     природно розтягувати сторінку замість власного internal-скролу. */
  .page-stats, .page-devices, .page-logs{overflow-y:visible; max-height:none;}
}
header.top{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
header.top h1{
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0;
}
header.top h1 span{color:var(--amber);}
.status-line{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--text-lo);}
.conn-dot{width:8px;height:8px;border-radius:50%; background:var(--text-lo); display:inline-block;}
.conn-dot.online{background:var(--green); box-shadow:0 0 6px var(--green);}
.conn-dot.offline{background:var(--red);}
.map-panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  position:relative;
  overflow:hidden;
  min-height:0;
}
#map{width:100%;height:100%; background:var(--bg-0);}
.hint{
  position:absolute; left:10px; bottom:10px; z-index:1000;
  font-family:var(--mono); font-size:10px; color:var(--text-lo);
  background:rgba(11,16,22,.7); padding:4px 8px; border-radius:4px;
  pointer-events:none;
}
.legend{
  position:absolute; left:10px; bottom:38px; z-index:1000;
  background:rgba(11,16,22,.85); padding:8px 10px; border-radius:4px;
  border:1px solid var(--border);
  font-family:var(--mono); font-size:11.5px; color:var(--text-lo);
  display:flex; flex-direction:column; gap:3px;
  pointer-events:none;
}
.legend .row{display:flex; align-items:center; gap:6px;}
.legend .dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}

/* Кільце-підсвітка навколо цілі, обраної в стрічці подій ("Маршрут цілі") —
   помітна пульсація, щоб одразу впіймати оком, де саме на мапі та ціль. */
.highlight-ring{
  width:40px; height:40px; border-radius:50%;
  border:3px solid var(--amber);
  animation: pulse-ring 1.4s ease-out infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(.3); opacity:1; }
  70%{ transform:scale(1); opacity:.35; }
  100%{ transform:scale(1); opacity:0; }
}
.legend .group-title{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-hi); opacity:.75; margin-top:4px;
}
.legend .group-title:first-child{margin-top:0;}
.legend .group-subtitle{
  font-size:10.5px; color:var(--text-lo); opacity:.85; margin:3px 0 0 8px;
}
.legend .row.sub{margin-left:20px;}

/* Екран вводу пароля — на весь екран, поверх усього іншого, поки не
   введено правильний пароль (лише коли пароль взагалі встановлено). */
.auth-gate{
  position:fixed; inset:0; z-index:10000; background:var(--bg-0);
  display:flex; align-items:center; justify-content:center;
}
.auth-box{
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  padding:28px 32px; text-align:center; max-width:320px;
}
.auth-box h2{margin:0 0 8px 0;}
.auth-box p{color:var(--text-lo); font-size:13px; margin:0 0 16px 0;}
.auth-box input{
  width:100%; box-sizing:border-box; background:var(--bg-1); border:1px solid var(--border);
  color:var(--text-hi); padding:10px 12px; border-radius:4px; font-size:14px; margin-bottom:10px;
}
.auth-box button{width:100%; padding:10px;}
.auth-error{color:var(--red); font-size:12px; margin-top:8px; min-height:16px;}

/* Перемикач "Відкрити в інтернет" */
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; font-size:13px;}
.toggle-switch{position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0;}
.toggle-switch input{opacity:0; width:0; height:0;}
.toggle-slider{
  position:absolute; inset:0; background:var(--border); border-radius:22px; transition:.2s;
}
.toggle-slider::before{
  content:""; position:absolute; width:16px; height:16px; left:3px; top:3px;
  background:var(--text-hi); border-radius:50%; transition:.2s;
}
.toggle-switch input:checked + .toggle-slider{background:var(--amber);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px);}
.toggle-switch input:disabled + .toggle-slider{opacity:.5; cursor:not-allowed;}
.side{display:flex; flex-direction:column; gap:14px; min-height:0;}
.card{background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:12px 14px;}
.card h2{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-lo); margin:0 0 8px 0;}
.server-row{display:flex; gap:6px;}
input, button{
  background:var(--bg-0); color:var(--text-hi); border:1px solid var(--border);
  border-radius:4px; padding:8px 9px; font-family:var(--sans); font-size:12.5px;
}
input{flex:1; min-width:0;}
button{cursor:pointer; white-space:nowrap;}
button:hover{border-color:var(--amber); color:var(--amber);}
code{font-family:var(--mono); color:var(--amber); font-size:11px;}
.feed{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px;}
.event{border:1px solid var(--border); border-left:3px solid var(--amber); border-radius:4px; padding:8px 10px; font-size:12px; background:var(--bg-1); animation: appear .25s ease-out; cursor:pointer;}
.event:hover{border-color:var(--amber); background:var(--panel);}
.event .row1{display:flex; justify-content:space-between; font-family:var(--mono); margin-bottom:3px;}
.event .row2{color:var(--text-lo); font-size:11px;}
.event .row3{
  color:var(--text-lo); font-size:11px; margin-top:5px; padding-top:5px;
  border-top:1px dashed var(--border); line-height:1.4;
  white-space:pre-wrap; word-break:break-word;
}
@keyframes appear{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);}}
.empty-note{color:var(--text-lo); font-size:12px; line-height:1.5;}
.row3-muted{opacity:.65; font-size:10.5px !important;}

/* ---- Вкладки сторінок (Мапа / Статистика) ---- */
.page-tabs{display:flex; gap:6px;}
.tab-btn{
  background:transparent; border:1px solid var(--border); color:var(--text-lo);
  font-family:var(--sans); font-size:12px; padding:6px 14px; border-radius:6px; cursor:pointer;
}
.tab-btn:hover{border-color:var(--amber); color:var(--text-hi);}
.tab-btn.active{background:var(--amber-dim); border-color:var(--amber); color:var(--text-hi);}

.page-map{display:contents;}
.page-map.page-hidden{display:none;}
.page-stats{display:none; grid-column:1/-1; overflow-y:auto; min-height:0;}
.page-stats.page-active{display:block;}
.page-devices{display:none; grid-column:1/-1; overflow-y:auto; min-height:0;}
.page-devices.page-active{display:block;}
.page-report{display:none; grid-column:1/-1; overflow-y:auto; min-height:0;}
.page-report.page-active{display:block;}
.stats-card{max-width:900px; margin:0 auto;}

/* Сторінка "Пристрої" — свідомо лише для комп'ютера (великий екран):
   на телефоні керувати списком пристроїв немає особливого сенсу, а
   головне — щоб не виникало враження, ніби телефон теж має щось тут
   "адмініструвати". Той самий поріг, що й перемикання на мобільний
   вертикальний layout нижче. */
@media (max-width:820px){
  .desktop-only{display:none !important;}
}
.server-info-block{
  background:var(--bg-1); border:1px solid var(--border); border-radius:6px;
  padding:10px 12px; margin-bottom:16px; font-family:var(--mono); font-size:12px;
}
.server-info-block .lan-url{color:var(--amber); font-size:14px; user-select:all;}
table.devices-table{width:100%; border-collapse:collapse; font-size:12px;}
table.devices-table th, table.devices-table td{padding:7px 10px; border-bottom:1px solid var(--border); text-align:left;}
table.devices-table th{color:var(--text-lo); font-weight:500; font-size:11px;}
.device-status{display:inline-flex; align-items:center; gap:5px;}
.device-status .dot{width:7px; height:7px; border-radius:50%; background:var(--text-lo);}
.device-status.online .dot{background:var(--green);}
table.devices-table .rename-input{
  background:var(--bg-1); border:1px solid var(--border); color:var(--text-hi);
  font-family:var(--sans); font-size:12px; padding:3px 6px; border-radius:4px; width:130px;
}
table.devices-table button{
  background:transparent; border:1px solid var(--border); color:var(--text-lo);
  font-size:11px; padding:3px 8px; border-radius:4px; cursor:pointer; margin-left:4px;
}
table.devices-table button:hover{border-color:var(--amber); color:var(--text-hi);}

.stats-summary{font-family:var(--mono); font-size:13px; color:var(--text-lo); margin-bottom:16px;}
.stats-summary b{color:var(--amber); font-size:20px;}
table.stats-table{width:100%; border-collapse:collapse; font-size:12px; margin-bottom:22px;}
table.stats-table caption{text-align:left; font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--text-lo); font-size:11px; margin-bottom:6px; caption-side:top;}
table.stats-table th, table.stats-table td{padding:6px 10px; border-bottom:1px solid var(--border); text-align:left;}
table.stats-table th{color:var(--text-lo); font-weight:500; font-size:11px;}
table.stats-table td.num{font-family:var(--mono); text-align:right;}
table.stats-table td.num.downed{color:var(--red);}
table.stats-table td.num.lost{color:var(--amber);}
table.stats-table tr:hover td{background:rgba(255,255,255,.02);}


/* Leaflet dark theming */
.leaflet-container{background:var(--bg-0) !important;}
.leaflet-control-attribution{background:rgba(11,16,22,.7) !important; color:var(--text-lo) !important; font-size:9px !important;}
.leaflet-control-attribution a{color:var(--text-lo) !important;}
.oblast-fill{fill:#16202c; stroke:#25313f; stroke-width:1;}

/* ===== Повзунок масштабу (замість кнопок +/−) ===== */
.zoom-slider{
  width:30px; padding:6px 0; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(11,16,22,.85) !important; border:1px solid var(--border) !important; border-radius:6px;
}
.zoom-slider .zs-ico{ color:var(--text-hi); font-size:16px; line-height:14px; user-select:none; }
.zoom-slider .zs-track{ position:relative; width:30px; height:140px; }
.zoom-slider .zs-input{
  position:absolute; left:50%; top:50%; width:130px; height:22px; margin:-11px 0 0 -65px;
  transform:rotate(-90deg); background:transparent; cursor:pointer;
  accent-color:var(--amber);
}

/* ===== Кнопка режиму трас ===== */
.trail-toggle{
  background:rgba(11,16,22,.85); color:var(--text-hi); border:1px solid var(--border);
  border-radius:6px; padding:6px 10px; font-family:var(--mono); font-size:11px; cursor:pointer;
}
.trail-toggle:hover{ border-color:var(--amber); }

/* ===== Бейдж групи цілей (кластер) ===== */
.cluster-badge{
  width:30px; height:30px; box-sizing:border-box; border-radius:50%;
  border:3px solid #0b1016; color:#fff; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.cluster-list{ font-family:var(--mono); font-size:12px; max-height:220px; overflow:auto; }
.cluster-list-row{ display:flex; align-items:center; gap:6px; padding:4px 2px; cursor:pointer; white-space:nowrap; }
.cluster-list-row:hover{ background:rgba(0,0,0,.08); }
.cluster-list-row .dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }

/* ===== Легенда: силуети і фільтр у звіті ===== */
.lg-glyph{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:#4a5b6e; vertical-align:middle;
}
#reportLegend{ pointer-events:auto; }
#reportLegend .toggle-row-legend{ cursor:pointer; user-select:none; }
#reportLegend .toggle-row-legend:hover{ color:var(--text-hi); }
#reportLegend .toggle-row-legend.off{ opacity:.35; text-decoration:line-through; }
#reportLegend .legend-hint{ margin-top:8px; font-size:10px; opacity:.6; }

/* =====================================================================
   ТЕМА «СКЛО» — за референсом: матові скляні панелі поверх мапи,
   великі заокруглення, пілюлі-вкладки, приглушена зелено-графітова гама,
   червоно-коричневі картки тривог. Лежить в кінці файлу й перекриває
   старі стилі вище; щоб повернути старий вигляд — видали цей блок.
   ===================================================================== */
:root{
  --bg-0:#090c0a;
  --bg-1:#0f1410;
  --panel:rgba(26,31,27,.66);
  --panel-solid:#171c18;
  --border:rgba(255,255,255,.09);
  --text-hi:#eef1ec;
  --text-lo:#8f998f;
  --amber:#c4dc9a;            /* акцент: світло-салатовий (замість бурштинового) */
  --amber-dim:rgba(196,220,154,.18);
  --red:#ff5d50;
  --green:#7bd69a;
  --alert-bg:linear-gradient(155deg,rgba(122,46,40,.46),rgba(66,31,29,.42));
  --alert-border:rgba(255,128,108,.16);
  --glass-blur:blur(20px) saturate(1.25);
  --r-xl:26px; --r-lg:20px; --r-md:14px;
  --mono:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --sans:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
}
body{ font-feature-settings:"tnum" 1, "ss01" 1; letter-spacing:.005em; }
html,body{
  background:
    radial-gradient(1200px 700px at 15% -10%, #18211a 0%, transparent 60%),
    radial-gradient(1000px 600px at 100% 110%, #131a15 0%, transparent 55%),
    #090c0a;
  background-attachment:fixed;
}

/* ---- мапа: матовий графіт із «рельєфом» ---- */
#map{ background:#0b0f0c; }
.leaflet-container{ background:#0b0f0c !important; font-family:var(--sans); }
.leaflet-container::before{ /* гіпсометричні смуги — натяк на супутниковий рельєф */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.9;
  background-image:
    radial-gradient(900px 520px at 30% 20%, rgba(70,96,64,.20), transparent 70%),
    radial-gradient(800px 600px at 80% 75%, rgba(52,74,56,.20), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'><filter id='t' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.0032 0.0046' numOctaves='5' seed='11' result='n'/><feColorMatrix in='n' type='matrix' values='0 0 0 0 0.62  0 0 0 0 0.74  0 0 0 0 0.58  0 0 0 2.2 -0.95'/><feComponentTransfer><feFuncA type='discrete' tableValues='0 0.10 0 0.10 0 0.10 0 0.10 0 0.10'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23t)'/></svg>");
  background-size:auto, auto, 1000px 1000px;
}
.oblast-fill{ fill:rgba(168,190,160,.05); stroke:rgba(214,228,205,.20); stroke-width:1; }
path.oblast-fill:hover{ fill:rgba(196,220,154,.10); }
.leaflet-control-attribution{ background:rgba(10,13,11,.55) !important; backdrop-filter:blur(8px); border-radius:10px 0 0 0; color:#6f7a70 !important; }
.leaflet-tooltip{
  background:rgba(236,240,232,.96); color:#141a15; border:0; border-radius:12px; padding:6px 10px;
  box-shadow:0 8px 24px rgba(0,0,0,.45); font-weight:600; font-size:12px;
}
.leaflet-tooltip-top:before{ border-top-color:rgba(236,240,232,.96); }
.leaflet-popup-content-wrapper{ border-radius:16px; background:rgba(28,33,29,.92); color:var(--text-hi); backdrop-filter:blur(12px); box-shadow:0 12px 30px rgba(0,0,0,.5); }
.leaflet-popup-tip{ background:rgba(28,33,29,.92); }
.cluster-list-row:hover{ background:rgba(255,255,255,.07); }

/* ---- кнопки: пласкі скляні пілюлі ---- */
button, .btn-secondary{
  background:rgba(255,255,255,.07); color:var(--text-hi);
  border:1px solid rgba(255,255,255,.11); border-radius:999px; padding:8px 16px;
  font-weight:600; font-size:12.5px; letter-spacing:.01em; text-shadow:none; box-shadow:none;
  transition:background .15s ease, border-color .15s ease, transform .08s ease, color .15s ease;
}
button:hover, .btn-secondary:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.2); color:#fff; box-shadow:none; filter:none; }
button:active, .btn-secondary:active{ transform:scale(.97); background:rgba(255,255,255,.17); box-shadow:none; }
button:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
button:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
#buildReportBtn, #setPasscodeBtn, #authSubmitBtn{ /* головна дія — світла пілюля */
  background:#e9ede3; color:#12170f; border-color:transparent; font-weight:700;
}
#buildReportBtn:hover, #setPasscodeBtn:hover, #authSubmitBtn:hover{ background:#fff; color:#0b0f0a; }

input, select, textarea{
  background:rgba(255,255,255,.055); color:var(--text-hi);
  border:1px solid rgba(255,255,255,.09); border-radius:var(--r-md); padding:9px 13px; box-shadow:none;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:rgba(196,220,154,.55); background:rgba(255,255,255,.08); box-shadow:0 0 0 3px rgba(196,220,154,.14); }
input::placeholder{ color:#6c766d; }
input[type="range"], input[type="checkbox"]{ background:transparent; border:0; box-shadow:none; padding:0; }

/* ---- панелі ---- */
.card, .auth-box{
  background:var(--panel); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  padding:16px 18px;
}
.card h2{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--text-hi); margin:0 0 10px 0; }
.server-info-block{ background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:none; }
.empty-note{ color:var(--text-lo); }
code{ color:var(--amber); font-family:ui-monospace,Consolas,monospace; }

/* ---- шапка: три скляні «острівці» ---- */
header.top{ background:none; border:0; box-shadow:none; padding:0; backdrop-filter:none; }
header.top h1, .page-tabs, .status-line{
  background:var(--panel); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border); box-shadow:0 12px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
header.top h1{
  display:flex; align-items:center; gap:10px; margin:0; padding:10px 20px 10px 14px; border-radius:999px;
  font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-shadow:none;
}
header.top h1 span{ color:var(--amber); text-shadow:none; }
.brand-mark{
  width:22px; height:22px; border-radius:7px; display:inline-block; position:relative;
  background:conic-gradient(from 210deg, #e9ede3, #8aa27a, #e9ede3);
  -webkit-mask:linear-gradient(#000 0 0) ; mask:linear-gradient(#000 0 0);
  box-shadow:inset 0 0 0 5px #0e130f;
}
.brand-mark::after{ content:""; position:absolute; inset:7px; border-radius:50%; background:#e9ede3; }
.page-tabs{ gap:2px; padding:4px; border-radius:999px; }
.tab-btn{
  background:transparent; border:0; color:var(--text-lo); font-weight:600; font-size:13px;
  padding:8px 18px; border-radius:999px; box-shadow:none; text-shadow:none;
}
.tab-btn:hover{ background:rgba(255,255,255,.08); color:var(--text-hi); box-shadow:none; }
.tab-btn.active{ background:#e9ede3; color:#10150f; box-shadow:0 4px 14px rgba(0,0,0,.35); transform:none; text-shadow:none; }
.status-line{ gap:10px; padding:8px 16px; border-radius:999px; font-family:var(--sans); font-size:12.5px; color:var(--text-lo); }
.chip-active{ color:var(--text-hi); font-weight:600; margin:0 !important; padding:4px 11px; border-radius:999px; background:rgba(255,93,80,.16); border:1px solid rgba(255,120,104,.28); }
.conn-dot{ box-shadow:none; }
.conn-dot.online{ box-shadow:0 0 0 3px rgba(123,214,154,.18), 0 0 10px var(--green); }
.conn-dot.offline{ box-shadow:0 0 0 3px rgba(255,93,80,.16); }

/* ---- заголовок на мапі (як у референсі) ---- */
.map-title{ position:absolute; left:34px; top:92px; z-index:900; pointer-events:none; }
.map-title h2{ margin:0; font-size:40px; line-height:1.05; font-weight:300; letter-spacing:-.01em; color:#f2f5ef; text-shadow:0 2px 20px rgba(0,0,0,.6); }
.map-title p{ margin:8px 0 0 3px; font-size:13px; color:var(--text-lo); letter-spacing:.02em; }

/* ---- елементи керування мапою ---- */
.zoom-slider{
  width:38px; padding:12px 0; gap:6px; border-radius:999px !important;
  background:var(--panel) !important; border:1px solid var(--border) !important;
  backdrop-filter:var(--glass-blur); box-shadow:0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.zoom-slider .zs-ico{ color:var(--text-hi); font-weight:500; font-size:17px; opacity:.85; }
.zoom-slider .zs-track{ height:130px; width:38px; }
.zs-input{ -webkit-appearance:none; appearance:none; }
.zs-input::-webkit-slider-runnable-track{ height:4px; border-radius:4px; background:rgba(255,255,255,.16); }
.zs-input::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-7px; border-radius:50%; background:#e9ede3; border:0; box-shadow:0 2px 8px rgba(0,0,0,.55); }
.zs-input::-moz-range-track{ height:4px; border-radius:4px; background:rgba(255,255,255,.16); }
.zs-input::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#e9ede3; border:0; box-shadow:0 2px 8px rgba(0,0,0,.55); }
.trail-toggle{
  background:var(--panel); backdrop-filter:var(--glass-blur); border:1px solid var(--border); color:var(--text-hi);
  border-radius:999px; padding:9px 16px; font-size:12px; font-weight:600; font-family:var(--sans);
  box-shadow:0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.trail-toggle:hover{ background:rgba(255,255,255,.12); color:#fff; }

.legend{
  background:var(--panel); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 14px;
  font-family:var(--sans); font-size:12px; color:var(--text-lo);
  box-shadow:0 16px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.legend .group-title{ font-size:11px; letter-spacing:.06em; color:var(--text-hi); opacity:.85; }
.legend .dot{ box-shadow:0 0 0 2px rgba(255,255,255,.06); }
.legend-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:13px; font-weight:600; color:var(--text-hi); cursor:pointer; pointer-events:auto; user-select:none; margin-bottom:6px; }
.legend-chev{ font-size:16px; line-height:1; transition:transform .2s ease; opacity:.7; }
.legend.collapsed .legend-chev{ transform:rotate(-90deg); }
.legend.collapsed .legend-body{ display:none; }
.legend.collapsed .legend-head{ margin-bottom:0; }
#legend{ pointer-events:auto; }
.hint{ display:none; }
.lg-glyph{ background:rgba(255,255,255,.14); }

/* ---- картки подій: «тривоги» у червоно-коричневому склі ---- */
.event{
  background:var(--alert-bg); border:1px solid var(--alert-border); border-radius:var(--r-lg);
  padding:12px 14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); border-left:1px solid var(--alert-border);
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.event:hover{ transform:translateY(-1px); border-color:rgba(255,140,120,.32); background:linear-gradient(155deg,rgba(140,52,44,.52),rgba(76,35,32,.46)); }
.event--lost{ background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.03)); border-color:rgba(255,255,255,.08); }
.event--lost:hover{ background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.05)); border-color:rgba(255,255,255,.16); }
.ev-head{ display:flex; gap:10px; align-items:flex-start; }
.ev-badge{
  flex:0 0 auto; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#ff3b30; color:#fff;
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-top:1px;
  box-shadow:0 0 0 3px rgba(255,59,48,.18);
}
.event--lost .ev-badge{ background:#58625a; box-shadow:0 0 0 3px rgba(255,255,255,.06); }
.ev-main{ min-width:0; }
.ev-title{ font-size:13px; font-weight:600; line-height:1.3; color:var(--text-hi); word-break:break-word; }
.ev-sub{ font-size:11px; color:var(--text-lo); margin-top:2px; }
.ev-chips{ display:flex; flex-wrap:wrap; gap:5px; margin:9px 0 0 32px; }
.chip{ font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.08); color:#c9d1c9; }
.chip-type{ background:rgba(255,255,255,.14); color:#fff; }
.chip-kind{ opacity:.85; }
.chip-lost{ background:rgba(255,255,255,.16); color:#e4e9e1; }
.event .row3{ margin:10px 0 0 32px; padding-top:9px; border-top:1px solid rgba(255,255,255,.08); font-size:11.5px; color:#b6bfb6; }
.event .row3-muted{ opacity:.6; }

/* ---- підказка звіту на крапці ---- */
.report-tip{ background:rgba(24,29,25,.94) !important; color:var(--text-hi) !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:16px !important; padding:11px 14px !important; max-width:320px; white-space:normal; font-weight:500; }
.report-tip:before{ border-top-color:rgba(24,29,25,.94) !important; }
.rt-head{ display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:4px; }
.rt-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.rt-end{ font-size:11.5px; color:var(--text-lo); margin-bottom:6px; }
.rt-row{ font-size:12px; padding:5px 0; border-top:1px solid rgba(255,255,255,.08); }
.rt-meta{ font-size:10.5px; color:var(--text-lo); margin-top:1px; }

/* ---- Статистика / Пристрої / Звіт ---- */
table.stats-table th, table.devices-table th{ color:var(--text-lo); font-weight:600; border-bottom:1px solid var(--border); }
table.stats-table th, table.stats-table td, table.devices-table th, table.devices-table td{ border-bottom:1px solid rgba(255,255,255,.06); }
table.stats-table tr:hover td, table.devices-table tr:hover td{ background:rgba(255,255,255,.035); }
.stats-summary b{ color:var(--text-hi); font-weight:600; }
#reportMap{ border:1px solid var(--border) !important; border-radius:var(--r-lg) !important; }
#reportLegend.legend{ pointer-events:auto; }
.toggle-slider{ background:rgba(255,255,255,.14); }
.toggle-slider::before{ background:#fff; }
.toggle-switch input:checked + .toggle-slider{ background:#9dc276; }
table.devices-table button, table.devices-table .rename-input{ border-radius:999px; }

::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.26); }
.highlight-ring{ border-color:#e9ede3; }

/* ---- РОЗКЛАДКА ДЛЯ КОМП'ЮТЕРА: мапа на весь екран, панелі «пливуть» поверх ---- */
@media (min-width:821px){
  .app{ display:block; position:relative; height:100vh; height:100dvh; padding:0; }
  header.top{ position:fixed; top:16px; left:16px; right:16px; z-index:1300; display:flex; align-items:center; justify-content:space-between; gap:12px; pointer-events:none; }
  header.top > *{ pointer-events:auto; }
  .page-map{ display:contents; }
  .page-map.page-hidden{ display:none; }
  .map-panel{ position:fixed; inset:0; border:0; border-radius:0; background:#0b0f0c; box-shadow:none; z-index:1; }
  .map-panel .legend{ left:18px; bottom:18px; }
  .side{ position:fixed; top:86px; right:16px; bottom:16px; width:380px; z-index:1100; gap:12px; }
  .page-stats, .page-devices, .page-report, .page-logs{ position:absolute; top:86px; left:16px; right:16px; bottom:16px; overflow:auto; z-index:5; }
  #map .leaflet-top.leaflet-left{ margin-top:176px; margin-left:20px; }
  #map .leaflet-top.leaflet-right{ margin-top:84px; margin-right:408px; }
  #map .leaflet-bottom.leaflet-right{ margin-right:400px; }
}
@media (max-width:820px){
  header.top{ flex-wrap:wrap; gap:8px; }
  .map-title{ display:none; }
  .map-panel{ border-radius:var(--r-xl); }
  .legend{ left:10px; bottom:10px; }
}
@media (prefers-reduced-motion:reduce){ button, .event{ transition:none; } }

/* --- донастройка: тихіший «рельєф» і простіший логотип --- */
.leaflet-container::before{
  opacity:1;
  background-image:
    radial-gradient(900px 520px at 28% 18%, rgba(78,104,70,.16), transparent 70%),
    radial-gradient(800px 600px at 82% 78%, rgba(56,80,60,.16), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100'><filter id='t' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.0028 0.0040' numOctaves='6' seed='23' stitchTiles='stitch' result='n'/><feColorMatrix in='n' type='matrix' values='0 0 0 0 0.66  0 0 0 0 0.78  0 0 0 0 0.62  0 0 0 1.5 -0.62'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.02 0.07 0.04 0.09 0.05 0.10'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23t)'/></svg>");
  background-size:auto, auto, 1100px 1100px;
}
.brand-mark{ -webkit-mask:none; mask:none; box-shadow:none; background:none; width:22px; height:22px; border-radius:50%; border:2px solid #e9ede3; }
.brand-mark::after{ inset:4px; background:#e9ede3; box-shadow:0 0 10px rgba(233,237,227,.6); }

/* --- телефон: компактна шапка, коротший повзунок --- */
@media (max-width:820px){
  .app{ padding:10px; gap:10px; }
  header.top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
  header.top h1{ order:1; padding:8px 14px 8px 10px; font-size:11px; letter-spacing:.1em; }
  .status-line{ order:2; padding:6px 12px; font-size:11.5px; }
  .page-tabs{ order:3; width:100%; justify-content:space-between; }
  .tab-btn{ flex:1; padding:8px 10px; }
  .zoom-slider .zs-track{ height:84px; }
  .chip-active{ padding:3px 9px; }
  .card{ padding:14px; border-radius:var(--r-lg); }
  .event{ padding:11px 12px; }
  .ev-chips, .event .row3{ margin-left:0; }
}

/* лічильник у групі цілей ("4 БПЛА") і зона "між X і Y" */
.dm-cnt{
  position:absolute; right:-9px; top:-9px; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box;
  border-radius:999px; background:#eef1ec; color:#10150f; font-size:10.5px; font-weight:800; line-height:17px; text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.55);
}

/* ---- Статистика: рівні числові колонки, сортування, фільтр ---- */
table.stats-table{ table-layout:fixed; width:100%; }
table.stats-table th, table.stats-table td{ padding:9px 12px; vertical-align:middle; }
table.stats-table th:first-child, table.stats-table td:first-child{ width:34%; text-align:left; }
table.stats-table--wide th:nth-child(1), table.stats-table--wide td:nth-child(1){ width:20%; }
table.stats-table--wide th:nth-child(2), table.stats-table--wide td:nth-child(2){ width:22%; }
table.stats-table--wide th:nth-child(3), table.stats-table--wide td:nth-child(3){ width:22%; }
table.stats-table th.num, table.stats-table td.num{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--sans); }
table.stats-table td.num.total{ color:var(--text-hi); font-weight:700; }
table.stats-table td.num.downed{ color:var(--red); }
table.stats-table td.num.lost{ color:var(--amber); }
table.stats-table th.sortable{ cursor:pointer; user-select:none; white-space:normal; }
table.stats-table th.sortable:hover{ color:var(--text-hi); }
table.stats-table th.sorted{ color:var(--text-hi); }
.sort-arrow{ display:inline-block; width:12px; margin-left:4px; font-size:9px; opacity:.85; }
.stats-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.stats-toolbar .stats-summary{ margin:0; flex:1 1 auto; }
.stats-filter{ flex:0 1 260px; min-width:160px; }
.event--note{ background:linear-gradient(155deg,rgba(196,160,70,.22),rgba(110,90,40,.2)); border-color:rgba(230,190,90,.25); }
.ev-badge--note{ background:#d9a83a !important; color:#1b1405 !important; box-shadow:0 0 0 3px rgba(217,168,58,.18) !important; }

/* стрілка сортування не займає місця в потоці — заголовок рівно над числами */
table.stats-table th{ position:relative; }
table.stats-table th.num, table.stats-table td.num{ padding-right:20px; }
.sort-arrow{ position:absolute; width:auto; margin:0; right:6px; top:50%; transform:translateY(-50%); }
table.stats-table th:not(.num) .sort-arrow{ position:static; transform:none; margin-left:6px; width:auto; }
table.stats-table--wide th:nth-child(1), table.stats-table--wide td:nth-child(1){ width:17%; }
table.stats-table--wide th:nth-child(2), table.stats-table--wide td:nth-child(2){ width:20%; }
table.stats-table--wide th:nth-child(3), table.stats-table--wide td:nth-child(3){ width:21%; }

/* ---- нова легенда: розділи -> підрозділи -> типи ---- */
.lg-section + .lg-section{ margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,.07); }
.lg-group{ margin:3px 0 0 0; }
.legend .group-title{ display:flex; align-items:center; gap:7px; font-size:12px; letter-spacing:.04em; opacity:1; color:var(--text-hi); margin-bottom:2px; }
.legend .group-subtitle{ display:flex; align-items:center; gap:6px; margin:6px 0 1px 8px; font-size:11.5px; color:#c3ccc3; }
.legend .row.sub{ margin-left:30px; }
.lg-glyph{ width:18px; height:18px; flex:0 0 auto; }
.legend .group-title .lg-glyph{ width:21px; height:21px; background:rgba(255,255,255,.17); }
.lg-note{ margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,.07); font-size:11px; color:var(--text-lo); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* ---- позначки поведінки цілі на маркері ---- */
.dm-beh{
  position:absolute; right:-8px; bottom:-8px; width:15px; height:15px; border-radius:50%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; line-height:1;
  box-shadow:0 2px 5px rgba(0,0,0,.55);
}
.dm-beh--down{ background:#fb923c; color:#1b0f02; }
.dm-beh--circ{ background:#38bdf8; color:#04202e; font-size:11px; }
.dm-beh--static{ position:static; display:inline-flex; }
.chip-beh{ background:rgba(56,189,248,.16); color:#bfe9fb; }

/* ---- вікно з текстом (список не знайдених назв) ---- */
.modal-overlay{ position:fixed; inset:0; z-index:5000; background:rgba(4,7,5,.62); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; }
.modal-card{ width:min(760px,100%); max-height:86vh; display:flex; flex-direction:column; background:rgba(26,31,27,.96); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:0 30px 80px rgba(0,0,0,.6); padding:18px 20px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.modal-text{ flex:1 1 auto; overflow:auto; margin:0; padding:14px 16px; background:rgba(255,255,255,.05); border-radius:var(--r-md); font-family:ui-monospace,Consolas,monospace; font-size:12px; line-height:1.5; white-space:pre-wrap; word-break:break-word; user-select:text; color:var(--text-hi); }
.modal-foot{ display:flex; align-items:center; gap:12px; margin-top:12px; }

/* знак оклику "можливий пуск" біля значка КАБ */
.dm-warn{ position:absolute; top:-10px; right:-10px; width:16px; height:16px; border-radius:50%;
  background:#facc15; color:#1b1402; font:800 12px/16px 'Segoe UI',sans-serif; text-align:center;
  box-shadow:0 0 8px rgba(250,204,21,.8); animation:warnpulse 1.4s ease-in-out infinite; }
@keyframes warnpulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.25); } }

.dm-warn--static{ position:static; display:inline-block; animation:none; }
.lg-note + .lg-note{ margin-top:4px; border-top:0; padding-top:0; }

/* Траси — над повзунком масштабу (обидва праворуч) */
#map .leaflet-top.leaflet-right{ display:flex; flex-direction:column; align-items:flex-end; }
#map .leaflet-top.leaflet-right .leaflet-control{ float:none; clear:none; }
#map .leaflet-top.leaflet-right .trail-toggle{ order:-1; margin-bottom:10px; }
.lg-line{ display:inline-block; width:18px; height:3px; border-radius:2px; vertical-align:middle; margin-right:2px; }

.page-logs{display:none; grid-column:1/-1; overflow-y:auto; min-height:0;}
.page-logs.page-active{display:block;}
.log-controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--text-lo);}
.log-controls select, .log-controls input[type=search]{background:var(--bg-1,#10150f); border:1px solid var(--border); color:var(--text-hi); padding:6px 10px; border-radius:8px; font-size:12px;}
.log-controls .log-check{display:inline-flex; gap:6px; align-items:center; cursor:pointer;}
.log-item{border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:9px 12px; margin-bottom:8px; background:rgba(255,255,255,.03); font-size:12px; line-height:1.4;}
.log-item.flagged{border-color:#f59e0b; background:rgba(245,158,11,.07);}
.log-head{display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:var(--text-lo); font-size:11px;}
.log-badge{padding:1px 8px; border-radius:999px; background:rgba(255,255,255,.1); color:var(--text-hi); font-size:11px;}
.log-badge.new{background:rgba(239,68,68,.25);} .log-badge.update{background:rgba(59,130,246,.25);}
.log-badge.ignored{background:rgba(234,179,8,.25);} .log-badge.error{background:#dc2626; color:#fff;}
.log-badge.image{background:rgba(168,85,247,.25);} .log-badge.system{background:rgba(255,255,255,.07);}
.log-text{margin-top:4px; white-space:pre-wrap; color:var(--text-hi);}
.log-note{margin-top:3px; color:#d6c78a;} .log-route{margin-top:3px; color:#9ec5ff;} .log-an{margin-top:3px; color:var(--text-lo);}
.log-err{margin-top:3px; color:#fca5a5; white-space:pre-wrap;}
.log-flagbtn{margin-left:auto; padding:2px 9px; font-size:11px; width:auto;}

/* прапорці завжди компактні й праворуч (раніше розтягувались на ширину рядка й стояли посередині) */
input[type="checkbox"], input[type="radio"]{ flex:none !important; width:18px !important; height:18px; min-width:18px; margin:0; accent-color:#c4dc9a; }
.toggle-row input[type="checkbox"]{ margin-left:auto; }
/* кнопки власної рамки вікна: згорнути / на весь екран / закрити */
.win-btns{ display:none; align-items:center; gap:6px; margin-left:14px; flex:none; }
.win-btn{ width:34px; height:30px; padding:0; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.06);
  color:var(--text-hi); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.win-btn svg{ display:block; }
.win-btn:hover{ background:rgba(255,255,255,.16); }
.win-btn.win-close:hover{ background:#dc2626; border-color:#dc2626; color:#fff; }
/* тонка смужка над меню: за неї можна тягнути вікно (саме меню вікно не тягне) */
.win-drag{ display:none; position:fixed; top:0; left:0; right:0; height:16px; z-index:3000; }
header.top .status-line{ margin-right:6px; }