:root {
  --bg0: #081f31;
  --bg1: #0e3855;
  --panel: rgba(243, 250, 253, 0.94);
  --line: rgba(49, 120, 157, 0.28);
  --text: #0f2f43;
  --muted: #4c6778;
  --accent: #0f8192;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 9% -8%, rgba(103, 196, 213, 0.3) 0%, rgba(103, 196, 213, 0) 35%),
    radial-gradient(circle at 92% 5%, rgba(222, 148, 78, 0.2) 0%, rgba(222, 148, 78, 0) 30%),
    linear-gradient(160deg, var(--bg0) 0%, var(--bg1) 58%, #1a4f69 100%);
}

.layout {
  width: min(1920px, 100% - 20px);
  margin: 10px auto;
  display: grid;
  gap: 10px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 16px 28px rgba(5, 23, 33, 0.24);
  backdrop-filter: blur(5px);
}

.header {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
}

h1 {
  margin-top: 8px;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.08;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 14px;
}

.muted {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.small {
  margin: 0;
  color: #2e5368;
  font-size: 12px;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.btn {
  border: 1px solid rgba(10, 105, 120, 0.76);
  border-radius: 10px;
  background: linear-gradient(180deg, #188ca0 0%, #0d687a 100%);
  color: #f8feff;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 12px;
  cursor: pointer;
  text-decoration: none;
}

.btn.ghost,
.btn.secondary {
  background: linear-gradient(180deg, #f9fdff 0%, #e9f4fa 100%);
  color: #0f5267;
}

.dashboard {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: 10px;
  min-height: calc(100vh - 130px);
}

.sidebar {
  padding: 10px;
  display: grid;
  gap: 8px;
  align-content: start;
  overflow: auto;
}

.group {
  border: 1px solid #c3dbe8;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfeff 0%, #edf6fb 100%);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.hidden {
  display: none;
}

label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #37586d;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-check input {
  width: 16px;
  height: 16px;
}

select,
input[type="range"] {
  border: 1px solid #b8d3e1;
  border-radius: 9px;
  background: #f8fcff;
  color: #173a4e;
  padding: 8px;
}

.time-label {
  margin: 0;
  font-size: 13px;
  color: #214b62;
  font-weight: 600;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.stats-grid article {
  border: 1px solid #c8ddeb;
  border-radius: 10px;
  background: #f7fcff;
  padding: 8px;
}

.stats-grid span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.stats-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  color: #1b485f;
}

.legend-bar {
  height: 14px;
  border-radius: 999px;
  border: 1px solid #b8d4e2;
  background: linear-gradient(90deg, #1f5da8 0%, #35a89f 52%, #c84f34 100%);
}

.legend-range {
  display: flex;
  justify-content: space-between;
  color: #2f5c73;
  font-size: 12px;
  font-weight: 700;
}

.content {
  display: grid;
  gap: 10px;
}

.card {
  padding: 8px;
  display: grid;
  gap: 8px;
}

.card-head {
  padding: 4px 4px 0;
}

.plot,
.map {
  width: 100%;
  border: 1px solid #bdd8e5;
  border-radius: 11px;
  overflow: hidden;
  background: #eef6fb;
}

.plot-3d {
  height: 520px;
}

.row-2 {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 10px;
}

.map {
  height: 430px;
}

.profile {
  height: 430px;
}

.footnote {
  padding: 10px 14px;
}

.leaflet-container {
  background: #dbe9f2;
}

@media (max-width: 1300px) {
  .dashboard {
    grid-template-columns: 330px minmax(0, 1fr);
  }

  .plot-3d {
    height: 470px;
  }

  .map,
  .profile {
    height: 390px;
  }
}

@media (max-width: 980px) {
  .header {
    flex-direction: column;
  }

  .dashboard {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .row-2 {
    grid-template-columns: 1fr;
  }

  .plot-3d {
    height: 430px;
  }

  .map,
  .profile {
    height: 360px;
  }
}

@media (max-width: 660px) {
  .layout {
    width: min(1920px, 100% - 10px);
    margin-top: 6px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .plot-3d,
  .map,
  .profile {
    height: 320px;
  }
}