:root {
  --bg: #0b1016;
  --panel: #111922;
  --panel-2: #16212c;
  --line: #213041;
  --text: #e9eff5;
  --muted: #8fa1b3;
  --accent: #7cc4ff;
  --l0: #2bb784;
  --l1: #5b8def;
  --l2: #f0b429;
  --l3: #ff4d4f;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 16px/1.5 "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
h3 { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 6px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: rgba(11, 16, 22, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; }
.brand svg { width: 26px; height: 26px; color: var(--accent); }
.country { margin-left: auto; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font: inherit; font-size: .9rem; max-width: 34vw; cursor: pointer; }
.place { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: .9rem; max-width: 45vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.langs { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow-x: auto; scrollbar-width: none; max-width: 40vw; }
.langs::-webkit-scrollbar { display: none; }
.langs button { background: none; border: 0; padding: 6px 9px; cursor: pointer; font-size: .8rem; color: var(--muted); }
.langs button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); font-weight: 700; }

/* Telefon: stan, mapa, reszta. Komputer: kolumna z treścią i przyklejona mapa obok. */
main { display: flex; flex-direction: column; gap: 16px; padding: 16px; max-width: 1400px; margin: 0 auto; }
.col-main { display: contents; }
#hero { order: 1; } #banners { order: 2; } .col-map { order: 3; } #notes { order: 4; } .col-main > .card { order: 5; }
.col-map { position: relative; min-width: 0; }
#map { height: 56vh; min-height: 320px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: #0e161d; }
@media (min-width: 960px) {
  main { display: grid; grid-template-columns: minmax(380px, 460px) 1fr; align-items: start; }
  .col-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .col-map { order: 1; position: sticky; top: 72px; }
  #map { height: calc(100vh - 96px); }
}
@media (max-width: 480px) {
  .brand span { display: none; }
  .place { max-width: 52vw; font-size: .82rem; padding: 6px 10px; }
  .top { flex-wrap: wrap; row-gap: 8px; }
  .country { max-width: 44vw; font-size: .82rem; padding: 6px 8px; }
  .langs { order: 3; max-width: 100%; }
  .langs button { padding: 6px 5px; }       /* 12 języków mieści się w 360 px */
}

.hero { --c: var(--l0); border-radius: var(--radius); padding: 20px; background:
  linear-gradient(135deg, color-mix(in srgb, var(--c) 26%, var(--panel)) 0%, var(--panel) 70%); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); }
.hero.lvl-1 { --c: var(--l1); } .hero.lvl-2 { --c: var(--l2); } .hero.lvl-3 { --c: var(--l3); }
.hero.lvl-3 { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--l3) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .hero.lvl-3 { animation: none; } }
.hero-level { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--c); }
.hero-level::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.hero h1 { font-size: clamp(1.45rem, 4.6vw, 2rem); font-weight: 800; margin: 8px 0 6px; letter-spacing: -.01em; }
.hero-do { font-size: 1.05rem; margin: 0 0 10px; }
.hero-near { margin: 0 0 10px; padding: 10px 12px; background: rgba(0,0,0,.22); border-radius: 10px; font-size: .95rem; }
.hero-near:empty { display: none; }
.hero-meta { margin: 0; font-size: .8rem; color: var(--muted); }

#banners:empty { display: none; }
.banner { padding: 10px 14px; border-radius: 10px; background: #3a2a0c; border: 1px solid #6b4d12; font-size: .9rem; margin-bottom: 8px; }
.banner.err { background: #3a1214; border-color: #7a2328; }
#notes:empty { display: none; }
.note { margin: 0 0 8px; padding: 10px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: .88rem; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.regions { display: grid; gap: 10px; }
.region { --c: var(--l0); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); border-radius: 10px; padding: 12px; background: var(--panel-2); }
.region.lvl-1 { --c: var(--l1); } .region.lvl-2 { --c: var(--l2); } .region.lvl-3 { --c: var(--l3); }
.region-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.region-name { font-weight: 700; }
.region-level { color: var(--c); font-weight: 700; font-size: .85rem; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); }
.region ul { margin: 8px 0 0; padding-left: 18px; font-size: .92rem; }
.region li { margin: 2px 0; }
.region .pts { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 6px; font-size: .8rem; }
.region details { margin-top: 6px; font-size: .85rem; color: var(--muted); }
.region summary { cursor: pointer; }

.btn { background: var(--accent); color: #06121d; border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700; cursor: pointer; }
.btn.ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.btn.on { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.notify-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feed li { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; font-size: .92rem; }
.feed .meta { font-size: .78rem; color: var(--muted); display: block; margin-bottom: 2px; }
.feed .empty { background: none; padding: 0; color: var(--muted); }
.history .hstep { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.sources { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; font-size: .88rem; }
.sources li { display: flex; gap: 8px; align-items: baseline; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; transform: translateY(-1px); background: var(--l0); }
.dot.err { background: var(--l3); } .dot.off { background: #56697a; } .dot.warn { background: var(--l2); }
.sources .det { color: var(--muted); font-size: .78rem; }

#about p { margin: 0 0 8px; font-size: .92rem; }
.foot { padding: 16px 16px 40px; max-width: 1400px; margin: 0 auto; font-size: .82rem; color: var(--muted); }
.foot p { margin: 4px 0; }

.legend { position: absolute; left: 10px; top: 10px; z-index: 2; max-width: min(260px, 60vw); max-height: calc(100% - 90px); overflow-y: auto; background: rgba(11,16,22,.9); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: .75rem; display: grid; gap: 3px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend .src { color: var(--muted); font-size: .68rem; margin-top: 2px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.mk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); cursor: pointer; }
.mk.old { opacity: .45; }
.mk.adv { background: #56697a; }
.mk svg { width: 16px; height: 16px; fill: #fff; }
.mk b { position: absolute; top: -8px; right: -10px; background: #0b1016; color: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: .68rem; padding: 0 5px; }
.me { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(124,196,255,.3); }
.maplibregl-popup-content { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; font: 13px/1.4 "Onest", system-ui, sans-serif; }
.maplibregl-popup-tip { border-top-color: var(--panel) !important; border-bottom-color: var(--panel) !important; }
.maplibregl-ctrl-attrib { font-size: 10px; }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); max-width: 420px; width: calc(100% - 32px); padding: 20px; }
dialog::backdrop { background: rgba(0,0,0,.6); }
.where { display: grid; gap: 10px; }
.where h2 { font-size: 1.3rem; }
.where p { margin: 0; }
.where-regions .wide { grid-column: 1 / -1; }
.where-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 45vh; overflow-y: auto; }
.where-country { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.where-country select { flex: 1; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px; font: inherit; }
.regions details.more { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; }
.regions details.more > summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.regions details.more > .regions { margin-top: 10px; }

.map-tools { position: absolute; right: 10px; top: 10px; z-index: 2; display: grid; gap: 6px; justify-items: end; }
.map-btn { background: rgba(11,16,22,.88); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.map-btn:hover { border-color: var(--accent); }
.replaying .map-btn { border-color: var(--l2); color: var(--l2); }
.replay { position: absolute; left: 10px; right: 10px; bottom: 34px; z-index: 2; background: rgba(11,16,22,.94); border: 1px solid var(--l2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.replay[hidden] { display: none; }
.replay-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.replay-head b { color: var(--l2); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.replay-time { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.small-btn { padding: 5px 10px; font-size: .8rem; }
.replay input[type=range] { width: 100%; height: 22px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.replay input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 6px; background: var(--track, #33465a); }
.replay input[type=range]::-moz-range-track { height: 10px; border-radius: 6px; background: var(--track, #33465a); }
.replay input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--l2); margin-top: -5px; }
.replay input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--l2); }
.replay-ctl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.replay-ctl button { min-width: 40px; min-height: 36px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .85rem; cursor: pointer; }
.replay-ctl button:hover { border-color: var(--accent); }
.replay-ctl .play { background: var(--accent); color: #06121d; font-weight: 800; min-width: 56px; }
.replay p { margin: 0; }
.replaying .legend { display: none; }
@media (max-width: 560px) { .replay { bottom: 30px; padding: 8px; } .replay-ctl button { min-width: 34px; padding: 0 6px; } }

.lg-head { background: none; border: 0; color: var(--text); font: inherit; font-weight: 700; text-align: left; padding: 2px 0; cursor: pointer; }
.lg-body { display: grid; gap: 3px; margin: 4px 0; }
.lg-body b { margin-top: 6px; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.legend i.sq { border-radius: 3px; border: 1px solid transparent; }
.map-btn.on { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); border-color: var(--accent); }
.mk.air { width: 24px; height: 24px; background: rgba(9,20,30,.88); border: 2px solid #4fd0e8; box-shadow: none; --c: #4fd0e8; }
.mk.air svg { fill: #4fd0e8; width: 15px; height: 15px; }
.mk.air.ru { border-color: #ff5a5f; }
.mk.air.ru svg { fill: #ff5a5f; }
.mk.zone { width: 18px; height: 18px; background: none; border: 0; box-shadow: none; }
.mk.zone i { width: 12px; height: 12px; background: #a78bfa; transform: rotate(45deg); border: 2px solid #fff; display: block; }
.mk.zone.fresh i { background: #f0b429; }
.foreign-body { max-height: 55vh; overflow-y: auto; display: grid; gap: 6px; }
.foreign-body h3 { margin: 8px 0 2px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tabs { display: none; }
@media (max-width: 959px) {
  body { padding-bottom: 68px; }
  .tabs { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(11,16,22,.97); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 6px; }
  .tabs button { background: none; border: 0; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; padding: 10px 4px; border-radius: 10px; cursor: pointer; }
  .tabs button[aria-pressed="true"] { background: var(--panel-2); color: var(--accent); }
  body[data-tab="map"] .col-main > .card, body[data-tab="history"] .col-main > .card, body[data-tab="map"] #notes, body[data-tab="history"] #notes { display: none; }
  body[data-tab="signals"] .col-map, body[data-tab="more"] .col-map, body[data-tab="more"] #hero, body[data-tab="more"] #banners { display: none; }
  body[data-tab="signals"] #notifyCard, body[data-tab="signals"] #sourcesCard, body[data-tab="signals"] #aboutCard { display: none; }
  body[data-tab="more"] #regionsCard, body[data-tab="more"] #feedCard, body[data-tab="more"] #historyCard, body[data-tab="more"] #milCard { display: none; }
  body[data-tab="signals"] #installCard { display: none; }
  body[data-tab="history"] #hero { display: none; }
  body[data-tab="map"] #hero .hero-do, body[data-tab="map"] #hero .hero-near, body[data-tab="map"] #hero .hero-meta,
  body[data-tab="history"] #hero { display: none; }
  body[data-tab="map"] #hero { padding: 10px 14px; }
  body[data-tab="map"] #hero h1 { font-size: 1.05rem; margin: 4px 0 0; }
  body[data-tab="map"] #map, body[data-tab="history"] #map { height: calc(100dvh - 300px); min-height: 300px; }
  body[data-tab="history"] #map { height: calc(100dvh - 190px); }
  body[data-tab="map"] #notes { display: none; }
  .map-btn { padding: 6px 9px; font-size: .78rem; }
  .legend { max-width: 54vw; }
}

.mk.counts::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--c); animation: ring 1.8s ease-out infinite; pointer-events: none; }
@keyframes ring { from { transform: scale(.75); opacity: .95; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mk.counts::before { animation: none; opacity: .6; } }
.legend i.ringdot { border: 2px solid #ff8a1f; background: none; }
.legend i.dashln { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed #ff8a1f; }
dialog.alarm { border-color: var(--l3); max-width: 460px; }
dialog.alarm::backdrop { background: rgba(60,0,0,.75); }
.alarm-level { color: var(--l3); text-transform: uppercase; letter-spacing: .08em; font-size: 1.1rem; }
.alarm-pts { margin: 0; font-weight: 700; }
.alarm-why { margin: 0; padding-left: 18px; font-size: .95rem; }
.alarm-warn { margin: 0; padding: 8px 10px; border: 1px solid var(--l2); border-radius: 8px; background: color-mix(in srgb, var(--l2) 14%, transparent); font-size: .88rem; }
.alarm-do { font-size: 1.25rem; font-weight: 700; margin: 0; }

.multi-list { display: grid; gap: 4px; max-height: 55vh; overflow-y: auto; }
.mrow { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 10px; background: var(--panel-2); }
.mchk { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.mchk i, .cty-h i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.mmain { display: grid; place-items: center; cursor: pointer; }
.mlvl { font-size: .78rem; font-weight: 700; }
.cty-h { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: .95rem; }

.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 50; background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 16px; font-size: .9rem; max-width: 90vw; word-break: break-all; }
.toast[hidden] { display: none; }
.map-tools { max-height: calc(100% - 130px); overflow-y: auto; scrollbar-width: none; }
.map-tools::-webkit-scrollbar { display: none; }
@media (max-width: 959px) { .map-tools { grid-template-columns: repeat(2, auto); } }
.col-map:fullscreen { background: var(--bg, #0b1016); padding: 0; }
.col-map:fullscreen #map { height: 100vh; border-radius: 0; border: 0; }

.tools-more { display: grid; gap: 6px; justify-items: end; }
.tools-more[hidden] { display: none; }
@media (max-width: 959px) { .tools-more { grid-template-columns: repeat(2, auto); } }

.mk { width: 30px; height: 30px; }
.mk svg { width: 20px; height: 20px; }
.mk.air { width: 24px; height: 24px; }
.mk.air svg { width: 15px; height: 15px; }
.lgb { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); flex: none; }
.lgb svg { width: 13px; height: 13px; }
.oc { min-width: 200px; max-width: 250px; display: grid; gap: 3px; }
.oc-art { justify-self: center; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); border: 2px solid var(--c); }
.oc-art svg { width: 46px; height: 46px; }
.oc-cap { text-align: center; font-size: .68rem; opacity: .65; }
.oc-title { font-size: 1rem; }
.oc-warn { color: #f0b429; font-size: .78rem; }

.src-dots { display: inline-flex; gap: 4px; align-items: center; }
.src-dots .dot { width: 8px; height: 8px; }
@media (max-width: 720px) { .src-dots { display: none; } }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.chip { font-size: .72rem; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: #a78bfa; }
.chip.new { color: #f0b429; border-color: #f0b429; }
.replay-mode { background: var(--l2); color: #000 !important; padding: 2px 8px; border-radius: 6px; }
.live-btn { font-weight: 700; margin-left: auto; }

.hero.blind { --c: #56697a; }
body.blind .region { filter: grayscale(1); opacity: .75; }

/* źródła podpisane */
.src-dots { gap: 10px; }
.src-dots .src { display: inline-flex; gap: 5px; align-items: center; font-size: .72rem; color: var(--muted); white-space: nowrap; }
.src-dots .src em { font-style: normal; }
@media (max-width: 1250px) { .src-dots .src em { display: none; } }
@media (max-width: 720px) { .src-dots { display: none; } }
/* samoloty: kolorowe koła */
.mk.air { width: 30px; height: 30px; background: var(--c); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.mk.air svg, .mk.air.ru svg { fill: #fff; width: 18px; height: 18px; }
.mk.sel { outline: 3px solid #fff; outline-offset: 3px; border-radius: 50%; }
.unoff { position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; z-index: 2; display: flex; gap: 8px; align-items: center; max-width: calc(100% - 90px); background: rgba(60,45,0,.92); border: 1px solid var(--l1); color: #ffe9a8; border-radius: 8px; padding: 4px 8px 4px 12px; font-size: .74rem; line-height: 1.3; }
.unoff[hidden] { display: none; }
.unoff button { background: none; border: 0; color: inherit; font-size: 1rem; cursor: pointer; }
body.replaying .unoff { display: none; }
#tbPanel { display: none; }
/* pulpit: mapa na cały ekran, panel jako nakładka */
@media (min-width: 960px) {
  html, body { height: 100%; overflow: hidden; }
  #tbPanel { display: inline-flex; }
  main { display: block; padding: 0; max-width: none; margin: 0; }
  .col-map { position: fixed; top: var(--topH, 58px); left: 0; right: 0; bottom: 30px; order: 0; }
  #map { height: 100%; min-height: 0; border-radius: 0; border: 0; }
  .col-main { position: fixed; top: var(--topH, 58px); left: 0; bottom: 30px; width: 400px; overflow-y: auto; padding: 12px; z-index: 5; background: rgba(11,16,22,.94); backdrop-filter: blur(8px); border-right: 1px solid var(--line); }
  .foot { position: fixed; left: 0; right: 0; bottom: 0; height: 30px; z-index: 6; display: flex; gap: 18px; align-items: center; padding: 0 12px; margin: 0; max-width: none; background: rgba(11,16,22,.97); border-top: 1px solid var(--line); font-size: .72rem; white-space: nowrap; overflow: hidden; }
  .foot p { margin: 0; }
  #footDisclaimer { display: none; }
  body:not(.panel-closed) .legend, body:not(.panel-closed) .replay { left: 410px; }
  body.panel-closed .col-main { width: 360px; background: none; border: 0; backdrop-filter: none; overflow: visible; pointer-events: none; }
  body.panel-closed .col-main > *:not(#hero) { display: none; }
  body.panel-closed #hero { pointer-events: auto; padding: 10px 14px; }
  body.panel-closed #hero .hero-do, body.panel-closed #hero .hero-near, body.panel-closed #hero .hero-meta { display: none; }
  body.panel-closed #hero h1 { font-size: 1.05rem; margin: 4px 0 0; }
  body.panel-closed .legend { top: 110px; }
  .unoff { bottom: 8px; }
}
@media (min-width: 960px) and (max-width: 1650px) {
  .brand span { display: none; }
  .country { max-width: 130px; }
  .place { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .src-dots { gap: 7px; }
  .langs button { padding: 6px 6px; }
}
@media (min-width: 960px) { body:not(.panel-closed) .unoff { left: calc(50% + 200px); } }

.oc-row { display: flex; gap: 12px; }
.oc-row span { color: var(--muted); min-width: 70px; }
.oc-h { font-size: 1.05rem; }
.oc .btn { justify-self: start; }
.unoff { z-index: 1; }
@media (max-width: 959px) {
  .unoff { left: 8px; right: 52px; transform: none; max-width: none; bottom: 6px; font-size: .66rem; padding: 3px 6px 3px 8px; }
}
/* karta obiektu przypięta w rogu mapy, żeby nie zasłaniała toru lotu */
.maplibregl-popup.docked { position: absolute !important; transform: none !important; left: 10px !important; right: auto !important; top: auto !important; bottom: 40px !important; max-width: min(330px, calc(100% - 20px)) !important; }
.maplibregl-popup.docked .maplibregl-popup-tip { display: none; }
.maplibregl-popup.docked .maplibregl-popup-content { padding: 8px 10px; max-height: 60vh; overflow-y: auto; font-size: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.maplibregl-popup-close-button { color: var(--text); font-size: 18px; padding: 0 8px; }
@media (min-width: 960px) { body:not(.panel-closed) .maplibregl-popup.docked { left: 410px !important; } }
@media (max-width: 959px) { .maplibregl-popup.docked { bottom: 46px !important; max-width: calc(100% - 70px) !important; } .maplibregl-popup.docked .maplibregl-popup-content { max-height: 42vh; } }
.oc { gap: 2px; min-width: 0; max-width: none; }
.oc-art { justify-self: stretch; width: auto; height: 46px; border-radius: 8px; border-width: 0; }
.oc-art svg { width: 34px; height: 34px; }
.oc-cap { font-size: .62rem; }
.oc-title { font-size: .92rem; }

dialog.world { max-width: 560px; width: calc(100% - 24px); }
.world-list { max-height: 42vh; overflow-y: auto; }
.world-list li { cursor: pointer; position: relative; padding-left: 20px; }
.world-list li::before { content: ""; position: absolute; left: 6px; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--line)); }
#worldCty { width: 100%; padding: 8px; margin: 6px 0; font: inherit; }

.oc-links{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px;font-size:12px}
.oc-links a{color:#7cc4ff;text-decoration:none}
.oc-links a:hover{text-decoration:underline}
.world-list .oc-links{margin-top:2px}

.rp-src{max-width:9.5rem;margin:0 6px;background:#0d1520;color:inherit;border:1px solid #2a3a4c;border-radius:6px;font-size:12px;padding:2px 4px}

.trust{font-size:12px;margin-top:4px;padding:2px 6px;border-radius:4px;display:inline-block}
.trust.instrument{background:rgba(52,199,89,.15);color:#63d98a}
.trust.official{background:rgba(124,196,255,.15);color:#7cc4ff}
.trust.media{background:rgba(240,180,41,.15);color:#f0b429}
.oc .small-btn{margin-top:6px}
.world-q{width:100%;box-sizing:border-box;margin:6px 0;padding:8px 10px;border-radius:8px;border:1px solid #2a3a4c;background:#0d1520;color:inherit;font:inherit}
body.embed .top,body.embed .foot,body.embed .tabs,body.embed .col-main,body.embed #tbPanel{display:none!important}

.oc-photo{display:block;margin:0 0 6px;text-decoration:none;color:inherit}
.oc-photo img{display:block;width:100%;max-height:150px;object-fit:cover;border-radius:6px}
.oc-photo span{display:block;font-size:10px;opacity:.7;margin-top:2px}
.alt-scale{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 4px;margin-top:6px;font-size:10px;opacity:.85}
.alt-scale i{flex:0 0 100%;height:6px;border-radius:3px;background:linear-gradient(90deg,#ff7a1a,#ffb020 14%,#d8e02a 30%,#3ddc6e 45%,#22c7d6 62%,#3d8bff 80%,#9b6bff)}

/* przyciski mapy: ikona + podpis (podpis znika na telefonie w kolumnie narzędzi) */
.map-btn i { font-style: normal; }
.map-btn span { margin-left: 5px; }
#settingsCard { display: none; }
.langs-grid { display: grid; grid-template-columns: repeat(6, 1fr); max-width: none; border-radius: 10px; overflow: hidden; }
.langs-grid button { padding: 10px 0; font-size: .9rem; }
.btn.ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }

/* ================= telefon i tablet: aplikacja pełnoekranowa ================= */
@media (max-width: 959px) {
  :root { --topH: 56px; --tabH: calc(60px + env(safe-area-inset-bottom)); }
  body { padding-bottom: 0; }
  .top { height: var(--topH); flex-wrap: nowrap; padding: 8px 12px; gap: 8px; }
  .top .langs, #multiBtn, .brand span { display: none; }
  .country { order: 0; margin-left: 0; flex: 1 1 auto; min-width: 0; max-width: none; font-weight: 700; font-size: .88rem; text-overflow: ellipsis; }
  .place { flex: 0 1 auto; max-width: 40vw; font-size: .84rem; }
  main { padding: 12px 12px calc(var(--tabH) + 16px); gap: 12px; }

  /* dolna nawigacja z ikonami */
  .tabs { height: var(--tabH); padding: 4px 6px env(safe-area-inset-bottom); gap: 4px; }
  .tabs button { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 4px 2px; font-size: .72rem; min-height: 52px; }
  .tabs button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabs button[aria-pressed="true"] svg { stroke-width: 2.2; }

  /* mapa i historia: mapa na cały ekran między paskiem górnym a dolną nawigacją */
  body[data-tab="map"], body[data-tab="history"] { overflow: hidden; height: 100dvh; }
  body[data-tab="map"] .foot, body[data-tab="history"] .foot, body[data-tab="signals"] .foot { display: none; }
  body[data-tab="map"] .col-map, body[data-tab="history"] .col-map { position: fixed; top: var(--topH); left: 0; right: 0; bottom: var(--tabH); z-index: 1; }
  body[data-tab="map"] #map, body[data-tab="history"] #map { height: 100% !important; min-height: 0; border: 0; border-radius: 0; }

  /* stan jako pływająca karta nad mapą */
  body[data-tab="map"] #hero { position: fixed; top: calc(var(--topH) + 8px); left: 10px; right: 62px; z-index: 6; padding: 8px 12px; border-radius: 12px; cursor: pointer;
    background: color-mix(in srgb, var(--c) 22%, rgba(11,16,22,.93)); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
  body[data-tab="map"] #hero .hero-level { font-size: .68rem; gap: 6px; }
  body[data-tab="map"] #hero .hero-level::before { width: 9px; height: 9px; }
  body[data-tab="map"] #hero h1 { font-size: .92rem; font-weight: 700; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body[data-tab="map"] #hero::after { content: "›"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--muted); }
  body[data-tab="map"] #banners { position: fixed; top: calc(var(--topH) + var(--heroH, 64px) + 14px); left: 10px; right: 62px; z-index: 6; }
  body[data-tab="map"] #banners .banner { font-size: .8rem; padding: 6px 10px; margin-bottom: 4px; }
  body[data-tab="history"] #banners { display: none; }

  /* legenda pod kartą stanu, zwinięta i mała */
  body[data-tab="map"] .legend { top: calc(var(--heroH, 64px) + 16px); left: 10px; max-width: min(230px, 62vw); max-height: calc(100% - var(--heroH, 64px) - 110px); font-size: .7rem; padding: 5px 9px; }

  /* narzędzia: kolumna okrągłych ikon po prawej, reszta w arkuszu od dołu */
  #replayBtn, #tbPanel { display: none !important; }
  .map-tools { top: 8px; right: 8px; grid-template-columns: 1fr; gap: 8px; max-height: calc(100% - 120px); overflow: visible; }
  .map-tools > .map-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; background: rgba(11,16,22,.92); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
  .map-tools > .map-btn span { display: none; }
  .tools-more { position: fixed; left: 0; right: 0; bottom: var(--tabH); z-index: 15; grid-template-columns: repeat(3, 1fr) !important; gap: 8px; padding: 14px 12px 16px;
    background: rgba(17,25,34,.98); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.45); justify-items: stretch; max-height: 55dvh; overflow-y: auto; }
  .tools-more .map-btn { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; min-height: 64px; font-size: .74rem; font-weight: 600; text-align: center; border-radius: 12px; background: var(--panel-2); }
  .tools-more .map-btn i { font-size: 1.2rem; }
  .tools-more .map-btn span { margin: 0; }

  /* atrybucja i pasek "nieoficjalne" nie zasłaniają mapy */
  .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib.maplibregl-compact { margin: 0 0 8px 8px; }
  .unoff { left: 52px; right: 58px; transform: none; max-width: none; bottom: 8px; font-size: .68rem; padding: 3px 6px 3px 10px; }
  .maplibregl-popup.docked { bottom: 10px !important; left: 8px !important; max-width: calc(100% - 64px) !important; z-index: 7; }
  .maplibregl-popup.docked .maplibregl-popup-content { max-height: 48dvh; }

  /* historia: panel odtwarzania przy dolnej krawędzi */
  body[data-tab="history"] .replay { left: 8px; right: 8px; bottom: 8px; }
  body[data-tab="history"] .legend, body[data-tab="history"] .unoff, body[data-tab="history"] .map-tools { display: none; }

  /* Sygnały: krótszy nagłówek, bez długiej notki (jest w Więcej) */
  .hero { padding: 16px; }
  .hero h1 { font-size: 1.3rem; }
  .hero-do { font-size: .98rem; }
  body[data-tab="signals"] #notes { display: none; }

  /* Więcej: ustawienia z językami, stopka jako zwykły tekst */
  body[data-tab="more"] #settingsCard { display: block; }
  body[data-tab="more"] .foot { padding: 0 16px calc(var(--tabH) + 20px); margin-top: -8px; }
  body:not([data-tab="more"]) .foot { display: none; }
}
@media (max-width: 959px) and (max-height: 500px) {
  :root { --topH: 48px; --tabH: calc(50px + env(safe-area-inset-bottom)); }
  .tabs button { min-height: 44px; grid-auto-flow: column; gap: 6px; }
  body[data-tab="map"] #hero { right: auto; max-width: 46vw; }
  body[data-tab="map"] .legend { display: none; }
}
@media (max-width: 959px) { body[data-tab="more"] #settingsCard { order: 3; } }
@media (max-width: 959px) {
  .tools-more .map-btn { align-content: center; }
  .replay { gap: 6px; padding: 8px 10px; }
  #replayTitle { display: none; }
  .replay { grid-template-columns: minmax(0, 1fr); }
  .replay-head { flex-wrap: wrap; gap: 6px 8px; }
  .replay-mode { white-space: nowrap; font-size: .7rem !important; }
  .rp-src { max-width: 8.5rem; }
  .replay-head .live-btn { padding: 6px 10px; white-space: nowrap; }
  .replay-time { font-size: .95rem; }
  .replay-ctl { flex-wrap: nowrap; gap: 4px; }
  .replay-ctl button { min-width: 0; flex: 1 1 0; padding: 0 2px; min-height: 40px; }
  #rpBack10, #rpFwd10 { display: none; }
  #replaySum { font-size: .76rem; }
}
@media (max-width: 959px) and (max-height: 500px) {
  .tabs button { display: flex; justify-content: center; align-items: center; }
}
.trust.verified{background:rgba(225,29,72,.15);color:#fb7185}

/* tryby wyglądu mapy: tylko obraz mapy, znaczniki zostają w kolorze */
body.fx-nvg .maplibregl-canvas { filter: grayscale(1) sepia(1) hue-rotate(58deg) saturate(4) brightness(.95) contrast(1.25); }
body.fx-flir .maplibregl-canvas { filter: grayscale(1) contrast(1.7) brightness(1.08); }
body.fx-crt .maplibregl-canvas { filter: saturate(1.25) contrast(1.1); }
body.fx-crt #map::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45)); }
.mbx-logo { display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 36px; z-index: 2; font: 700 12px/1 system-ui, sans-serif; letter-spacing: -.02em;
  color: #fff; text-decoration: none; background: rgba(0,0,0,.45); padding: 3px 7px; border-radius: 6px; }
body.mbx .mbx-logo { display: block; }
@media (max-width: 959px) { .mbx-logo { bottom: 40px; } }

.card.support { background: linear-gradient(135deg, #2a1f0b, var(--panel) 70%); border-color: #6b4d12; }
.card.support .btn { display: inline-block; text-decoration: none; background: #f0b429; color: #1a1200; margin-top: 4px; }
a.map-btn { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 959px) {
  #supportCard { display: none; }
  body[data-tab="more"] #supportCard { display: block; order: 2; }
  .tools-more a.map-btn { display: grid; }
}