/* ========== Header ========== */
.site-header {
  position: sticky;
  top: 3px;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-row {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 32px;
  gap: 24px;
}
.header-left { display: flex; align-items: center; gap: 16px; justify-self: start; }

/* ========== WeatherTime ========== */
.weather-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--fg-mute);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.wt-city  { color: var(--fg-soft); font-weight: 600; }
.wt-temp  { color: var(--fg-soft); }
.wt-time  { color: var(--fg-mute); font-variant-numeric: tabular-nums; }
.wt-sep   { color: var(--fg-faint); user-select: none; }
.header-right { display: flex; align-items: center; gap: 14px; justify-self: end; }
.logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  height: 28px;
  flex-shrink: 0;
}
.logo .logo-img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .logo { height: 22px; }
}
@media (max-width: 360px) {
  .logo { height: 20px; }
}

.icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
  transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: var(--bg-soft); color: var(--fg); }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 2; }

/* Theme toggle pill */
.theme-toggle {
  width: 46px; height: 24px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 3px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.theme-toggle .knob {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--fg-faint);
  transform: translateX(0);
  transition: transform 0.2s ease, background 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle .knob svg { width: 11px; height: 11px; color: var(--bg); }
[data-theme="dark"] .theme-toggle .knob { transform: translateX(22px); background: #f1f3f5; }
[data-theme="dark"] .theme-toggle .knob svg { color: #15181c; }