.radar-panel { margin: 25px 0; overflow: hidden; padding: 0; border: 1px solid #c6ddd7; border-radius: 22px; background: #fff; }
.radar-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 25px 17px; }
.radar-head h2 { margin: 6px 0 8px; font-size: 28px; line-height: 1.15; }
.radar-head p { max-width: 620px; color: var(--muted); font-size: 17px; line-height: 1.45; }
.radar-live-label { flex-shrink: 0; padding: 8px 11px; border-radius: 8px; background: #eaf2f0; color: #365d56; font-size: 15px; font-weight: 700; }
.radar-map { position: relative; width: 100%; aspect-ratio: 600 / 360; min-height: 290px; overflow: hidden; background: #eaf4f1; }
.radar-map-art { display: block; width: 100%; height: 100%; }
.radar-country { fill: #f9fcfb; stroke: #bad6cc; stroke-width: 3; stroke-linejoin: round; }
.radar-route { fill: none; stroke: #00a99a; stroke-width: 8; stroke-linecap: round; opacity: .82; }
.radar-city circle { fill: #1a3431; }
.radar-city text { fill: #314d49; font: 700 15px 'Source Sans 3',sans-serif; }
.radar-pin { position: absolute; z-index: 1; display: grid; place-items: center; width: 45px; height: 45px; padding: 0; border: 3px solid #fff; border-radius: 15px; background: #162b29; color: #fff; box-shadow: 0 5px 14px rgb(10 40 35 / 25%); transform: translate(-50%, -50%); cursor: pointer; }
.radar-pin::after { position: absolute; inset: -8px; border: 2px solid #00bfae; border-radius: 20px; content: ''; opacity: .55; }
.radar-pin .icon { width: 25px; height: 25px; }
.radar-pin:hover,.radar-pin:focus-visible { background: #008e83; outline: 3px solid #0f3130; outline-offset: 3px; }
.radar-map-empty { position: absolute; left: 50%; top: 50%; max-width: 280px; padding: 13px 18px; border-radius: 12px; background: #fff; color: #233c38; box-shadow: 0 6px 18px rgb(18 46 41 / 12%); font-size: 17px; font-weight: 700; line-height: 1.35; text-align: center; transform: translate(-50%, -50%); }
.radar-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 25px 22px; }
.radar-footer strong { font-size: 18px; }
.radar-footer span { color: var(--muted); font-size: 15px; line-height: 1.4; }
.radar-footer .btn { flex-shrink: 0; }
.gps-panel { margin: 22px 0; padding: 24px; border: 1px solid #badbd3; border-radius: 20px; background: #e8f7f3; }
.gps-panel h2 { margin: 0 0 8px; font-size: 26px; }
.gps-panel p { max-width: 760px; margin: 0 0 15px; color: #34564f; font-size: 17px; line-height: 1.5; }
.gps-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 17px; font-size: 17px; font-weight: 700; }
.gps-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #758b87; }
.gps-dot.on { background: #008e83; box-shadow: 0 0 0 5px rgb(0 191 174 / 16%); }
.gps-panel .hint { margin-top: 13px; font-size: 15px; }
@media (max-width:700px) {
  .radar-head,.radar-footer { flex-direction: column; align-items: stretch; padding-left: 19px; padding-right: 19px; }
  .radar-head h2 { font-size: 26px; }
  .radar-map { min-height: 260px; }
  .radar-footer .btn { width: 100%; }
  .gps-panel { padding: 20px; }
}