/* =========================================================================
   NEBO redesign — "Industry", night version (Claude Design, Oct 2026).
   Loaded AFTER style.css: square corners, 1px lines, "+" registration marks
   on framed panels (.blueprint + <i class="corner tl|tr|bl|br">), Barlow
   Condensed for headings and numbers, Barlow for text, a calm blue-grey
   accent. Target / alert colours are unchanged (style.css :root).
   ========================================================================= */
:root {
  --bg: #0d1217;
  --panel: #0d1217;
  --panel-border: rgba(231, 231, 234, 0.16);
  --line: rgba(231, 231, 234, 0.16);
  --line-soft: rgba(231, 231, 234, 0.1);
  --text: #e7e7ea;
  --text-dim: #98989b;
  --text-mid: #b7b7ba;
  --text-faint: #7a7a7d;
  --accent: #94bce3;
  --accent-dark: #749dc4;
  --zone: #35e0ff;
  --alarm: #ff4d4f;
  --amber: #ffc83d;
  --live: #3ddc84;
  --font-h: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-b: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  font-family: var(--font-b);
}
html, body, #app { background: var(--bg); }
body { color: var(--text); font-family: var(--font-b); }
button, input, select { font-family: inherit; }

/* square everything in the app chrome (the map's own vector drawing is untouched) */
#app *:not(.leaflet-marker-icon):not(.leaflet-marker-icon *) { border-radius: 0 !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- "+" registration marks on framed panels ---- */
.blueprint { position: relative; }
.blueprint > .corner { position: absolute; width: 9px; height: 9px; color: var(--accent); pointer-events: none; z-index: 2; }
.blueprint > .corner::before, .blueprint > .corner::after { content: ''; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 4px; top: 0; width: 1px; height: 9px; }
.blueprint > .corner::after { top: 4px; left: 0; height: 1px; width: 9px; }
.corner.tl { left: -5px; top: -5px; } .corner.tr { right: -5px; top: -5px; }
.corner.bl { left: -5px; bottom: -5px; } .corner.br { right: -5px; bottom: -5px; }

/* ---- disclaimer + zone banner ---- */
#live-banner { background: var(--bg); color: var(--text-mid); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 400; padding: 6px 4px 6px 12px; justify-content: flex-start; text-align: left; gap: 8px; }
#live-banner span { flex: 1; }
#live-banner .lb-ico { width: 14px; height: 14px; flex: 0 0 auto; stroke: var(--amber); fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
#live-banner button { color: var(--text-dim); }
#zone-alert { font-family: var(--font-b); padding: 6px 12px; border: 1px solid var(--alarm); }
#zone-alert .za-line:first-child, #zone-alert > b { font-family: var(--font-h); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; }
#zone-alert .za-line + .za-line { font-size: 13px; font-weight: 500; margin-top: 1px; }
#zone-alert .za-sub { font-family: var(--font-b); font-size: 12px; font-weight: 400; opacity: 0.85; }
#zone-alert.zone-near { background: rgba(255, 77, 79, 0.10); color: var(--text); border-color: var(--alarm); }
#zone-alert.zone-in { background: #ff5a4f; color: #1c0503; border-color: #ff5a4f; }
#zone-alert.zone-siren-only { background: rgba(255, 200, 61, 0.10); color: var(--text); border-color: var(--amber); }

/* ---- search bar ---- */
#search-wrap { background: var(--panel); border: 1px solid var(--line); }
#search-input { background: transparent; border: 0; box-shadow: none; height: 46px; font-size: 15px; padding: 0 92px 0 40px; color: var(--text); }
#search-input::placeholder { color: var(--text-dim); }
#search-input:focus { border: 0; }
#search-wrap:focus-within { border-color: var(--accent); }
#search-icon { stroke: var(--text-dim); stroke-width: 1.5; }
#search-clear { right: 62px; }
#status-dot { width: 7px; height: 7px; right: 48px; box-shadow: none; background: var(--text-faint); }
#status-dot.live { background: var(--live); box-shadow: none; }
#status-dot.error { background: var(--alarm); box-shadow: none; }
#status-live { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--font-h); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; color: var(--text-faint); pointer-events: none; }
#status-dot.live + #status-live { color: var(--live); }
#status-dot.error + #status-live { color: var(--alarm); }
#search-results { top: 52px; background: var(--panel); border: 1px solid var(--line); box-shadow: none; }
.search-item { border-bottom: 1px solid var(--line-soft); }
.search-item:hover, .search-item.active { background: rgba(148, 188, 227, 0.10); }
#brand { background: var(--panel); border: 1px solid var(--line); box-shadow: none; }
#brand-name { font-family: var(--font-h); font-weight: 700; color: var(--accent); letter-spacing: 0.18em; font-size: 18px; }

/* ---- counters by type, under the search ---- */
#type-counters {
  position: absolute; top: 66px; left: 10px; right: 10px; max-width: 440px; z-index: 1290;
  display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border: 1px solid var(--line);
}
#type-counters .tc { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-left: 1px solid var(--line-soft); min-width: 0; }
#type-counters .tc:first-child { border-left: 0; }
#type-counters .tc i { width: 8px; height: 8px; flex: 0 0 auto; }
#type-counters .tc b { font-family: var(--font-h); font-weight: 600; font-size: 22px; line-height: 1; color: var(--text); }
#type-counters .tc span { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#type-counters .tc.zero { opacity: 0.45; }
#type-counters [data-kind="jet"] i { background: var(--shahed-jet); }
#type-counters [data-kind="shahed"] i { background: var(--shahed); }
#type-counters [data-kind="raketa"] i { background: var(--raketa); }
#type-counters [data-kind="ballistic"] i { background: var(--ballistic); }
#search-wrap:focus-within ~ #type-counters { display: none; }

/* ---- an oblast with targets but no exact place (new logic) ---- */
#region-plate {
  position: absolute; left: 10px; top: 108px; z-index: 1250; max-width: calc(100% - 80px);
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
#region-plate[hidden] { display: none; }
#region-plate .rp { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; background: rgba(13, 18, 23, 0.92); border: 1px solid var(--amber); font-size: 12px; line-height: 1.25; color: var(--text-mid); }
#region-plate .rp b { font-family: var(--font-h); font-weight: 600; font-size: 22px; color: var(--amber); line-height: 1; }

/* ---- locate ---- */
#locate-btn { background: var(--panel); border: 1px solid var(--line); box-shadow: none; }
#locate-btn svg { stroke: var(--text); stroke-width: 1.5; }
#locate-btn:active { background: rgba(148, 188, 227, 0.12); }
#toast { background: var(--panel); border: 1px solid var(--line); box-shadow: none; font-size: 13.5px; }

/* ---- bottom navigation ---- */
@media all {
  #bottom-nav { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border-top: 1px solid var(--line); }
  #bottom-nav button { font-family: var(--font-h); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: var(--text-mid); border-left: 1px solid var(--line-soft); }
  #bottom-nav button:first-child { border-left: 0; }
  #bottom-nav svg { stroke-width: 1.5; }
  #bottom-nav button.active { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
}
.nav-badge { min-width: 18px; height: 16px; line-height: 16px; font-size: 11px; font-weight: 700; padding: 0 4px; font-family: var(--font-b); }
#nav-tracks-badge { background: var(--shahed-jet); color: #fff; }
#nav-zones-badge { background: var(--zone); color: #04161b; }

/* ---- sheet / side panel ---- */
#sidebar { background: var(--panel); border-color: rgba(231, 231, 234, 0.22); }
@media all {
  #sidebar { border-top: 1px solid rgba(231, 231, 234, 0.22); box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.6); }
  #sidebar::before { width: 44px; height: 4px; margin-left: -22px; background: rgba(231, 231, 234, 0.3); }
}
#sidebar-header { border-bottom: 1px solid var(--line); }
#sheet-title { font-family: var(--font-h); font-weight: 600; font-size: 26px; letter-spacing: 0.01em; }
#sidebar-close { width: 38px; height: 38px; border: 1px solid var(--line); color: var(--text-mid); font-size: 18px; }
.sb-tab { font-family: var(--font-h); font-weight: 600; font-size: 16px; color: var(--text-dim); border: 1px solid transparent; }
.sb-tab.active { color: var(--accent); background: transparent; border-color: transparent; box-shadow: inset 0 -2px 0 var(--accent); }
.zb-count { background: var(--zone); color: #04161b; }

/* ---- target list ---- */
#tracks-head { border-bottom: 1px solid var(--line); color: var(--text-mid); font-size: 13px; font-weight: 400; padding: 10px 14px; }
#tracks-head #tracks-count { font-weight: 600; color: var(--text); }
#track-list { padding: 12px 12px 4px; }
.track-card {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0; padding: 0; margin: 0 0 12px;
  background: transparent; border: 1px solid var(--line); cursor: pointer;
}
.track-card:hover { border-color: rgba(148, 188, 227, 0.5); }
.track-card .tc-ico { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line-soft); position: relative; }
.track-card .tc-ico svg { width: 28px; height: 28px; }
.track-card .tc-body { padding: 10px 12px 10px 12px; min-width: 0; }
.tc-type { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tc-type .tag-zone { margin-left: auto; font-size: 10.5px; letter-spacing: 0.06em; padding: 1px 6px; background: rgba(53, 224, 255, 0.14); color: #9eeaff; }
.tc-route { font-family: var(--font-h); font-weight: 600; font-size: 20px; line-height: 1.15; margin-top: 3px; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tc-route .arr { color: var(--text-dim); font-weight: 500; }
.count-badge { font-family: var(--font-b); font-size: 12px; font-weight: 700; padding: 0 5px; line-height: 18px; border: 1px solid currentColor; }
.track-card-meta { font-size: 12.5px; color: var(--text-mid); margin-top: 4px; line-height: 1.4; }
.track-card-src { font-size: 12px; color: var(--text-faint); font-style: italic; margin-top: 4px; border-top: 0; padding-top: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.track-card.in-zone { border-color: rgba(255, 77, 79, 0.6); }
.track-card.falling { border-color: var(--alarm); }
.track-card.status-lost { opacity: 0.5; }
.alt-tag { display: inline-block; font-family: var(--font-b); font-size: 11px; font-weight: 700; padding: 0 5px; line-height: 17px; margin-left: 2px; }
.alt-tag.descending { border: 1px solid var(--amber); color: var(--amber); }
.alt-tag.falling { background: var(--alarm); color: #1c0503; }
.empty-state { color: var(--text-dim); }
.empty-state b { font-family: var(--font-h); font-weight: 600; font-size: 20px; }

/* ---- map markers: altitude badges ---- */
.alt-badge { width: 17px; height: 17px; line-height: 15px; font-size: 11px; font-weight: 900; border: 1.5px solid #0b0f10; top: -2px; right: -2px; font-family: var(--font-b); }
.alt-badge.descending { background: var(--amber); color: #231600; }
.alt-badge.falling { background: var(--alarm); color: #fff; }
.fall-corners { position: absolute; inset: 2px; pointer-events: none; }
.fall-corners i { position: absolute; width: 8px; height: 8px; border-color: var(--alarm); border-style: solid; border-width: 0; }
.fall-corners i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.fall-corners i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.fall-corners i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.fall-corners i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.seq-badge { background: var(--panel); border: 1px solid var(--line); font-family: var(--font-b); border-radius: 0 !important; }
.alt-badge { border-radius: 0 !important; }

/* ---- target detail card (instead of the Leaflet popup) ---- */
#track-detail {
  position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 1450; max-width: 440px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
}
#track-detail[hidden] { display: none; }
@media (min-width: 721px) { #track-detail { right: auto; width: 420px; } }
.td-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px; gap: 12px; padding: 12px 12px 10px; align-items: start; }
.td-ico { width: 44px; height: 44px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; position: relative; }
.td-ico svg { width: 30px; height: 30px; }
.td-type { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.td-where { font-family: var(--font-h); font-weight: 600; font-size: 24px; line-height: 1.1; margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.td-sub { font-size: 13px; color: var(--text-mid); margin-top: 3px; }
.td-close { width: 34px; height: 34px; background: none; border: 1px solid var(--line); color: var(--text-mid); font-size: 16px; cursor: pointer; }
.td-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.td-cell { padding: 8px 12px; border-left: 1px solid var(--line-soft); }
.td-cell:first-child { border-left: 0; }
.td-cell small { display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.td-cell b { font-family: var(--font-h); font-weight: 600; font-size: 22px; line-height: 1.15; }
.td-cell b em { font-family: var(--font-b); font-style: normal; font-weight: 400; font-size: 13px; color: var(--text-mid); margin-left: 2px; }
#track-detail .history-pred { padding: 8px 12px 0; font-size: 12.5px; color: #b5d9fd; line-height: 1.4; }
.td-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 10px; font-size: 12px; color: var(--text-dim); }
.td-src-btn { background: none; border: 0; color: var(--accent); font-family: var(--font-h); font-weight: 600; font-size: 14px; cursor: pointer; padding: 4px 0; white-space: nowrap; }
.td-src { display: none; padding: 0 12px 12px; font-size: 12.5px; line-height: 1.45; color: var(--text-mid); font-style: italic; max-height: 30vh; overflow-y: auto; -webkit-user-select: text; user-select: text; }
.td-src small { display: block; margin-top: 6px; font-style: normal; color: var(--text-faint); font-size: 11px; }
#track-detail.src-open .td-src { display: block; }
#track-detail.status-lost .td-ico svg { opacity: 0.55; }

/* ---- my zones ---- */
#zones-chips { padding: 4px 14px 10px; gap: 8px; }
.zone-chip { background: transparent; border: 1px solid var(--zone); padding: 6px 6px 6px 10px; font-size: 13px; color: var(--text); }
.zone-chip b { color: var(--text-dim); }
.zone-chip.siren { border-color: var(--alarm); }
.zone-chip.siren::before { content: ''; width: 7px; height: 7px; background: var(--alarm); }
#radius-row { color: var(--text-dim); font-size: 12px; letter-spacing: 0.02em; }
#zone-radius { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#radius-seg { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); margin-top: 6px; }
#radius-seg button { background: none; border: 0; border-left: 1px solid var(--line-soft); color: var(--text-mid); font-family: var(--font-h); font-weight: 600; font-size: 15px; min-height: 40px; cursor: pointer; }
#radius-seg button:first-child { border-left: 0; }
#radius-seg button.on { background: var(--accent); color: var(--bg); font-weight: 700; }
#push-box { background: transparent; border: 1px solid var(--line); }
#push-title { font-family: var(--font-h); font-weight: 600; font-size: 17px; }
#push-toggle { background: var(--accent); color: var(--bg); font-family: var(--font-h); font-weight: 700; font-size: 15px; padding: 8px 14px; }
#push-toggle.on { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
#kyiv-block { background: transparent; border: 0; padding: 0; margin: 0 14px 14px; }
#kyiv-head { font-family: var(--font-h); font-weight: 600; font-size: 18px; }
.zone-group-btn { border: 1px solid var(--line); color: var(--text-mid); }
#kyiv-grid, .km-grid { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
#kyiv-grid button, .km-grid button { background: transparent; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 44px; text-align: left; padding: 10px 12px; font-size: 13.5px; color: var(--text-mid); }
#kyiv-grid button:hover, .km-grid button:hover { background: rgba(148, 188, 227, 0.08); border-color: var(--line); }
#kyiv-grid button.on, .km-grid button.on { background: rgba(53, 224, 255, 0.12); color: #bff4ff; box-shadow: inset 0 0 0 1px var(--zone); font-weight: 600; }
#kyiv-grid button.siren::after, .km-grid button.siren::after { content: ''; top: 50%; right: 10px; width: 7px; height: 7px; margin-top: -3.5px; background: var(--alarm); font-size: 0; }
#kyiv-micro details { border-top: 1px solid var(--line); }
#zones-filter { background: transparent; border: 1px solid var(--line); }
#zones-filter:focus { border-color: var(--accent); }
#zones-clear { border: 1px solid var(--line); color: var(--text-mid); font-family: var(--font-h); font-weight: 600; font-size: 14px; }
#zones-list { border-top: 1px solid var(--line); }
details.zone-group > summary { font-family: var(--font-h); font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--line-soft); }
.zone-row:hover { background: rgba(148, 188, 227, 0.08); }
.zone-row input { accent-color: var(--zone); }

/* ---- settings ("Ще") ---- */
.set-block { background: transparent; border: 0; margin: 0 14px; padding: 14px 0 6px; }
.set-title { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.set-row { padding: 12px 0; border-top: 0 !important; border-bottom: 1px solid var(--line); flex-direction: row-reverse; justify-content: space-between; gap: 14px; }
.set-row b { font-family: var(--font-b); font-weight: 600; font-size: 14.5px; }
.set-row small { color: var(--text-dim); font-size: 12px; }
.tag-test { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; padding: 0 5px; margin-left: 6px; border: 1px solid var(--accent); color: var(--accent); vertical-align: 2px; }
.set-row input[type=checkbox] {
  appearance: none; -webkit-appearance: none; width: 44px; height: 24px; margin: 2px 0 0; flex: 0 0 auto;
  border: 1px solid rgba(231, 231, 234, 0.3); background: none; position: relative; cursor: pointer;
}
.set-row input[type=checkbox]::after { content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: var(--text-faint); transition: left 0.12s ease; }
.set-row input[type=checkbox]:checked { border-color: var(--accent); background: rgba(148, 188, 227, 0.2); }
.set-row input[type=checkbox]:checked::after { left: 22px; background: var(--accent); }
#sound-test, #install-btn { margin-top: 12px; background: transparent; color: var(--text); border: 1px solid var(--line); font-family: var(--font-h); font-weight: 600; font-size: 16px; padding: 11px; }
#install-btn { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.set-text { font-size: 13px; color: var(--text-mid); padding-top: 10px; }
.set-block#legend { border-top: 0; font-size: 12.5px; color: var(--text); padding-bottom: 10px; }
#legend .legend-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 10px; }
#legend .legend-row { margin: 0; padding: 9px 10px; gap: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.25; }
#legend .legend-dot { width: 16px; height: 16px; background: none !important; flex: 0 0 auto; }
#legend .legend-dot svg { width: 16px; height: 16px; display: block; }
#legend .legend-swatch { width: 16px; height: 12px; flex: 0 0 auto; }
#legend .legend-note { font-size: 11.5px; color: var(--text-faint); margin-top: 10px; }

/* ---- leaflet chrome ---- */
.leaflet-container { background: #0c1215; font-family: var(--font-b); }
.leaflet-control-attribution { background: rgba(13, 18, 23, 0.7) !important; }
.zone-tip, .oblast-tip { background: rgba(13, 18, 23, 0.92) !important; border: 1px solid var(--line) !important; }

/* ---- wide screens: the same bottom navigation + sheet as on phones (owner's
   choice); the sheet becomes a column on the right instead of full width ---- */
@media (min-width: 721px) {
  #sidebar { left: auto; right: 12px; width: 440px; height: 86%; border-left: 1px solid rgba(231, 231, 234, 0.22); border-right: 1px solid rgba(231, 231, 234, 0.22); }
  #bottom-nav button { flex-direction: row; gap: 8px; font-size: 15px; min-height: 52px; }
  #type-counters { max-width: 440px; }
}

/* a position guessed from a heading only ("на підльоті до X") */
.approx-tag { font-family: var(--font-b); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; padding: 0 5px; line-height: 17px; border: 1px dashed var(--text-dim); color: var(--text-dim); }
.tc-type .approx-tag { margin-left: 6px; }

/* Smooth targets (owner: no blinking, no hard appear/disappear). One place sets
   a target's visibility — its marker opacity, from how old its last report is
   (trackOpacity() in app.js) — so the old confirmed-blink and the pale
   "unconfirmed" icon are off, and opacity changes glide. */
.icon-confirmed { animation: none !important; }
.icon-unconfirmed { opacity: 1 !important; }
.leaflet-marker-icon.track-icon { transition: opacity 1.2s ease; }
.leaflet-overlay-pane path { transition: stroke-opacity 1.2s ease; }

/* estimate mode: no report for a while, the target is drawn where it has
   probably flown — the silhouette turns into an outline (own take) */
/* (the see-through outline for a drawn-ahead target is gone: on the satellite
   map it smeared into a pink glow — owner, 2026-10-10; the card still says
   "розрахунок") */
.est-tag { font-family: var(--font-b); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; padding: 0 5px; line-height: 17px; margin-left: 6px; border: 1px dotted var(--text-dim); color: var(--text-dim); }
.leaflet-overlay-pane path { transition: stroke-opacity 1.2s ease, fill-opacity 1.2s ease; }

/* the nose turns every animation frame (app.js stepTrack) — glide between them */
.track-icon .trk-rot { transition: transform 0.14s linear; }
/* silent for a while: blink from the type colour to grey until it is gone
   (owner, 2026-10-10 — replaces the quiet fade) */
@keyframes staleBlink {
  0%, 100% { fill: var(--trk-c); }
  50% { fill: #8a9396; }
}
.track-icon.is-stale svg g { animation: staleBlink 1.1s ease-in-out infinite; }
.track-icon.is-stale.is-lost svg g { animation-duration: 1.6s; }

/* routes blink grey with a target that is about to go (owner, 2026-10-10) */
@keyframes staleLine {
  0%, 100% { stroke: var(--trk-line, currentColor); }
  50% { stroke: #8a9396; }
}
.leaflet-overlay-pane path.trk-line.is-stale { animation: staleLine 1.1s ease-in-out infinite; }
/* the opened target stands out: a light halo on the icon, its route on top */
.track-icon.is-sel .trk-rot svg { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255, 255, 255, 0.75)); }
.track-icon.is-sel { z-index: 900 !important; }

/* the dead-reckoned guess under the reported place (card) */
.td-sub.td-est { font-style: italic; opacity: 0.75; }

/* card: previous place before the arrow, a "just appeared" tag */
.td-from { font-weight: 500; opacity: 0.6; }
.new-tag { font-family: var(--font-b); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; padding: 0 5px; line-height: 17px; margin-left: 6px; border: 1px solid var(--warn); color: var(--warn); }

/* "Мої зони" (2026-10-11): collapsible oblast sections, a short how-to, and the
   radius / push settings tucked into their own fold */
#zones-intro { margin: 0 14px 12px; padding: 10px 12px; border: 1px solid var(--line); font-size: 13px; color: var(--text-mid); line-height: 1.45; }
#zones-intro b { display: block; color: var(--text); font-family: var(--font-h); font-size: 15px; margin-bottom: 4px; }
#zones-intro ol { margin: 0; padding-left: 18px; }
#zones-intro li { margin: 2px 0; }
#zones-tools { padding: 0 14px 12px; }
#zones-tree { margin: 0 14px 12px; border-top: 1px solid var(--line); }
details.zone-oblast { border-bottom: 1px solid var(--line); }
details.zone-oblast[hidden] { display: none; }
details.zone-oblast > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--text); }
details.zone-oblast > summary::-webkit-details-marker { display: none; }
details.zone-oblast > summary::before { content: '▸'; color: var(--text-dim); width: 12px; flex: 0 0 auto; }
details.zone-oblast[open] > summary::before { content: '▾'; }
.zo-name { flex: 1; min-width: 0; }
.zo-count { font-size: 12px; font-weight: 500; color: var(--text-dim); }
.zo-count.has-picks { color: var(--accent); font-weight: 700; }
.zo-alert { font-size: 13px; }
.zo-body { padding: 0 0 8px; }
#zones-tree #kyiv-block { margin: 0 0 10px; }
#zones-tree #zones-list { padding: 0 0 8px 10px; }
details.zone-settings { margin: 0 14px 16px; border: 1px solid var(--line); }
details.zone-settings > summary { padding: 0 12px; }
details.zone-settings #radius-row { margin: 4px 12px 10px; }
details.zone-settings #push-box { margin: 0 12px 12px; }
/* the empty-state line repeats the how-to above it */
#zones-chips .zones-empty { display: none; }
#zones-chips:empty { display: none; }
#zones-intro { font-size: 12.5px; }
#zones-intro b { display: inline; margin: 0 6px 0 0; font-size: 14px; }

/* one-time "what's new" dialog, centred (2026-10-11) */
#whats-new { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5, 8, 9, 0.74); backdrop-filter: blur(3px); }
#whats-new[hidden] { display: none; }
.wn-card { position: relative; width: 100%; max-width: 340px; padding: 22px 20px 18px; background: var(--bg); border: 1px solid var(--accent); text-align: left; }
.wn-spark { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.wn-card h3 { margin: 0 0 10px; font-family: var(--font-h); font-size: 20px; font-weight: 600; color: var(--text); }
.wn-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--text-mid); }
#wn-ok { display: block; width: 100%; min-height: 48px; margin-top: 14px; background: var(--accent); color: #05181c; border: 0; font-size: 16px; font-weight: 700; cursor: pointer; }

/* a reported group (x3): only the first marker is placed; the rest are guesses (2026-10-24) */
.trk-rot.icon-guess { opacity: 0.42 !important; filter: grayscale(0.5); }
.seq-badge.guess { background: transparent; border: 1px dashed var(--text-mid, #9fb0bf); color: var(--text-mid, #9fb0bf); }

/* ---- car route check ---- */
#route-btn { position: absolute; right: 12px; bottom: 92px; z-index: 1250; width: 46px; height: 46px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; }
#route-btn svg { width: 24px; height: 24px; stroke: var(--text); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#route-btn.on { border-color: var(--accent); }
#route-btn.on svg { stroke: var(--accent); }
#route-panel { position: absolute; left: 10px; right: 10px; top: 112px; max-width: 440px; max-height: calc(100% - 200px); overflow-y: auto; z-index: 1300; background: var(--panel); border: 1px solid var(--line); padding: 10px 12px; font-size: 13.5px; }
#route-panel[hidden] { display: none; }
#route-panel.collapsed { opacity: 0; pointer-events: none; }
#route-panel .rp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-family: var(--font-h); letter-spacing: 0.04em; }
#route-panel .rp-head button { background: none; border: 0; color: var(--text-mid); font-size: 16px; cursor: pointer; }
#route-panel .rp-row { display: flex; gap: 6px; margin-bottom: 6px; }
#route-panel input { flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--text); padding: 8px; font-size: 16px; }
#route-panel .rp-row button { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); color: var(--text); padding: 6px 10px; cursor: pointer; }
#route-go { flex: 1; background: var(--accent) !important; color: #06101a !important; font-weight: 700; }
#route-sugg { border: 1px solid var(--line); margin-bottom: 6px; max-height: 190px; overflow-y: auto; }
#route-sugg button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--text); padding: 7px 9px; cursor: pointer; }
#route-sugg small { display: block; color: var(--text-mid); }
#route-sugg .rs-msg { padding: 8px; color: var(--text-mid); }
#route-status { margin: 6px 0; font-weight: 600; }
#route-status.ok { color: #35e08a; }
#route-status.bad { color: #ff6a3d; }
#route-alts { display: flex; flex-direction: column; gap: 4px; }
#route-alts button { text-align: left; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--text); padding: 6px 8px; cursor: pointer; }
#route-alts button.on { border-color: var(--accent); }
#route-threats { list-style: none; margin: 8px 0 0; padding: 0; }
#route-threats li { padding: 6px 0; border-top: 1px solid var(--line-soft); cursor: pointer; }
#route-threats li span { display: block; color: var(--text-mid); font-size: 12.5px; }
#route-panel .rp-note { margin-top: 8px; font-size: 11.5px; color: var(--text-mid); }
#route-follow { flex: 1; }
#route-follow.on { border-color: var(--accent) !important; color: var(--accent) !important; }
#route-ahead { margin: 4px 0; color: var(--text-mid); font-size: 13px; }
#route-ahead b { color: var(--text); }
.car-icon { background: none; border: 0; }
.car-arrow { width: 36px; height: 36px; transition: transform 0.4s linear; }
.car-arrow svg { width: 100%; height: 100%; fill: #4da3ff; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.7)); }
.route-lm { background: var(--panel); border: 1px solid var(--line); color: var(--text); font-size: 12px; padding: 1px 5px; box-shadow: none; }
.route-lm::before { display: none; }
.rp-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-mid); margin: 4px 0; }
.rp-check input { margin-top: 2px; }
#route-gps { color: #ff6a3d; font-weight: 600; margin: 4px 0; }
#route-gps[hidden] { display: none; }
#zoom-btns { position: absolute; right: 12px; bottom: 150px; z-index: 1250; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); }
#zoom-btns button { width: 46px; height: 44px; background: none; border: 0; color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; }
#zoom-btns button + button { border-top: 1px solid var(--line-soft); }
#zoom-btns button:active { background: rgba(148, 188, 227, 0.12); }
#route-rotate { flex: 1; }
#route-rotate.on { border-color: var(--accent) !important; color: var(--accent) !important; }
#map.map-rot { transition: transform 0.9s ease-out; }
/* labels stay upright on the turned map (individual `rotate` composes with Leaflet's translate) */
#map.map-rot .leaflet-tooltip { rotate: var(--ctr, 0deg); }