.radar-hero__box { position: relative; overflow: hidden; }
.radar-hero__box::after {
  content: "✈";
  position: absolute;
  right: clamp(24px, 8vw, 110px);
  top: 50%;
  transform: translateY(-50%) rotate(-12deg);
  font-size: clamp(86px, 13vw, 190px);
  line-height: 1;
  opacity: .09;
  pointer-events: none;
}
.radar-hero__box > * { position: relative; z-index: 1; }
.radar-hero__box h1 { max-width: 900px; }
.radar-hero__box p { max-width: 850px; }
.radar-hero__facts { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.radar-hero__facts span {
  display:inline-flex; align-items:center; min-height:34px; padding:7px 11px;
  border:1px solid rgba(255,255,255,.22); border-radius:999px;
  background:rgba(255,255,255,.10); color:#fff; font-size:13px; font-weight:800;
}

.radar-tool {
  overflow:hidden; border:1px solid #dfe7f2; border-radius:24px; background:#fff;
  box-shadow:0 18px 54px rgba(15,35,70,.10);
}
.radar-toolbar {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,440px); gap:26px;
  align-items:end; padding:22px 24px 20px;
}
.radar-toolbar__main h2 { margin:4px 0 7px; }
.radar-toolbar__main p { margin:0; color:#64748b; }
.radar-search label { display:block; margin:0 0 7px; font-size:13px; font-weight:900; color:#24344e; }
.radar-search__row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.radar-search input {
  width:100%; min-width:0; height:46px; padding:0 14px; border:1px solid #cfd9e7;
  border-radius:12px; background:#fff; color:#14213d; font:inherit; outline:none;
}
.radar-search input:focus { border-color:#2d7df6; box-shadow:0 0 0 3px rgba(45,125,246,.13); }
.radar-search button,
.radar-route-button {
  min-height:46px; padding:0 16px; border:0; border-radius:12px; cursor:pointer;
  background:#0c73fe; color:#fff; font:inherit; font-weight:900;
}
.radar-search button:hover,.radar-route-button:hover { filter:brightness(.94); }
.radar-search button:disabled,.radar-route-button:disabled { opacity:.65; cursor:wait; }
.radar-search small { display:block; margin-top:7px; color:#738197; font-size:12px; }

.radar-statusbar {
  display:flex; flex-wrap:wrap; align-items:center; gap:9px 14px; min-height:44px;
  padding:9px 24px; border-top:1px solid #edf1f6; border-bottom:1px solid #e1e8f1;
  background:#f8fafc; color:#607086; font-size:13px;
}
.radar-statusbar strong { color:#1b2b44; }
.radar-live-dot { width:9px; height:9px; border-radius:50%; background:#16a36a; box-shadow:0 0 0 5px rgba(22,163,106,.10); }
.radar-map-wrap { position:relative; min-height:620px; background:#dce8f3; }
.radar-map { width:100%; height:620px; }
.radar-loading,
.radar-message {
  position:absolute; z-index:8; left:50%; top:18px; transform:translateX(-50%);
  max-width:min(680px,calc(100% - 32px)); padding:10px 14px; border-radius:12px;
  background:rgba(255,255,255,.95); border:1px solid rgba(190,204,220,.85);
  box-shadow:0 8px 26px rgba(18,38,70,.14); color:#20324e; font-size:13px; font-weight:700;
}
.radar-loading[hidden],.radar-message[hidden] { display:none !important; }
.radar-message--error { color:#8f2525; border-color:#efc5c5; background:#fff7f7; }
.radar-user-note {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 18px; padding:11px 20px;
  border-top:1px solid #e3eaf3; background:#fff; color:#738197; font-size:12px;
}
.radar-user-note { color:#66758b; font-size:13px; }

.radar-plane {
  position:relative; display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  padding:0; border:0; border-radius:50%; background:#0b65d8; color:#fff; cursor:pointer;
  box-shadow:0 3px 10px rgba(5,35,75,.28); transition:transform .15s ease,box-shadow .15s ease;
}
.radar-plane:hover,.radar-plane--selected { transform:scale(1.14); box-shadow:0 5px 15px rgba(5,35,75,.38); z-index:3; }
.radar-plane__icon { display:block; font-size:17px; line-height:1; transform-origin:50% 50%; }
.radar-plane__label {
  position:absolute; left:50%; top:31px; transform:translateX(-50%); display:none;
  padding:3px 5px; border-radius:5px; background:rgba(9,24,49,.84); color:#fff;
  font-size:10px; font-weight:800; line-height:1; white-space:nowrap; pointer-events:none;
}
.radar-plane:hover .radar-plane__label,.radar-plane--selected .radar-plane__label { display:block; }

.radar-popup { min-width:230px; color:#17243a; }
.radar-popup__title { display:block; font-size:18px; line-height:1.2; }
.radar-popup__sub { margin:3px 0 10px; color:#718096; font-size:12px; }
.radar-popup dl { margin:10px 0 12px; }
.radar-popup dl > div { display:flex; justify-content:space-between; gap:15px; padding:5px 0; border-bottom:1px solid #edf1f6; }
.radar-popup dt { color:#718096; }
.radar-popup dd { margin:0; font-weight:800; text-align:right; }
.radar-route-button { width:100%; min-height:38px; font-size:13px; }
.radar-route-result { display:grid; gap:3px; margin-top:9px; font-size:12px; }
.radar-route-result strong { font-size:13px; }
.radar-route-result span { color:#718096; }
.radar-route-result a { margin-top:5px; color:#0c67d9; font-weight:900; }

.radar-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.radar-steps article { position:relative; padding:20px; border:1px solid #dfe7f2; border-radius:18px; background:#fff; }
.radar-steps article > span {
  display:grid; place-items:center; width:34px; height:34px; margin-bottom:13px; border-radius:10px;
  background:#eaf3ff; color:#0b62cf; font-weight:950;
}
.radar-steps strong { display:block; margin-bottom:7px; color:#15243b; font-size:16px; }
.radar-steps p { margin:0; color:#66758b; font-size:14px; line-height:1.55; }
.radar-explain { align-items:stretch; }
.radar-checklist { margin-top:14px; }
.radar-info-card {
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr); gap:22px; align-items:stretch;
  padding:26px; border:1px solid #dfe7f2; border-radius:22px; background:#fff;
}
.radar-info-card h2 { margin-top:4px; }
.radar-info-card p { color:#596a82; line-height:1.65; }
.radar-info-card__aside {
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:22px;
  border-radius:17px; background:#eef6ff;
}
.radar-info-card__aside strong { color:#14213d; font-size:18px; }
.radar-info-card__aside .button { margin-top:8px; text-decoration:none; }

@media (max-width: 900px) {
  .radar-toolbar { grid-template-columns:1fr; align-items:start; }
  .radar-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .radar-info-card { grid-template-columns:1fr; }
  .radar-map-wrap,.radar-map { min-height:560px; height:560px; }
}

@media (max-width: 620px) {
  .radar-hero__box::after { right:-28px; opacity:.065; }
  .radar-toolbar { padding:18px 16px 16px; gap:18px; }
  .radar-search__row { grid-template-columns:1fr; }
  .radar-search button { width:100%; }
  .radar-statusbar { padding:9px 16px; }
  .radar-map-wrap,.radar-map { min-height:520px; height:520px; }
  .radar-user-note { padding:11px 16px; }
  .radar-plane { width:28px; height:28px; }
  .radar-steps { grid-template-columns:1fr; }
  .radar-info-card { padding:18px; }
  .radar-info-card__aside { padding:18px; }
}


/* v4: собственная slippy-map без внешней JS-библиотеки */
.radar-map--vanilla { position:relative; overflow:hidden; cursor:grab; background:#dce8f3; touch-action:none; user-select:none; }
.radar-map--vanilla.radar-map--dragging { cursor:grabbing; }
.radar-tiles,.radar-planes { position:absolute; inset:0; overflow:hidden; }
.radar-tiles { z-index:1; background:#dce8f3; }
.radar-planes { z-index:3; pointer-events:none; }
.radar-tile { position:absolute; width:256px; height:256px; max-width:none !important; border:0; pointer-events:none; user-select:none; }
.radar-plane { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; z-index:4; }
.radar-plane:hover,.radar-plane--selected { transform:translate(-50%,-50%) scale(1.14); }
.radar-map-controls { position:absolute; z-index:7; top:14px; right:14px; display:flex; flex-direction:column; overflow:hidden; border-radius:10px; box-shadow:0 4px 14px rgba(14,35,65,.20); }
.radar-map-controls button { width:38px; height:38px; border:0; border-bottom:1px solid #dce4ed; background:#fff; color:#13233f; font:700 24px/1 Arial,sans-serif; cursor:pointer; }
.radar-map-controls button:last-child { border-bottom:0; }
.radar-map-controls button:hover { background:#f1f6fb; }
.radar-map-attribution { position:absolute; z-index:6; right:6px; bottom:5px; padding:3px 6px; border-radius:4px; background:rgba(255,255,255,.88); color:#526279; font-size:10px; line-height:1.2; }
.radar-map-attribution a { color:#245e9b; }
.radar-detail-card { position:absolute; z-index:9; left:14px; bottom:14px; width:min(330px,calc(100% - 28px)); padding:15px 16px; border:1px solid #d8e1ec; border-radius:14px; background:rgba(255,255,255,.97); box-shadow:0 10px 30px rgba(16,38,70,.23); color:#17243a; }
.radar-detail-card[hidden] { display:none !important; }
.radar-detail-card__close { position:absolute; right:8px; top:7px; width:30px; height:30px; border:0; background:transparent; color:#66768d; font-size:25px; line-height:1; cursor:pointer; }
.radar-detail-card__title { display:block; padding-right:30px; font-size:20px; color:#102342; }
.radar-detail-card__meta { display:block; margin-top:2px; color:#64748b; font-size:12px; }
.radar-detail-card dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0 0; }
.radar-detail-card dl div { padding:8px 9px; border-radius:9px; background:#f4f7fb; }
.radar-detail-card dt { color:#718096; font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.radar-detail-card dd { margin:2px 0 0; color:#16243d; font-size:13px; font-weight:800; }
@media (max-width:620px){ .radar-detail-card { left:8px; bottom:8px; width:calc(100% - 16px); } }

/* v7: плотный Canvas-рендер самолётов без тысяч DOM-элементов */
.radar-plane-canvas {
  position:absolute; inset:0; z-index:4; width:100%; height:100%;
  pointer-events:none; user-select:none;
}
.radar-map--canvas { cursor:grab; }
.radar-map--canvas.radar-map--dragging { cursor:grabbing !important; }
.radar-map-controls button[data-map-home] { font-size:18px; }
.radar-detail-card { z-index:10; }
@media (max-width:620px) {
  .radar-map-badge { left:8px; top:8px; }
  .radar-map-controls { top:8px; right:8px; }
}