:root {
  color: #eef4ff;
  background: #0b1220;
  font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #1e3a5f, transparent 45%), #0b1220; }
.shell { width: min(960px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0 32px; }
.hero { margin-bottom: 32px; }
.eyebrow { color: #76b8ff; font-size: .75rem; font-weight: 800; letter-spacing: .14em; margin: 0 0 8px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2.4rem, 7vw, 4.8rem); line-height: 1; margin-bottom: 16px; }
h2 { margin-bottom: 18px; }
.subtitle, .muted { color: #a7b7d0; }
.search-card, .weather { background: rgba(19, 32, 53, .88); border: 1px solid #2b4363; border-radius: 24px; padding: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
label { color: #b9c9df; font-size: .85rem; font-weight: 700; }
input, select, button { width: 100%; border: 1px solid #3b5577; border-radius: 12px; font: inherit; min-height: 48px; padding: 0 14px; margin-top: 7px; }
input, select { color: #eef4ff; background: #111e32; }
button { color: #061222; background: #76b8ff; border-color: #76b8ff; cursor: pointer; font-weight: 800; }
button:hover { background: #9dcdff; }
.status { min-height: 24px; color: #f5c979; margin: 16px 0 0; }
.weather { margin-top: 24px; }
.hidden { display: none; }
.location-heading, .current-grid, .sun-row { display: flex; justify-content: space-between; gap: 20px; }
.location-heading { align-items: flex-start; }
.location-heading h2 { font-size: 2rem; margin-bottom: 4px; }
.weather-icon { font-size: 4rem; line-height: 1; }
.current-grid { align-items: center; border-top: 1px solid #2b4363; border-bottom: 1px solid #2b4363; padding: 28px 0; margin: 22px 0; }
.temperature strong { font-size: clamp(4rem, 12vw, 7rem); line-height: .9; }
.temperature span { font-size: 2rem; color: #a7b7d0; }
.temperature p { color: #76b8ff; font-weight: 700; margin: 10px 0 0; }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 36px; margin: 0; }
dt { color: #8da3c0; font-size: .8rem; }
dd { margin: 2px 0 0; font-weight: 700; }
.sun-row { color: #a7b7d0; padding-bottom: 8px; }
.sun-row strong { color: #eef4ff; margin-left: 6px; }
.forecast-title { margin-top: 32px; }
.forecast-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.forecast-day { background: #172943; border-radius: 14px; padding: 14px 8px; text-align: center; }
.forecast-day p { margin: 0; color: #a7b7d0; font-size: .82rem; }
.forecast-day .day-icon { font-size: 1.6rem; margin: 8px 0; }
.forecast-day strong { display: block; }
footer { color: #7186a2; text-align: center; padding: 0 16px 32px; font-size: .85rem; }
a { color: #76b8ff; }
@media (max-width: 700px) {
  .shell { padding-top: 40px; }
  form { grid-template-columns: 1fr; }
  .current-grid { align-items: flex-start; flex-direction: column; }
  .forecast-grid { grid-template-columns: repeat(2, 1fr); }
}