*{box-sizing:border-box}html,body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#f4f7f8;color:#17212b}.topbar{min-height:58px;padding:10px 16px;background:#fff;border-bottom:1px solid #dfe6e9;display:flex;align-items:center;gap:14px}.brand{font-weight:800;color:#17212b;text-decoration:none;margin-right:auto}.topbar nav{display:flex;gap:7px;flex-wrap:wrap}.topbar nav a,.controls button,.controls select,.controls input{border:1px solid #d7e0e5;border-radius:9px;background:#fff;color:#294e61;text-decoration:none;padding:8px 10px;font:inherit}.icon-btn{display:none;border:0;background:#fff;font-size:25px}main{max-width:1200px;margin:auto;padding:10px}.controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px}.controls label{display:flex;align-items:center;gap:6px}.controls button.active{background:#1769aa;color:#fff}.map-card{height:min(78vh,760px);min-height:500px;position:relative;border-radius:14px;overflow:hidden;border:1px solid #dce3e6;background:#fff}.map-card #map{height:100%;width:100%}.status{position:absolute;z-index:900;top:10px;left:50%;transform:translateX(-50%);background:#fffffff2;padding:7px 10px;border-radius:8px;box-shadow:0 2px 8px #0002;font-size:13px}.fullscreen{position:absolute;z-index:900;right:10px;top:10px;width:42px;height:42px;border:0;border-radius:9px;background:#fff;box-shadow:0 1px 5px #0004;font-size:24px}.timeline{position:absolute;z-index:900;left:50%;bottom:16px;transform:translateX(-50%);width:min(680px,calc(100% - 30px));display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;background:#fffffff2;padding:8px 10px;border-radius:10px;box-shadow:0 2px 10px #0003}.timeline input{width:100%}.timeline button{border:0;background:#1769aa;color:#fff;border-radius:7px;padding:7px 10px}.note{font-size:12px;color:#657680}.map-card:fullscreen,.map-card.is-fullscreen{height:100dvh;width:100vw;border:0;border-radius:0}.map-card:fullscreen #map,.map-card.is-fullscreen #map{height:100dvh}
@media(max-width:720px){
  .topbar{position:relative}
  .icon-btn{display:block}
  .topbar nav{display:none;position:absolute;z-index:2000;right:10px;top:54px;width:min(280px,calc(100vw - 20px));padding:8px;background:#fff;border:1px solid #dfe6e9;border-radius:12px;box-shadow:0 8px 24px #0003}
  .topbar nav.open{display:grid}
  .topbar nav a{padding:11px 12px}

  /* Mobile radar controls: wrap instead of forcing a wide 5-column grid. */
  .controls{display:flex;flex-wrap:wrap;align-items:center;gap:7px;width:100%;max-width:100%}
  .controls #liveBtn{flex:0 0 auto}
  .controls label{display:flex;align-items:center;gap:5px;flex:1 1 210px;min-width:0;max-width:100%}
  .controls label input{width:100%;min-width:0}
  .controls button,.controls select,.controls input{max-width:100%}
  .controls #timeSelect{min-width:0}
  .controls #rangeDownloadControls{max-width:100%;flex-wrap:wrap}

  .map-card{height:calc(100dvh - 180px);min-height:430px}
  .timeline{bottom:10px;grid-template-columns:1fr auto}
  .timeline span{grid-column:1/3}
  .fullscreen{top:8px;right:8px}
}

/* Radar controls while map is fullscreen */
.map-card .controls.fullscreen-controls {
  position: absolute;
  z-index: 1100;
  top: 10px;
  left: 10px;
  right: 62px;
  margin: 0;
  padding: 6px;
  width: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: rgba(255,255,255,.94);
  border-radius: 10px;
  box-shadow: 0 2px 10px #0003;
}

@media(max-width:720px) {
  .map-card .controls.fullscreen-controls {
    display: flex;
    top: 8px;
    left: 8px;
    right: 58px;
    gap: 4px;
    padding: 5px;
    background: rgba(255,255,255,.75);
  }

  .map-card .controls.fullscreen-controls button,
  .map-card .controls.fullscreen-controls select,
  .map-card .controls.fullscreen-controls input {
    padding: 5px 7px;
    font-size: 14px;
  }

  .map-card .controls.fullscreen-controls label { gap: 3px; }
  .map-card .controls.fullscreen-controls #dateInput { width: 142px; }
  .map-card .controls.fullscreen-controls #timeSelect { max-width: 190px; }
  .map-card .controls.fullscreen-controls #rangeDownloadControls {
    gap: 3px !important;
    margin-left: 0 !important;
  }
  .map-card .controls.fullscreen-controls #rangeStart,
  .map-card .controls.fullscreen-controls #rangeEnd {
    width: 72px !important;
  }
}