.weather-button { border-radius: 8px; }
.weather-button:hover { background: #ffffff0b; color: #f5ecd7; }
.weather-forecast-hint { font-size: 9px; color: #e8d4a8; padding: 3px 5px; border: 1px solid #e3cf9c36; border-radius: 5px; white-space: nowrap; }
.weather-sheet { width: 510px; }
.weather-sheet .sheet-header { margin-bottom: 16px; }
.weather-sheet .weather-value { margin: 12px 0 22px; }
.forecast-section { margin: 0 0 22px; }
.forecast-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.forecast-heading h3 { margin: 0; color: #eee3c9; font-size: 12px; font-weight: 550; }
.forecast-heading span { color: #a9c0bf; font-size: 9px; text-align: right; }
.forecast-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.forecast-card { min-width: 0; padding: 16px 9px 14px; border: 1px solid #d9e5db19; border-radius: 12px; background: #ffffff04; text-align: center; }
.forecast-card:first-child { background: #d4c29b0a; border-color: #d7c39338; }
.forecast-card-date strong { display: block; font-size: 11px; font-weight: 550; color: #e7e6d8; }
.forecast-card-date time { display: block; margin-top: 5px; font-size: 9px; color: #a9c0bf; }
.forecast-card-weather { min-width: 0; margin: 14px 0 12px; }
.forecast-icon { display: block; color: #c2d9df; }
.forecast-icon .icon { width: 28px; height: 28px; margin: 0 auto; }
.forecast-card[data-weather="clear"] .forecast-icon { color: #efd29a; }
.forecast-card[data-weather="storm"] .forecast-icon { color: #c2bce8; }
.forecast-card[data-weather="rain"] .forecast-icon { color: #9dc9e0; }
.forecast-card[data-weather="snow"] .forecast-icon { color: #d2e8e5; }
.forecast-condition { display: block; min-height: 25px; margin-top: 7px; font-size: 10px; line-height: 1.35; color: #b9cdca; overflow-wrap: anywhere; }
.forecast-temperatures { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.forecast-high { font-size: 20px; font-weight: 500; color: #f3e8cf; }
.forecast-low { font-size: 14px; font-weight: 400; color: #a7bfbe; }
.forecast-precip { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 9px; font-size: 10px; color: #aacdda; font-variant-numeric: tabular-nums; }
.forecast-precip .icon { width: 12px; height: 12px; }
.forecast-empty { padding: 22px 18px; margin: 0; min-height: 95px; display: flex; align-items: center; justify-content: center; border: 1px solid #ffffff16; background: #ffffff03; border-radius: 12px; color: #a9c0bf; font-size: 11px; }
.theme-grid.is-searching { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.city-search-result { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 66px; padding: 12px 14px; text-align: left; border: 1px solid #ffffff1a; background: #ffffff04; border-radius: 10px; }
.city-search-result:hover { background: #ffffff0a; border-color: #e4d1a14d; }
.city-search-result[aria-pressed="true"] { border-color: #ddc58d; background: #ddc58d0b; }
.city-search-result > .icon { width: 17px; height: 17px; flex: 0 0 17px; color: #c5cbb8; }
.city-search-result-copy { display: block; min-width: 0; flex: 1 1 auto; }
.city-search-art { display: block; flex: 0 0 76px; width: 76px; height: 52px; overflow: hidden; border-radius: 6px; background: linear-gradient(155deg,#35586b,#91a5a2); }
.city-search-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.city-search-result-copy strong { display: block; color: #e7e7d9; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.city-search-result-copy small { display: block; color: #a6bebc; font-size: 10px; margin-top: 5px; overflow-wrap: anywhere; }
.city-search-result .check-indicator { width: 14px; flex: 0 0 14px; color: #e5cf9f; opacity: 0; }
.city-search-result .check-indicator .icon { width: 14px; height: 14px; }
.city-search-result[aria-pressed="true"] .check-indicator { opacity: 1; }
@media (max-width: 720px) {
  .weather-sheet { width: min(510px,calc(100vw - 32px)); }
  .theme-grid.is-searching { grid-template-columns: 1fr; }
  .city-search-result { min-height: 61px; padding: 11px 12px; }
  .weather-forecast-hint { font-size: 8px; padding: 2px 4px; }
}
@media (max-width: 380px) {
  .weather-forecast-hint { display: none; }
  .forecast-grid { grid-template-columns: 1fr; gap: 7px; }
  .forecast-card { display: grid; grid-template-columns: 57px minmax(0,1fr) 61px; align-items: center; gap: 8px; padding: 12px 10px; text-align: left; }
  .forecast-card-weather { margin: 0; text-align: center; }
  .forecast-icon .icon { width: 22px; height: 22px; }
  .forecast-condition { min-height: 0; margin-top: 4px; font-size: 9px; }
  .forecast-temperatures { gap: 5px; }
  .forecast-high { font-size: 17px; }
  .forecast-low { font-size: 12px; }
  .forecast-precip { margin-top: 7px; }
}