html,body{height:100%;margin:0}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#eaf3f8}
.radar-app,.radar-map{height:100%;min-height:620px}
.radar-map{background:#eaf3f8}
.radar-panel{position:absolute;z-index:1000;top:14px;left:14px;right:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;pointer-events:none}
.card{pointer-events:auto;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-radius:10px;box-shadow:0 3px 16px rgba(0,0,0,.15);padding:8px 10px;color:#20242a}
.time{font-weight:750;min-width:178px}
.mode{font-weight:800;font-size:12px;letter-spacing:.02em}
.mode.forecast{background:#fff3d6;color:#754c00}
.mode.observation{background:#e7f3ff;color:#12507e}
button{border:0;border-radius:8px;background:#20242a;color:#fff;padding:8px 11px;font:inherit;font-weight:650;cursor:pointer}
button.secondary{background:#eef1f3;color:#20242a}
button.active{background:#1769aa;color:#fff}
button:disabled{opacity:.55;cursor:not-allowed}
.duration{display:flex;gap:5px}
input[type=range]{width:min(330px,48vw)}
.legend{position:absolute;z-index:1000;right:14px;bottom:26px;background:rgba(255,255,255,.94);padding:10px;border-radius:10px;box-shadow:0 3px 16px rgba(0,0,0,.15);font-size:12px}
.legendbar{display:flex;height:12px;width:210px;border-radius:4px;overflow:hidden;margin:5px 0}
.legendbar span{flex:1}
.legendlabels{display:flex;justify-content:space-between;color:#444}
.source{font-size:11px;color:#555;margin-top:5px}
.city-marker{background:transparent;border:0}
.city-label{white-space:nowrap;font-size:11px;font-weight:700;color:#222;text-shadow:0 1px 2px #fff,1px 0 2px #fff,-1px 0 2px #fff;transform:translate(8px,-8px)}
.city-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#151515;left:0;top:0;box-shadow:0 0 0 1px rgba(255,255,255,.85)}
.radar-error{position:absolute;z-index:1100;left:50%;bottom:28px;transform:translateX(-50%);background:#fff3f3;color:#8a1c1c;border-radius:8px;padding:9px 12px;box-shadow:0 3px 16px rgba(0,0,0,.15);font-size:13px}
@media (max-width:700px){
  .radar-app,.radar-map{min-height:520px}
  .radar-panel{top:8px;left:8px;right:8px;gap:6px}
  .card{padding:6px 7px}
  button{padding:7px 9px}
  .time{min-width:145px;font-size:13px}
  .slider-card{width:calc(100% - 14px)}
  input[type=range]{width:100%}
  .legend{right:8px;bottom:20px}
  .city-label{font-size:10px}
}

.lightning-key{display:flex;gap:9px;flex-wrap:wrap;margin-top:7px;font-size:10px;color:#444}
.lightning-key span{display:flex;align-items:center;gap:4px}
.strike-dot{display:inline-block;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.strike-new{background:#fff000}
.strike-mid{background:#ff7b00}
.strike-old{background:#8d57c8}
.leaflet-tooltip.lightning-tip{font-size:11px;padding:4px 6px}