:root {
  --wd-card-bg: linear-gradient(135deg,#ffffff,#f1f5f9);
  --wd-card-border: #d8e1ea;
  --wd-divider:#e2e8f0;
  --wd-text-muted:#64748b;
  --wd-text-strong:#1f2933;
  --wd-gradient: linear-gradient(90deg,#2563eb,#0891b2);
  --wd-temp-gradient: linear-gradient(90deg,#0ea5e9,#2563eb);
  --wd-badge-bg:#2563eb;
  --wd-focus-ring:#2563eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wd-card-bg: linear-gradient(135deg,#243140,#1b242e);
    --wd-card-border:#384856;
    --wd-divider:#2d3a45;
    --wd-text-muted:#90a4b5;
    --wd-text-strong:#e2e8f0;
    --wd-gradient: linear-gradient(90deg,#60a5fa,#38bdf8);
    --wd-temp-gradient: linear-gradient(90deg,#38bdf8,#3b82f6);
    --wd-badge-bg:#3b82f6;
    --wd-focus-ring:#3b82f6;
  }
}

.weather-display {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.25rem 0 3rem;
  font-family: inherit;
  color: var(--wd-text-strong);
}

.weather-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:1.1rem;
  padding-bottom:.65rem;
  border-bottom:1px solid var(--wd-divider);
}

.title-block h2 {
  margin:0;
  font-size:1.85rem;
  letter-spacing:-.5px;
  background: var(--wd-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.last-updated {
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color: var(--wd-text-muted);
  margin-top:.3rem;
}

.actions {
  display:flex;
  gap:.5rem;
}

.refresh-button {
  background: var(--wd-badge-bg);
  color:#fff;
  border:none;
  padding:.55rem 1rem;
  font-size:.8rem;
  font-weight:600;
  border-radius:7px;
  cursor:pointer;
  display:inline-flex;
  gap:.35rem;
  align-items:center;
  box-shadow: var(--shadow-sm);
  transition: background .18s, transform .15s, box-shadow .2s;
}

.refresh-button:hover {
  filter:brightness(1.08);
}

.refresh-button:active {
  transform:translateY(1px);
}

.refresh-button:focus-visible {
  outline:2px solid var(--wd-focus-ring);
  outline-offset:2px;
}

.legend {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  font-size:.6rem;
  letter-spacing:.08em;
  font-weight:600;
  text-transform:uppercase;
  color: var(--wd-text-muted);
  margin:.15rem 0 .9rem;
}

.weather-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
  gap:1.05rem;
}

.weather-card {
  position:relative;
  background: var(--wd-card-bg);
  border:1px solid var(--wd-card-border);
  border-radius:18px;
  padding: .9rem .85rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  box-shadow: var(--shadow-md);
  transition: box-shadow .25s, transform .25s, border-color .25s;
  overflow:hidden;
}

.weather-card:before {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 20%,rgba(255,255,255,.55),transparent 65%);
  mix-blend-mode:overlay;
  pointer-events:none;
}

@media (prefers-color-scheme: dark) {
  .weather-card:before {
    background: radial-gradient(circle at 25% 20%,rgba(255,255,255,.12),transparent 70%);
    mix-blend-mode:normal;
  }
}

.weather-card:hover {
  transform:translateY(-4px);
  box-shadow:0 10px 18px -5px rgba(0,0,0,.18),0 4px 6px -3px rgba(0,0,0,.10);
}

.card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.day {
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.4px;
}

.day-num {
  font-size:.68rem;
  background:var(--wd-badge-bg);
  color:#fff;
  padding:2px 6px;
  border-radius:999px;
  margin-left:.35rem;
  font-weight:500;
  box-shadow:0 0 0 1px #ffffff60;
}

@media (prefers-color-scheme: dark) {
  .day-num {
    box-shadow:0 0 0 1px #1e3a8a;
  }
}

.emoji {
  font-size:2.05rem;
  line-height:1;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));
}

.temps {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:.5rem;
}

.temp {
  font-weight:600;
}

.temp.primary {
  font-size:1.45rem;
  background: var(--wd-temp-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.5px;
}

.temp.secondary {
  font-size:.78rem;
  color: var(--wd-text-muted);
  font-weight:500;
}

.summary-line {
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.45px;
  text-transform:uppercase;
  color: var(--wd-text-muted);
  display:flex;
  align-items:center;
  gap:.4rem;
  min-height:1.15rem;
}

.summary-line:before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--wd-badge-bg);
  box-shadow:0 0 0 3px #bfdbfe55;
}

.loading, .error {
  text-align:center;
  padding:3rem 1rem;
  font-size:1rem;
  color: var(--wd-text-muted);
}

.error {
  color:#dc2626;
}

.error button {
  background:#dc2626;
}

.error button:hover {
  background:#b91c1c;
}

@media (max-width:560px){
  .weather-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  }
  .title-block h2 {
    font-size:1.55rem;
  }
}