.wr-shell {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
  margin: 20px 0;
  border: 1px solid rgba(255,255,255,.15);
  font-family: inherit;
}
.wr-theme-clean {
  background: linear-gradient(180deg,#f7fbff 0%,#eef4fb 100%);
  color: #12263a;
}
.wr-theme-broadcast {
  background: linear-gradient(180deg,#0a1b32 0%,#102948 100%);
  color: #f4f8ff;
}
.wr-topbar,.wr-controls,.wr-footer,.wr-alerts,.wr-timeline {
  padding: 14px 18px;
}
.wr-topbar,.wr-controls,.wr-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.wr-controls { flex-wrap:wrap; }
.wr-title { margin:0; font-size:1.2rem; line-height:1.2; }
.wr-subtitle { font-size:.88rem; opacity:.75; margin-top:2px; }
.wr-badge {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  background: rgba(255,255,255,.18);
}
.wr-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
}
.wr-theme-clean .wr-btn {
  background:#163d67; color:#fff;
}
.wr-theme-broadcast .wr-btn {
  background:#2a74d6; color:#fff;
}
.wr-range-wrap { display:flex; align-items:center; gap:8px; font-size:.92rem; }
.wr-range-wrap input { min-width: 180px; }
.wr-map { width:100%; }
.wr-footer { font-size:.88rem; opacity:.9; }
.wr-credit { opacity:.75; }
.wr-alerts { border-top:1px solid rgba(255,255,255,.12); }
.wr-alerts-title { font-weight:700; margin-bottom:10px; }
.wr-alerts-body { display:grid; gap:8px; }
.wr-alert-item {
  padding:10px 12px;
  border-radius:12px;
  display:grid;
  gap:4px;
  background: rgba(255,255,255,.12);
}
.wr-theme-clean .wr-alert-item { background: rgba(17,57,97,.08); }
.wr-alert-item span { font-size:.88rem; opacity:.85; }
.wr-alert-empty { opacity:.75; }
.wr-radar-image {
  image-rendering: auto;
  transition: opacity .18s ease;
}
.wr-radar-smooth {
  image-rendering: auto;
  filter: saturate(1.08) contrast(1.03);
}
.wr-theme-broadcast .leaflet-container {
  background:#08111f;
}
.wr-theme-clean .leaflet-container {
  background:#d9e8f6;
}
.leaflet-control-attribution { font-size:10px; }
.wr-shell .leaflet-container { image-rendering: auto; }

.wr-btn-alt { background: rgba(255,255,255,.14); color: inherit; }
.wr-theme-clean .wr-btn-alt { background: #e8f1fb; color: #163d67; border: 1px solid rgba(22,61,103,.14); }
.wr-site-ring { stroke-dasharray: 8 6; }
.wr-site-marker { filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }

.wr-timeline {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);
}
.wr-frame-dot {
  border:none;
  border-radius:999px;
  padding:8px 10px;
  font-size:.8rem;
  cursor:pointer;
  background:rgba(255,255,255,.14);
  color:inherit;
}
.wr-theme-clean .wr-frame-dot {
  background:#e8f1fb;
  color:#163d67;
  border:1px solid rgba(22,61,103,.10);
}
.wr-frame-dot.is-active {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.wr-theme-clean .wr-frame-dot.is-active {
  box-shadow: inset 0 0 0 2px rgba(22,61,103,.55);
}

@media (max-width: 768px) {
  .wr-topbar,.wr-controls,.wr-footer { align-items:flex-start; }
  .wr-footer { flex-direction:column; }
  .wr-range-wrap input { min-width: 130px; }
}

.wr-radar-tween { filter: saturate(1.05) contrast(1.02); }