.weather-current { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 24px 0; }
.weather-current-temperature { font-size: 42px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.weather-current-label { margin-left: 14px; font-size: 16px; color: #555; }
.weather-updated { margin: 8px 0 0; color: #777; font-size: 12px; }
.weather-metrics { display: flex; gap: 24px; margin: 0; padding: 0; }
.weather-metrics dt { color: #777; font-size: 12px; font-weight: 400; }
.weather-metrics dd { margin: 4px 0 0; font-size: 16px; font-weight: 600; }
.weather-chart-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid #eee; padding-top: 16px; }
.updown-weather-dialog :is(.weather-chart-heading h3,.weather-week-title) { font-size: 17px; margin: 0; padding: 0; line-height: 1.5; }
.weather-zero { stroke: #aaa; stroke-width: 1; stroke-dasharray: 4 4; }
.weather-low-line { stroke: #59768c; }
.weather-legend { display: flex; justify-content: flex-end; gap: 16px; margin: 12px 0 0; font-size: 12px; color: #666; }
.weather-legend span::before { content: ''; display: inline-block; width: 18px; height: 2px; background: #dc0003; margin-right: 6px; vertical-align: middle; }
.weather-legend span:last-child::before { background: #59768c; }
.weather-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.weather-day { display: flex; align-items: center; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 6px; border: 1px solid #e7e7e7; border-radius: 7px; background: #fff; color: #202020; cursor: pointer; }
.weather-day:hover { border-color: #dc0003; background: #fffafa; }
.weather-day-date { font-size: 11px; color: #888; }
.weather-day-label { display: grid; place-items: center; min-height: 38px; font-size: 12px; line-height: 1.5; text-align: center; }
.weather-day-high { font-size: 17px; font-weight: 600; }
.weather-day-low { font-size: 14px; color: #59768c; }
.weather-day-rain { font-size: 10px; color: #777; }
@media(max-width:600px) { .weather-current-temperature { font-size: 34px; } .weather-current-label { font-size: 14px; } .weather-metrics { gap: 20px; } .weather-days { grid-template-columns: repeat(4,minmax(0,1fr)); } .weather-chart-heading .exchange-ranges { flex: 1 1 auto; } }
.weather-location { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; }
.weather-location label { font-size: 12px; color: #666; }
.weather-location .weather-city { width: 380px; max-width: 100%; }
.weather-month-note { margin: 16px 0 8px; padding: 12px 14px; border-left: 3px solid #aaa; background: #f7f7f7; color: #555; font-size: 13px; line-height: 1.7; }