:root{--ink:#0B0F17;--panel:rgba(14,18,27,.86);--line:rgba(255,255,255,.09);--fg:#F2F5FA;--mute:#9AA4B6;--blue:#1E6BFF;--red:#E5484D;--yellow:#F5B83D;
  --shahed:#FF9F2E;--jet:#FF5FA2;--molniya:#FFD84A;--cruise:#FF4B3E;--ballistic:#C77DFF;--kab:#FF7A2E;
  --f:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--ink);color:var(--fg);font-family:var(--f);-webkit-font-smoothing:antialiased;overflow:hidden}
[hidden]{display:none!important}
#map{position:fixed;inset:0}
.maplibregl-ctrl-attrib{background:rgba(0,0,0,.45)!important;color:#ccd;font-size:10px}
.maplibregl-ctrl-attrib a{color:#ccd}
.top{position:fixed;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:8px;align-items:flex-start;z-index:5;pointer-events:none}
.counters{display:flex;gap:8px;flex-wrap:wrap;pointer-events:auto}
.cnt{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:8px 14px 8px 10px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.cnt canvas{width:28px;height:28px}
.cnt b{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.asof{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 12px;font-size:14px;color:var(--mute);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.asof b{color:var(--fg);font-variant-numeric:tabular-nums}
.asof.stale{color:#1b1b1b;background:var(--yellow);border-color:var(--yellow)}
.asof.stale b{color:#1b1b1b}
.banner{position:fixed;left:50%;transform:translateX(-50%);top:max(12px,env(safe-area-inset-top));z-index:6;max-width:min(560px,calc(100% - 24px));background:var(--red);color:#fff;border-radius:16px;padding:10px 14px;font-weight:700;box-shadow:0 10px 30px rgba(229,72,77,.45);cursor:pointer}
.banner small{display:block;font-weight:500;opacity:.9}
@media (max-width:640px){.banner{top:auto;bottom:calc(96px + env(safe-area-inset-bottom))}}
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:6px;z-index:5;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.dock button{width:52px;height:46px;border:0;background:none;color:var(--fg);border-radius:22px;cursor:pointer;font:700 15px var(--f)}
.dock button.on{background:rgba(255,255,255,.12)}
.dock svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.dock #b-home svg,.dock #b-locate svg{fill:none}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:7;margin:0 auto;max-width:560px;background:#0E1219;border:1px solid var(--line);border-bottom:0;border-radius:26px 26px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px rgba(0,0,0,.5)}
.grip{width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.18);margin:0 auto 12px}
.sh-head{display:flex;align-items:center;gap:14px}
.sh-icon{width:60px;height:60px;border-radius:16px;background:#1A1F2A;display:grid;place-items:center;flex:none}
.sh-icon canvas{width:40px;height:40px}
.sh-title{flex:1;min-width:0}
.sh-title h2{margin:0;font-size:28px;font-weight:800;letter-spacing:-.02em}
.sh-title p{margin:2px 0 0;color:var(--mute);font-size:17px;font-weight:600}
.sh-title p b{color:var(--fg)}
.round{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#1A1F2A;color:var(--fg);display:grid;place-items:center;font-size:18px;cursor:pointer;text-decoration:none;flex:none}
.grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:18px;margin-top:14px;overflow:hidden}
.grid>div{padding:12px 14px;border-bottom:1px solid var(--line)}
.grid>div:nth-child(odd){border-right:1px solid var(--line)}
.grid>div:nth-last-child(-n+2){border-bottom:0}
.grid span{display:block;color:var(--mute);font-size:13px;font-weight:600}
.grid b{display:block;font-size:20px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hint{color:var(--mute);font-size:13px;margin:12px 2px}
.sh-actions{display:flex;gap:10px}
.primary{flex:1;height:52px;border-radius:16px;border:0;background:var(--blue);color:#fff;font:700 17px var(--f);cursor:pointer}
.primary.on{background:#fff;color:var(--blue)}
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(420px,100%);z-index:8;background:#0E1219;border-left:1px solid var(--line);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.dr-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.dr-head h2{margin:0;font-size:22px}
#feed{list-style:none;margin:0;padding:0 16px 120px;overflow:auto}
#feed li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
#feed .m{display:flex;gap:8px;color:var(--mute);font-size:12px;font-weight:600;margin-bottom:4px}
#feed .m a{margin-left:auto;color:#7FB2FF;text-decoration:none}
#feed .f{color:var(--mute);font-style:italic}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + env(safe-area-inset-bottom));background:#fff;color:#111;border-radius:14px;padding:10px 16px;font-weight:600;z-index:9;box-shadow:0 10px 30px rgba(0,0,0,.4)}

.maplibregl-ctrl-scale{background:transparent;border-color:#fff;color:#fff;font:700 13px var(--f);text-shadow:0 1px 3px #000;border-width:0 2px 2px}
.maplibregl-ctrl-bottom-left{bottom:calc(84px + env(safe-area-inset-bottom))}

/* особистий таймер «Мій дім» */
.me{position:fixed;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:5;width:min(340px,calc(100% - 24px));background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px 14px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.me.danger{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset,0 10px 30px rgba(229,72,77,.35)}
.me.watch{border-color:var(--yellow)}
.me-head{display:flex;align-items:center;gap:8px}
.me-head b{font-size:18px;font-weight:800;flex:1}
.me-dot{width:10px;height:10px;border-radius:50%;background:#3DDC84;box-shadow:0 0 10px #3DDC84}
.me.watch .me-dot{background:var(--yellow);box-shadow:0 0 10px var(--yellow)}
.me.danger .me-dot{background:var(--red);box-shadow:0 0 12px var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}
.me-set{border:1px solid var(--line);background:#1A1F2A;color:var(--fg);border-radius:10px;padding:4px 8px;font:600 13px var(--f);cursor:pointer}
.me-sub{margin:6px 0 0;color:var(--mute);font-size:13px}
.me-sub b{color:var(--fg)}
.me-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.me-list li{cursor:pointer}
.me-row{display:flex;align-items:center;gap:8px;font-size:14px}
.me-row canvas{width:22px;height:22px;flex:none}
.me-row .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-row .t{font-weight:800;font-variant-numeric:tabular-nums}
.me-bar{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:4px;overflow:hidden}
.me-bar i{position:absolute;top:0;bottom:0;border-radius:3px}
.me-bar .sh{left:0;background:#3D8BFF}
.me-bar .tg{background:var(--red)}
.me-act{font-size:12px;font-weight:700;margin-top:2px}
.me-act.go{color:var(--red)}.me-act.ok{color:var(--yellow)}
@media (max-width:640px){.me{top:auto;bottom:calc(84px + env(safe-area-inset-bottom));right:12px;left:12px;width:auto}.banner{display:none!important}}
/* картка цілі: маршрут і підтвердження */
.route{margin-top:12px}
.route h4,.proof h4{margin:0 0 6px;font-size:13px;color:var(--mute);font-weight:700}
.route ol{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.route li{background:#1A1F2A;border:1px solid var(--line);border-radius:10px;padding:4px 8px;font-size:13px}
.route li b{font-variant-numeric:tabular-nums}
.route li.home{border-color:var(--red);color:#fff}
.proof{margin-top:12px}
.proof .bar{display:flex;gap:3px;margin-bottom:6px}
.proof .bar i{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
.proof .bar i.on{background:#3DDC84}
.proof ul{list-style:none;margin:0;padding:0;font-size:13px}
.proof li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid var(--line)}
.proof a{color:#7FB2FF;text-decoration:none}

#sh-route small{font-weight:500;opacity:.6}#sh-route .est{margin:6px 0 0;font-size:12px;opacity:.7}

#sh-from small{font-weight:500;opacity:.65}#sh-from a{color:#FF8A8A}#feed li.launches{border-left:3px solid #FF3B3B;padding-left:10px}#feed li.launches div{margin:2px 0}

/* ===================== Liquid Glass ===================== */
:root{--glass:rgba(22,27,38,.38);--glass-strong:rgba(18,22,32,.62);--rim:rgba(255,255,255,.16);--rim2:rgba(255,255,255,.04);
  --spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
  --glass-fx:blur(26px) saturate(185%) brightness(1.06)}
.cnt,.asof,.dock,.me,.sheet,.drawer,.banner,.toast{
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 38%,rgba(0,0,0,.08)),var(--glass)!important;
  backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);
  border:1px solid var(--rim)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04),0 18px 50px rgba(0,0,0,.45)!important}
.sheet,.drawer{background:linear-gradient(170deg,rgba(255,255,255,.09),rgba(255,255,255,.015) 30%),var(--glass-strong)!important}
.banner{background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,0) 50%),rgba(229,72,77,.78)!important;border-color:rgba(255,160,160,.5)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 44px rgba(229,72,77,.5)!important}
.toast{color:var(--fg)!important}
.me.danger{border-color:rgba(255,90,95,.8)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(229,72,77,.6),0 0 44px rgba(229,72,77,.45)!important}
.me.watch{border-color:rgba(245,184,61,.7)!important}
.cnt{border-radius:18px}.cnt b{text-shadow:0 2px 14px rgba(0,0,0,.4)}
.dock button{transition:background .25s,transform .45s var(--spring)}
.dock button:active{transform:scale(.88)}
.dock button.on{background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
/* рядок стану для людей */
.asof{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--fg)!important;padding:6px 12px 6px 10px}
.asof.stale{background:rgba(245,184,61,.85)!important;color:#1b1b1b!important}
.live-dot{width:8px;height:8px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.7);animation:live 1.8s infinite;flex:none}
.live-dot.wait{background:var(--yellow);animation:none}
.asof.stale .live-dot{background:#1b1b1b;animation:none}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(61,220,132,.7)}70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
#dr-tech{flex:1;color:var(--mute);font-size:11px;margin:0 10px;line-height:1.3}
/* фізична (пружинна) поява панелей */
.sheet:not([hidden]){animation:sheetIn .7s var(--spring) both}
.drawer:not([hidden]){animation:drawerIn .6s var(--spring) both}
.banner:not([hidden]){animation:dropIn .7s var(--spring) both}
.toast:not([hidden]){animation:dropIn .5s var(--spring) both}
.me{transition:border-color .4s,box-shadow .4s,transform .5s var(--spring)}
.me.danger{transform:scale(1.015)}
@keyframes sheetIn{from{transform:translateY(105%)}to{transform:none}}
@keyframes drawerIn{from{transform:translateX(105%)}to{transform:none}}
@keyframes dropIn{from{opacity:0;transform:translate(-50%,-14px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.cnt b.pop{animation:pop .6s var(--spring)}
@keyframes pop{0%{transform:scale(1.35)}100%{transform:scale(1)}}
/* bento-сітка в картці цілі */
.sheet .grid{gap:8px!important}
.sheet .grid>div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:10px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.sheet .grid>div:nth-child(5){grid-column:1/-1}
.sh-icon{background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.14),rgba(255,255,255,.03))!important;border:1px solid rgba(255,255,255,.1)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.sheet .grid{border:0!important;overflow:visible!important}.sheet .grid>div{border-right:1px solid rgba(255,255,255,.07)!important;border-bottom:1px solid rgba(255,255,255,.07)!important}

/* ===================== «Holy shit» шар ===================== */
#intro{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.6vh,26px);
  background:radial-gradient(ellipse at 50% 42%,#0b1426 0%,#05080f 55%,#020308 100%);cursor:pointer;
  clip-path:circle(150% at 50% 42%);transition:clip-path 1.25s cubic-bezier(.7,0,.2,1),opacity .6s 1s}
#intro.out{clip-path:circle(0% at 50% 42%);pointer-events:none}
#intro::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);pointer-events:none}
#intro .radar{position:relative;width:clamp(150px,34vw,230px);aspect-ratio:1;animation:rdIn 1.1s cubic-bezier(.2,.8,.1,1) both}
#intro .radar i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(120,170,255,.28)}
#intro .radar .r2{inset:17%}#intro .radar .r3{inset:34%;border-color:rgba(120,170,255,.4)}
#intro .radar .sweep{border:0;background:conic-gradient(from 0deg,rgba(255,45,61,0) 0deg,rgba(255,45,61,0) 290deg,rgba(255,45,61,.55) 358deg,rgba(255,120,130,.9) 360deg);
  -webkit-mask:radial-gradient(circle,#000 0 69%,transparent 70%);mask:radial-gradient(circle,#000 0 69%,transparent 70%);animation:sw 2.2s linear infinite}
#intro .radar .core{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#fff;box-shadow:0 0 16px #8fb4ff,0 0 40px #3b6cff}
#intro .bl{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#FF9F2E;box-shadow:0 0 12px #FF9F2E;opacity:0;animation:blip 2.2s infinite}
#intro .b1{left:72%;top:30%;animation-delay:.55s}#intro .b2{left:28%;top:62%;animation-delay:1.35s;background:#FF5FA2;box-shadow:0 0 12px #FF5FA2}#intro .b3{left:63%;top:74%;animation-delay:1.75s}
#intro .wm{display:flex;gap:clamp(6px,2.4vw,26px);font:800 clamp(38px,11vw,112px)/1 var(--f);color:transparent}
#intro .wm span{background:linear-gradient(180deg,#fff 15%,#a9bde3 60%,#45577e);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 26px rgba(120,160,255,.35));
  display:inline-block;animation:chIn .9s cubic-bezier(.2,.8,.1,1) both}
#intro .wm span:nth-child(1){animation-delay:.25s}#intro .wm span:nth-child(2){animation-delay:.32s}#intro .wm span:nth-child(3){animation-delay:.39s}#intro .wm span:nth-child(4){animation-delay:.46s}
#intro .wm span:nth-child(5){animation-delay:.53s}#intro .wm span:nth-child(6){animation-delay:.6s}#intro .wm span:nth-child(7){animation-delay:.67s}
#intro p{margin:0;color:#9fb0cc;font:600 clamp(10px,2.8vw,14px) var(--f);letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:0 16px;animation:fadeUp 1s .8s both}
#intro .ld{display:flex;flex-direction:column;align-items:center;gap:8px;animation:fadeUp 1s 1s both}
#intro .bar{width:min(260px,60vw);height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
#intro .bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,transparent,#FF2D3D,#ffb3b9);box-shadow:0 0 12px #FF2D3D;animation:ldr 1.3s ease-in-out infinite}
#intro small{color:#7d8aa3;font:600 11px var(--f);letter-spacing:.06em;font-variant-numeric:tabular-nums}
@keyframes sw{to{transform:rotate(360deg)}}
@keyframes blip{0%,20%{opacity:0;transform:scale(.4)}28%{opacity:1;transform:scale(1.3)}70%{opacity:.25;transform:scale(1)}100%{opacity:0}}
@keyframes rdIn{from{opacity:0;transform:scale(.6) rotate(-40deg)}to{opacity:1;transform:none}}
@keyframes chIn{from{opacity:0;transform:translateY(40%) scale(.85)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1}}
@keyframes ldr{from{transform:translateX(-110%)}to{transform:translateX(260%)}}
/* поки триває вхід — інтерфейс прихований, потім виїжджає по черзі */
body.intro .top,body.intro .me,body.intro .dock,body.intro .notes,body.intro .banner,body.intro .maplibregl-ctrl{opacity:0;pointer-events:none}
body.intro-in .top{animation:uiIn .8s .15s cubic-bezier(.2,.8,.1,1) both}body.intro-in .me{animation:uiIn .8s .3s cubic-bezier(.2,.8,.1,1) both}
body.intro-in .dock{animation:dockIn .9s .45s cubic-bezier(.2,.8,.1,1) both}body.intro-in .notes{animation:uiIn .8s .7s both}
@keyframes uiIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1}}
@keyframes dockIn{from{opacity:0;transform:translate(-50%,30px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){#intro{transition:opacity .3s}#intro.out{clip-path:none;opacity:0}}
/* герой: відповідь на головне питання — у лівому верхньому куті, великим */
.me{left:max(16px,env(safe-area-inset-left));right:auto!important;top:max(16px,env(safe-area-inset-top));width:min(380px,calc(100% - 32px));padding:18px 20px!important;border-radius:26px!important}
.me-head b{font-size:30px!important;letter-spacing:-.03em;line-height:1.05}
.me-sub{font-size:14px!important;line-height:1.45;color:#C9D2E3!important}
.me-dot{width:12px!important;height:12px!important}
.cta{display:block;width:100%;margin-top:14px;border:0;border-radius:16px;padding:14px 16px;font:700 16px var(--f);color:#0B0F17;cursor:pointer;
  background:linear-gradient(180deg,#fff,#cfd8ea);box-shadow:0 10px 30px rgba(160,190,255,.25),inset 0 -2px 0 rgba(0,0,0,.08);transition:transform .45s var(--spring)}
.cta:active{transform:scale(.96)}
.top{left:auto!important;right:max(16px,env(safe-area-inset-right));align-items:flex-end!important}
.counters{justify-content:flex-end}
.cnt{padding:6px 12px 6px 8px!important}.cnt b{font-size:22px!important}.cnt canvas{width:22px!important;height:22px!important}
@media (max-width:640px){.me{left:12px;right:12px!important;width:auto;top:auto;bottom:calc(84px + env(safe-area-inset-bottom))}.top{right:12px}}
.maplibregl-ctrl-attrib{opacity:.55}

/* ===================== Налаштування ===================== */
.settings{position:fixed;right:0;top:0;bottom:0;width:min(420px,100%);z-index:9;overflow-y:auto;padding:calc(14px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  background:linear-gradient(170deg,rgba(255,255,255,.09),rgba(255,255,255,.015) 30%),var(--glass-strong);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);
  border-left:1px solid var(--rim);box-shadow:-20px 0 60px rgba(0,0,0,.45);animation:drawerIn .6s var(--spring) both}
.st-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.st-head h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
.settings section{padding:14px 0;border-top:1px solid rgba(127,127,127,.18)}
.settings h3{margin:0 0 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}
.seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(127,127,127,.14)}
.seg button{flex:1;border:0;border-radius:10px;padding:9px 6px;background:none;color:var(--fg);font:600 14px var(--f);cursor:pointer;transition:background .25s,transform .4s var(--spring)}
.seg button.on{background:var(--fg);color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.seg button:active{transform:scale(.94)}
.seg.small button{padding:6px 0;min-width:30px}
.settings .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.pill{border:1px solid var(--rim);background:rgba(127,127,127,.12);color:var(--fg);border-radius:12px;padding:8px 12px;font:600 13px var(--f);cursor:pointer}
.pill.ghost{background:none;color:var(--mute)}
.sw{display:flex;gap:12px;align-items:flex-start;margin-top:12px;cursor:pointer;font-size:14px;line-height:1.35}
.sw small{color:var(--mute)}
.sw input{appearance:none;flex:none;width:44px;height:26px;border-radius:13px;background:rgba(127,127,127,.35);position:relative;cursor:pointer;transition:background .3s;margin:0}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .45s var(--spring)}
.sw input:checked{background:#34C759}.sw input:checked::after{transform:translateX(18px)}
.note{color:var(--mute);font-size:13px;line-height:1.45;margin:8px 0 0}
.qr-wrap{display:flex;gap:14px;align-items:flex-start}#st-qr{flex:none;background:#fff;padding:8px;border-radius:14px}#st-qr img,#st-qr canvas{display:block}
.urls code{display:block;font-size:13px;margin-top:6px;color:var(--fg);user-select:all}

/* ===================== День ===================== */
:root[data-theme="day"]{--ink:#EEF2F8;--fg:#0B1220;--mute:#556073;--line:rgba(10,20,40,.10);--glass:rgba(255,255,255,.55);--glass-strong:rgba(255,255,255,.78);--rim:rgba(255,255,255,.9);color-scheme:light}
:root[data-theme="day"] body{background:#EEF2F8}
:root[data-theme="day"] .cnt,:root[data-theme="day"] .asof,:root[data-theme="day"] .dock,:root[data-theme="day"] .me,:root[data-theme="day"] .sheet,:root[data-theme="day"] .drawer,:root[data-theme="day"] .toast{
  background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,.35) 45%,rgba(255,255,255,.2)),var(--glass)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 50px rgba(20,40,80,.18)!important;border-color:rgba(255,255,255,.8)!important;color:var(--fg)}
:root[data-theme="day"] .me-sub{color:#3A4558!important}
:root[data-theme="day"] .dock button{color:#0B1220}
:root[data-theme="day"] .dock button.on{background:rgba(10,20,40,.08)}
:root[data-theme="day"] .sh-icon{background:radial-gradient(circle at 50% 35%,#fff,#e6ebf3)!important}
:root[data-theme="day"] .sheet .grid>div{background:rgba(255,255,255,.55);border-color:rgba(10,20,40,.06)}
:root[data-theme="day"] .maplibregl-ctrl-attrib{background:rgba(255,255,255,.6)!important;color:#334}
:root[data-theme="day"] .cta{background:linear-gradient(180deg,#0B1220,#26324a);color:#fff}
:root[data-theme="day"] .seg button.on{background:#0B1220;color:#fff}
:root[data-theme="day"] .me-set{background:rgba(10,20,40,.08);color:#0B1220;border-color:rgba(10,20,40,.1)}
:root[data-theme="day"] .round{background:rgba(10,20,40,.08)!important;color:#0B1220!important}
/* особистий радар: великі хвилини */
.big{position:relative;width:96px;height:96px;float:left;margin:4px 14px 6px 0}
.big svg{position:absolute;inset:0;transform:rotate(-90deg)}
.big .trk{fill:none;stroke:rgba(127,127,127,.25);stroke-width:7}
.big .arc{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(229,72,77,.8));transition:stroke-dasharray 1s}
.me.watch .big .arc{stroke:var(--yellow);filter:drop-shadow(0 0 6px rgba(245,184,61,.7))}
.big b{position:absolute;inset:0;display:grid;place-items:center;font:800 40px/1 var(--f);letter-spacing:-.04em;padding-bottom:12px}
.big i{position:absolute;left:0;right:0;bottom:22px;text-align:center;font:600 12px var(--f);font-style:normal;color:var(--mute)}
.big-t{font-size:15px;line-height:1.35;padding-top:10px}.big-t b{font-weight:800}.big-t span{color:var(--mute);font-size:13px}
.big-a{clear:both;margin:8px 0 0;font-weight:700;font-size:13px}
.me.danger .big-a{color:#FF6B70}
/* прогноз у героя */
.fc{margin-top:12px;padding-top:10px;border-top:1px solid rgba(127,127,127,.2)}
.fc h4{margin:0 0 6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.fc h4 small{letter-spacing:0;text-transform:none;font-weight:500}
.fc-row{display:grid;grid-template-columns:1fr 90px 36px;gap:8px;align-items:center;font-size:13px;margin:4px 0}
.fc-row i{display:block;height:6px;border-radius:3px;background:#7A5CFF;box-shadow:0 0 8px rgba(122,92,255,.6)}
.fc-row i.mid{background:#F5B83D;box-shadow:0 0 8px rgba(245,184,61,.6)}.fc-row i.hi{background:#FF3B4E;box-shadow:0 0 8px rgba(255,59,78,.7)}
.fc-row b{text-align:right;font-variant-numeric:tabular-nums}.fc-row.mine span{font-weight:800}
.fc-calm{margin:0;font-size:13px;color:var(--mute)}
/* машина часу */
.timebar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:6;display:flex;align-items:center;gap:12px;
  width:min(640px,calc(100% - 24px));padding:10px 14px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02)),var(--glass);
  backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--rim);box-shadow:0 18px 50px rgba(0,0,0,.45);animation:dropIn .6s var(--spring) both}
.timebar input{flex:1;accent-color:#FF3B4E}.timebar b{font-variant-numeric:tabular-nums;min-width:48px}
/* віджет: лише особистий стан */
body.mini #map{visibility:hidden}
body.mini .top,body.mini .banner,body.mini .dock,body.mini .sheet,body.mini .drawer,body.mini .settings,body.mini .timebar,body.mini #intro,body.mini .toast{display:none!important}
body.mini{background:var(--ink)}
body.mini .me{position:fixed;inset:8px!important;width:auto!important;top:8px!important;bottom:8px!important;overflow:auto;transform:none!important}
body.pip{margin:0;background:#0B0F17}
body.pip .me{position:static!important;margin:8px;width:auto!important}

/* ===================== Телефон: компактно, карта головна ===================== */
@media (max-width:640px){
  .me{bottom:calc(74px + env(safe-area-inset-bottom))!important;padding:10px 14px!important;border-radius:20px!important;max-height:62vh;overflow:auto;cursor:pointer}
  .me-head b{font-size:20px!important}
  .me:not(.open) .me-list,.me:not(.open) .fc{display:none}
  .me:not(.open) .me-sub{font-size:12.5px!important;margin-top:2px}
  .me:not(.open):not(.danger):not(.watch) .me-sub{display:none}
  .me:not(.open) .big{width:58px;height:58px;margin:2px 10px 0 0}.me:not(.open) .big b{font-size:24px;padding-bottom:8px}.me:not(.open) .big i{bottom:11px;font-size:10px}
  .me:not(.open) .big-t{padding-top:2px;font-size:13px}.me:not(.open) .big-a{display:none}
  .me::after{content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:rgba(127,127,127,.35)}
  .me.open::after{opacity:.6}
  .dock{gap:0;padding:4px;max-width:calc(100% - 16px)}
  .dock button{width:40px;height:42px;border-radius:18px}
  .dock svg{width:20px;height:20px}
  .top{top:max(8px,env(safe-area-inset-top))}
  .cnt{padding:4px 10px 4px 6px!important}.cnt b{font-size:18px!important}.cnt canvas{width:18px!important;height:18px!important}
  .asof{font-size:12px;padding:4px 10px 4px 8px}
  .timebar{bottom:calc(128px + env(safe-area-inset-bottom))}
}
/* докази цілі */
#sh-proof h4{margin:14px 0 4px}
.ev-head{margin:0;font-size:14px}.ev-head .ok{color:#34C759}.ev-head .warn{color:#F5B83D}
.ev-age{margin:4px 0 8px;font-size:12.5px;color:var(--mute)}
.ev-contra{border:1px solid rgba(245,184,61,.5);background:rgba(245,184,61,.08);border-radius:12px;padding:8px 10px;margin:6px 0 8px;font-size:13px}.ev-contra small{color:var(--mute)}
.ev-list{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid rgba(127,127,127,.3);max-height:300px;overflow:auto}
.ev-list li{position:relative;padding:6px 0 8px 10px}.ev-list li::before{content:"";position:absolute;left:-18px;top:11px;width:10px;height:10px;border-radius:50%;background:#34C759;box-shadow:0 0 8px #34C759}
.ev-list li.copy{opacity:.6}.ev-list li.copy::before{background:#8892A6;box-shadow:none}
.ev-m{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px}.ev-m span{color:var(--mute);font-variant-numeric:tabular-nums}.ev-m a{margin-left:auto;color:#7FB2FF;text-decoration:none}
.ev-m i{font-style:normal;font-size:11px;padding:1px 7px;border-radius:8px;background:rgba(127,127,127,.18)}
.ev-m i.nw{background:rgba(52,199,89,.2);color:#5BE584}.ev-m i.mv{background:rgba(47,123,255,.2);color:#8FB8FF}.ev-m i.cr{background:rgba(245,184,61,.2);color:#F5C35D}
.ev-list q{display:block;margin-top:3px;font-size:13px;line-height:1.35;color:var(--fg);quotes:"«" "»"}
/* рентген неба */
.xr-legend{position:fixed;left:16px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:6;padding:10px 14px;border-radius:16px;font-size:12px;line-height:1.7;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.01)),rgba(8,10,18,.72);backdrop-filter:var(--glass-fx);-webkit-backdrop-filter:var(--glass-fx);border:1px solid var(--rim);color:#E6EAF2}
.xr-legend b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.xr-legend i{display:inline-block;vertical-align:middle;margin-right:8px}
.xr-legend .n{width:10px;height:10px;border-radius:50%}.n.prim{background:#34C759;box-shadow:0 0 6px #34C759}.n.copy{background:#8892A6}.n.dest{border:2px solid #F5B83D;width:8px;height:8px}.n.est{background:#B48CFF}
.xr-legend .l{width:22px;height:0;border-top:2.5px solid}.l.confirm{border-color:#34C759}.l.copy{border-top-style:dotted;border-color:#8892A6}.l.assume{border-top-style:dashed;border-color:#B48CFF}.l.contra{border-top-style:dashed;border-color:#F5B83D}
body.xray .me{opacity:.85}
@media (max-width:640px){.xr-legend{bottom:calc(140px + env(safe-area-inset-bottom));font-size:11px}}
.ev-list li{display:block!important}.ev-list q{white-space:normal}
.tb-hint{font-size:11px;color:var(--mute);white-space:nowrap}

/* ---------- важливі сповіщення на головному екрані ---------- */
.notes{position:fixed;right:12px;top:calc(max(12px,env(safe-area-inset-top)) + 96px);z-index:7;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100% - 24px));pointer-events:none}
.note-c{pointer-events:auto;position:relative;display:flex;gap:10px;align-items:flex-start;padding:11px 38px 11px 12px;border-radius:16px;color:var(--fg);cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 45%),var(--glass-strong,rgba(18,22,32,.7));border:1px solid var(--rim,rgba(255,255,255,.16));
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:0 14px 40px rgba(0,0,0,.45);animation:noteIn .55s var(--spring,cubic-bezier(.2,1.3,.4,1)) both}
.note-c::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--nc,#F5B83D);box-shadow:0 0 14px var(--nc,#F5B83D)}
.note-c .ni{font-size:20px;line-height:1.1;flex:none;margin-left:4px}
.note-c b{display:block;font-size:14.5px;line-height:1.25}
.note-c small{display:block;font-size:12.5px;color:var(--mute);margin-top:2px;line-height:1.3}
.note-c time{position:absolute;right:38px;top:11px;font-size:11px;color:var(--mute)}
.note-c .nx{position:absolute;right:6px;top:6px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--fg);font-size:14px;cursor:pointer}
.note-c .nx:hover{background:rgba(255,255,255,.18)}
.note-c.out{animation:noteOut .3s ease both}
.notes .all{pointer-events:auto;align-self:flex-end;border:0;border-radius:12px;padding:5px 10px;font-size:12px;background:rgba(0,0,0,.45);color:var(--fg);cursor:pointer}
@keyframes noteIn{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:none}}
@keyframes noteOut{to{opacity:0;transform:translateX(40px);height:0;margin:-4px 0;padding-top:0;padding-bottom:0}}
@media (max-width:640px){.notes{top:calc(max(8px,env(safe-area-inset-top)) + 58px);left:12px;right:12px;width:auto}}
/* картка цілі не вилазить за верх екрана: гортається всередині, заголовок із ✕ завжди видно */
.sheet{max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - 8px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet .grip,.sheet .sh-head{position:sticky;z-index:2}
.sheet .grip{top:-10px}
.sheet .sh-head{top:-4px;background:var(--glass-strong,rgba(18,22,32,.85));margin:0 -18px;padding:6px 18px 8px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
@media (max-width:640px){.ev-list{max-height:none;overflow:visible}}

/* ---------- Голостіл ---------- */
.beta{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#C77DFF;border:1px solid rgba(199,125,255,.5);border-radius:6px;padding:1px 5px;margin-left:6px;vertical-align:middle}
.holo-hud{position:fixed;left:12px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:8;display:flex;align-items:center;gap:10px;padding:8px;border-radius:16px;color:var(--fg);
  background:var(--glass-strong,rgba(18,22,32,.7));border:1px solid var(--rim,rgba(255,255,255,.16));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.holo-hud video{width:96px;height:72px;object-fit:cover;border-radius:10px;transform:scaleX(-1);background:#000}
.holo-hud .hh-txt{display:flex;flex-direction:column;font-size:12px;max-width:170px}.holo-hud .hh-txt b{font-size:13px}.holo-hud .hh-txt span{color:var(--mute)}
.holo-hud .hh-btn{display:flex;flex-direction:column;gap:6px}
.holo-hud button{border:0;border-radius:10px;padding:6px 9px;font-size:12px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.12);color:var(--fg)}
.holo-cur{position:fixed;left:-22px;top:-22px;width:44px;height:44px;z-index:9;pointer-events:none;transition:opacity .2s}
.holo-cur i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 18px rgba(120,190,255,.8);transition:transform .15s,border-color .15s}
.holo-cur.pin i{transform:scale(.55);border-color:#2FE38A;box-shadow:0 0 22px #2FE38A}
.holo-cur span{position:absolute;left:50%;top:48px;transform:translateX(-50%);font-size:11px;font-weight:700;white-space:nowrap;color:#2FE38A;opacity:0;text-shadow:0 1px 3px #000}
.holo-cur.pin span{opacity:1}
body.holo-on #map{filter:saturate(1.08) contrast(1.04)}
@media (max-width:640px){.holo-hud{bottom:calc(150px + env(safe-area-inset-bottom));right:12px}.holo-hud video{width:72px;height:54px}}
#st-holo-mode button{padding:6px 10px;font-size:12px}
.dr-daily{margin-left:auto;margin-right:8px;text-decoration:none;color:var(--fg);background:rgba(255,255,255,.1);border-radius:12px;padding:6px 10px;font-weight:600;font-size:13px;white-space:nowrap}
@media (max-width:640px){.dock{gap:2px!important;padding:5px!important;max-width:calc(100vw - 12px)}.dock button{width:min(40px,calc((100vw - 50px) / 10))!important}.dock svg{width:20px;height:20px}}
.fc-row b{white-space:nowrap}.fc-row b small{font-size:10px;font-weight:600;opacity:.75;margin-left:2px}
.cnt{cursor:pointer;border-color:color-mix(in srgb,var(--tc,#fff) 45%,transparent)!important;box-shadow:inset 0 -2px 0 var(--tc,transparent),0 6px 24px rgba(0,0,0,.35)!important}
.cnt .cw{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.cnt .cw small{font-size:10.5px;font-weight:700;color:var(--tc,var(--mute));letter-spacing:.02em;margin-top:2px;white-space:nowrap}
@media (max-width:640px){.cnt .cw small{font-size:9px}}

.places{list-style:none;margin:6px 0;padding:0}.places li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.places li span{flex:1;font-weight:600;cursor:pointer}.places li button{border:0;background:rgba(255,255,255,.08);color:var(--fg);border-radius:9px;padding:4px 8px;cursor:pointer;font:600 12px var(--f)}
.pl-ask{position:fixed;left:50%;top:30%;transform:translateX(-50%);z-index:20;width:min(340px,calc(100% - 32px));padding:16px;border-radius:18px;color:var(--fg);background:var(--glass-strong,rgba(18,22,32,.9));border:1px solid var(--rim,rgba(255,255,255,.16));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:10px}
.pl-ask input{font:600 16px var(--f);padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--fg);outline:none}
.pl-ask .row{display:flex;gap:8px;justify-content:flex-end}

/* ---------- NAVRYX SKY: заставка з емблемою ---------- */
#intro .radar .emb{position:absolute;inset:-6%;width:112%;height:112%;object-fit:contain;filter:drop-shadow(0 0 22px rgba(60,140,255,.35));animation:embIn 1.3s cubic-bezier(.2,.8,.1,1) both}
#intro .radar .core{display:none}
#intro .radar .sweep{opacity:.55}
#intro .radar{width:clamp(180px,46vw,280px)}
#intro .wm{flex-direction:column;align-items:center;gap:clamp(4px,1vh,10px)}
#intro .wm .w1,#intro .wm .w2{display:flex;gap:clamp(4px,1.6vw,18px)}
#intro .wm .w1{font:500 clamp(34px,10vw,96px)/1 var(--f);letter-spacing:.06em}
#intro .wm .w1 span{background:linear-gradient(180deg,#ffffff 8%,#c9d1dc 45%,#7d8794 70%,#e9eef4 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
#intro .wm .w2{font:800 clamp(30px,9vw,84px)/1 var(--f);gap:clamp(22px,9vw,90px)}
#intro .wm .w2 span{background:linear-gradient(180deg,#7cc4ff 0%,#2a8cff 55%,#0b5fe0 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 18px rgba(40,140,255,.55))}
#intro .wm .w2 span:nth-child(1){animation-delay:.75s}#intro .wm .w2 span:nth-child(2){animation-delay:.85s}#intro .wm .w2 span:nth-child(3){animation-delay:.95s}
@keyframes embIn{from{opacity:0;transform:scale(.7) rotate(-25deg)}to{opacity:1;transform:none}}

/* мінімальна нижня панель: дім · стрічка · мапа доби · налаштування; решта — в «Інструментах» */
.dock .dx{display:none!important}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tools button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.05);color:var(--fg);font:600 12px var(--f);cursor:pointer}
.tools button:hover{background:rgba(255,255,255,.1)}
.tools svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}.tools b{font-size:16px;line-height:22px}
@media (max-width:640px){.dock button{width:56px!important}.dock{gap:6px!important}}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib.maplibregl-compact{margin-bottom:calc(84px + env(safe-area-inset-bottom))}

/* підпис джерел карти не перекриває інтерфейс — він у налаштуваннях («Про дані») */
.maplibregl-ctrl-attrib,.maplibregl-ctrl-bottom-right .maplibregl-ctrl{display:none!important}

/* Арсенал */
.arsenal{width:min(560px,100%)}
.ars-lead{margin:2px 0 6px;color:var(--mute);font-size:14px;line-height:1.45}
.ars-list{display:flex;flex-direction:column;gap:12px}
.ars-card{display:flex;gap:12px;padding:12px;border-radius:18px;background:rgba(127,127,127,.08);border:1px solid rgba(127,127,127,.16);border-left:3px solid var(--tc)}
.ars-img{flex:0 0 92px;height:92px;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--tc) 28%,transparent),rgba(0,0,0,.35) 70%)}
.ars-img img{width:86px;height:86px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.ars-b{min-width:0;flex:1}
.ars-b small{color:var(--tc);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.ars-b h4{margin:2px 0 8px;font-size:16px;line-height:1.25}
.ars-b dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0 0 8px;font-size:13px}
.ars-b dt{color:var(--mute)}.ars-b dd{margin:0;font-weight:600}
.ars-b p{margin:0 0 8px;font-size:13px;line-height:1.45;color:var(--mute)}
.ars-map{border:1px solid color-mix(in srgb,var(--tc) 60%,transparent);background:none;color:var(--fg);border-radius:12px;padding:6px 12px;font:600 12px var(--f);cursor:pointer}
.ars-leg{display:flex;flex-direction:column;gap:8px}
.ars-lr{display:flex;align-items:center;gap:12px}
.ars-lr canvas{width:40px;height:40px;flex:0 0 40px}
.ars-lr b{display:block;font-size:14px}.ars-lr span{font-size:12.5px;color:var(--mute);line-height:1.4}
.ars-src{font-size:12.5px;color:var(--mute);line-height:1.5}.ars-src a{color:inherit}
@media (max-width:420px){.ars-img{flex-basis:72px;height:72px}.ars-img img{width:66px;height:66px}}

/* компактні підказки: зверху, в один рядок, не перекривають нижні панелі */
.toast{top:calc(12px + env(safe-area-inset-top));bottom:auto!important;max-width:min(86vw,420px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;padding:8px 16px;border-radius:999px}
@media (max-width:640px){
  .xr-legend{left:auto;right:10px;bottom:auto;top:calc(150px + env(safe-area-inset-top));font-size:10.5px;line-height:1.55;padding:8px 10px;max-width:46vw}
  .xr-legend b{font-size:10.5px}
}
.ars-b dl{grid-template-columns:minmax(84px,42%) 1fr}
@keyframes dropInL{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .toast{left:max(12px,env(safe-area-inset-left));transform:none;max-width:50vw;white-space:normal;font-size:13px;line-height:1.3;border-radius:16px;padding:8px 12px}
  .toast:not([hidden]){animation:dropInL .45s var(--spring) both}
}
/* Крейсер «Москва» — кіносцена */
.cine{position:fixed;inset:0;z-index:50;background:#000;opacity:0;transition:opacity .7s ease;overflow:hidden;cursor:pointer}
.cine.on{opacity:1}.cine.off{opacity:0}
.cine-img{position:absolute;inset:0;display:grid;place-items:center}
.cine-img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0;transform:scale(1.28) translateY(2%);transition:opacity 1.6s ease .3s,transform 11s cubic-bezier(.2,.6,.2,1) .3s}
.cine.on .cine-img img{opacity:1;transform:scale(1.04) translateY(0)}
.cine.boom .cine-img{animation:cineShake .55s linear}
.cine-flash{position:absolute;inset:0;background:radial-gradient(circle at 60% 35%,rgba(255,230,160,.95),rgba(255,140,40,.4) 40%,transparent 70%);opacity:0;pointer-events:none}
.cine.boom .cine-flash{animation:cineFlash .6s ease-out}
.cine-bar{position:absolute;left:0;right:0;height:0;background:#000;transition:height 1.1s cubic-bezier(.2,.8,.1,1);z-index:2}
.cine-bar.t{top:0}.cine-bar.b{bottom:0}
.cine.on .cine-bar{height:11vh}
.cine-cap{position:absolute;left:0;right:0;bottom:calc(11vh + 18px);z-index:3;text-align:center;padding:0 22px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.cine-cap small{display:block;font:600 12px var(--f);letter-spacing:.22em;text-transform:uppercase;opacity:0;transition:opacity 1s 1.2s}
.cine.on .cine-cap small{opacity:.85}
.cine-cap q{display:block;quotes:none;font:800 clamp(22px,5.4vw,46px)/1.15 var(--f);letter-spacing:-.01em;margin:10px auto 0;max-width:900px;min-height:1.2em}
.cine-cap em{display:block;margin-top:12px;font:500 clamp(12px,2.6vw,16px) var(--f);font-style:normal;color:#FFD54A;opacity:0;transform:translateY(8px);transition:opacity 1.2s,transform 1.2s}
.cine.fin .cine-cap em{opacity:1;transform:none}
.cine-hint{position:absolute;right:16px;top:calc(11vh + 12px);z-index:3;font:500 11px var(--f);color:rgba(255,255,255,.55);letter-spacing:.06em}
@keyframes cineShake{0%,100%{transform:none}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
@keyframes cineFlash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@media (orientation:portrait){
  .cine-img{background:radial-gradient(ellipse at 50% 45%,#1d2b44,#000 75%)}
  .cine-img img{object-fit:contain;transform:scale(1.18) translateY(-6%)}
  .cine.on .cine-img img{transform:scale(1.02) translateY(-8%)}
  .cine-cap{bottom:calc(11vh + 8px)}
}
.ars-map[hidden]{display:none}
.ars-map{background:color-mix(in srgb,var(--tc) 22%,transparent)}
/* Світла тема v2 — суцільні білі панелі й контрастний текст (як у Apple Maps / «Повітряна тривога»), без напівпрозорого «скла», крізь яке просвічує карта */
:root[data-theme="day"]{--fg:#0A0F1A;--mute:#3E4859;--line:rgba(10,20,40,.10);--glass:#fff;--glass-strong:#F4F6FA;--rim:rgba(10,20,40,.08)}
:root[data-theme="day"] .cnt,:root[data-theme="day"] .asof,:root[data-theme="day"] .dock,:root[data-theme="day"] .me,:root[data-theme="day"] .sheet,:root[data-theme="day"] .drawer,:root[data-theme="day"] .toast,:root[data-theme="day"] .xr-legend,:root[data-theme="day"] .notes>*{
  background:rgba(255,255,255,.97)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid rgba(10,20,40,.08)!important;box-shadow:0 1px 2px rgba(15,25,45,.08),0 8px 28px rgba(15,25,45,.16)!important;color:var(--fg)!important}
:root[data-theme="day"] .settings{background:#F4F6FA!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-left:1px solid rgba(10,20,40,.08);box-shadow:-12px 0 40px rgba(15,25,45,.18)}
:root[data-theme="day"] .settings section{border-top-color:rgba(10,20,40,.08)}
:root[data-theme="day"] .settings h3{color:#5A6475}
:root[data-theme="day"] .ars-card{background:#fff;border-color:rgba(10,20,40,.08);box-shadow:0 1px 2px rgba(15,25,45,.06)}
:root[data-theme="day"] .ars-img{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--tc) 18%,#fff),#E9EDF3 75%)}
:root[data-theme="day"] .ars-b small{color:color-mix(in srgb,var(--tc) 70%,#000)}
:root[data-theme="day"] .ars-b dd{color:#0A0F1A}
:root[data-theme="day"] .ars-map{color:#0A0F1A;background:color-mix(in srgb,var(--tc) 16%,#fff);border-color:color-mix(in srgb,var(--tc) 55%,#fff)}
:root[data-theme="day"] .sheet .grid>div{background:#F2F4F8!important;border-color:rgba(10,20,40,.06)!important}
:root[data-theme="day"] .me-sub{color:#3E4859!important}
:root[data-theme="day"] .me.danger{border-color:#E5484D!important;box-shadow:0 0 0 2px rgba(229,72,77,.35),0 8px 28px rgba(229,72,77,.25)!important}
:root[data-theme="day"] .me.watch{border-color:#E0A21E!important;box-shadow:0 0 0 2px rgba(245,184,61,.35),0 8px 28px rgba(15,25,45,.16)!important}
:root[data-theme="day"] .cnt small{color:color-mix(in srgb,var(--tc) 75%,#000)!important}
:root[data-theme="day"] .xr-legend{color:#0A0F1A!important}
#g3d-credit{position:fixed;left:10px;bottom:calc(6px + env(safe-area-inset-bottom));z-index:4;font:500 10px var(--f);color:rgba(255,255,255,.8);text-shadow:0 1px 3px #000;max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}

.kab-pop .maplibregl-popup-content{background:rgba(12,16,24,.96);color:#EEF2F8;border-radius:16px;padding:14px 16px 12px;box-shadow:0 12px 40px rgba(0,0,0,.5);border:1px solid rgba(34,225,255,.35)}
.kab-pop .maplibregl-popup-tip{border-top-color:rgba(12,16,24,.96)!important;border-bottom-color:rgba(12,16,24,.96)!important}
.kab-pop .maplibregl-popup-close-button{color:#9AA4B6;font-size:18px;right:6px;top:4px}
.kp small{color:#22E1FF;font:700 10.5px var(--f);letter-spacing:.14em}
.kp h4{margin:3px 0 8px;font:800 16px var(--f)}
.kp-r{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0;border-top:1px solid rgba(255,255,255,.07)}
.kp-r span{color:#9AA4B6;white-space:nowrap}.kp-r b{text-align:right;font-weight:600}
.kp-ev{margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.35;color:#C9D2E3}
.kp-ev i{display:block;font-style:normal;color:#7F8AA0;font-size:11px}
:root[data-theme="day"] .kab-pop .maplibregl-popup-content{background:#fff;color:#0A0F1A;border-color:rgba(10,20,40,.12)}
:root[data-theme="day"] .kab-pop .maplibregl-popup-tip{border-top-color:#fff!important;border-bottom-color:#fff!important}
:root[data-theme="day"] .kp-ev{color:#2E3746}:root[data-theme="day"] .kp-r{border-top-color:rgba(10,20,40,.08)}:root[data-theme="day"] .kp small{color:#0A8FA8}
.avia-pop .maplibregl-popup-content{border-color:rgba(255,80,80,.45)}.avia-pop .kp small{color:#FF6B6B}
.ru-pop .maplibregl-popup-content{border-color:rgba(255,213,0,.5)}.ru-pop .kp small{color:#FFD500}
.xr-legend{cursor:pointer}.xr-x{float:right;margin-left:12px;font-size:15px;line-height:1;padding:2px 6px;border-radius:8px;background:rgba(255,255,255,.12)}.xr-hint{display:block;opacity:.65;font-size:10.5px;margin:-2px 0 4px;letter-spacing:0;text-transform:none}
:root[data-theme="day"] .xr-x{background:rgba(10,20,40,.08)}

.follow-pill{position:fixed;left:50%;transform:translateX(-50%);top:calc(max(12px,env(safe-area-inset-top)) + 64px);z-index:8;display:flex;align-items:center;gap:10px;max-width:min(94vw,560px);padding:8px 8px 8px 14px;border-radius:18px;background:rgba(12,16,24,.94);color:#EEF2F8;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.follow-pill .fp-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;box-shadow:0 0 10px currentColor;animation:pulse 1.4s infinite}
.follow-pill .fp-t{min-width:0;flex:1}.follow-pill .fp-t b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.follow-pill .fp-t span{display:block;font-size:11.5px;color:#9AA4B6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.follow-pill button{border:0;border-radius:12px;padding:8px 10px;font:600 12px var(--f);cursor:pointer;background:rgba(255,255,255,.1);color:inherit}
.follow-pill #fp-stop{background:#E5484D;color:#fff}
.follow-pill.flash{animation:fpFlash .8s ease}
@keyframes fpFlash{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
:root[data-theme="day"] .follow-pill{background:#fff;color:#0A0F1A;border-color:rgba(10,20,40,.1)}:root[data-theme="day"] .follow-pill .fp-t span{color:#3E4859}:root[data-theme="day"] .follow-pill button{background:rgba(10,20,40,.07)}

.snd-l{font-size:13px;color:var(--mute);margin:12px 0 6px}
.snd-seg{display:flex;width:100%}.snd-seg button{flex:1 1 0;min-width:0;padding:10px 4px;white-space:nowrap;font-size:14px}
.snd-vol{width:100%;accent-color:#3B82F6}
.snd-test{margin-top:14px;width:100%}
.snd-hint{display:block;font-size:12px;color:var(--mute);margin:8px 0 0;line-height:1.4}