.radar-classic-page .site-header { position: relative; z-index: 3000; }
.radar-classic-page .main-shell { position: relative; z-index: 1; overflow: visible; }
.radar-classic-page .page-orb { z-index: 0; }

.radar-classic-shell {
  padding: 18px 16px 30px;
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.radar-classic-hero,
.radar-classic-controls,
.radar-card,
.radar-map-panel {
  background: rgba(19, 28, 46, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 24px rgba(5,10,20,0.14);
}

.radar-classic-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-radius: 24px;
  padding: 22px;
  margin-bottom: 18px;
}
.radar-classic-hero h1 { margin: 0 0 10px; color: #f8fbff; font-size: clamp(1.75rem, 2.2vw, 2.8rem); line-height: 1.08; }
.radar-classic-hero p { margin: 0; color: #c2d1e8; max-width: 72ch; line-height: 1.6; }
.radar-pill { display:inline-flex; padding: 6px 12px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.08em; color:#9dd8ff; background:rgba(31,126,255,.12); border:1px solid rgba(31,126,255,.25); margin-bottom: 12px; }
.radar-classic-hero__status { align-self: flex-start; padding: 10px 14px; border-radius: 14px; color:#dbe7f5; background: rgba(255,255,255,0.04); min-width: 240px; font-weight: 700; line-height: 1.45; }

.radar-classic-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(2, minmax(220px, 1fr)) minmax(220px, 1.1fr);
  gap: 12px;
  border-radius: 22px;
  padding: 14px;
  margin-bottom: 18px;
}
.radar-toggle,
.radar-slider,
.radar-card--compact {
  min-height: 112px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 16px;
  color: #eef4ff;
}
.radar-toggle { display:flex; align-items:center; gap:10px; font-weight:700; font-size: 1rem; }
.radar-toggle input { width: 18px; height: 18px; accent-color: #2b83ff; }
.radar-slider { display:flex; flex-direction:column; gap:14px; }
.radar-slider span { color:#d7e3f5; font-weight:700; }
.radar-card__label { color:#c2d1e8; font-size: .95rem; margin-bottom: 8px; }
.radar-card__value { color:#fff; font-weight:800; font-size: 1.65rem; line-height:1.1; }
.radar-card__small { margin:10px 0 0; color:#b8c6dc; line-height:1.5; font-size:.96rem; }

.radar-classic-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(340px, 0.82fr);
  gap: 18px;
  align-items: start;
}
.radar-classic-mapcol { min-width: 0; }
.radar-map-panel {
  position: relative;
  border-radius: 24px;
  padding: 16px;
  overflow: hidden;
  contain: layout paint style;
}
.radar-classic-map {
  height: min(72vh, 760px);
  min-height: 480px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #d2ebf5;
  position: relative;
  z-index: 1;
}
.radar-map-note {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 700;
  max-width: 420px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(28, 40, 65, 0.92);
  color: #f5f8fc;
  box-shadow: 0 16px 32px rgba(5,10,20,0.22);
}
.radar-map-note strong { display:block; font-size:1.02rem; margin-bottom:6px; }
.radar-map-note p { margin:0; line-height:1.45; }

.radar-classic-sidebar { display:flex; flex-direction:column; gap:16px; position: sticky; top: 16px; z-index: 2; }
.radar-card { border-radius: 22px; padding: 18px; color:#f4f7fc; }
.radar-card h2 { margin:0 0 14px; font-size: 1.45rem; line-height:1.1; }
.radar-card h3 { margin:10px 0 12px; font-size: 1.18rem; line-height:1.12; }
.radar-card p { color:#d4deec; line-height:1.58; margin: 0; }
.radar-card__header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.radar-card__close { border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); color:#fff; border-radius: 12px; width:44px; height:44px; font-size:28px; cursor:pointer; }
.radar-card__empty { color:#b8c6dc; line-height:1.6; }
.radar-card__kicker { color:#8cc9ff; font-weight:800; letter-spacing:.04em; text-transform: uppercase; font-size:.92rem; }

.radar-detail-list { display:grid; grid-template-columns: 1fr; gap: 12px; margin: 18px 0 0; }
.radar-detail-list div { display:grid; grid-template-columns: 118px minmax(0,1fr); gap: 12px; align-items:flex-start; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.radar-detail-list dt { color:#aab8cd; font-weight:700; }
.radar-detail-list dd { margin:0; color:#fff; line-height:1.45; }
.legend-row { display:flex; align-items:center; gap:10px; padding:6px 0; color:#eef4ff; }
.legend-dot { width:15px; height:15px; border-radius:999px; display:inline-block; box-shadow:0 6px 14px rgba(0,0,0,.16); }
.legend-dot--clouds { background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.65)); }
.legend-dot--rain { background:#2578ff; }
.legend-dot--snow { background:#ec4899; }
.legend-dot--level1 { background:#facc15; }
.legend-dot--level2 { background:#fb923c; }
.legend-dot--level3 { background:#ef4444; }
.license-list { display:grid; gap:10px; color:#e7eef9; line-height:1.6; }


.classic-clouds-tile {
  image-rendering: auto;
}

.classic-clouds-tile--owm {
  filter: grayscale(1) brightness(1.08) contrast(1.04);
}

.classic-clouds-tile--grid {
  filter: none;
}

.radar-classic-map .leaflet-control-container .leaflet-top,
.radar-classic-map .leaflet-control-container .leaflet-bottom { z-index: 500; }
.radar-classic-page .leaflet-pane { z-index: 200; }
.radar-classic-page .leaflet-overlay-pane { z-index: 420; }
.radar-classic-page .leaflet-tooltip-pane,
.radar-classic-page .leaflet-popup-pane { z-index: 450; }
.radar-classic-page .leaflet-control-zoom a { color: #0f172a; }

@media (max-width: 1300px) {
  .radar-classic-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  .radar-classic-layout { grid-template-columns: 1fr; }
  .radar-classic-sidebar { position: static; }
  .radar-classic-hero { flex-direction: column; }
}
@media (max-width: 740px) {
  .radar-classic-hero,
  .radar-classic-controls,
  .radar-card,
  .radar-map-panel {
    box-shadow: 0 8px 18px rgba(5,10,20,0.12);
  }
  .radar-classic-shell { padding: 14px 12px 24px; }
  .radar-classic-controls { grid-template-columns: 1fr; }
  .radar-toggle, .radar-slider, .radar-card--compact { min-height: auto; }
  .radar-map-note { left: 14px; right: 14px; max-width: none; top: 14px; }
  .radar-classic-map { min-height: 420px; height: 62vh; }
  .radar-card h2 { font-size: 1.5rem; }
  .radar-card h3 { font-size: 1.25rem; }
  .radar-detail-list div { grid-template-columns: 1fr; gap: 4px; }
}