.mood-control { width: 100%; }
.mood-control > label { font-size: 1.05rem; }
.mood-control output { color: #5b3df5; font-weight: 800; }
.mood-control input[type="range"] { width: 100%; accent-color: #5b3df5; }
.mood-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.mood-scale button { background: #f3f0ff; color: #1f1637; padding: 10px 6px; font-weight: 600; }
.mood-scale button:hover, .mood-scale button.selected { background: #5b3df5; color: #fff; filter: none; }
.mood-scale button span { display: block; font-size: .78rem; margin-top: 3px; }
@media (max-width: 560px) {
  .mood-scale { gap: 4px; }
  .mood-scale button { padding: 9px 3px; font-size: 1.1rem; }
  .mood-scale button span { font-size: .68rem; }
}

.weather-fieldset input {
  margin-top: 6px;
}

.weather-summary {
  background: #f3f0ff;
  border-radius: 12px;
  padding: 12px 14px;
}

.weather-summary small {
  display: block;
  margin-top: 5px;
  color: #5f5876;
}