.water-analytics {
  position: relative;
  overflow: hidden;
  margin: 24px 0 18px;
  border: 1px solid rgba(74, 177, 196, 0.22);
  border-radius: 26px;
  padding: clamp(22px, 3vw, 36px);
  background:
    radial-gradient(circle at 92% -8%, rgba(85, 211, 225, 0.26), transparent 34%),
    radial-gradient(circle at 4% 104%, rgba(69, 183, 167, 0.16), transparent 30%),
    linear-gradient(145deg, #f9fdff 0%, #eef9fb 46%, #f8fcfa 100%);
  box-shadow: 0 22px 60px rgba(18, 92, 112, 0.09);
}

.water-analytics::before {
  position: absolute;
  top: -110px;
  right: -86px;
  width: 245px;
  height: 245px;
  border: 34px solid rgba(255, 255, 255, 0.35);
  border-radius: 48% 52% 62% 38%;
  content: "";
  transform: rotate(18deg);
}

.analytics-hero,
.analytics-card,
.analytics-kpis {
  position: relative;
  z-index: 1;
}

.analytics-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.analytics-heading {
  max-width: 680px;
}

.analytics-heading h2 {
  margin: 0;
  color: #0a3851;
  font-size: clamp(25px, 3.4vw, 43px);
  line-height: 1.02;
  letter-spacing: -1.8px;
}

.analytics-heading > p:last-child {
  max-width: 620px;
  margin: 13px 0 0;
  color: #5e7e8d;
  font-size: 13px;
  line-height: 1.65;
}

.analytics-controls {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 14px;
}

.analytics-source {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #46727f;
  font-size: 10px;
  font-weight: 750;
}

.analytics-source i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2bc5a5;
  box-shadow: 0 0 0 5px rgba(43, 197, 165, 0.12);
}

.analytics-source.projected i {
  background: #e2a73d;
  box-shadow: 0 0 0 5px rgba(226, 167, 61, 0.13);
}

.analytics-period {
  display: flex;
  gap: 3px;
  border: 1px solid rgba(100, 163, 177, 0.18);
  border-radius: 13px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 25px rgba(21, 91, 107, 0.07);
}

.analytics-period button {
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
  color: #72909c;
  background: transparent;
  font-size: 10px;
  font-weight: 780;
  cursor: pointer;
}

.analytics-period button.active {
  color: #fff;
  background: linear-gradient(135deg, #077d9d, #16afa9);
  box-shadow: 0 5px 12px rgba(14, 143, 158, 0.22);
}

.analytics-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 27px;
}

.analytics-kpis article {
  min-width: 0;
  border: 1px solid rgba(130, 181, 190, 0.17);
  border-radius: 17px;
  padding: 17px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 25px rgba(16, 79, 94, 0.045);
  backdrop-filter: blur(10px);
}

.analytics-kpis article > span,
.analytics-card-heading span,
.analytics-forecast-card > div:last-child > span {
  display: block;
  color: #6f929e;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.analytics-kpis strong {
  display: block;
  overflow: hidden;
  margin: 10px 0 5px;
  color: #103e54;
  font-size: clamp(21px, 2.25vw, 30px);
  letter-spacing: -1.25px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-kpis small {
  display: block;
  overflow: hidden;
  color: #8198a1;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-kpis .analytics-kpi-accent {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(140deg, #0b5571, #087f98 56%, #13aaa4);
  box-shadow: 0 15px 35px rgba(8, 104, 128, 0.2);
}

.analytics-kpi-accent > span,
.analytics-kpi-accent small,
.analytics-kpi-accent strong {
  color: #fff;
}

.analytics-kpi-accent > span,
.analytics-kpi-accent small {
  opacity: 0.76;
}

.analytics-main-grid,
.analytics-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 12px;
  margin-top: 12px;
}

.analytics-card {
  border: 1px solid rgba(115, 174, 186, 0.18);
  border-radius: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 35px rgba(18, 82, 98, 0.05);
  backdrop-filter: blur(12px);
}

.analytics-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.analytics-card-heading h3,
.analytics-forecast-card h3 {
  margin: 5px 0 0;
  color: #143d50;
  font-size: 15px;
  letter-spacing: -0.45px;
}

.analytics-card-heading > b {
  border-radius: 99px;
  padding: 6px 9px;
  color: #248594;
  background: #e5f6f7;
  font-size: 9px;
  white-space: nowrap;
}

.water-bars {
  display: flex;
  align-items: end;
  gap: clamp(4px, 0.7vw, 9px);
  height: 178px;
  margin-top: 18px;
  border-bottom: 1px solid rgba(102, 165, 177, 0.17);
  background: repeating-linear-gradient(to top, transparent 0, transparent 43px, rgba(87, 153, 167, 0.08) 44px);
}

.water-bar {
  position: relative;
  width: 100%;
  min-width: 3px;
  height: max(7px, var(--bar-height));
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #51d6df 0%, #159fb8 55%, #087a9b 100%);
  box-shadow: 0 6px 15px rgba(11, 133, 159, 0.14);
  transform-origin: bottom;
  animation: waterBarRise 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.water-bar:nth-child(3n) {
  background: linear-gradient(180deg, #6bded3, #19afa7);
}

.water-bar.peak {
  background: linear-gradient(180deg, #ffce83, #ee9457);
  box-shadow: 0 6px 18px rgba(229, 132, 70, 0.2);
}

.water-bar::after {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 5px;
  height: 5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: inherit;
  content: "";
  transform: translateX(-50%);
}

@keyframes waterBarRise {
  from { opacity: 0.25; transform: scaleY(0.1); }
  to { opacity: 1; transform: scaleY(1); }
}

.analytics-chart-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
  color: #8299a2;
  font-size: 9px;
}

.analytics-chart-foot span:nth-child(2) {
  color: #207d8e;
  font-weight: 780;
}

.station-ranking {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.station-rank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
}

.station-rank-row > span {
  overflow: hidden;
  color: #496c7a;
  font-size: 10px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-rank-row > b {
  color: #19485b;
  font-size: 10px;
}

.station-rank-track {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #e7f0f1;
}

.station-rank-track i {
  display: block;
  width: var(--station-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0d819f, #42cfbf);
}

.station-empty {
  margin: 22px 0 0;
  border: 1px dashed #bedadd;
  border-radius: 14px;
  padding: 17px;
  color: #6d8b96;
  text-align: center;
  font-size: 10px;
  line-height: 1.55;
}

.analytics-bottom-grid {
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.45fr);
}

.analytics-forecast-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(140deg, rgba(7, 62, 84, 0.98), rgba(6, 98, 118, 0.95));
}

.analytics-forecast-card h3,
.analytics-forecast-card > div:last-child > span {
  color: #fff;
}

.analytics-forecast-card > div:last-child > span,
.analytics-forecast-card p {
  opacity: 0.72;
}

.analytics-forecast-card p {
  margin: 8px 0 0;
  color: #d6f3f4;
  font-size: 10px;
  line-height: 1.5;
}

.forecast-orbit {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 8px solid rgba(255, 255, 255, 0.13);
  border-top-color: #70e1d0;
  border-right-color: #47bed0;
  border-radius: 50%;
  color: #fff;
  transform: rotate(20deg);
}

.forecast-orbit span {
  font-size: 16px;
  font-weight: 850;
  transform: rotate(-20deg);
}

.forecast-orbit i {
  position: absolute;
  top: -8px;
  left: 30px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px #70e1d0;
}

.analytics-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 17px;
}

.analytics-action {
  border: 1px solid #e5eeee;
  border-radius: 14px;
  padding: 13px;
  background: rgba(250, 253, 253, 0.86);
}

.analytics-action > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 9px;
  color: #0b8194;
  background: #def5f5;
  font-size: 13px;
  font-weight: 850;
}

.analytics-action.warning > span {
  color: #a86824;
  background: #fff1d8;
}

.analytics-action b {
  display: block;
  margin-top: 10px;
  color: #214958;
  font-size: 10px;
  line-height: 1.35;
}

.analytics-action p {
  margin: 5px 0 0;
  color: #78909a;
  font-size: 9px;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .water-bar { animation: none; }
}

@media (max-width: 1080px) {
  .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-main-grid,
  .analytics-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .water-analytics { border-radius: 20px; padding: 19px; }
  .analytics-hero { display: grid; }
  .analytics-controls { width: 100%; justify-items: stretch; }
  .analytics-period { justify-content: stretch; }
  .analytics-period button { flex: 1; }
  .analytics-actions { grid-template-columns: 1fr; }
  .water-bars { height: 145px; }
}

@media (max-width: 460px) {
  .analytics-kpis { grid-template-columns: 1fr; }
  .analytics-heading h2 { font-size: 27px; }
  .analytics-card { padding: 16px; }
  .analytics-forecast-card { align-items: flex-start; }
}