:root{color-scheme:dark;--blue:#1f6bff;--blue-l:#8fc0ff;--ink:#f3f6ff;--muted:#b4c1d9;--bg:#03050c;--edge:rgba(255,255,255,.2);--bad:#ff7a70;--red:#ff4438;--orange:#f97316}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[hidden]{display:none !important}
:focus-visible{outline:3px solid #cfe2ff;outline-offset:2px}
.glass{background:linear-gradient(145deg,rgba(24,36,70,.86),rgba(8,13,30,.88));border:1px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 36px rgba(0,3,20,.55);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%)}
input[type=password]{width:100%;height:52px;padding:0 14px;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(3,8,24,.6);color:var(--ink);font:inherit}
.primary{width:100%;height:52px;margin-top:12px;border:0;border-radius:14px;background:linear-gradient(180deg,#3f86ff,#1558e0);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.primary:hover{background:linear-gradient(180deg,#5394ff,#1a60ea)}

.login{display:flex;align-items:center;justify-content:center;min-height:100%;padding:20px;background:radial-gradient(44vmax 44vmax at 15% 10%,rgba(31,107,255,.55),transparent 70%),radial-gradient(40vmax 40vmax at 90% 90%,rgba(72,50,214,.45),transparent 70%),var(--bg)}
.loginbox{width:100%;max-width:380px;padding:26px;border-radius:24px}
.loginbox img{display:block;margin-bottom:12px}
.loginbox h1{margin:0;font-size:26px;line-height:1.15}
.loginbox p{margin:6px 0 16px;color:var(--muted)}
.loginbox label{display:block;margin-bottom:5px;font-size:14px;font-weight:600}
.loginbox .err{margin:10px 0 0;color:#ffc9c4;font-weight:600}

.app{position:fixed;inset:0}
#map{position:absolute;inset:0;background:#050506}
#map .leaflet-tile-pane{filter:grayscale(1) invert(1) contrast(1.2) brightness(.75)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#0e1526;color:var(--ink);box-shadow:0 8px 26px rgba(0,0,0,.6)}
.leaflet-popup-content{margin:12px 16px;font:14px/1.45 system-ui,sans-serif;min-width:190px}
.leaflet-container a.leaflet-popup-close-button{color:var(--muted);width:32px;height:32px;font-size:22px;line-height:30px}
.pop h3{margin:0 16px 3px 0;font-size:15px}
.pop p{margin:0;color:#d3dcee}
.leaflet-bar a{width:40px !important;height:40px !important;line-height:40px !important;background:#121a2e;color:#fff;border-color:rgba(255,255,255,.18)}
.leaflet-control-attribution{background:rgba(0,0,0,.65) !important;color:#9a9ea6}
.leaflet-control-attribution a{color:#c8cbd1}

.bar{position:absolute;z-index:1000;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;display:flex;align-items:center;gap:10px;max-width:640px;padding:7px 8px 7px 10px;border-radius:999px}
.bar img{flex:none}
.barinfo{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.barinfo b{font-size:15px}
.barinfo span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{flex:none;min-width:76px;height:44px;padding:0 16px;border:0;border-radius:999px;background:linear-gradient(180deg,#3f86ff,#1558e0);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.warn{position:absolute;z-index:1000;top:calc(max(10px,env(safe-area-inset-top)) + 68px);left:10px;right:10px;max-width:640px;margin:0;padding:9px 14px;border-color:var(--bad);border-radius:14px;color:#ffdcd9;font-size:14px}

.sheet{position:absolute;z-index:1001;top:calc(max(10px,env(safe-area-inset-top)) + 68px);right:10px;width:320px;max-height:calc(100% - 90px);overflow-y:auto;padding:14px 16px 16px;border-radius:20px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.9,.3,1.1),visibility 0s linear .25s}
.sheet.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.9,.3,1.1),visibility 0s}
.grab{display:none}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.stats div{padding:9px 11px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(255,255,255,.06)}
.stats b{display:block;font-size:22px;font-weight:800;line-height:1.15}
.stats span{font-size:12px;color:var(--muted);line-height:1.2;display:block}
.sheet h2{margin:0 0 4px;font-size:14px;color:var(--muted);font-weight:600}
.tog{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;cursor:pointer}
.tog input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--blue)}
.sw{flex:none;display:inline-block;width:22px;height:0;border-top:3px solid}
.sw.red{border-color:var(--red)}.sw.orange{border-color:var(--orange)}.sw.high{border-color:#c084fc}.sw.mid{border-color:#5aa2ff}.sw.low{border-color:#67e8f9}
.sw.dot{width:12px;height:12px;margin:0 5px;border:0;border-radius:50%;background:#ffd24a}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0;font-size:13px;color:#d3dcee}
.legend span{display:flex;align-items:center;gap:6px}
.small{margin:6px 0;font-size:12px;line-height:1.4;color:var(--muted)}
.ghost{width:100%;height:44px;margin-top:8px;border:1px solid var(--edge);border-radius:12px;background:rgba(255,255,255,.08);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.ghost:hover{background:rgba(255,255,255,.16)}

/* Телефон: шари виїжджають знизу, карта лишається на весь екран */
@media (max-width:640px){
  .bar{gap:8px}
  .barinfo b{font-size:14px}
  .sheet{top:auto;left:0;right:0;bottom:0;width:auto;max-height:78%;padding:8px 16px calc(16px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;transform:translateY(100%);transition:opacity .15s ease,transform .3s cubic-bezier(.2,.9,.3,1),visibility 0s linear .3s}
  .sheet.open{transition:opacity .15s ease,transform .3s cubic-bezier(.2,.9,.3,1),visibility 0s}
  .grab{display:block;width:40px;height:4px;margin:2px auto 12px;border-radius:2px;background:rgba(255,255,255,.35)}
}
@media (prefers-reduced-motion:reduce){.sheet,.sheet.open{transition:none}}
.jump{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.jump button{height:44px;border:1px solid var(--edge);border-radius:12px;background:rgba(255,255,255,.08);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.jump button:hover{background:rgba(143,192,255,.22)}
.legend.tiers{flex-direction:column;gap:4px}
.sw.mid-t{opacity:.6;border-top-width:2px}
.sw.low-t{opacity:.45;border-top:2px dotted var(--red)}
.stats .wide{grid-column:1 / -1}
.stats b.maybe{color:#f2c230}
.sw.yellow{border-color:#f2c230}
.refresh{flex:none;display:flex;align-items:center;gap:6px;height:44px;min-width:44px;padding:0 14px;border:1px solid var(--edge);border-radius:999px;background:rgba(255,255,255,.1);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.refresh:hover{background:rgba(255,255,255,.2)}
.refresh:disabled{cursor:default;opacity:.7}
.refresh .ico{font-size:18px;line-height:1}
.refresh.busy .ico{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:640px){.refresh{justify-content:center;padding:0}.refresh .txt{display:none}}
@media (prefers-reduced-motion:reduce){.refresh.busy .ico{animation:none}}