.forecast-card {
  background: linear-gradient(145deg, #174b51, #0f3538);
}
.forecast-card strong {
  font-size: 1.5rem;
  letter-spacing: -.02em;
}
.forecast-card svg {
  width: 100%;
  height: 62px;
  overflow: visible;
}
.forecast-card .forecast-line {
  fill: none;
  stroke: #e7aa60;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.forecast-card .forecast-area { fill: rgba(231,170,96,.15); }
.forecast-card .forecast-axis { stroke: rgba(255,255,255,.2); stroke-width: 1; }
.forecast-dialog-close {
  border: 1px solid rgba(19,42,43,.2);
  background: #fff;
  color: #132a2b;
  border-radius: 50%;
  width: 2.7rem;
  height: 2.7rem;
  font-size: 1.25rem;
  cursor: pointer;
}
.forecast-intro { max-width: 760px; color: #56696a; margin: -.25rem 0 1.5rem; }
.forecast-legend { display: flex; flex-wrap: wrap; gap: .65rem 1.35rem; margin: -1rem 0 1.2rem; color: #56696a; font-size: .82rem; }
.forecast-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.forecast-legend b { font-weight: 600; }
.forecast-legend i { display: inline-block; width: 1.55rem; height: .55rem; border-radius: 999px; }
.forecast-legend .solar { background: rgba(246,194,46,.55); border-bottom: 2px solid #d89a18; }
.forecast-legend .temperature { height: 3px; background: linear-gradient(90deg,#367fc1 0 24%,#ee812e 42% 72%,#367fc1 92%); }
.forecast-days { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.forecast-day { background: #fff; border: 1px solid rgba(19,42,43,.13); border-radius: 1rem; padding: 1.15rem; }
.forecast-day header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.forecast-day h4 { margin: 0; font: 700 1.05rem "Manrope",sans-serif; }
.forecast-day header span { font-size: .85rem; color: #667778; text-align: right; }
.forecast-day svg { width: 100%; height: auto; display: block; margin-top: .6rem; }
.forecast-day .grid { stroke: #d9e2e1; stroke-width: 1; }
.forecast-day .line { fill: none; stroke: #b87900; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.forecast-day .area { fill: #fff0ad; }
.forecast-day .temperature-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(255,255,255,.8)); }
.forecast-day .temperature-label { fill: #56696a; font-size: 10px; font-weight: 700; }
.forecast-day .temperature-label.maximum { fill: #cf3f32; }
.forecast-day .temperature-label.minimum { fill: #266cb3; }
.forecast-day .axis-label { fill: #667778; font-size: 11px; }
.forecast-day .peak { fill: #e7aa60; }
.forecast-loading { grid-column: 1/-1; padding: 4rem; text-align: center; color: #667778; }
@media (max-width:700px) {
  .forecast-days { grid-template-columns: 1fr; }
  .forecast-dialog { padding: 1.1rem; }
  .forecast-card svg { max-width: 360px; }
}