/* Übergang vom Himmel (oben) - DEAKTIVIERT da weather-hero jetzt Himmelsfarbe hat */
.weather-hero__scene .fields-sky-transition {
  display: none;
}

/* Übergang vom Boden (unten) - Großer, weicher Gradient am unteren Rand des Fields-Bildes */
.weather-hero__scene .fields-ground-transition {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(var(--page-bg-rgb, 42, 32, 48), 0.02) 15%,
    rgba(var(--page-bg-rgb, 42, 32, 48), 0.1) 30%,
    rgba(var(--page-bg-rgb, 42, 32, 48), 0.25) 45%,
    rgba(var(--page-bg-rgb, 42, 32, 48), 0.5) 60%,
    rgba(var(--page-bg-rgb, 42, 32, 48), 0.75) 75%,
    rgba(var(--page-bg-rgb, 42, 32, 48), 0.9) 90%,
    var(--page-bg, #2a2030) 100%
  );
  pointer-events: none;
  z-index: 2;
  border-radius: 0 0 24px 24px;
}

/* Seitliche Übergänge - DEAKTIVIERT */
.weather-hero__scene .fields-side-transition-left {
  display: none;
}

.weather-hero__scene .fields-side-transition-right {
  display: none;
}
/* Fix: Entfernt fixierte, geblurrte Balken am unteren Rand (Blur-Balken über Navigation) */
/* Haupt-CSS-Datei - Design und Layout */
/* Definiert Farben, Layouts und Stilelemente für Calchas */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =====================================================================
   UNIFIED CARD & MODAL SYSTEM
   ═══════════════════════════════════════════════════════════════════

   ⚠️ MOVED TO: js/ui/design-system.css

   The Master UI Design System is now the single source of truth for:
   - CSS Variables (--ui-glass-bg, --ui-transition-*, etc.)
   - Standard Card styles (.standard-card)
   - Standard Modal styles (.standard-modal)
   - Scrim/Overlay management
   - Animation classes (.is-visible, .is-active)

   The design-system.css file is loaded before style.css and provides
   all the base glassmorphism and interaction styles from the Health-page.

   Legacy class aliases are maintained for backwards compatibility:
   .weather-card, .metric-card, .health-card → inherit from .standard-card
   .bottom-sheet, .health-modal-sheet → inherit from .standard-modal

   ===================================================================== */

:root {
  /* Legacy variables (kept for backwards compatibility) */
  --sky-top: #42505a;
  --sky-mid: #4d5c66;
  --sky-bottom: #2a3440;
  --page-bg: #1a2530; /* Dunklere Version der Himmelfarbe für den Seitenhintergrund */

  /* Hero Widget Farben - wetterabhängig */
  --hero-bg: #8caac8;
  --hero-text: #1a1a1a;

  /* Card Hintergrund */
  --card-bg: #2a2a2a;
  --card-bg-hover: #353535;

  --bg-light: linear-gradient(135deg, #dbe4ff 0%, #b0c4d4 100%);
  --bg-dark: linear-gradient(
    to bottom,
    var(--sky-bottom, #2a3440) 0%,
    var(--page-bg, #1a2530) 100%
  );
  --text-light: #e8ecff;
  --text-heading: #fdfdff;
  --text-muted: rgba(232, 236, 255, 0.65);
  --box-light: rgba(255, 255, 255, 0.05);
  --box-dark: rgba(255, 255, 255, 0.08);
  --modal-surface-light: #ffffff;
  --modal-surface-dark: #050b18;
  --settings-card-bg: #ffffff;
  --settings-card-bg-dark: #1a1a1a;
  --settings-card-border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.12);
  --border-dark: rgba(5, 7, 15, 0.55);
  --shadow-light: 0 25px 60px rgba(5, 7, 15, 0.5);
  --shadow-dark: 0 10px 50px rgba(0, 0, 0, 0.65);

  --surface-base: rgba(26, 26, 26, 0.95);
  --surface-elevated: rgba(42, 42, 42, 0.95);
  --surface-glow: rgba(99, 132, 255, 0.18);
  --surface-highlight: rgba(255, 255, 255, 0.04);
  --surface-gradient: linear-gradient(
    145deg,
    rgba(60, 60, 60, 0.18),
    rgba(26, 26, 26, 0.8)
  );

  --accent: #5d7bff;
  --accent-hover: #7f9cff;
  --accent-soft: rgba(93, 123, 255, 0.22);
  --success: #3dd598;
  --warning: #ffc857;
  --danger: #ff6b6b;
  --info: #4dd0e1;

  --spacing-xs: 0.35rem;
  --spacing-sm: 0.65rem;
  --spacing-md: 1.1rem;
  --spacing-lg: 1.65rem;
  --spacing-xl: 2.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  --transition: all 0.08s linear;
  --blur: 22px;
  --max-width: 1200px;

  /* Mobile-first Material-Style Tokens (UI-Redesign) */
  --color-bg: #050816;
  --color-surface: #101522;
  --color-surface-variant: #181f30;
  --color-primary: #8ab4ff;
  --color-primary-soft: #2b3b63;
  --color-accent: #ffd26f;
  --color-danger: #ff6b6b;
  --color-success: #4caf50;
  --color-text: #f1f3f6;
  --color-text-main: #f1f3f6;
  --color-text-muted: #c0c8d6;
  --color-text-muted-2: #a7b1c6;

  --radius-l: 24px;
  --radius-m: 18px;
  --radius-s: 12px;

  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 24px;

  --font-display: 3.25rem;
  --font-title: 1.2rem;
  --font-body: 0.95rem;
  --font-caption: 0.8rem;
}

html {
  scroll-behavior: smooth;
  min-height: 100%;
  height: auto;
  background: var(--page-bg, #2a2030);
  background-attachment: fixed;
}

body {
  font-family:
    "Inter",
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Roboto",
    "Oxygen",
    "Ubuntu",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--page-bg, #2a2030);
  background-attachment: fixed;
  color: var(--theme-text);
  min-height: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  transition: background 0.1s linear;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

body.dark-mode input[type="submit"],
body.dark-mode section,
body.dark-mode article {
  color: #ffffff;
}

body.dark-mode a {
  color: #64b5f6;
}

/* ============================================
   THEME SYSTEM - Light/Dark Mode
   ============================================ */

/* Dark Mode (default) */
:root,
[data-theme="dark"] {
  --theme-bg: #1a2530;
  --page-bg: #1a2530; /* Wird dynamisch durch FrogHeroPlayer überschrieben */
  --theme-surface: #101522;
  --theme-text: #f1f3f6;
  --theme-text-muted: #a7b1c6;
  --theme-border: rgba(255, 255, 255, 0.1);
}

/* NOTE: .bottom-sheet styles are now in design-system.css
   Do NOT add background/padding/border overrides here */

/* Light Mode */
[data-theme="light"] {
  --theme-bg: #ffffff;
  --page-bg: var(
    --theme-bg
  ); /* Ensure page-bg matches theme-bg in light mode */
  --theme-surface: #ffffff;
  --theme-text: #1a1a2e;
  --theme-text-muted: #5a5a7a;
  --svg-stroke-bg: rgba(0, 0, 0, 0.1);
  --svg-stroke-muted: rgba(0, 0, 0, 0.15);
  --theme-border: rgba(0, 0, 0, 0.1);
}

/* Ensure common cards and text turn dark in Light Mode */
[data-theme="light"] .card,
[data-theme="light"] .card h1,
[data-theme="light"] .card h2,
[data-theme="light"] .card h3,
[data-theme="light"] .card p,
[data-theme="light"] .card small,
[data-theme="light"] .card .card-title,
[data-theme="light"] .card .card-subtitle,
[data-theme="light"] .summary-card,
[data-theme="light"] .daily-card,
[data-theme="light"] .settings-card {
  color: var(--theme-text) !important;
}

/* Ensure surfaces for these components are light */
[data-theme="light"] .card,
[data-theme="light"] .summary-card,
[data-theme="light"] .daily-card,
[data-theme="light"] .settings-card {
  background: var(--theme-surface) !important;
}

/* Additional force for daily items */
[data-theme="light"] .daily-item {
  background: rgba(255, 255, 255, 1) !important;
  color: var(--theme-text) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Broader light-mode variable overrides for components that use different tokens */
[data-theme="light"] {
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-variant: #f3f6fb;
  --color-primary: #2b5cff;
  --color-primary-soft: #e9f0ff;
  --color-accent: #ffd26f;
  --color-text: #1a1a2e;
  --color-text-main: #1a1a2e;
  --color-text-muted: #5a5a7a;
  --surface-base: rgba(250, 250, 253, 1);
  --surface-elevated: #ffffff;
  --surface-glow: rgba(93, 123, 255, 0.06);
  --surface-highlight: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] body,
[data-theme="light"] .app-shell {
  background: var(--page-bg);
  color: var(--theme-text);
}

/* Entfernt alle Blur- und Schatteneffekte von der Bottom-Navigation */
[data-theme="light"] .bottom-nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Entfernt alle Blur- und Schatteneffekte von der Bottom-Navigation */

[data-theme="light"] .bottom-nav__button {
  color: rgba(30, 41, 59, 0.55);
}

[data-theme="light"] .bottom-nav__button:hover {
  color: rgba(30, 41, 59, 0.85);
}

[data-theme="light"] .bottom-nav__button::before {
  background: radial-gradient(
    circle at center,
    rgba(93, 123, 255, 0.1) 0%,
    transparent 70%
  );
}

[data-theme="light"] .bottom-nav__button--active {
  color: #1e293b;
  background: linear-gradient(
    135deg,
    rgba(93, 123, 255, 0.2) 0%,
    rgba(138, 180, 255, 0.15) 100%
  );
  box-shadow:
    0 4px 16px rgba(93, 123, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .bottom-nav__button .ripple {
  background: rgba(93, 123, 255, 0.25);
}

/* Light mode glow animation override */
@keyframes navGlowLight {
  0%,
  100% {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.12),
      0 2px 8px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(0, 0, 0, 0.03);
  }
  50% {
    box-shadow:
      0 8px 40px rgba(93, 123, 255, 0.12),
      0 2px 8px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.03);
  }
}

[data-theme="light"] .bottom-nav {
  animation: navSlideUp 0.12s linear forwards;
}

/* Some components used explicit dark colors; ensure they flip in light mode */
[data-theme="light"] .app-main-views {
  background: #ffffff;
}

[data-theme="light"] .icon-button {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .icon-button:hover {
  color: rgba(26, 26, 46, 0.95);
}

[data-theme="light"] .card,
[data-theme="light"] .metric-card,
[data-theme="light"] .overview-card {
  background: #ffffff;
  color: #1a1a2e;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .card-title,
[data-theme="light"] .metric-card__title {
  color: #1a1a2e;
}

[data-theme="light"] .card-subtitle,
[data-theme="light"] .metric-card__value {
  color: #3a3a5a;
}

[data-theme="light"] .bottom-sheet__title {
  color: #1a1a2e;
}

[data-theme="light"] .bottom-sheet__subtitle {
  color: #5a5a7a;
}

[data-theme="light"] .settings-option {
  background: #f6f8fb;
  color: #1a1a2e;
}

[data-theme="light"] .settings-option__subtitle {
  color: #5a5a7a;
}

[data-theme="light"] .settings-option:hover {
  background: #eef3f8;
}

[data-theme="light"] .settings-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
}

[data-theme="light"] .settings-card__subtitle {
  color: #5a5a7a;
}

/* Settings Row - Light Mode */
[data-theme="light"] .settings-row {
  background: #f6f8fb;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .settings-row:hover {
  background: #eef3f8;
}

[data-theme="light"] .settings-row__title {
  color: #1a1a2e;
}

[data-theme="light"] .settings-row__subtitle {
  color: rgba(60, 70, 90, 0.8);
}

[data-theme="light"] .settings-row__chevron {
  color: rgba(26, 26, 46, 0.35);
}

/* Units Row - Light Mode */
[data-theme="light"] .units-row {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .units-row:hover {
  background: rgba(255, 255, 255, 1);
}

[data-theme="light"] .units-row__title {
  color: #1a1a2e;
}

/* Unit Selector Modal - Light Mode */
[data-theme="light"] .unit-selector-content {
  background: #ffffff;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .unit-selector-title {
  color: #1a1a2e;
}

[data-theme="light"] .unit-selector-option {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
}

[data-theme="light"] .unit-selector-option:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .unit-selector-option--active {
  border-color: #e091b8;
  background: rgba(224, 145, 184, 0.12);
}

/* Theme Selector - Light Mode */
[data-theme="light"] .theme-option {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
}

[data-theme="light"] .theme-option:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .theme-option--active {
  border-color: #e091b8;
  background: rgba(224, 145, 184, 0.12);
}

[data-theme="light"] .theme-option__icon {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .theme-option__title {
  color: #1a1a2e;
}

[data-theme="light"] .theme-option__subtitle {
  color: #5a5a7a;
}

/* Language Selector - Light Mode */
[data-theme="light"] .language-option {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
}

[data-theme="light"] .language-option:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .language-option--active {
  border-color: #e091b8;
  background: rgba(224, 145, 184, 0.12);
}

[data-theme="light"] .language-option__title {
  color: #1a1a2e;
}

/* Settings row text/icon color overrides for light mode */
[data-theme="light"] .settings-row__icon svg {
  color: rgba(26, 26, 46, 0.65);
}

[data-theme="light"] .settings-row__title {
  color: var(--theme-text);
}

[data-theme="light"] .settings-row__subtitle {
  color: var(--theme-text-muted);
}

[data-theme="light"] .settings-row__chevron {
  color: rgba(26, 26, 46, 0.35);
}

/* About Page - Light Mode */
[data-theme="light"] .about-app-name {
  color: #1a1a2e;
}

[data-theme="light"] .about-app-version {
  color: #5a5a7a;
}

[data-theme="light"] .about-section__title {
  color: #4a4a6a;
}

[data-theme="light"] .about-section__text {
  color: #5a5a7a;
}

[data-theme="light"] .about-link {
  background: rgba(0, 0, 0, 0.03);
  color: #1a1a2e;
}

[data-theme="light"] .about-link:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .about-link__arrow {
  color: rgba(26, 26, 46, 0.4);
}

[data-theme="light"] .about-source {
  background: rgba(0, 0, 0, 0.05);
  color: #4a4a6a;
}

/* Home Location - Light Mode */
[data-theme="light"] .home-section__title {
  color: #4a4a6a;
}

[data-theme="light"] .home-section__empty {
  color: #5a5a7a;
}

[data-theme="light"] .home-current {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .home-current__text {
  color: #1a1a2e;
}

[data-theme="light"] .home-favorite-item {
  background: rgba(0, 0, 0, 0.03);
  color: #1a1a2e;
}

[data-theme="light"] .home-favorite-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Privacy Settings - Light Mode */
[data-theme="light"] .privacy-section__title {
  color: #1a1a2e;
}

[data-theme="light"] .privacy-section__text {
  color: #5a5a7a;
}

[data-theme="light"] .privacy-data-item {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .privacy-data-item__text {
  color: #4a4a6a;
}

[data-theme="light"] .privacy-api-item {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .privacy-api-item__name {
  color: #1a1a2e;
}

[data-theme="light"] .privacy-api-item__desc {
  color: #5a5a7a;
}

[data-theme="light"] .privacy-link {
  background: rgba(0, 0, 0, 0.03);
  color: #1a1a2e;
}

[data-theme="light"] .privacy-link:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .privacy-link__arrow {
  color: rgba(26, 26, 46, 0.4);
}

[data-theme="light"] .app-bar__pill {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .app-bar__location-name {
  color: #1a1a2e;
}

[data-theme="light"] .app-bar__action-btn {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .app-bar__action-btn:hover {
  color: rgba(26, 26, 46, 0.95);
  background: rgba(0, 0, 0, 0.04);
}

/* ============================================
   LIGHT MODE - WEATHER CARDS & MODALS
   ============================================ */

/* Weather Cards - Light Mode */
[data-theme="light"] .weather-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .weather-card:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .weather-card__label {
  color: rgba(26, 26, 46, 0.75);
}

[data-theme="light"] .weather-card__value-large {
  color: #1a1a2e;
}

[data-theme="light"] .weather-card__unit {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .weather-card__sublabel {
  color: rgba(26, 26, 46, 0.55);
}

[data-theme="light"] .weather-card__badge {
  background: rgba(93, 123, 255, 0.2);
  color: #3a4a8a;
}

[data-theme="light"] .weather-card__sun-times {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .weather-card__moon-phase {
  color: #1a1a2e;
}

[data-theme="light"] .weather-card__moon-illumination {
  color: rgba(26, 26, 46, 0.6);
}

/* Weather Card Grid - Light Mode */
[data-theme="light"] .weather-cards-grid {
  background: transparent;
}

/* NOTE: Light theme .detail-card styles are now in design-system.css
   Only content-specific overrides below */

[data-theme="light"] .detail-card h3 {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .detail-card__value {
  color: #1a1a2e;
}

[data-theme="light"] .detail-card__label {
  color: rgba(26, 26, 46, 0.65);
}

[data-theme="light"] .detail-card__row {
  border-bottom-color: rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
}

[data-theme="light"] .detail-card__badge {
  background: rgba(93, 123, 255, 0.15);
  color: #3a4a8a;
}

[data-theme="light"] .detail-card__tab {
  background: rgba(93, 123, 255, 0.1);
  color: #3a4a8a;
}

[data-theme="light"] .detail-card__tab--active {
  background: rgba(93, 123, 255, 0.3);
  color: #1a1a2e;
}

[data-theme="light"] .detail-card__list li {
  color: rgba(26, 26, 46, 0.75);
}

[data-theme="light"] .detail-card__description {
  color: rgba(26, 26, 46, 0.7);
}

/* Modal Text Elements - Light Mode */
[data-theme="light"] .modal-text,
[data-theme="light"] .detail-text {
  color: rgba(26, 26, 46, 0.8);
}

[data-theme="light"] .modal-text--muted,
[data-theme="light"] .detail-text--muted {
  color: rgba(26, 26, 46, 0.65);
}

[data-theme="light"] .modal-text--secondary,
[data-theme="light"] .detail-text--secondary {
  color: rgba(26, 26, 46, 0.55);
}

/* Hourly Bars - Light Mode */
[data-theme="light"] .hourly-bar__fill {
  background: rgba(100, 180, 100, 0.15);
}

[data-theme="light"] .hourly-bar__fill--precip {
  background: rgba(100, 140, 200, 0.12);
}

[data-theme="light"] .hourly-bar__fill--clouds {
  background: rgba(100, 100, 120, 0.12);
}

[data-theme="light"] .hourly-bar__fill--uv {
  background: rgba(255, 180, 50, 0.12);
}

[data-theme="light"] .hourly-bar__fill--wind {
  background: rgba(66, 165, 245, 0.12);
}

[data-theme="light"] .hourly-bar__fill--visibility {
  background: rgba(139, 195, 74, 0.12);
}

[data-theme="light"] .hourly-bar__fill--pressure {
  background: rgba(127, 186, 220, 0.12);
}

[data-theme="light"] .hourly-bar__fill--humidity {
  background: rgba(100, 181, 246, 0.12);
}

[data-theme="light"] .hourly-bar__value {
  background: rgba(93, 123, 255, 0.15);
  color: #2a3a6a;
}

[data-theme="light"] .hourly-bar__amount {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .hourly-bar__time {
  color: rgba(26, 26, 46, 0.6);
}

/* Scale Items - Light Mode */
[data-theme="light"] .detail-card__scale-item {
  color: rgba(26, 26, 46, 0.85);
}

[data-theme="light"] .detail-card__scale-label {
  color: rgba(26, 26, 46, 0.65);
}

/* Additional Modal Elements - Light Mode */
[data-theme="light"] .detail-card p {
  color: rgba(26, 26, 46, 0.75);
}

[data-theme="light"] .detail-card strong {
  color: #1a1a2e;
}

[data-theme="light"] .detail-card small {
  color: rgba(26, 26, 46, 0.6);
}

/* Weather Overview Sections - Light Mode */
[data-theme="light"] .weather-overview {
  color: #1a1a2e;
}

[data-theme="light"] .weather-overview__temp {
  color: #1a1a2e;
}

[data-theme="light"] .weather-overview__condition {
  color: rgba(26, 26, 46, 0.8);
}

[data-theme="light"] .weather-overview__feels {
  color: rgba(26, 26, 46, 0.65);
}

/* Section Headers - Light Mode */
[data-theme="light"] .home-section h3,
[data-theme="light"] .section-title {
  color: rgba(26, 26, 46, 0.85);
}

/* Quick Info Items - Light Mode */
[data-theme="light"] .quick-info__item {
  color: rgba(26, 26, 46, 0.75);
}

[data-theme="light"] .quick-info__label {
  color: rgba(26, 26, 46, 0.55);
}

[data-theme="light"] .quick-info__value {
  color: #1a1a2e;
}

/* Alerts - Light Mode */
[data-theme="light"] .weather-alert {
  background: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.4);
  color: #7a5000;
}

[data-theme="light"] .weather-alert--danger {
  background: rgba(244, 67, 54, 0.12);
  border-color: rgba(244, 67, 54, 0.4);
  color: #b71c1c;
}

/* Weather Hero - Light Mode */
[data-theme="light"] .weather-hero__label {
  color: rgba(26, 26, 46, 0.65);
}

[data-theme="light"] .weather-hero__temp-value {
  color: #1a1a2e;
}

[data-theme="light"] .weather-hero__minmax {
  color: #1a1a2e;
}

[data-theme="light"] .weather-hero__condition {
  color: #1a1a2e;
}

[data-theme="light"] .weather-hero__feels {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .weather-hero__local-time {
  color: rgba(26, 26, 46, 0.65);
}

[data-theme="light"] .weather-hero__updated {
  color: rgba(26, 26, 46, 0.45);
}

/* Hero Grid Cards - Light Mode */
[data-theme="light"] .hero-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Forecast & Hourly Cards - Light Mode */
[data-theme="light"] .forecast-day,
[data-theme="light"] .hour-chip {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
}

[data-theme="light"] .forecast-pill {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
}

[data-theme="light"] .forecast-pill-headline h2 {
  color: #1a1a2e;
}

[data-theme="light"] .forecast-pill-meta {
  color: rgba(26, 26, 46, 0.65);
}

/* Inner forecast pill areas */
[data-theme="light"] .forecast-pill-temps strong {
  color: #1a1a2e;
}

[data-theme="light"] .forecast-pill-temps span {
  color: rgba(26, 26, 46, 0.65);
}

[data-theme="light"] .forecast-pill-precip strong {
  color: rgba(26, 26, 46, 0.75);
}

[data-theme="light"] .forecast-pill-temps {
  background: rgba(0, 0, 0, 0.02);
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
}

[data-theme="light"] .forecast-pill-precip {
  background: rgba(0, 0, 0, 0.02);
  padding: 0.15rem 0.35rem;
  border-radius: 8px;
}

[data-theme="light"] .forecast-pill-icon-wrap {
  background: transparent;
}

[data-theme="light"] .section-headline h2 {
  color: rgba(26, 26, 46, 0.85);
}

[data-theme="light"] .section-headline h3,
[data-theme="light"] .home-section h3 {
  color: rgba(26, 26, 46, 0.85);
}

/* ============================================
   IMMERSIVE APP SHELL
   ============================================ */

.app-shell {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--page-bg, #2a2030);
}

/* New mobile-first app shell layout */

.app-shell.app-shell {
  max-width: 100%;
  width: 100%;
  min-height: 100vh;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0; /* Kein Gap - verhindert Hintergrund-Schlitze */
  overflow: visible;
  background: var(--page-bg, #2a2030);
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Padding statt Margin füllt den Raum mit Hintergrundfarbe */
  padding: 10px 16px;
  padding-top: calc(var(--space-m, 16px) + env(safe-area-inset-top, 0px));
  padding-bottom: var(--space-s, 10px);
  /* Solider Hintergrund für nahtlosen Übergang - gleiche Farbe wie page-bg */
  background: var(--page-bg, #2a2030);
  /* Statisches Element - scrollt mit dem Content */
  position: relative;
  width: 100%;
  max-width: 100%;
  z-index: 1;
  /* Kein margin-top mehr - padding übernimmt den Platz */
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* Kein ::after Element mehr - saubere Transparenz */
.app-bar::after {
  display: none;
}

/* .app-bar--hidden wurde entfernt - App-Bar bleibt permanent sichtbar */

/* Einheitliche Pillenform Container - Ultra-Glass Effect - MATCH WITH WEATHER HERO WIDGET */
.app-bar__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 32px); /* Gleiche Breite wie .card-group */
  max-width: 100%;
  margin: 0 auto;

  /* Match Weather Hero Widget Style */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.12) 100%
  );
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px; /* Keep pill shape */
  padding: 6px 12px 6px 14px;
  transition:
    background 0.08s linear,
    border 0.08s linear;

  /* Match Weather Hero Shadow */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);

  color: #ffffff;
}

/* Favoriten-Button verstecken für cleanes Design */
#favoriteToggle {
  display: none;
}

.app-bar__location {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 6px 8px 6px 10px;
  background: transparent;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition:
    background 0.12s linear,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible;
}

.app-bar__location::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(138, 180, 255, 0.2) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  transition:
    width 0.2s linear,
    height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.app-bar__location:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.02);
}

.app-bar__location:active {
  transform: scale(0.98);
  transition: transform 0.08s linear;
}

.app-bar__location:active::before {
  width: 200px;
  height: 200px;
  transition:
    width 0.12s linear,
    height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-bar__location > * {
  position: relative;
  z-index: 1;
}

.app-bar__location-icon {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}

/* Light Theme: Standort-Symbol auch weiß für Match mit Header Card */
[data-theme="light"] .app-bar__location-icon {
  color: rgba(255, 255, 255, 0.85); /* Match dark mode / header card */
  opacity: 1;
}
.app-bar__location-meta {
  display: flex;
  flex-direction: column;
  color: #fff;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
/* color: #fff; */

.app-bar__location-text {
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .app-bar__location-text {
  color: rgba(255, 255, 255, 0.9); /* Match header card text style */
}

.app-bar__updated {
  display: none;
}

.app-bar__chevron {
  display: none;
}

.app-bar__actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  border-left: none;
  padding-left: 8px;
  margin-left: 4px;
}

.app-bar__action-btn {
  border: none;
  background: transparent;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transition:
    background 0.12s linear,
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.app-bar__action-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(138, 180, 255, 0.3) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  transition:
    width 0.16s linear,
    height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.app-bar__action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
  transform: scale(1.1);
}

.app-bar__action-btn:active {
  transform: scale(0.9);
  transition: transform 0.05s linear;
}

.app-bar__action-btn:active::before {
  width: 100px;
  height: 100px;
  transition:
    width 0.08s linear,
    height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-bar__action-btn > * {
  position: relative;
  z-index: 1;
}

#app-bar-settings {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.6);
}

.icon-button {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.3rem;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.08s linear;
}

.icon-button:hover {
  color: rgba(255, 255, 255, 0.9);
}

.app-main-views {
  flex: 1;
  /* Kein padding-top mehr nötig - App-Bar ist jetzt statisch im Dokumentenfluss */
  padding: 0 0 calc(64px + var(--space-m));
  overflow-y: visible;
  background: var(--page-bg, #2a2030);
  position: relative;
}

/* Liquid Glass Übergang am unteren Rand */

/* Home View - volle Breite für Hero, Padding für Cards */
[data-view="home"] {
  padding: 0;
  background: var(--page-bg, #2a2030);
  min-height: 100vh;
}

/* Nicht-Home Views: erzwinge Theme-Hintergrund damit Hero-Effekte nicht durchschlagen */
[data-view]:not([data-view="home"]) {
  --page-bg: var(--theme-bg) !important;
}

/* App main views outside of home should display the theme background */
[data-view]:not([data-view="home"]) .app-main-views,
[data-view]:not([data-view="home"]) {
  background: rgb(63, 59, 72);
}
[data-view="home"] .card-group {
  padding: 0 16px;
  background: var(--page-bg, #2a2030);
}

/* Erste Card-Group - bekommt Gradient für sanften Übergang (wird dynamisch in JS gesetzt) */
[data-view="home"] .card-group:first-of-type {
  margin-top: 0;
  padding-top: 24px;
  position: relative;
  z-index: 3;
}

[data-view="home"] .weather-hero {
  padding: 16px;
  margin: 0;
  padding-bottom: 0;
  background: var(--sky-top, #5a6a72);
}

/* Andere Views bekommen Padding */
[data-view="health"],
[data-view="radar"],
[data-view="settings"] {
  padding: 0 var(--space-l);
  background: var(--theme-bg);
}

/* History View - kein Padding, kein globaler Background (wird in history.css gehandhabt) */
[data-view="history"] {
  padding: 0 !important;
  background: transparent !important;
}

[data-view="settings"] {
  background: rgb(63, 59, 72) !important;
}

body.mobile-app #legacy-content {
  display: none !important;
}

/* ============================================
   METRIC GRID & CARDS (Home Metriken heute)
   Layout only - glassmorphism from MASTER SYSTEM
   ============================================ */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
  margin-top: var(--space-m);
}

@media (min-width: 480px) {
  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Layout-only styles - background/border/shadow from MASTER CARD SYSTEM */
.metric-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-m);
  width: 100%;
  color: var(--color-text-main);
  overflow: hidden;
  /* Inherit glassmorphism from MASTER SYSTEM via !important */
}

.metric-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Hover/active states handled by MASTER CARD SYSTEM */

.metric-card__icon {
  flex: 0 0 auto;
  font-size: 1.3rem;
}

.metric-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.metric-card__label {
  font-size: var(--font-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted-2);
}

.metric-card__value {
  font-size: 1rem;
  font-weight: 600;
}

.metric-card__subtitle {
  font-size: 0.8rem;
  color: var(--color-text-muted-2);
}

.metric-card__ripple {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.18),
    transparent 60%
  );
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}

.metric-card__ripple--active {
  animation: metric-ripple 120ms linear;
}

@keyframes metric-ripple {
  from {
    opacity: 0.35;
    transform: scale(0.6);
  }
  to {
    opacity: 0;
    transform: scale(1.1);
  }
}

/* ============================================
   RADAR VIEW - Fullscreen Map Layout
   ============================================ */

.radar-view {
  /* Fix: Make it fullscreen overlay to ignore parent padding */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000; /* Above bottom-nav (900) and everything else */
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Ensure bottom nav is above the map - NO, map is above bottom nav now */
/* .bottom-nav { z-index: 900; } */

.radar-view[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.radar-view__map-wrapper {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 0; /* No radius for fullscreen */
  margin: 0;
}

.radar-view__map {
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at 30% 20%,
    #1a2744 0%,
    #0a101c 60%,
    #050810 100%
  );
  border-radius: 0; /* No radius for fullscreen */
  z-index: 1;
  position: relative;
}

/* Ensure map tiles and overlays render properly */
/*
.radar-view__map .leaflet-container {
  z-index: 1 !important;
}

.radar-view__map .leaflet-tile-pane {
  z-index: 1 !important;
}

.radar-view__map .leaflet-overlay-pane {
  z-index: 2 !important;
}
*/

.radar-view__map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--color-text-muted-2);
  pointer-events: none;
}

.radar-view__map-placeholder .material-symbols-outlined {
  font-size: 48px;
  opacity: 0.4;
}

.radar-view__map-placeholder p {
  font-size: 0.85rem;
  margin: 0;
}

.radar-view__top-controls {
  position: absolute;
  top: var(--space-m);
  left: var(--space-m);
  right: var(--space-m);
  display: flex;
  align-items: flex-start;
  justify-content: space-between; /* Changed back to space-between for Legend + Layer */
  gap: var(--space-m);
  z-index: 1000;
  pointer-events: none;
}

/* Legend in Top-Left */
.radar-view__legend-overlay {
  pointer-events: auto;
}

.radar-view__legend {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(10, 16, 32, 0.85); /* Same style as Layer Btn */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08); /* Same border */
  border-radius: var(--radius-m); /* Match Layer Btn Radius */
  z-index: 1000;
  /* Reset previous fixed positioning if any */
  position: static;
}

/* Bottom Overlay for Timeline */
.radar-view__bottom-overlay {
  position: absolute;
  bottom: var(--space-m);
  left: var(--space-m);
  right: var(--space-m); /* Make it centered with margins */
  z-index: 1000;
  pointer-events: none; /* Allow clicking through empty space */
  display: flex;
  justify-content: center;
}

/* Timeline Controls - Compact Overlay */
.radar-view__timeline {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: 8px 14px; /* More compact padding */
  margin: 0; /* No margin needed as overlay handles it */
  background: rgba(10, 16, 32, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-l);
  width: auto; /* Don't stretch full width */
  max-width: 100%;
}

.radar-view__control-divider-vertical {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
}

.radar-view__timeline-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.radar-view__timeline-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: var(--radius-s);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.radar-view__timeline-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
}

.radar-view__timeline-btn:active {
  transform: scale(0.95);
}

.radar-view__timeline-btn .material-symbols-outlined {
  font-size: 22px;
}

.radar-view__timeline-btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.radar-view__timeline-btn--primary:hover {
  background: var(--color-primary-hover);
}

.radar-view__timeline-slider-wrapper {
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-s);
}

.radar-view__timeline-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto; /* Fix: Allow interaction */
}

.radar-view__timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--color-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}

.radar-view__timeline-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.radar-view__timeline-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--color-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.radar-view__timeline-label {
  min-width: 45px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-primary);
  text-align: right;
}

/* Legacy map-view styles (keeping for backward compat) */
.map-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.map-view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.map-view__title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-view__title {
  font-size: 1.05rem;
}

.map-view__subtitle {
  font-size: 0.8rem;
  color: var(--color-text-muted-2);
}

.map-legend-strip {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(5, 10, 25, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.map-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted-2);
  white-space: nowrap;
}

.map-legend__swatch {
  width: 14px;
  height: 6px;
  border-radius: 999px;
}

.map-legend__swatch--rain {
  background: linear-gradient(90deg, #4fc3f7, #0288d1);
}

.map-legend__swatch--snow {
  background: linear-gradient(90deg, #e0f7fa, #b3e5fc);
}

.map-legend__swatch--temp {
  background: linear-gradient(90deg, #4fc3f7, #ff7043);
}

.map-legend__swatch--wind {
  background: linear-gradient(90deg, #80cbc4, #004d40);
}

.map-legend__swatch--clouds {
  background: linear-gradient(90deg, #cfd8dc, #90a4ae);
}

.map-legend__swatch--aqi {
  background: linear-gradient(90deg, #81c784, #ffb74d, #e57373);
}

/* Alert Badge */
.alert-badge {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 900;
  padding: 8px 12px;
  background: var(--color-warning);
  color: white;
  border-radius: 20px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.08s linear;
}

.alert-badge:hover {
  transform: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* Alert List */
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alert-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--color-surface);
  border-left: 4px solid var(--color-warning);
  transition: background 0.05s linear;
}

.alert-item:active {
  background: rgba(var(--color-warning-rgb), 0.1);
}

.alert-item--severe,
.alert-item--extreme {
  border-left-color: var(--color-error);
}

.alert-item--moderate {
  border-left-color: var(--color-warning);
}

.alert-item--minor {
  border-left-color: #ffff00;
}

.alert-item__icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}

.alert-item__content {
  flex: 1;
  min-width: 0;
}

.alert-item__title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.alert-item__area {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-item__time {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.alert-item__action {
  align-self: center;
  padding: 6px 10px;
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
  border: none;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-standard);
}

.alert-item__action:hover {
  background: var(--color-primary-hover);
}

.alert-item__action:active {
  background: var(--color-primary-active);
}

.map-layer-group {
  margin-bottom: 16px;
}

.map-layer-group__title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
}

.map-layer-group__subtitle {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: var(--color-text-muted-2);
}

.map-layer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-layer-chip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 32, 0.9);
  color: inherit;
  text-align: left;
}

.map-layer-chip__icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.map-layer-chip__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-layer-chip__title {
  font-size: 13px;
  font-weight: 600;
}

.map-layer-chip__subtitle {
  font-size: 11px;
  color: var(--color-text-muted-2);
}

/* History View */
.history-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.history-control {
  display: flex;
  gap: 4px;
  background: var(--color-bg-secondary);
  padding: 4px;
  border-radius: 8px;
}

.history-btn {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.history-btn--active {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

.history-charts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-chart-card {
  background: var(--color-surface);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.history-chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.history-chart-card h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.history-chart-card__legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.history-chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--color-text-muted-2);
}

.history-chart-legend__swatch {
  width: 12px;
  height: 4px;
  border-radius: 999px;
}

.history-chart-legend__swatch--band {
  background: linear-gradient(
    90deg,
    rgba(138, 180, 255, 0.4),
    rgba(138, 180, 255, 0.9)
  );
}

.history-chart-legend__swatch--avg {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 1)
  );
}

.history-chart-legend__swatch--trend {
  background: linear-gradient(
    90deg,
    rgba(255, 138, 101, 0.4),
    rgba(255, 138, 101, 1)
  );
}

.history-chart-legend__swatch--precip {
  background: linear-gradient(
    90deg,
    rgba(100, 200, 255, 0.5),
    rgba(3, 155, 229, 1)
  );
}

.history-chart-card canvas {
  width: 100%;
  height: auto;
}

.history-insights {
  background: var(--color-surface);
  padding: 12px;
  border-radius: 8px;
}

.history-insights h4 {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 600;
}

.insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.insight-box {
  padding: 10px;
  background: var(--color-bg-secondary);
  border-radius: 6px;
  text-align: center;
}

.insight-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.insight-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
}

.insight-date {
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ============================================
   HISTORY VIEW - Clean & Focused Design
   ============================================ */

/* Main Container */
.hv {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--color-bg, #0a0e1a);
  padding-bottom: 100px;
}

/* Header & Tabs */
.hv-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    rgba(10, 14, 26, 0.95) 100%
  );
  padding: 12px 16px;
  backdrop-filter: blur(10px);
}

.hv-tabs {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  border-radius: 14px;
}

.hv-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted, #6b7280);
  cursor: pointer;
  transition: all 0.2s ease;
}

.hv-tab svg {
  opacity: 0.6;
}

.hv-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text, #f1f3f6);
}

.hv-tab--active {
  background: rgba(138, 180, 255, 0.15);
  color: var(--color-primary, #8ab4ff);
}

.hv-tab--active svg {
  opacity: 1;
  stroke: var(--color-primary, #8ab4ff);
}

.hv-content {
  padding: 16px;
}

/* Empty State */
.hv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  color: var(--color-text-muted, #6b7280);
}

.hv-empty__icon {
  margin-bottom: 20px;
  opacity: 0.4;
}

.hv-empty h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text, #f1f3f6);
  margin: 0 0 8px;
}

.hv-empty p {
  font-size: 14px;
  margin: 0;
}

/* Loading Spinner */
.hv-loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(138, 180, 255, 0.2);
  border-top-color: var(--color-primary, #8ab4ff);
  border-radius: 50%;
  animation: hv-spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes hv-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========== DASHBOARD / BENTO GRID ========== */
.hv-dashboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hv-bento-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Cards */
.hv-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: visible;
}

.hv-card--small {
  padding: 16px;
}

.hv-card--large {
  padding: 16px;
}

.hv-card--metric {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.hv-card__header {
  margin-bottom: 12px;
}

.hv-card__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hv-card__body {
  display: flex;
  flex-direction: column;
}

.hv-card__subtitle {
  font-size: 11px;
  color: var(--color-text-muted, #6b7280);
  margin-top: 8px;
}

/* Metrics */
.hv-metric {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hv-metric__icon {
  opacity: 0.8;
}

.hv-metric__icon--rain {
  stroke: #42a5f5;
}

.hv-metric__icon--wind {
  stroke: #90caf9;
}

.hv-metric__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text, #f1f3f6);
  line-height: 1;
}

.hv-metric__unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-muted, #6b7280);
  margin-left: 2px;
}

/* Icon Box (for small metric cards) */
.hv-card__icon-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}

.hv-card__icon-box--aqi {
  background: rgba(76, 175, 80, 0.15);
}

.hv-card__icon-box--aqi svg {
  stroke: #66bb6a;
}

.hv-card__icon-box--solar {
  background: rgba(255, 193, 7, 0.15);
}

.hv-card__icon-box--solar svg {
  stroke: #ffc107;
}

.hv-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hv-card__label {
  font-size: 11px;
  color: var(--color-text-muted, #6b7280);
}

.hv-card__value-inline {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text, #f1f3f6);
}

/* AI Insight */
.hv-insight {
  margin-top: 16px;
  padding: 14px;
  background: linear-gradient(
    135deg,
    rgba(138, 180, 255, 0.1) 0%,
    rgba(168, 85, 247, 0.08) 100%
  );
  border-radius: 12px;
  border: 1px solid rgba(138, 180, 255, 0.2);
}

.hv-insight__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(138, 180, 255, 0.15);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary, #8ab4ff);
  margin-bottom: 10px;
}

.hv-insight__badge svg {
  fill: var(--color-primary, #8ab4ff);
}

.hv-insight__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hv-insight__text strong {
  font-size: 15px;
  color: var(--color-text, #f1f3f6);
}

.hv-insight__text span {
  font-size: 12px;
  color: var(--color-text-muted, #6b7280);
}

/* Quick Stats */
.hv-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.hv-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  text-align: center;
}

.hv-stat__label {
  font-size: 10px;
  color: var(--color-text-muted, #6b7280);
  margin-bottom: 4px;
}

.hv-stat__value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text, #f1f3f6);
}

.hv-stat__value--hot {
  color: #ff6b6b;
}

.hv-stat__value--cold {
  color: #4ecdc4;
}

/* Charts */
.hv-chart {
  width: 100%;
  height: auto;
  max-height: 150px;
}

.hv-chart--comparison {
  max-height: 200px;
}

.hv-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--color-text-muted, #6b7280);
  font-size: 13px;
}

.hv-chart-label {
  font-size: 10px;
  fill: var(--color-text-muted, #6b7280);
  text-anchor: middle;
}

.hv-chart-label--avg {
  font-size: 9px;
  fill: #ffd93d;
  text-anchor: start;
}

.hv-chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}

.hv-chart-legend--comparison {
  flex-wrap: wrap;
  gap: 12px;
}

.hv-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-muted, #6b7280);
}

.hv-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.hv-legend-dot--max {
  background: #ff6b6b;
}

.hv-legend-dot--min {
  background: #4ecdc4;
}

.hv-legend-line {
  width: 16px;
  height: 3px;
  border-radius: 2px;
}

.hv-legend-line--m1 {
  background: #ff6b6b;
}

.hv-legend-line--m2 {
  background: #4ecdc4;
}

.hv-legend-line--avg {
  background: #ffd93d;
  background: repeating-linear-gradient(
    90deg,
    #ffd93d 0px,
    #ffd93d 4px,
    transparent 4px,
    transparent 6px
  );
}

/* ========== COMPARISON VIEW ========== */
.hv-comparison {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hv-comparison__header {
  text-align: center;
}

.hv-comparison__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text, #f1f3f6);
  margin: 0 0 16px;
}

.hv-comparison__selectors {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.hv-month-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hv-month-selector__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(var(--color-text-rgb, 241, 243, 246), 0.6);
}

.hv-month-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.hv-month-btn {
  width: 34px;
  height: 28px;
  border: none;
  background: rgba(66, 135, 245, 0.8);
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(66, 135, 245, 0.3);
}

.hv-month-btn:hover {
  background: rgba(66, 135, 245, 1);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(66, 135, 245, 0.4);
}

.hv-month-btn:active {
  transform: scale(0.95);
}

.hv-month-display {
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text, #f1f3f6);
  min-width: 110px;
  text-align: center;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

.hv-comparison__chart {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  padding: 16px;
}

.hv-comparison__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hv-comp-card {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.hv-comp-card__icon {
  font-size: 20px;
}

.hv-comp-card__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hv-comp-card__title {
  font-size: 10px;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
}

.hv-comp-card__values {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hv-comp-card__value {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, #f1f3f6);
}

.hv-comp-card__vs {
  font-size: 8px;
  color: var(--color-text-muted, #6b7280);
}

.hv-comp-card__labels {
  font-size: 8px;
  color: var(--color-text-muted, #6b7280);
}

.hv-comparison__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  color: var(--color-text-muted, #6b7280);
}

.hv-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.hv-toggle input {
  display: none;
}

.hv-toggle__slider {
  width: 40px;
  height: 22px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  position: relative;
  transition: background 0.2s;
}

.hv-toggle__slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--color-primary, #8ab4ff);
  border-radius: 50%;
  transition: transform 0.2s;
}

.hv-toggle input:checked + .hv-toggle__slider::after {
  transform: translateX(18px);
}

.hv-toggle__label--active {
  color: var(--color-text, #f1f3f6);
  font-weight: 500;
}

/* ========== CALENDAR VIEW ========== */
.hv-calendar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hv-calendar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hv-calendar__title {
  font-size: 35px;
  font-weight: 600;
  color: var(--color-text, #f1f3f6);
  margin: 0;
}

.hv-calendar__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text, #f1f3f6);
  margin: 0;
}

.hv-calendar__add {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 8px;
  color: var(--color-text, #f1f3f6);
  font-size: 20px;
  cursor: pointer;
}

.hv-calendar__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.hv-calendar__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 10px;
  color: var(--color-text-muted, #6b7280);
  cursor: pointer;
  transition: all 0.2s;
}

.hv-calendar__nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text, #f1f3f6);
}

.hv-calendar__month {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text, #f1f3f6);
  margin: 0;
}

.hv-calendar__grid {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  padding: 12px;
}

.hv-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.hv-calendar__weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted, #6b7280);
  padding: 8px 0;
}

.hv-calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* Calendar Day */
.hv-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.hv-cal-day:hover {
  transform: scale(1.05);
}

.hv-cal-day__num {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text, #f1f3f6);
  position: relative;
  z-index: 1;
}

.hv-cal-day--other {
  opacity: 0.3;
}

.hv-cal-day--other .hv-cal-day__num {
  color: var(--color-text-muted, #6b7280);
}

.hv-cal-day--today {
  border: 2px solid var(--color-primary, #8ab4ff);
}

.hv-cal-day--selected {
  box-shadow: 0 0 0 2px var(--color-primary, #8ab4ff);
}

.hv-cal-day--rainy::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #42a5f5;
  border-radius: 50%;
}

/* Day Popup */
.hv-day-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(26, 31, 46, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px;
  min-width: 140px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.hv-day-popup__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.hv-day-popup__day {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #f1f3f6);
}

.hv-day-popup__close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 16px;
}

.hv-day-popup__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hv-day-popup__temp {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text, #f1f3f6);
}

.hv-day-popup__desc {
  font-size: 12px;
  color: var(--color-text-muted, #6b7280);
}

/* Bottom Sheet */
.hv-calendar__sheet {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px 20px 0 0;
  padding: 12px 16px 20px;
  margin: 0 -16px -100px;
}

.hv-sheet__handle {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.hv-sheet__tabs {
  display: flex;
  gap: 8px;
}

.hv-sheet__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  border-radius: 12px;
  color: var(--color-text-muted, #6b7280);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.hv-sheet__tab svg {
  opacity: 0.6;
}

.hv-sheet__tab--active {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

.hv-sheet__tab--active svg {
  opacity: 1;
  stroke: #ff6b6b;
}

/* ========== LIGHT MODE ========== */
[data-theme="light"] .hv {
  background: var(--color-bg, #f5f7fa);
}

[data-theme="light"] .hv-header {
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    rgba(245, 247, 250, 0.95) 100%
  );
}

[data-theme="light"] .hv-tabs {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .hv-tab {
  color: var(--color-text-muted, #64748b);
}

[data-theme="light"] .hv-tab--active {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-primary, #3b82f6);
}

[data-theme="light"] .hv-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .hv-metric__value,
[data-theme="light"] .hv-stat__value,
[data-theme="light"] .hv-card__value-inline {
  color: var(--color-text, #1e293b);
}

[data-theme="light"] .hv-insight {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(168, 85, 247, 0.05) 100%
  );
  border-color: rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .hv-calendar__grid {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .hv-cal-day__num {
  color: var(--color-text, #1e293b);
}

[data-theme="light"] .hv-day-popup {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .hv-month-buttons {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.03) 0%,
    rgba(0, 0, 0, 0.02) 100%
  );
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .hv-month-btn {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.9) 0%,
    rgba(59, 130, 246, 0.7) 100%
  );
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

[data-theme="light"] .hv-month-btn:hover {
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
}

[data-theme="light"] .hv-month-display {
  background: rgba(0, 0, 0, 0.03);
  color: var(--color-text, #1e293b);
}

[data-theme="light"] .hv-month-selector__label {
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .hv-chart-label {
  fill: var(--color-text-muted, #64748b);
}
/* ============================================
   SETTINGS HOME - WeatherMaster Style
   ============================================ */

.settings-home {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 80px 0;
  max-width: 100%;
}

/* Settings Row (Main navigation items) - Compact List Style */
.settings-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgb(63, 59, 72);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-row:first-child {
  border-radius: 16px 16px 0 0;
}

.settings-row:last-child {
  border-radius: 0 0 16px 16px;
  border-bottom: none;
}

.settings-row:only-child {
  border-radius: 16px;
}

.settings-row:hover {
  background: rgba(30, 38, 55, 0.85);
}

.settings-row:active {
  background: rgba(35, 45, 65, 0.9);
}

.settings-row__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin: 0;
}

.settings-row__icon svg {
  width: 22px;
  height: 22px;
  color: #ffffff;
}

.settings-row__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: visible;
  justify-content: center;
}

.settings-row__title {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.settings-row__subtitle {
  font-size: 13px;
  color: rgba(180, 190, 210, 0.7);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.settings-row__chevron {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  margin-left: auto;
}

.settings-row__chevron svg {
  width: 100%;
  height: 100%;
}

/* Settings Row - External Link Variant */
.settings-row--external {
  text-decoration: none;
  color: inherit;
}

.settings-row--external:hover {
  text-decoration: none;
}

/* Units Settings Page */
.units-settings {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(18, 22, 36, 0.9);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.units-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.units-row:last-child {
  border-bottom: none;
}

.units-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.units-row__icon {
  width: 22px;
  height: 22px;
  opacity: 0.65;
  flex-shrink: 0;
}

.units-row__icon svg {
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.75);
}

.units-row__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.units-row__title {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

.units-row__value {
  font-size: 13px;
  color: #e091b8;
  font-weight: 500;
}

[data-theme="light"] .units-row__icon svg {
  color: rgba(26, 26, 46, 0.65);
}

[data-theme="light"] .units-row__title {
  color: var(--theme-text);
}

[data-theme="light"] .units-row__value {
  color: #b85a71;
}

/* Unit Selector Modal */
.unit-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1002;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.unit-selector-modal--visible {
  opacity: 1;
  pointer-events: auto;
}

.unit-selector-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.unit-selector-content {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: #1a1f2e;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 40px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.unit-selector-modal--visible .unit-selector-content {
  transform: translateY(0);
}

.unit-selector-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 20px 0;
  text-align: center;
}

[data-theme="light"] .unit-selector-content {
  background: #ffffff;
  color: var(--theme-text);
}

[data-theme="light"] .unit-selector-title {
  color: var(--theme-text);
}

.unit-selector-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.unit-selector-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(30, 38, 60, 0.9);
  color: #ffffff;
  font-size: 15px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.unit-selector-option:hover {
  background: rgba(40, 50, 75, 0.95);
  border-color: rgba(255, 255, 255, 0.15);
}

.unit-selector-option--active {
  border-color: #e091b8;
  background: rgba(224, 145, 184, 0.15);
}

.unit-selector-option__label {
  font-weight: 500;
}

.unit-selector-option__check {
  color: #e091b8;
  font-size: 18px;
}

/* Legacy Settings Card (keep for backwards compatibility) */
.settings-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: none;
  background: rgba(15, 22, 42, 0.95);
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.2s,
    background 0.2s;
}

.settings-card:hover {
  background: rgba(25, 35, 60, 0.95);
  transform: translateY(-1px);
}

.settings-card:active {
  transform: scale(0.98);
}

.settings-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.06);
}

.settings-card__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-card__title {
  font-size: 14px;
  font-weight: 600;
}

.settings-card__subtitle {
  font-size: 11px;
  color: var(--color-text-muted-2);
}

.settings-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 32, 0.9);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.settings-option:hover {
  background: rgba(20, 30, 50, 0.95);
  border-color: rgba(255, 255, 255, 0.15);
}

.settings-option:active {
  transform: scale(0.98);
}

.settings-option--active {
  border-color: var(--color-primary);
  background: linear-gradient(120deg, rgba(138, 180, 255, 0.16), #0b101c);
}

.settings-option__icon {
  font-size: 18px;
}

.settings-option__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-option__title {
  font-size: 14px;
  font-weight: 500;
}

.settings-option__subtitle {
  font-size: 12px;
  color: var(--color-text-muted-2);
}

.settings-section {
  margin-bottom: 16px;
}

.settings-section__title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.settings-section__text {
  font-size: 12px;
  color: var(--color-text-muted-2);
  margin-bottom: 8px;
}

.settings-secondary-btn {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: inherit;
  font-size: 12px;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-list-item {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 16, 32, 0.9);
  font-size: 13px;
}

.settings-links {
  list-style: none;
  padding-left: 0;
}

.settings-links li + li {
  margin-top: 4px;
}

/* ============================================
   THEME SELECTOR STYLES
   ============================================ */
.theme-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 16px;
  padding-right: 56px; /* reserve space for absolute check */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(25, 32, 55, 0.9);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
  position: relative; /* for absolutely positioned check */
}

.theme-option__icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  line-height: 1; /* ensure emojis don't add extra spacing */
}

.theme-option:hover {
  background: rgba(35, 45, 70, 0.95);
  border-color: rgba(255, 255, 255, 0.15);
}

.theme-option:active {
  transform: scale(0.99);
}

.theme-option--active {
  border-color: #e091b8;
  background: rgba(224, 145, 184, 0.12);
}

.theme-option__icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.theme-option__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-width: 0;
}

.theme-option__title {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
}

.theme-option__subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.theme-option__check {
  font-size: 16px;
  color: #e091b8;
  font-weight: 600;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* Fix: remove unexpected large left offset on settings rows (except first)
   and ensure theme options aren't shifted due to inline styles or transforms */
.settings-home .settings-row:not(:first-child) {
  margin-left: 0 !important;
  transform: none !important;
  left: auto !important;
  padding-left: 16px !important; /* keep consistent with other rows */
}

/* Fix: theme options alignment — prevent accidental offsets inside the theme sheet */
.theme-settings .theme-option {
  margin-left: 0 !important;
  transform: none !important;
  left: auto !important;
  padding-left: 16px !important;
}

/* Safety catch-all: remove any extremely large left margins if present */
.settings-row,
.theme-option {
  margin-left: 0 !important;
}

/* English-Box zentrieren ohne kleinere Breite */
.language-option:nth-of-type(2) {
  margin-left: auto;
  margin-right: auto;
  width: 100%; /* NEU: sorgt dafür, dass die Box genau so breit ist wie DE */
  justify-content: center;
  text-align: center;
}

/* ============================================
   LANGUAGE SELECTOR STYLES
   ============================================ */
.language-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.language-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.language-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(25, 32, 55, 0.9);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}

.language-option:hover {
  background: rgba(35, 45, 70, 0.95);
  border-color: rgba(255, 255, 255, 0.15);
}

.language-option:active {
  transform: scale(0.99);
}

.language-option--active {
  border-color: #e091b8;
  background: rgba(224, 145, 184, 0.12);
}

.language-option__flag {
  font-size: 28px;
}

.language-option__title {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
}

.language-option__check {
  font-size: 16px;
  color: #e091b8;
  font-weight: 600;
}

/* ============================================
   BACKGROUND SETTINGS STYLES
   ============================================ */
.background-settings {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.background-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: rgba(18, 22, 36, 0.9);
}

.background-card--alert {
  background: rgba(164, 8, 18, 0.9);
  color: #f4d3da;
}

.background-card--primary {
  background: rgba(65, 75, 156, 0.9);
  color: #e3e7ff;
}

.background-card__title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.background-card__subtitle {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.35;
}

.pill-switch {
  position: relative;
  width: 50px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
  padding: 0;
  flex-shrink: 0;
}

.pill-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e7e9f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.pill-switch--on {
  background: #cdd6ff;
  border-color: rgba(255, 255, 255, 0.45);
}

.pill-switch--on .pill-switch__knob {
  transform: translateX(24px);
  background: #ffffff;
}

.background-section {
  background: rgba(18, 22, 36, 0.9);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 14px 16px;
}

.background-section__title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: #a0b0d0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.background-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.background-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.background-list__row--warning {
  background: rgba(255, 179, 142, 0.08);
  border: 1px solid rgba(255, 179, 142, 0.2);
}

.background-list__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

.background-list__subtitle {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.35;
}

.background-list__chevron {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
}

.background-intervals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
}

.chip {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #e7e9f5;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.chip--active {
  background: #cdd6ff;
  color: #0f1326;
  border-color: #cdd6ff;
  font-weight: 600;
}

.chip--action {
  background: rgba(93, 123, 255, 0.15);
  border-color: rgba(93, 123, 255, 0.3);
  color: #a0bcff;
  font-weight: 500;
}

.chip--action:hover {
  background: rgba(93, 123, 255, 0.25);
}

/* Background Info Note */
.background-info-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: rgba(255, 193, 7, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(255, 193, 7, 0.15);
  margin-top: 8px;
}

.background-info-note__icon {
  font-size: 16px;
  flex-shrink: 0;
}

.background-info-note p {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}

/* ============================================
   PLACEHOLDER CARDS
   ============================================ */
.settings-placeholder {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(18, 22, 36, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.settings-placeholder__title {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.settings-placeholder__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================
   ABOUT PAGE STYLES (WeatherMaster Style)
   ============================================ */
.about-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* About Header with App Icon */
.about-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(
    135deg,
    rgba(30, 40, 70, 0.85),
    rgba(20, 30, 55, 0.85)
  );
  border-radius: 14px;
}

.about-header__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4a90d9, #1e5aa0);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.about-header__icon img {
  width: 40px;
  height: 40px;
}

.about-header__info {
  flex: 1;
  min-width: 0;
}

.about-header__name {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.about-header__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.about-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.about-badge--version {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.about-badge--changelog {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.2s;
}

.about-badge--changelog:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* About Links & Rows */
.about-links,
.about-legal {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(20, 28, 50, 0.8);
  border-radius: 12px;
  overflow: hidden;
}

.about-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.about-row:last-child {
  border-bottom: none;
}

.about-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.about-row__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.about-row__icon svg {
  width: 18px;
  height: 18px;
  color: #ffffff;
}

.about-row__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.about-row__title {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

.about-row__subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Changelog Modal */
.changelog-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.changelog-modal--visible {
  opacity: 1;
  pointer-events: auto;
}

.changelog-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
}

.changelog-content {
  position: relative;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  background: #1a1f2e;
  border-radius: 20px;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.2s;
}

[data-theme="light"] .changelog-content {
  background: #ffffff;
  color: var(--theme-text);
}

.changelog-modal--visible .changelog-content {
  transform: scale(1);
}

.changelog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.changelog-header h3 {
  margin: 0;
  font-size: 18px;
  color: #ffffff;
}

.changelog-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.changelog-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.changelog-body {
  padding: 20px;
  overflow-y: auto;
  max-height: 60vh;
}

.changelog-version {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.changelog-badge {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(92, 107, 192, 0.2);
  color: #8c9eff;
}

.changelog-badge--latest {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.changelog-body h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #ffffff;
}

.changelog-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.changelog-list li {
  padding: 8px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.changelog-list li:last-child {
  border-bottom: none;
}

/* ============ ABOUT MODAL SYSTEM ============ */

/* About Header Logo */
.about-header__logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2c5282, #1a365d);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.about-header__logo img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.about-badge--refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

.about-badge--refresh svg {
  width: 14px;
  height: 14px;
}

/* Generic About Modal */
.about-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.about-modal--visible {
  opacity: 1;
  pointer-events: auto;
}

.about-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
}

.about-modal__container {
  position: relative;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  background: linear-gradient(135deg, #1a1f2e, #151925);
  border-radius: 20px;
  overflow: hidden;
  transform: scale(0.92) translateY(10px);
  transition: transform 0.25s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.about-modal__container--large {
  max-width: 480px;
  max-height: 85vh;
}

/* Changelog Modal Size Override */
.about-modal__container--changelog {
  max-width: 550px;
  width: 96%;
  min-width: 340px;
}

.about-modal__container--changelog .about-modal__header {
  padding: 18px 22px;
}

.about-modal__container--changelog .about-modal__body {
  padding: 20px 20px 100px 20px;
  max-height: calc(85vh - 60px);
  background: transparent;
}

.about-modal__container--changelog .changelog-content {
  gap: 20px;
  max-height: none;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  background: transparent;
  border-radius: 0;
  transform: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.about-modal__container--changelog .changelog-release-block {
  padding-bottom: 0;
  background: #1a1f2e;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

/* Light Theme Support for cards */
[data-theme="light"]
  .about-modal__container--changelog
  .changelog-release-block {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.about-modal__container--changelog .changelog-version-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  background: rgba(26, 31, 46, 0.95);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"]
  .about-modal__container--changelog
  .changelog-version-header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.about-modal__container--changelog .changelog-list {
  gap: 0;
}

.about-modal__container--changelog .changelog-item {
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 22px;
}

.about-modal--visible .about-modal__container {
  transform: scale(1) translateY(0);
}

.about-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.about-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
}

.about-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
}

.about-modal__close:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.about-modal__body {
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  max-height: calc(80vh - 70px);
  overscroll-behavior: contain; /* Prevent body scroll chaining */
}

.about-modal__container--large .about-modal__body {
  max-height: calc(85vh - 70px);
}

.about-modal__text {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

/* License Modal */
.license-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 100px;
}

.license-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(92, 107, 192, 0.15);
  border-radius: 10px;
  width: fit-content;
}

.license-badge__icon {
  font-size: 20px;
}

.license-badge__text {
  font-size: 14px;
  font-weight: 600;
  color: #8c9eff;
}

.license-section {
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.license-section h4 {
  margin: 0 0 8px 0;
  font-size: 15px;
  color: #ffffff;
}

.license-section p {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.license-text {
  line-height: 1.6;
}

.license-text--muted {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.license-text--important {
  color: #ff8a80;
}

.license-section--warning {
  background: rgba(255, 138, 128, 0.1);
  border: 1px solid rgba(255, 138, 128, 0.2);
}

.license-section--warning h4 {
  color: #ff8a80;
}

/* Changelog Modal Enhancements */
.changelog-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.changelog-version-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.changelog-badge--version {
  display: inline-flex;
  align-items: center;
  background: rgba(92, 107, 192, 0.2);
  color: #8c9eff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  height: 27px;
  box-sizing: border-box;
}

.changelog-badge--latest {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  height: 27px;
  box-sizing: border-box;
}

.changelog-title {
  margin: 0 0 8px 0;
  padding: 18px 22px 0;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.changelog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.changelog-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 14px;
  border: none;
  width: 100%;
  box-sizing: border-box;
}

.changelog-item:last-child {
  border-bottom: none;
}

.changelog-item__emoji {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.2;
  min-width: 24px;
}

.changelog-item__type {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  flex-shrink: 0;
  min-width: 54px;
  text-align: center;
}

.changelog-item__type--added {
  background: rgba(76, 175, 80, 0.25);
  color: #81c784;
}

.changelog-item__type--fixed {
  background: rgba(255, 152, 0, 0.25);
  color: #ffb74d;
}

.changelog-item__type--changed {
  background: rgba(33, 150, 243, 0.25);
  color: #64b5f6;
}

.changelog-item__type--removed {
  background: rgba(244, 67, 54, 0.25);
  color: #e57373;
}

.changelog-item__text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
  flex: 1;
  word-break: break-word;
}

.changelog-show-all {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.changelog-show-all:hover {
  background: rgba(255, 255, 255, 0.1);
}

.changelog-all {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.changelog-release {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.changelog-release:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.changelog-release__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.changelog-release__date {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-left: auto;
  background: rgba(255, 255, 255, 0.06);
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 500;
  line-height: 1;
  height: 27px;
  box-sizing: border-box;
}

.changelog-release__title {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

/* Contributors Modal */
.contributors-content {
  text-align: center;
}

.contributors-loading {
  padding: 40px 20px;
}

.contributors-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #8c9eff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.contributors-intro {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.contributors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.contributor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.15s;
}

.contributor-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

.contributor-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.contributor-card__name {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  word-break: break-word;
}

.contributor-card__commits {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

/* Verbesserte Darstellung für große Zahlen */
/* Insertions/Deletions untereinander, volle Zahlenanzeige */
.contributor-card__stats {
  display: block;
  margin-top: 2px;
  width: 100%;
  text-align: center;
  word-break: break-all;
}
.contributor-card__insertions {
  color: #43e97b;
  font-size: 14px;
  font-family: "Consolas", "Menlo", "monospace";
  line-height: 1.3;
  display: block;
}
.contributor-card__deletions {
  color: #ff8a80;
  font-size: 14px;
  font-family: "Consolas", "Menlo", "monospace";
  line-height: 1.3;
  display: block;
}
.contributor-card__plus {
  color: #43e97b;
  font-weight: bold;
}
.contributor-card__minus {
  color: #ff8a80;
  font-weight: bold;
}
.contributor-card__plus {
  color: #43e97b;
  font-weight: bold;
}
.contributor-card__minus {
  color: #ff8a80;
  font-weight: bold;
}

.contributors-link {
  display: inline-block;
  padding: 10px 20px;
  background: rgba(92, 107, 192, 0.2);
  border-radius: 8px;
  color: #8c9eff;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s;
}

.contributors-link:hover {
  background: rgba(92, 107, 192, 0.3);
}

.contributors-error {
  color: #ff8a80;
  font-size: 14px;
  margin-bottom: 8px;
}

.contributors-error-hint {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-bottom: 20px;
}

/* Third Party Modal */
.thirdparty-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 100px;
}

.thirdparty-intro {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.thirdparty-section {
  padding: 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.thirdparty-section h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #8c9eff;
}

.thirdparty-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.thirdparty-list li {
  padding: 6px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.thirdparty-list li:last-child {
  border-bottom: none;
}

.thirdparty-note {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Legal Modal Content */
.legal-modal-content {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
  padding-bottom: 100px;
}

.legal-modal-content h4 {
  margin: 20px 0 10px 0;
  font-size: 15px;
  color: #ffffff;
}

.legal-modal-content h4:first-of-type {
  margin-top: 12px;
}

.legal-modal-content p {
  margin: 0 0 12px 0;
}

.legal-modal-content ul {
  margin: 0 0 12px 0;
  padding-left: 20px;
}

.legal-modal-content li {
  margin-bottom: 6px;
}

.legal-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
}

.privacy-table-wrapper {
  overflow-x: auto;
  margin: 12px 0;
}

.privacy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.privacy-table th,
.privacy-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.privacy-table th {
  background: rgba(0, 0, 0, 0.2);
  color: #8c9eff;
  font-weight: 600;
  font-size: 12px;
}

.privacy-table td {
  color: rgba(255, 255, 255, 0.8);
}
.about-app-info {
  text-align: center;
  padding: 24px 0;
}

.about-app-icon {
  font-size: 64px;
  margin-bottom: 12px;
}

.about-app-name {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.about-app-version {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.about-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-section__title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.about-section__text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0;
}

.about-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(25, 32, 55, 0.9);
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s;
}

.about-link:hover {
  background: rgba(35, 45, 70, 0.95);
}

.about-link__icon {
  font-size: 20px;
}

.about-link__text {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
}

.about-link__arrow {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.3);
}

.about-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.about-source {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   HOME LOCATION STYLES
   ============================================ */
.home-settings {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-section__title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.home-section__empty {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  padding: 14px;
  text-align: center;
}

.home-current {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(25, 32, 55, 0.85);
}

.home-current__icon {
  font-size: 20px;
}

.home-current__text {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
}

.home-clear-btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 100, 100, 0.3);
  background: rgba(255, 100, 100, 0.1);
  color: #ff6b6b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.home-clear-btn:hover:not(:disabled) {
  background: rgba(255, 100, 100, 0.2);
  border-color: rgba(255, 100, 100, 0.5);
}

.home-clear-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.home-favorites {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-favorite-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: none;
  background: rgba(25, 32, 55, 0.85);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.home-favorite-item:hover {
  background: rgba(35, 45, 70, 0.9);
}

.home-favorite-item__icon {
  font-size: 16px;
}

.home-favorite-item__text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.home-favorite-item__action {
  font-size: 11px;
  color: #e091b8;
  font-weight: 500;
}

/* Home Location Search */
.home-search {
  position: relative;
}

.home-search__input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
  box-sizing: border-box;
}

.home-search__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.home-search__input:focus {
  outline: none;
  border-color: rgba(93, 123, 255, 0.5);
}

.home-search__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(25, 32, 55, 0.98);
  border-radius: 12px;
  margin-top: 4px;
  overflow: hidden;
  z-index: 100;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  max-height: 250px;
  overflow-y: auto;
}

.home-search__results--visible {
  display: block;
}

.home-search__result {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.home-search__result:hover {
  background: rgba(93, 123, 255, 0.15);
}

.home-search__result-name {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

.home-search__result-detail {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.home-search__empty {
  padding: 14px 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.home-location-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(93, 123, 255, 0.15);
  border: 1px solid rgba(93, 123, 255, 0.3);
  border-radius: 12px;
  color: #a0bcff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}

.home-location-btn:hover:not(:disabled) {
  background: rgba(93, 123, 255, 0.25);
}

.home-location-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.home-location-btn__icon {
  font-size: 16px;
}

/* ============================================
   PRIVACY SETTINGS STYLES
   ============================================ */
.privacy-settings {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.privacy-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.privacy-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.privacy-section__icon {
  font-size: 16px;
}

.privacy-section__text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  margin: 0;
}

.privacy-data-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.privacy-data-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(25, 32, 55, 0.6);
}

.privacy-data-item__icon {
  font-size: 14px;
}

.privacy-data-item__text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.privacy-api-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.privacy-api-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(25, 32, 55, 0.6);
}

.privacy-api-item__name {
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
}

.privacy-api-item__desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.privacy-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.privacy-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(25, 32, 55, 0.8);
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s;
}

.privacy-link:hover {
  background: rgba(35, 45, 70, 0.9);
}

.privacy-link__text {
  font-size: 14px;
  font-weight: 500;
}

.privacy-link__arrow {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.25);
}

.map-container {
  width: 100%;
  height: 260px;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: radial-gradient(circle at 20% 0%, #1b2b4a 0, #050816 60%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
}

.map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-m);
  text-align: center;
  font-size: 0.9rem;

  .map-fullscreen-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 1000;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .map-fullscreen-btn:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
  }

  .map-container {
    position: relative;
  }

  /* Position when the fullscreen button is placed inside the legend */
  .map-legend-strip {
    position: relative;
  }

  .map-legend-strip .map-fullscreen-btn.map-fullscreen-in-legend {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10001;
  }

  /* Fullscreen overlay that will contain the moved map container */
  #map-fullscreen-overlay,
  .map-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: transparent;
  }

  #map-fullscreen-overlay .map-container,
  .map-fullscreen-overlay .map-container {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  /* Support native Fullscreen API pseudo-class */
  .map-container:fullscreen,
  .map-container:-webkit-full-screen,
  .map-container:-moz-full-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
  }

  .map-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    z-index: 9998;
    border-radius: 0;
    margin: 0;
    padding: 0;
  }

  .map-fullscreen-btn.fullscreen-active {
    background: rgba(255, 0, 0, 0.9);
    color: white;
  }

  .map-fullscreen-btn.fullscreen-active:hover {
    background: rgba(255, 0, 0, 1);
  }
  color: var(--color-text-muted-2);
}

.map-timeline {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  gap: var(--space-s);
  align-items: center;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-pill);
  background: rgba(15, 24, 48, 0.9);
}

.map-timeline__slider {
  width: 100%;
}

.map-timeline__label {
  font-size: 0.8rem;
  color: var(--color-text-muted-2);
}

.map-layer-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 16, 32, 0.9);
  color: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: var(--space-s);
}

.map-layer-row[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: linear-gradient(120deg, rgba(138, 180, 255, 0.16), #0b101c);
}

.map-layer-row__label {
  text-transform: capitalize;
}

.map-layer-row__state {
  font-size: 0.8rem;
  color: var(--color-text-muted-2);
}

/* ===========================================================
   BOTTOM-SHEET OVERLAY - EXACT VALUES FROM health.css
   Source: .health-modal-overlay (lines 1401-1441)
   NOW USES design-system.css VALUES - DO NOT OVERRIDE
   =========================================================== */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 1000;
  pointer-events: none;
  /* EXACT from health.css: 250ms ease (not 300ms!) */
  transition:
    opacity 250ms ease,
    visibility 250ms ease,
    background 250ms ease,
    backdrop-filter 250ms ease;
}

/* Visible overlay - EXACT from health.css .health-modal-overlay--visible (lines 1413-1420) */
.bottom-sheet-overlay.is-open {
  display: flex !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* EXACT from health.css line 1415: background: rgba(0, 0, 0, 0.6) */
  background: rgba(0, 0, 0, 0.6) !important;
  /* EXACT from health.css line 1416: backdrop-filter: blur(12px) */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ===========================================================
   BOTTOM-SHEET MODAL - PIXEL-PERFECT from health.css
   Source: .health-modal-sheet (lines 1425-1437)
   =========================================================== */
.bottom-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 80vh; /* EXACT from health.css line 1427 */
  /* EXACT from health.css line 1428 */
  background: var(--health-glass-bg) !important;
  /* EXACT from health.css line 1429 */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  /* EXACT from health.css line 1430 */
  border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
  /* EXACT from health.css line 1433 */
  border-radius: 12px 12px 0 0 !important;
  /* NO padding on sheet itself - padding goes on __body */
  padding: 0 !important;
  overflow: hidden;
  z-index: 1001;
  /* EXACT from health.css line 1435 */
  transform: translateY(100%);
  /* EXACT from health.css line 1436 */
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* NO box-shadow - Health modal doesn't have one */
  box-shadow: none !important;
  /* Ensure proper flex layout */
  display: none;
  flex-direction: column;
  box-sizing: border-box;
}

/* Light theme - EXACT match Health modal */
[data-theme="light"] .bottom-sheet {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 0.5px solid rgba(0, 0, 0, 0.1) !important;
}

/* EXACT from health.css line 1439-1440: .health-modal-overlay--visible .health-modal-sheet */
.bottom-sheet--visible {
  /* JS sets display:flex before adding this class (double-RAF pattern) */
  transform: translateY(0) !important;
}

/* ===========================================================
   BOTTOM-SHEET COMPONENTS
   NOTE: Base styles are in design-system.css
   Only add OVERRIDES here if absolutely necessary
   =========================================================== */

/* Full-height sheet for location picker */
.bottom-sheet--full {
  max-height: 85vh;
}

/* Location Search Styles */
.location-search {
  margin-bottom: var(--space-m);
}

.location-search__input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
}

.location-search__icon {
  color: var(--color-text-muted-2);
  font-size: 1.2rem;
}

.location-search__input {
  flex: 1;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: 1rem;
  outline: none;
}

.location-search__input::placeholder {
  color: var(--color-text-muted-2);
}

.location-search__results {
  margin-top: var(--space-s);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-m);
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
}

.location-search__results li {
  padding: var(--space-s) var(--space-m);
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.location-search__results li:hover {
  background: rgba(255, 255, 255, 0.08);
}

.location-search__results li:last-child {
  border-bottom: none;
}

/* Location Search Item with Favorite Button */
.location-search__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px !important;
}

.location-search__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-search__fav-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
  color: rgba(255, 255, 255, 0.6);
}

.location-search__fav-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}

.location-search__fav-btn.is-favorite {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.15);
}

.location-search__fav-btn.is-favorite:hover {
  background: rgba(255, 193, 7, 0.25);
}

/* Location Option Button (Current Location) */
.location-option {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  width: 100%;
  padding: var(--space-m);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-m);
  color: var(--color-text-primary);
  cursor: pointer;
  margin-bottom: var(--space-m);
}

.location-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.location-option__icon {
  color: var(--color-primary);
}

/* Location Sections (Favorites, Recent) */
.location-section {
  margin-bottom: var(--space-m);
}

.location-section__title {
  font-size: 0.85rem;
  color: var(--color-text-muted-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-s);
}

.location-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.location-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--space-m);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-s);
  margin-bottom: var(--space-xs);
  cursor: pointer;
}

.location-list__item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.location-list__empty {
  color: var(--color-text-muted-2);
  font-size: 0.9rem;
  padding: var(--space-s);
  text-align: center;
}

.bottom-sheet .mini-bar-chart {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}

.mini-bar-chart .mini-bar {
  flex: 1;
  min-width: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mini-bar__fill {
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8ab4ff, #5479c6);
}

.mini-bar__value {
  font-size: 0.7rem;
  color: var(--color-text-muted-2);
}

.mini-bar__time {
  font-size: 0.7rem;
  color: var(--color-text-muted-2);
}

/* ===========================================================
   BOTTOM-SHEET BODY CONTENT STYLES
   NOTE: Base component styles (.bottom-sheet__header, __title,
   __close, etc.) are now in design-system.css
   These are CONTENT-SPECIFIC overrides for detail cards
   =========================================================== */

/* Body scrollbar styling */
.bottom-sheet__body::-webkit-scrollbar {
  width: 4px;
}

.bottom-sheet__body::-webkit-scrollbar-track {
  background: transparent;
}

.bottom-sheet__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* Section separators in modals - refined spacing */
.bottom-sheet__body .detail-card {
  flex-shrink: 0;
  height: auto;
  min-height: fit-content;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 var(--ui-spacing-md, 12px) 0;
}

.bottom-sheet__body .detail-card:last-child {
  margin-bottom: 0;
}

/* Charts wrapper in modals */
.bottom-sheet__body .chart-wrapper,
.bottom-sheet__body .hourly-bars {
  width: 100%;
  box-sizing: border-box;
}

.bottom-sheet__body .detail-card p,
.bottom-sheet__body .detail-card ul,
.bottom-sheet__body .detail-card li,
.bottom-sheet__body .detail-card span {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.bottom-sheet__cta {
  margin-top: var(--space-m);
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-m);
  border: none;
  background: var(--color-primary);
  color: #050816;
  font-weight: 600;
}

.precip-chart {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}

.precip-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.precip-bar__fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #8ab4ff, #2b3b63);
}

.precip-bar__label {
  font-size: 0.7rem;
}

.precip-bar__time {
  font-size: 0.65rem;
  color: var(--color-text-muted-2);
}

.wind-timeline,
.uv-timeline,
.temp-trend,
.sun-track,
.aqi-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wind-row,
.uv-row,
.temp-point,
.sun-track__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.aqi-grid {
  flex-direction: row;
  gap: var(--space-m);
}

.aqi-box {
  flex: 1;
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background: var(--color-surface-variant);
}

.aqi-value {
  font-size: 1.4rem;
  font-weight: 600;
}

.aqi-label {
  font-size: 0.8rem;
  color: var(--color-text-muted-2);
}

.uv-tips {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: var(--color-text-muted-2);
}

.app-sky {
  display: none;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(5, 8, 18, 0.8);
  backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-location {
  flex: 1;
  padding: 0 1rem;
}

.topbar-location p {
  font-size: 1rem;
  font-weight: 600;
}

.topbar-location small {
  color: rgba(244, 246, 255, 0.8);
}

.topbar-actions {
  display: flex;
  gap: 0.75rem;
}

.icon-btn.ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f4f6ff;
}

.app-main {
  position: relative;
  z-index: 1;
  width: min(var(--max-width), calc(100% - 2rem));
  margin: 0 auto;

  .source-comparison-panel {
    width: 100%;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.06);
  }

  body.dark-mode .source-comparison-panel {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(5, 7, 15, 0.55);
  }

  .source-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
  }

  .source-compare-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background: rgba(9, 12, 25, 0.35);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  body.dark-mode .source-compare-card {
    background: rgba(15, 20, 35, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .source-compare-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .source-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-heading);
  }

  .source-compare-card header small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .source-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }

  .source-status.status-ok {
    color: #2ddc90;
    border-color: rgba(45, 220, 144, 0.35);
  }

  .source-status.status-error {
    color: #ff7b7b;
    border-color: rgba(255, 123, 123, 0.35);
  }

  .source-status.status-unknown {
    color: var(--text-muted);
  }

  .source-card-headline {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .source-icon-shell {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
  }

  .source-card-headline strong {
    font-size: 1.5rem;
    line-height: 1.1;
  }

  .source-card-headline small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .source-compare-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm);
    font-size: 0.85rem;
  }

  .source-compare-metrics dt {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .source-compare-metrics dd {
    font-weight: 600;
  }

  .source-comparison-summary {
    margin-top: var(--spacing-md);
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  .source-comparison-empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
  }
  padding: 2rem 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.card-section,
.surface-card {
  background: var(--surface-elevated);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  box-shadow: var(--shadow-light);
  position: relative;
  overflow: hidden;
}

.surface-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.12), transparent);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.search-hub {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.search-hub-headline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.search-hub-headline h1 {
  font-size: clamp(1.45rem, 2vw, 2.4rem);
}

.search-hub-actions {
  display: flex;
  gap: 0.5rem;
}

.search-input-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 2px;
}

.search-input-group::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 100%
  );
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}

.search-input-group:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.25) 100%
  );
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.35),
    0 8px 16px rgba(0, 0, 0, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.search-input-group:focus-within {
  border-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.27) 100%
  );
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 4px rgba(255, 255, 255, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.search-input-group input {
  background: transparent;
  border: none;
  padding: 0.85rem 1rem;
  color: var(--text-light);
  font-size: 1rem;
  font-weight: 500;
}

.search-input-group input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.search-input-group input:focus {
  outline: none;
}

.search-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.recent-panel,
.favorites-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 220px;
}

.panel-headline span,
.panel-headline button {
  color: rgba(255, 255, 255, 0.6);
}

.recents-grid,
.recent-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.settings-section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5rem;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Override for .settings-row in settings-list context - use new compact style */
.settings-list .settings-row {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  padding: 14px 16px; /* normalized to match settings-card */
  background: rgba(22, 28, 42, 0.9);
  box-sizing: border-box;
}

.settings-list .settings-row:first-child {
  border-radius: 16px 16px 0 0;
}

.settings-list .settings-row:last-child {
  border-radius: 0 0 16px 16px;
  border-bottom: none;
}

.settings-row.settings-link,
.settings-row.external-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.settings-row.settings-link:hover,
.settings-row.external-link:hover {
  background: rgba(30, 38, 55, 0.85);
}

.settings-row.settings-link:focus-visible,
.settings-row.external-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.settings-row-chevron {
  margin-left: auto;
  font-size: 1.35rem;
  color: rgba(255, 255, 255, 0.5);
}

.settings-row.external-link .settings-row-chevron {
  font-size: 1.15rem;
}

.settings-row.settings-link::after,
.settings-row.external-link::after {
  display: none;
}

body.dark-mode .settings-row {
  background: var(--settings-card-bg-dark);
}

/* Dark mode: ensure settings card surface is dark */
body.dark-mode .settings-card {
  background: var(--settings-card-bg-dark);
  color: var(--theme-text);
  border: 1px solid var(--settings-card-border);
}

.settings-subview-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 12, 0.9);
  backdrop-filter: blur(26px);
  z-index: 1100;
  padding: 1.5rem;
  pointer-events: none;
}

.settings-subview-overlay.active {
  display: flex;
  pointer-events: auto;
}

.settings-subview-layer {
  width: min(520px, 100%);
  background: var(--modal-surface-light);
  border-radius: 1.5rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

/* Light mode: explicitly set modal/sheet background to light surface */
[data-theme="light"] .settings-subview-layer {
  background: var(--modal-surface-light);
  color-scheme: light;
}

body.dark-mode .settings-subview-layer {
  background: var(--modal-surface-dark);
}

.settings-subview {
  display: none;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
}

.settings-subview[aria-hidden="false"] {
  display: flex;
}

.settings-subview-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.settings-subview-header .eyebrow {
  margin: 0;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.settings-back-btn {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: inherit;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
}

.settings-back-btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.settings-subview-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.settings-subview-body.doc-links {
  gap: 0.75rem;
}

.settings-subview-body.doc-links a {
  color: #a5b4fc;
  text-decoration: none;
  font-weight: 600;
}

.settings-subview-body.doc-links a:hover {
  text-decoration: underline;
}

.model-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.subview-intro {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  flex-wrap: wrap;
}

.subview-intro p {
  flex: 1 1 240px;
  margin: 0;
  color: var(--text-muted);
}

.subview-intro .btn-secondary {
  flex-shrink: 0;
}

.source-comparison-panel {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.06);
}

.source-comparison-meta {
  margin: 0 0 var(--spacing-sm);
  font-size: 0.8rem;
  color: var(--text-muted);
}

body.dark-mode .source-comparison-panel {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(8, 12, 24, 0.85);
}

.source-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
}

.source-compare-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  background: rgba(9, 12, 25, 0.45);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

body.dark-mode .source-compare-card {
  background: rgba(15, 20, 35, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.source-compare-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

.source-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-heading);
}

.source-compare-card header small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.source-status {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.source-status.status-ok {
  color: #2ddc90;
  border-color: rgba(45, 220, 144, 0.35);
}

.source-status.status-error {
  color: #ff7b7b;
  border-color: rgba(255, 123, 123, 0.35);
}

.source-status.status-unknown {
  color: var(--text-muted);
}

.source-card-headline {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.source-icon-shell {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}

.source-card-headline strong {
  font-size: 1.4rem;
  line-height: 1.1;
}

.source-card-headline small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.source-compare-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
  font-size: 0.85rem;
}

.source-compare-metrics dt {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.source-compare-metrics dd {
  font-weight: 600;
}

.source-comparison-summary {
  margin-top: var(--spacing-md);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.source-comparison-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.favorite-pill,
.favorite-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  gap: 0.85rem;
}

.favorite-item:hover {
  border-color: rgba(93, 123, 255, 0.7);
  background: rgba(93, 123, 255, 0.08);
}

.favorite-item.dragging {
  opacity: 0.6;
}

.favorite-item.dragover {
  border-color: var(--accent);
}

.favorite-pill .meta,
.favorite-info {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  gap: 0.2rem;
  flex: 1;
}

.favorite-pill strong,
.fav-name {
  font-size: 1rem;
}

.fav-name {
  background: none;
  border: none;
  color: var(--text-heading);
  padding: 0;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.fav-name:hover {
  text-decoration: underline;
}

.favorite-meta {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

.favorite-actions {
  display: flex;
  gap: 0.35rem;
}

.favorite-empty {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
}

.no-favorites {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
}

.section-headline,
.surface-card .panel-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-headline h2 {
  font-size: 1.35rem;
}

.overview-slot,
.insights-slot,
.forecast-shell,
.hourly-shell,
.map-body,
.historical-shell,
.analytics-shell {
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1rem;
  min-height: 120px;
}

.overview-card .overview-slot {
  min-height: 260px;
}

.overview-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.overview-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  color: rgba(244, 246, 255, 0.9);
}

.overview-list li span:last-child {
  color: rgba(255, 255, 255, 0.7);
}

.insights-slot {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.insight-chip {
  padding: 0.75rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  .health-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
    gap: var(--space-l);
    align-items: flex-start;
  }
  .health-layout__left {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-m);
  }
  .health-layout__right {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }
  .health-card {
    padding: var(--space-m);
    border-radius: var(--radius-m);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
  }
  .health-card h2 {
    font-size: 0.9rem;
    margin-bottom: 4px;
  }
  .health-card p {
    margin: 0;
    color: var(--color-text-muted-2);
  }
  .health-chart-card {
    padding: var(--space-m);
    border-radius: var(--radius-m);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .health-chart-card header h2 {
    margin: 0 0 2px;
    font-size: 1rem;
  }
  .health-chart-card header p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted-2);
  }
  .health-chart-barlist {
    margin-top: var(--space-m);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .health-chart-row {
    display: grid;
    grid-template-columns: auto 44px 1fr auto;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
  }
  .health-chart-row__time {
    color: var(--color-text-muted-2);
  }
  .health-chart-row__score {
    text-align: right;
  }
  .health-chart-row__label {
    text-align: right;
    color: var(--color-text-muted-2);
  }
  .score-bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }
  .score-bar__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3dd598, #ffd26f, #ff6b6b);
  }
  @media (max-width: 640px) {
    .health-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hero-grid,
.detail-grid,
.map-alerts-grid,
.history-analytics-grid {
  display: grid;
  gap: 1rem;
  align-items: stretch;
}

.hero-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.15fr);
}

.hero-card {
  min-height: 320px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(
    145deg,
    rgba(86, 111, 255, 0.25),
    rgba(8, 12, 30, 0.85)
  );
  border: 1px solid rgba(93, 123, 255, 0.35);
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 80% 0%,
    rgba(255, 255, 255, 0.15),
    transparent 45%
  );
  pointer-events: none;
}

.hero-card > * {
  position: relative;
  z-index: 1;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hero-temperature {
  font-size: clamp(3.5rem, 6vw, 5.25rem);
  font-weight: 600;
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.hero-badges .tonal-pill {
  background: rgba(0, 0, 0, 0.25);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.stat-pill {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stat-pill small {
  color: rgba(255, 255, 255, 0.65);
}

.frog-stage {
  margin: 1rem 0 0;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.frog-pond {
  position: relative;
  height: 140px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #131a2f 0%, #080c18 65%, #05070f 100%);
  box-shadow: inset 0 0 30px rgba(5, 7, 15, 0.55);
  margin-bottom: 0.75rem;
}

.frog-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.frog-star {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  opacity: 0.6;
  animation: frogBlink 4s linear infinite;
}

.frog-star[data-star="1"] {
  top: 18px;
  left: 25%;
}

.frog-star[data-star="2"] {
  top: 12px;
  right: 18%;
  animation-delay: 1s;
}

.frog-star[data-star="3"] {
  top: 40px;
  left: 12%;
  animation-delay: 1.5s;
}

.frog-star[data-star="4"] {
  top: 52px;
  right: 8%;
  animation-delay: 0.5s;
}

.frog-star[data-star="5"] {
  top: 28px;
  left: 65%;
  animation-delay: 2s;
}

.frog-sway {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 140px;
  transform: translateX(-50%);
  transform-origin: top center;
  animation: frogSway 6s ease-in-out infinite;
}

.frog-rope {
  position: absolute;
  top: 0;
  width: 2px;
  height: 110px;
  background: rgba(255, 255, 255, 0.35);
}

.frog-rope.left {
  left: 38px;
}

.frog-rope.right {
  right: 38px;
}

.frog-seat {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  height: 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, #4c5b8f, #27325c);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

.frog-body {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 86px;
  height: 68px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #6cd691 0%, #3aaf68 100%);
  border-radius: 50% 50% 40% 40%;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.15);
}

.frog-eye {
  position: absolute;
  top: -18px;
  width: 22px;
  height: 22px;
  background: #7de2a9;
  border-radius: 50%;
  border: 3px solid #4aa26b;
  display: grid;
  place-items: center;
}

.frog-eye.left {
  left: 14px;
}

.frog-eye.right {
  right: 14px;
}

.frog-pupil {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #111;
}

.frog-mouth {
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 34px;
  height: 10px;
  border: 3px solid #223829;
  border-top: none;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

.frog-cheek {
  position: absolute;
  bottom: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 128, 171, 0.65);
}

.frog-cheek.left {
  left: 10px;
}

.frog-cheek.right {
  right: 10px;
}

.frog-hand {
  position: absolute;
  bottom: 10px;
  width: 16px;
  height: 10px;
  border-radius: 50% / 70%;
  background: #3da25f;
}

.frog-hand.left {
  left: -6px;
}

.frog-hand.right {
  right: -6px;
}

.frog-feet {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 60px;
  height: 18px;
  transform: translateX(-50%);
  background: #3c8e58;
  border-radius: 999px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}

.frog-ground {
  position: absolute;
  bottom: -10px;
  left: -10%;
  width: 120%;
  height: 90px;
  background:
    radial-gradient(circle at 50% 0%, #1a2038, transparent 65%),
    linear-gradient(180deg, rgba(12, 18, 35, 0.85), rgba(5, 7, 15, 0.95));
  border-radius: 50% 50% 0 0;
}

.frog-bush {
  position: absolute;
  bottom: 28px;
  width: 60px;
  height: 40px;
  border-radius: 50%;
  background: rgba(70, 92, 160, 0.55);
  filter: blur(1px);
}

.frog-bush.left {
  left: 6%;
}

.frog-bush.right {
  right: 6%;
}

.frog-caption {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

@keyframes frogBlink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.2);
  }
}

/* New Home view & cards (mobile-first redesign) */

.home-view {
  padding: var(--space-m) var(--space-l) calc(64px + var(--space-l));
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.card-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px;
  margin-bottom: 8px;
}

/* Smooth visual transition for card groups */
.card-group--grid {
  padding: 0;
  display: block;
  margin-bottom: var(--space-m);
  margin-top: var(--space-s);
}

.card-group--grid .weather-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding-top: 8px;
}

/* .card inherits glassmorphism from MASTER CARD SYSTEM */
/* Layout-only styles below: */
.card {
  padding: 16px 20px;
  /* background/border/shadow/radius/transition from MASTER SYSTEM via !important */
}

/* Day summary card needs transparent background since .summary-card has its own */
#day-summary-card.card {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
  border: none !important;
}

#day-summary-card.card:hover {
  transform: none !important;
  box-shadow: none !important;
}

.card--primary {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
  border: none !important;
}

/* ========================================
     INSIGHT CARD (Einsichten)
     Inherits from MASTER CARD SYSTEM
     ======================================== */
.insight-card {
  /* Layout-only - glassmorphism from MASTER SYSTEM */
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
}

/* Shimmer effect on hover (optional enhancement) */
.insight-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.insight-card:hover::before {
  left: 100%;
}

.insight-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  position: relative;
  z-index: 1;
}

.insight-card__icon {
  font-size: 1.1rem;
}

.insight-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
}

.insight-card__text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Hover/active states handled by MASTER CARD SYSTEM */

/* Light Mode */
[data-theme="light"] .insight-card__text {
  color: rgb(0 0 0 / 92%) !important;
}

/* Light Mode: keep shimmer animation but make it a subtle white highlight */
[data-theme="light"] .insight-card::before,
[data-theme="light"] .detail-card::before,
[data-theme="light"] .weather-card::before,
[data-theme="light"] .card::before {
  /* gentle white shimmer so boxes remain visually light on hover */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  ) !important;
  opacity: 1 !important;
  display: block !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
  /* keep the same slide animation as dark mode */
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Dark Mode */
[data-theme="dark"] .insight-card__text {
  color: rgb(255 255 255 / 88%) !important;
}

/* ========================================
     SUMMARY CARD (Tagesübersicht - aufklappbar)
     ======================================== */
/* Standard: Dark Mode Look */
.summary-card {
  /* Liquid Glass Design */
  background: linear-gradient(
    135deg,
    rgba(30, 35, 50, 0.4) 0%,
    rgba(20, 25, 40, 0.5) 50%,
    rgba(30, 35, 50, 0.4) 100%
  );
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  overflow: hidden;
  color: #f3f6fa;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

/* Light Mode */
[data-theme="light"] .summary-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

.summary-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-m) var(--space-l);
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.summary-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.summary-card__icon {
  font-size: 1.1rem;
  opacity: 0.85;
}

.summary-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}

.summary-card__chevron {
  font-size: 1.3rem;
  transition: transform 0.3s ease;
  opacity: 0.7;
}

.summary-card__header:hover .summary-card__chevron {
  opacity: 1;
}

.summary-card[data-expanded="false"] .summary-card__chevron {
  transform: rotate(180deg);
}

.summary-card__content {
  padding: 0 var(--space-l) var(--space-l);
  display: block;
  max-height: 1000px;
  opacity: 1;
  overflow: hidden;
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-card[data-expanded="false"] .summary-card__content {
  max-height: 0;
  opacity: 0;
  padding: 0 var(--space-l);
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-card__intro {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 var(--space-m);
  color: var(--text-color) !important; /* <-- zwingt die Farbe */
}

.summary-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  h2.summary-card__intro {
    color: rgba(255, 255, 255, 0.85) !important;
  }
}

/* Light Mode */
@media (prefers-color-scheme: light) {
  h2.summary-card__intro {
    color: #222 !important;
  }
}

/* Textfarben in der Summary Card */
.summary-card__header,
.summary-card__title,
.summary-card__intro,
.summary-card__list li,
.summary-card__chevron {
  color: #f3f6fa !important;
}

[data-theme="light"] .summary-card__header,
[data-theme="light"] .summary-card__title,
[data-theme="light"] .summary-card__intro,
[data-theme="light"] .summary-card__list li,
[data-theme="light"] .summary-card__chevron {
  color: #222 !important;
}

.summary-card__icon {
  opacity: 1;
}

.summary-card__list li {
  position: relative;
  padding-left: 1rem;
}

.summary-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: rgba(195, 204, 224, 0.85);
}

[data-theme="light"] .summary-card__list li::before {
  color: #666;
}

/* ========================================
     HOURLY CARD (Stündliche Vorhersage)
     ======================================== */
.hourly-card {
  /* Liquid Glass Design */
  background: linear-gradient(
    135deg,
    rgba(30, 35, 50, 0.4) 0%,
    rgba(20, 25, 40, 0.5) 50%,
    rgba(30, 35, 50, 0.4) 100%
  );
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-radius: 24px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hourly-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.hourly-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
}

.hourly-card__icon {
  font-size: 1.2rem;
}

.hourly-card__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.hourly-card__scroll {
  display: flex;
  gap: 13px;
  overflow-x: auto;
  padding: var(--space-s) 10px;
  padding-bottom: var(--space-s);
  padding-top: var(--space-s);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.hourly-card__scroll::-webkit-scrollbar {
  height: 6px;
}

.hourly-card__scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.hourly-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 0 calc(28.333% - (2 * var(--space-m) / 3));
  scroll-snap-align: start;
  /* Liquid Glass Design */
  background: linear-gradient(
    135deg,
    rgba(35, 40, 55, 0.3) 0%,
    rgba(25, 30, 45, 0.4) 50%,
    rgba(35, 40, 55, 0.3) 100%
  );
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 10px 8px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.hourly-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.hourly-item:hover::before {
  left: 100%;
}

.hourly-item:hover {
  transform: scale(1.08) translateY(-2px);
  background: linear-gradient(
    135deg,
    rgba(45, 50, 65, 0.4) 0%,
    rgba(35, 40, 55, 0.5) 50%,
    rgba(45, 50, 65, 0.4) 100%
  );
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
}

.hourly-item:active {
  transform: scale(1.02) translateY(-1px);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.hourly-item > * {
  position: relative;
  z-index: 1;
}

.hourly-item__temp {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}

.hourly-item__temp--highlight {
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.hourly-item__icon {
  font-size: 1.6rem;
  line-height: 1;
}

.hourly-item__precip {
  font-size: 0.65rem;
  color: #6eb5ff;
}

.hourly-item__time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ========================================
     DAILY CARD (Mehrtägige Vorhersage)
     ======================================== */
.daily-card {
  /* Liquid Glass Design */
  background: linear-gradient(
    135deg,
    rgba(30, 35, 50, 0.4) 0%,
    rgba(20, 25, 40, 0.5) 50%,
    rgba(30, 35, 50, 0.4) 100%
  );
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-radius: 24px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.daily-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.daily-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}

.daily-card__icon {
  font-size: 1.2rem;
}

.daily-card__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.daily-card__grid {
  display: flex;
  gap: 17px;
  overflow-x: auto;
  padding-bottom: var(--space-s);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-left: calc(50% - 129px);
  padding-right: calc(50% - 124px);
  scroll-padding: 50% - 96px;
}

.daily-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 64px;
  padding: var(--space-m) var(--space-s);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  /* Liquid Glass Design */
  background: linear-gradient(
    135deg,
    rgba(40, 45, 60, 0.4) 0%,
    rgba(30, 35, 50, 0.5) 50%,
    rgba(40, 45, 60, 0.4) 100%
  );
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: inherit;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}

.daily-item:hover {
  background: rgba(80, 80, 80, 0.8);
  transform: translateY(-2px);
}

.daily-item:active {
  transform: scale(0.97);
}

.daily-item__max {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.daily-item__min {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.daily-item__icon {
  font-size: 1.8rem;
  line-height: 1;
  margin: var(--space-xs) 0;
}

.daily-item__precip {
  font-size: 0.8rem;
  font-weight: 600;
}

.daily-item__precip--low {
  color: #6dd5ed;
}

.daily-item__precip--medium {
  color: #4ecdc4;
}

.daily-item__precip--high {
  color: #45b7d1;
}

.daily-item__weekday {
  font-size: 0.8rem;
  font-weight: 500;
}

.daily-item__date {
  font-size: 0.7rem;
  color: var(--color-text-muted-2);
}

/* Light Mode overrides for daily card (ensure boxes are light and text is dark) */
[data-theme="light"] .daily-card {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--theme-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .daily-card__title {
  color: var(--theme-text);
}

[data-theme="light"] .daily-item {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--theme-text);
}

[data-theme="light"] .daily-item__max {
  color: var(--theme-text);
}

[data-theme="light"] .daily-item__min {
  color: var(--theme-text-muted);
}

/* Make daily-item hover subtle in light mode */
[data-theme="light"] .daily-item:hover {
  background: rgba(245, 245, 245, 1);
}

/* Light Mode: ensure interactive boxes keep a white surface on hover (avoid grey) */
[data-theme="light"] .card:hover,
[data-theme="light"] .settings-row:hover,
[data-theme="light"] .settings-card:hover,
[data-theme="light"] .settings-option:hover,
[data-theme="light"] .unit-selector-option:hover,
[data-theme="light"] .theme-option:hover,
[data-theme="light"] .language-option:hover,
[data-theme="light"] .daily-item:hover,
[data-theme="light"] .insight-card:hover,
[data-theme="light"] .summary-card:hover,
[data-theme="light"] .weather-card:hover,
[data-theme="light"] .metric-card:hover,
[data-theme="light"] .detail-card:hover,
[data-theme="light"] .forecast-card:hover,
[data-theme="light"] .source-card:hover,
[data-theme="light"] .health-metric-card:hover {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* ========================================
     DAY DETAIL MODAL
     ======================================== */
.day-detail__hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-l) 0;
}

.day-detail__main-icon {
  font-size: 4rem;
}

.day-detail__temps {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.day-detail__max {
  font-size: 1.5rem;
  font-weight: 600;
}

.day-detail__min {
  font-size: 1.2rem;
  color: var(--color-text-muted-2);
}

.day-detail__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
  padding: var(--space-m) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.day-detail__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.day-detail__stat-icon {
  font-size: 1.5rem;
}

.day-detail__stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted-2);
}

.day-detail__stat-value {
  font-size: 0.9rem;
  font-weight: 500;
}

.day-detail__hours-section {
  margin-top: var(--space-m);
}

.day-detail__section-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--space-s);
}

.day-detail__hours-scroll {
  display: flex;
  gap: var(--space-m);
  overflow-x: auto;
  padding-bottom: var(--space-s);
}

.day-detail__hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 50px;
}

.day-detail__hour-time {
  font-size: 0.75rem;
  color: var(--color-text-muted-2);
}

.day-detail__hour-icon {
  font-size: 1.4rem;
}

.day-detail__hour-temp {
  font-size: 0.9rem;
  font-weight: 500;
}

.card-title {
  font-size: var(--font-title);
  margin-bottom: var(--space-s);
}

.card-subtitle {
  font-size: var(--font-caption);
  color: var(--color-text-muted-2);
  margin-bottom: var(--space-s);
}

.card-list {
  list-style: disc;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Weather Hero - Widget-Design wie in den Screenshots */
.weather-hero {
  padding: 16px;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  margin: 0;
  width: 100%;
}

.weather-hero__widget {
  /* Liquid Glass Effect */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.12) 100%
  );
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 5;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  color: #ffffff;
}

.weather-hero__location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.weather-hero__location-icon {
  font-size: 0.9rem;
}

.weather-hero__location-name {
  font-size: 1rem;
  font-weight: 600;
}

.weather-hero__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}

.weather-hero__temp-block {
  display: flex;
  align-items: flex-start;
}

.weather-hero__temp-value {
  font-size: 5rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -4px;
}

.weather-hero__icon-block {
  display: flex;
  align-items: center;
  justify-content: center;
}

.weather-hero__weather-icon {
  font-size: 4rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.weather-hero__condition {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 4px;
}

.weather-hero__minmax {
  display: flex;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.85;
  margin-bottom: 12px;
}

.weather-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}

.weather-hero__feels {
  font-weight: 500;
}

.weather-hero__local-time {
  font-weight: 400;
}

.weather-hero__updated {
  font-weight: 400;
  opacity: 0.8;
}

.weather-hero__quick-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  width: 100%;
}

.weather-hero__stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.weather-hero__stat-icon {
  font-size: 1rem;
}

.weather-hero__stat-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.weather-hero__header {
  display: flex;
  justify-content: space-between;
  padding: 70px 20px 30px;
  z-index: 5;
  position: relative;
  background: var(--sky-top, #5a6b73);
  margin-top: 0;
  margin-bottom: 0;
}

.weather-hero__left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.weather-hero__label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

.weather-hero__temp-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

.weather-hero__temp-value {
  font-size: 6rem;
  font-weight: 700;
  line-height: 0.85;
  color: #ffffff;
  letter-spacing: -3px;
}

.weather-hero__temp-icon {
  font-size: 3rem;
  opacity: 1;
  margin-top: 8px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.weather-hero__minmax {
  display: flex;
  gap: 6px;
  font-size: 1.15rem;
  color: #ffffff;
  margin-top: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.weather-hero__minmax span {
  font-weight: 700;
}

.weather-hero__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
  padding-top: 4px;
}

.weather-hero__condition {
  font-size: 1.6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.15);
}

.weather-hero__feels {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

.weather-hero__scene {
  width: 100%;
  position: relative;
  z-index: 1;
  margin-top: 16px;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 24px;
}

.weather-hero__updated {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
  font-style: normal;
}

/* Pull-to-Refresh Indicator */
.pull-refresh-indicator {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 28, 50, 0.95);
  backdrop-filter: blur(12px);
  padding: 10px 20px;
  border-radius: 25px;
  color: white;
  font-size: 0.9rem;
  z-index: 100;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.pull-refresh-indicator.visible {
  opacity: 1;
}

.pull-refresh-indicator.pulling {
  transform: translateX(-50%) translateY(10px);
}

.pull-refresh-indicator--warning {
  background: rgba(180, 100, 50, 0.95);
}

.pull-refresh-indicator--success {
  background: rgba(50, 150, 100, 0.95);
}

.weather-hero__scene {
  width: 100%;
  position: relative;
  z-index: 1;
  margin-top: 8px;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 24px;
}

/* CSS-Variablen für die Übergangsfarben erben */
.weather-hero__scene {
  --sky-top: var(--sky-top, #5a6a72);
  --sky-top-rgb: var(--sky-top-rgb, 90, 106, 114);
  --page-bg: var(--page-bg, #2a2030);
  --page-bg-rgb: var(--page-bg-rgb, 42, 32, 48);
}

.weather-hero__scene::before {
  display: none;
}

.frog-hero-pond {
  width: 100%;
  height: 380px;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 24px;
  /* Default CSS-Variablen für dynamische Gradienten */
  --sky-top: #3a4055;
  --sky-top-rgb: 58, 64, 85;
  --sky-mid: #4a5065;
  --sky-bottom: #5a6070;
  --ground-color: #4a3845;
  --ground-color-rgb: 74, 56, 69;
  --page-bg: #2a2030;
  --page-bg-rgb: 42, 32, 48;
}

.frog-hero-pond::before {
  display: none;
}

.frog-hero-pond::after {
  display: none;
}

/* Alte Styles entfernen */
.weather-hero__temp-row {
  display: none;
}

.weather-hero__temp {
  display: none;
}

.weather-hero__icon {
  display: none;
}

.weather-hero__band {
  display: none;
}

.weather-hero__chips {
  display: none;
}

.weather-hero__chips span {
  display: none;
}

.hourly-strip {
  display: flex;
  gap: var(--space-s);
  overflow-x: auto;
  padding-bottom: 4px;
}

.hourly-chip {
  min-width: 56px;
  padding: 6px 8px;
  border-radius: 16px;
  background: rgba(10, 15, 30, 0.9);
  text-align: center;
  font-size: var(--font-caption);
}

.daily-strip {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
}

.daily-column {
  flex: 1;
  text-align: center;
  font-size: var(--font-caption);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-row li {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(12, 24, 48, 0.8);
  font-size: var(--font-caption);
}

.bottom-nav {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 16px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  /* Responsive width: fills screen with margins, capped at 500px */
  width: calc(100% - 32px);
  max-width: 500px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 0;
  /* Subtle Glass Effect - reduced blur */
  background: linear-gradient(
    135deg,
    rgba(18, 28, 45, 0.65) 0%,
    rgba(8, 15, 28, 0.75) 50%,
    rgba(18, 28, 45, 0.65) 100%
  );
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    0 1px 4px rgba(0, 0, 0, 0.15);
  z-index: 40;
  box-sizing: border-box;
  margin: 0 auto;
}

.bottom-nav__button {
  position: relative;
  /* Flex: 1 for equal distribution of space */
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 1vw, 5px);
  font-size: clamp(0.65rem, 2vw, 0.75rem);
  font-weight: 500;
  padding: 10px 8px;
  border-radius: 25px;
  cursor: pointer;
  transition:
    color 0.12s ease-out,
    background 0.12s ease-out,
    padding 0.12s ease-out,
    flex 0.2s ease-out;
  overflow: hidden;
  box-sizing: border-box;
}

.bottom-nav__button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at center,
    rgba(138, 180, 255, 0.15) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bottom-nav__button:hover {
  color: rgba(255, 255, 255, 0.9);
  transform: none;
}

.bottom-nav__button:hover::before {
  opacity: 1;
}

.bottom-nav__button:active {
  transform: translateY(0) scale(0.98);
}

.bottom-nav__button--active {
  color: #ffffff;
  background: linear-gradient(
    135deg,
    rgba(99, 140, 255, 0.3) 0%,
    rgba(138, 180, 255, 0.2) 100%
  );
  box-shadow:
    0 4px 16px rgba(99, 140, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  /* Active button gets more space for label */
  flex: 1.7 1 0;
  padding: 10px 12px;
}

.bottom-nav__button--active::before {
  opacity: 0;
}

.bottom-nav__button--active .bottom-nav__icon {
  transform: scale(1.02);
}

.bottom-nav__icon {
  font-size: clamp(1.1rem, 4vw, 1.3rem);
  transition:
    transform 0.2s ease-out,
    color 0.2s ease-out;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.bottom-nav__label {
  font-size: clamp(0.6rem, 2vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition:
    opacity 0.18s ease-out,
    max-width 0.2s ease-out;
}

.bottom-nav__button--active .bottom-nav__label {
  opacity: 1;
  max-width: 120px;
}

/* Dev Dashboard Button - Special styling */
.bottom-nav__button--dev {
  animation: slideInFromRight 0.3s ease-out;
}

.bottom-nav__button--dev .bottom-nav__icon {
  color: #a78bfa;
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Glow animation for nav */
@keyframes navGlow {
  0%,
  100% {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 2px 8px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow:
      0 8px 40px rgba(99, 140, 255, 0.15),
      0 2px 8px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
}

/* Ripple effect on click */
@keyframes navRipple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.bottom-nav__button .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: navRipple 0.6s cubic-bezier(0, 0, 0.2, 1);
  pointer-events: none;
}

/* Entrance animation for nav - subtle */
@keyframes navSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.bottom-nav {
  animation: navSlideUp 0.2s ease-out forwards;
}

/* Responsive adjustments for very small screens (iPhone SE, etc.) */
@media (max-width: 380px) {
  .bottom-nav {
    width: calc(100% - 24px);
    padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    border-radius: 40px;
  }

  .bottom-nav__button {
    padding: 8px 6px;
    gap: 2px;
  }

  .bottom-nav__button--active {
    padding: 8px 8px;
    flex: 1.8 1 0; /* Increased flex for small screens */
  }

  .bottom-nav__icon {
    font-size: 1.05rem;
  }

  /* Specific rule for active label to prevent overriding the hidden state of inactive labels */
  .bottom-nav__button--active .bottom-nav__label {
    font-size: 0.55rem;
    max-width: 80px; /* Increased from 50px */
    letter-spacing: 0.1px;
  }
}

/* Extra small screens (< 320px) - minimal label */
@media (max-width: 320px) {
  .bottom-nav {
    width: calc(100% - 16px);
    padding: 5px 6px;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
  }

  .bottom-nav__button {
    padding: 6px 4px;
  }

  .bottom-nav__button--active {
    padding: 6px 6px;
    flex: 2 1 0; /* Increased to allow label to fit */
  }

  .bottom-nav__icon {
    font-size: 1rem;
  }

  /* Specific rule for active label */
  .bottom-nav__button--active .bottom-nav__label {
    font-size: 0.5rem;
    max-width: 60px; /* Increased from 40px */
  }
}

/* Medium-large phones and small tablets */
@media (min-width: 600px) {
  .bottom-nav {
    max-width: 500px;
    padding: 10px 20px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 4px;
  }

  .bottom-nav__button {
    padding: 12px 14px;
  }

  .bottom-nav__button--active {
    padding: 12px 18px;
    flex: 1.8 1 0;
  }
}

/* Hover state for desktop - subtle lift */
@media (hover: hover) {
  .bottom-nav:hover {
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.45),
      0 4px 12px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav,
  .bottom-nav__button,
  .bottom-nav__icon,
  .bottom-nav__label {
    animation: none;
    transition: none;
  }

  .bottom-nav__button .ripple {
    display: none;
  }
}

@keyframes frogSway {
  0%,
  100% {
    transform: translateX(-50%) rotate(2deg);
  }
  50% {
    transform: translateX(-50%) rotate(-2deg);
  }
}

.overview-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.detail-grid article {
  min-height: 220px;
}

.forecast-card,
.hourly-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.forecast-shell,
.hourly-shell {
  overflow-x: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px, 1fr);
  gap: 0.85rem;
  padding-bottom: 0.35rem;
  scroll-snap-type: x proximity;
}

.forecast-day,
.hour-chip {
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.forecast-day strong,
.hour-chip strong {
  font-size: 1.05rem;
}

.forecast-day .temps {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.hour-chip {
  min-width: 140px;
}

.hour-chip .metrics {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.app-main .map-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.app-main .map-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 340px;
}

.app-main .weather-map {
  min-height: 260px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(93, 123, 255, 0.18),
      transparent 55%
    ),
    rgba(3, 7, 18, 0.85);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.app-main #weather-map {
  min-height: 260px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at 70% 15%,
      rgba(13, 110, 253, 0.15),
      transparent 60%
    ),
    rgba(5, 8, 20, 0.9);
  position: relative;
}

.app-main #weather-map:empty::before,
.app-main .weather-map:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  text-align: center;
  padding: 1.25rem;
  max-width: 75%;
  line-height: 1.4;
  display: block;
}

.app-main #weather-map:empty::after,
.app-main .weather-map:empty::after {
  content: "☁️";
  font-size: 2rem;
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.55);
  display: block;
}

.app-main .map-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.65rem;
}

.app-main .map-controls-grid > div {
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  min-height: 72px;
  position: relative;
}

.app-main .map-controls-grid > div:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  line-height: 1.3;
  display: block;
}

.app-main .map-layer-context {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.app-main .map-layer-context:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  display: block;
}

.app-main .map-inspector {
  margin-top: 0.25rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  min-height: 80px;
  position: relative;
}

.app-main .map-inspector:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.4;
  display: block;
}

.alerts-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.alerts-panel #weather-alerts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.alerts-panel .alert-card {
  padding: 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 84, 84, 0.08);
}

.history-analytics-grid article {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.historical-shell,
.analytics-shell {
  min-height: 220px;
}

.tonal-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
}

.badge {
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  background: rgba(93, 123, 255, 0.2);
  color: var(--text-heading);
}

.placeholder-state {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 150px;
  color: rgba(255, 255, 255, 0.65);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
}

.helper-text {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.text-muted {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
}

@media (max-width: 1024px) {
  .app-main {
    padding: 1.5rem 0.5rem 3rem;
  }

  .card-section,
  .surface-card {
    padding: 1rem;
  }

  .hero-grid,
  .map-alerts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .app-main {
    width: 100%;
    padding: 1rem 0.65rem 2.25rem;
  }

  .card-section,
  .surface-card,
  .hourly-card,
  .forecast-card {
    padding: 1rem;
    border-radius: 1rem;
  }

  .app-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .search-meta-grid,
  .hero-grid,
  .detail-grid,
  .map-alerts-grid,
  .history-analytics-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .search-input-group {
    flex-direction: column;
    gap: 0.75rem;
  }

  .search-input-group input,
  .search-input-group button {
    width: 100%;
  }

  .section-headline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .hero-details,
  .hero-stats,
  .weather-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .overview-card,
  .hero-card,
  .forecast-card,
  .hourly-card {
    margin-inline: 0;
  }

  .hero-temperature {
    font-size: clamp(2.25rem, 10vw, 3.25rem);
  }

  .section-headline h2 {
    font-size: 1.25rem;
  }

  .map-panel {
    padding: 0.85rem;
  }

  .map-body {
    flex-direction: column;
    gap: 0.75rem;
  }

  .weather-map {
    min-height: 220px;
    height: 260px;
    border-radius: 1rem;
  }

  .map-controls-grid {
    gap: 0.65rem;
  }

  .map-layer-context,
  .map-inspector,
  .map-radar-controls,
  .map-quick-actions,
  .map-overlay-legend {
    width: 100%;
  }

  .map-inspector {
    margin-top: 0.75rem;
  }

  .map-body {
    flex-direction: column;
    gap: 1rem;
  }
}

.climate-section {
  padding: 1.25rem 1rem 1rem;
}

.climate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem;
}

.climate-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.climate-card[data-accent="violet"] {
  background: linear-gradient(
    160deg,
    rgba(142, 80, 199, 0.35),
    rgba(61, 39, 96, 0.6)
  );
}

.climate-card[data-accent="ocean"] {
  background: linear-gradient(
    160deg,
    rgba(78, 149, 255, 0.35),
    rgba(22, 54, 92, 0.75)
  );
}

.climate-card[data-accent="amber"] {
  background: linear-gradient(
    160deg,
    rgba(255, 181, 84, 0.35),
    rgba(97, 58, 7, 0.7)
  );
}

.climate-card[data-accent="slate"] {
  background: linear-gradient(
    160deg,
    rgba(135, 148, 189, 0.25),
    rgba(42, 50, 72, 0.8)
  );
}

.climate-card strong {
  font-size: 1.5rem;
}

.climate-card small {
  color: rgba(250, 250, 255, 0.7);
}

.climate-card .climate-icon {
  font-size: 1.35rem;
  opacity: 0.85;
}

@media (max-width: 520px) {
  .app-main {
    padding: 1rem 0.75rem 3rem;
  }

  .card-section,
  .surface-card {
    padding: 1rem;
  }
}

/* ============================================
   HEADER
   ============================================ */

.app-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-light);
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  z-index: 1200;
  transition: var(--transition);
}

body.dark-mode .app-header {
  background: rgba(44, 62, 80, 0.95);
  box-shadow: var(--shadow-dark);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

/* Stronger heading colors for light mode */
.app-title,
.location-name,
.weather-forecast h2,
.sources-section h2,
.hourly-section h3,
.forecast-date,
.source-card h3 {
  color: var(--text-heading);
}

.header-controls {
  display: flex;
  gap: var(--spacing-md);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-icon,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-ghost,
.btn-small {
  font-family: inherit;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.icon-btn,
.btn-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-light);
}

.icon-btn:hover,
.btn-icon:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #4a63ff);
  color: #fff;
  border: 1px solid rgba(93, 123, 255, 0.4);
  box-shadow: 0 12px 30px rgba(93, 123, 255, 0.25);
}

.btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--accent-hover), #5d7bff);
}

.btn-primary:disabled,
.btn-primary[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-heading);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}

.btn-tertiary {
  background: rgba(93, 123, 255, 0.1);
  color: var(--text-heading);
  border: 1px solid rgba(93, 123, 255, 0.4);
}

.btn-ghost {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  color: var(--text-light);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.55);
}

.btn-link {
  background: none;
  border: none;
  color: var(--accent-hover);
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.btn-link:hover {
  text-decoration: underline;
}

.btn-small {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.85rem;
}

.btn-remove {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0;
}

.btn-remove:hover {
  transform: scale(1.1);
}

/* ============================================
   INPUTS
   ============================================ */

input[type="text"],
input[type="email"],
select {
  width: 100%;
  padding: var(--spacing-md);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
  background: var(--box-light);
  color: var(--text-light);
  transition: var(--transition);
}

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode select {
  background: var(--box-dark);
  color: var(--text-dark);
  border-color: var(--border-dark);
}

input[type="text"]:focus,
input[type="email"]:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

input::placeholder {
  color: var(--text-muted);
}

body.dark-mode input::placeholder {
  color: rgba(241, 242, 246, 0.6);
}

/* ============================================
   CONTAINER & LAYOUT
   ============================================ */

.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
  flex: 1;
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 32px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-light);
}

body.dark-mode .app-container {
  background: rgba(44, 62, 80, 0.92);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-dark);
}

/* ============================================
   SEARCH SECTION
   ============================================ */

.search-section {
  background: var(--box-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-light);
  margin-bottom: var(--spacing-xl);
  transition: var(--transition);
}

body.dark-mode .search-section {
  background: var(--box-dark);
  box-shadow: var(--shadow-dark);
}

.search-box {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 200px;
}

.search-btn {
  flex-shrink: 0;
  min-width: 120px;
}

/* Autocomplete Dropdown */
.autocomplete-dropdown {
  grid-column: 1 / -1;
  order: 3;
  background: var(--box-light);
  border: 1px solid var(--border-light);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 400px;
  overflow-y: auto;
  display: none;
  animation: slideDown 0.2s ease-out;
  margin-top: -1px;
  width: 100%;
}

body.dark-mode .autocomplete-dropdown {
  background: var(--box-dark);
  border-color: var(--border-dark);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 400px;
  }
}

.autocomplete-item {
  padding: var(--spacing-md);
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
}

body.dark-mode .autocomplete-item {
  border-bottom-color: var(--border-dark);
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background-color: rgba(0, 123, 255, 0.08);
}

body.dark-mode .autocomplete-item:hover,
body.dark-mode .autocomplete-item.selected {
  background-color: rgba(0, 123, 255, 0.25);
}

.autocomplete-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.autocomplete-main strong {
  font-weight: 600;
  color: var(--text-heading);
}

.autocomplete-main strong mark {
  background-color: rgba(255, 193, 7, 0.4);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 700;
}

body.dark-mode .autocomplete-main strong mark {
  background-color: rgba(255, 193, 7, 0.5);
}

.autocomplete-secondary {
  font-size: 0.85rem;
  color: var(--text-muted);
}

body.dark-mode .autocomplete-secondary {
  color: rgba(241, 242, 246, 0.6);
}

.autocomplete-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.autocomplete-loading,
.autocomplete-no-results {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

body.dark-mode .autocomplete-loading,
body.dark-mode .autocomplete-no-results {
  color: rgba(241, 242, 246, 0.6);
}

.autocomplete-dropdown::-webkit-scrollbar {
  width: 8px;
}

.autocomplete-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.autocomplete-dropdown::-webkit-scrollbar-thumb {
  background: rgba(0, 123, 255, 0.3);
  border-radius: 4px;
}

.autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 123, 255, 0.5);
}

body.dark-mode .autocomplete-dropdown::-webkit-scrollbar-thumb {
  background: rgba(100, 181, 246, 0.4);
}

body.dark-mode .autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 181, 246, 0.6);
}

/* ============================================
   WEATHER SECTION
   ============================================ */

.weather-section,
.forecast-section {
  background: var(--box-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-light);
  margin-bottom: var(--spacing-xl);
  transition: var(--transition);
}

body.dark-mode .weather-section,
body.dark-mode .forecast-section {
  background: var(--box-dark);
  box-shadow: var(--shadow-dark);
}

.empty-state,
.error-state {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--text-muted);
}

body.dark-mode .empty-state,
body.dark-mode .error-state {
  color: rgba(241, 242, 246, 0.6);
}

.loading-state {
  text-align: center;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.spinner {
  font-size: 3rem;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Weather Current Display */
.weather-current {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.weather-current.advanced {
  grid-template-columns: 1fr;
  background: var(--box-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-light);
  border: 1px solid var(--border-light);
  gap: var(--spacing-xl);
}

body.dark-mode .weather-current.advanced {
  background: var(--box-dark);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-dark);
}

.location-header {
  grid-column: 1 / -1;
}

.location-name {
  font-size: 1.75rem;
  margin-bottom: var(--spacing-sm);
}

.location-time {
  display: block;
  font-size: 0.95rem;
  color: var(--text-muted);
}

body.dark-mode .location-time {
  color: rgba(241, 242, 246, 0.7);
}

.current-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.weather-current.advanced .current-main {
  grid-template-columns: minmax(220px, 260px) 1fr;
}

.temperature-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.current-emoji {
  font-size: 4rem;
}

.current-temp {
  font-size: 3rem;
  font-weight: 700;
}

.current-description {
  font-size: 1rem;
  color: var(--text-muted);
}

.current-feels {
  font-size: 0.95rem;
  color: var(--text-muted);
}

body.dark-mode .current-description {
  color: rgba(241, 242, 246, 0.7);
}

.current-extremes {
  display: flex;
  gap: var(--spacing-md);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.current-extremes strong {
  display: block;
  font-size: 1.1rem;
  color: var(--text-heading);
}

.current-highlights {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-md);
}

.location-astro-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-md);
}

.location-card,
.astro-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  background: linear-gradient(
    135deg,
    rgba(0, 123, 255, 0.08),
    rgba(0, 0, 0, 0)
  );
  min-height: 160px;
}

body.dark-mode .location-card,
body.dark-mode .astro-card {
  border-color: var(--border-dark);
  background: linear-gradient(
    135deg,
    rgba(0, 123, 255, 0.25),
    rgba(0, 0, 0, 0)
  );
}

.location-card h3,
.astro-card h3 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--spacing-sm);
  color: var(--text-muted);
}

.location-card strong {
  font-size: 1.35rem;
  display: block;
  margin-bottom: var(--spacing-xs);
}

.location-card-meta {
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.location-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.location-card-list li {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.astro-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

body.dark-mode .astro-row {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.astro-row:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.astro-label {
  font-weight: 600;
}

.astro-value {
  text-align: right;
}

.astro-value strong {
  display: block;
  font-size: 1.2rem;
}

.astro-value small {
  display: block;
  color: var(--text-muted);
}

.current-highlight {
  background: linear-gradient(
    135deg,
    rgba(0, 123, 255, 0.08),
    rgba(0, 0, 0, 0)
  );
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  border: 1px solid var(--border-light);
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

body.dark-mode .current-highlight {
  border-color: var(--border-dark);
  background: linear-gradient(
    135deg,
    rgba(0, 123, 255, 0.25),
    rgba(255, 255, 255, 0.05)
  );
}

.current-highlight .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.current-highlight strong {
  font-size: 1.5rem;
}

.current-highlight small {
  color: var(--text-muted);
}

.weather-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background: rgba(0, 123, 255, 0.05);
  border-radius: var(--radius-md);
}

body.dark-mode .detail-item {
  background: rgba(0, 123, 255, 0.1);
}

.detail-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-heading);
}

.detail-value {
  font-size: 1.25rem;
  font-weight: 700;
}

/* Hourly Data */
.hourly-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

body.dark-mode .hourly-section {
  border-top-color: var(--border-dark);
}

.hourly-section h3 {
  margin-bottom: var(--spacing-md);
}

.hourly-block {
  background: var(--box-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-light);
  margin-bottom: var(--spacing-lg);
}

body.dark-mode .hourly-block {
  background: var(--box-dark);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-dark);
}

.hourly-empty {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--text-muted);
}

.hourly-scroll {
  display: flex;
  overflow-x: auto;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

/* small hourly inside forecast cards */
.hourly-scroll.small {
  gap: 8px;
  padding: 8px 4px;
}
.hourly-item.small {
  width: 72px;
  background: rgba(0, 0, 0, 0.03);
  padding: 8px;
  border-radius: 8px;
  text-align: center;
  font-size: 0.9rem;
}
.hourly-item.small .hour-emoji {
  font-size: 1.25rem;
}
.forecast-item .forecast-hourly {
  margin-top: 10px;
}

.hourly-scroll::-webkit-scrollbar {
  height: 6px;
}

.hourly-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.hourly-scroll::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

.hourly-item {
  flex-shrink: 0;
  width: 100px;
  background: rgba(0, 123, 255, 0.05);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  cursor: grab;
  transition: var(--transition);
  border: 1px solid transparent;

  /* HIER SIND DIE NEUEN ZEILEN GEGEN DIE TEXTAUSWAHL */
  -webkit-user-select: none; /* Für Safari */
  -ms-user-select: none; /* Für Internet Explorer/Edge */
  user-select: none; /* Standard-Syntax für moderne Browser */
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -moz-user-select: none;
}

body.dark-mode .hourly-item {
  background: rgba(0, 123, 255, 0.1);
}

.hourly-item:hover {
  background: rgba(0, 123, 255, 0.15);
  border-color: var(--accent);
}

.hourly-item.active {
  background: var(--accent);
  color: white;
}

.hour-time {
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.hour-emoji {
  font-size: 2rem;
  margin-bottom: var(--spacing-xs);
}

.hour-temp {
  font-size: 1.25rem;
  font-weight: 600;
}

/* ============================================
   FORECAST SECTION
   ============================================ */

.forecast-pill-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl, 2.5rem);
}

.forecast-pill-headline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.forecast-pill-headline h2 {
  margin: 0;
}

.forecast-pill-meta {
  color: var(--text-muted);
  font-size: 0.95rem;
  white-space: nowrap;
}

.forecast-pill-list {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-xs);
}

.forecast-pill-list::-webkit-scrollbar {
  height: 6px;
}

.forecast-pill-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
}

.forecast-pill {
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.08),
      transparent 65%
    ),
    rgba(9, 13, 26, 0.9);
  padding: 1rem 0.85rem;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  color: var(--text-light);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

body.dark-mode .forecast-pill {
  background:
    radial-gradient(
      circle at 70% 0%,
      rgba(255, 255, 255, 0.08),
      transparent 55%
    ),
    rgba(16, 16, 20, 0.95);
}

.forecast-pill:hover,
.forecast-pill:focus-visible {
  border-color: rgba(255, 180, 92, 0.8);
  box-shadow: 0 8px 24px rgba(255, 180, 92, 0.12);
}

.forecast-pill.is-active {
  background: linear-gradient(
    135deg,
    rgba(255, 183, 77, 0.9),
    rgba(253, 126, 20, 0.85)
  );
  color: #1a0f05;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(253, 126, 20, 0.35);
}

.forecast-pill-temps strong {
  font-size: 1.5rem;
  line-height: 1;
}

.forecast-pill-temps span {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
}

.forecast-pill.is-active .forecast-pill-temps span {
  color: rgba(0, 0, 0, 0.6);
}

.forecast-pill-icon-wrap {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
}

.forecast-pill-icon-wrap img,
.forecast-pill-icon-wrap svg {
  width: 56px;
  height: 56px;
}

.forecast-pill-precip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.95rem;
}

.forecast-pill-precip strong {
  color: #f7b267;
  font-size: 1rem;
}

.forecast-pill.is-active .forecast-pill-precip strong {
  color: #1a0f05;
}

.forecast-pill-label {
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.forecast-pill-label .day-date {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.forecast-pill.is-active .day-date {
  color: rgba(0, 0, 0, 0.65);
}

.weather-forecast h2 {
  margin-bottom: var(--spacing-lg);
}

.forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
  justify-content: center; /* NEU: zentriert Grid-Items */
}

.forecast-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.forecast-carousel {
  position: relative;
}

.forecast-carousel-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.forecast-carousel-controls[data-disabled="true"] {
  display: none;
}

.forecast-nav {
  border: 1px solid rgba(0, 123, 255, 0.3);
  background: var(--box-light);
  color: var(--accent);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.dark-mode .forecast-nav {
  background: rgba(0, 123, 255, 0.12);
  color: var(--text-dark);
  border-color: rgba(0, 123, 255, 0.35);
}

.forecast-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.forecast-nav:not(:disabled):hover {
  background: var(--accent);
  color: #fff;
}

.forecast-carousel-indicator {
  font-weight: 600;
  color: var(--text-muted);
}

body.dark-mode .forecast-carousel-indicator {
  color: rgba(241, 242, 246, 0.7);
}

.forecast-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  gap: var(--spacing-lg);
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg); /* <-- wichtig */
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);

  justify-content: flex-start; /* bleibt */
}

.forecast-track-inner {
  display: flex;
  gap: var(--spacing-lg);
  margin-left: auto;
  margin-right: auto; /* <-- das ist okay */
}

@media (prefers-reduced-motion: reduce) {
  .forecast-track {
    scroll-behavior: auto;
  }
}

.forecast-track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.forecast-track::-webkit-scrollbar {
  height: 8px;
}

.forecast-track::-webkit-scrollbar-thumb {
  background: rgba(0, 123, 255, 0.3);
  border-radius: var(--radius-sm);
}

body.dark-mode .forecast-track::-webkit-scrollbar-thumb {
  background: rgba(14, 165, 233, 0.4);
}

.forecast-track .forecast-card {
  flex: 0 0 calc(100% / 3 - var(--spacing-lg) * 2 / 3);
  scroll-snap-align: center;
  min-width: 200px;
}

@media (min-width: 600px) {
  .forecast-track .forecast-card {
    flex: 0 0 calc(100% / 3 - var(--spacing-lg) * 2 / 3);
  }
}

@media (min-width: 1024px) {
  .forecast-track .forecast-card {
    flex: 0 0 calc(100% / 3 - var(--spacing-lg) * 2 / 3);
  }
}

.forecast-card {
  background: rgba(0, 123, 255, 0.05);
  border: 1px solid rgba(0, 123, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  transition: var(--transition);
  color: var(--text-light);
}

body.dark-mode .forecast-card {
  background: rgba(0, 123, 255, 0.12);
  border-color: rgba(0, 123, 255, 0.35);
  color: var(--text-dark);
}

.forecast-card:hover {
  background: rgba(0, 123, 255, 0.12);
  box-shadow: 0 6px 18px rgba(0, 123, 255, 0.2);
}

.forecast-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.forecast-date {
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--accent);
}

.forecast-meta {
  color: var(--text-muted);
}

.forecast-emoji {
  font-size: 2.5rem;
}

.forecast-temps {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.forecast-max {
  color: var(--danger);
  font-weight: 700;
  font-size: 1.25rem;
}

.forecast-min {
  color: #0099ff;
  font-weight: 700;
  font-size: 1.1rem;
}

.forecast-details {
  border: 1px dashed rgba(0, 123, 255, 0.3);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(0, 123, 255, 0.03);
  color: var(--text-light);
}

body.dark-mode .forecast-details {
  color: var(--text-dark);
}

.forecast-details summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.forecast-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: var(--spacing-sm);
}

.forecast-detail-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  background: rgba(0, 123, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs);
  color: var(--text-light);
}

body.dark-mode .forecast-detail-cell {
  background: rgba(0, 123, 255, 0.15);
  color: var(--text-dark);
}

.forecast-focus {
  margin-top: var(--spacing-xl);
  background: rgba(0, 123, 255, 0.05);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  color: var(--text-light);
}

body.dark-mode .forecast-focus {
  background: rgba(0, 123, 255, 0.15);
  color: var(--text-dark);
}

.forecast-focus-strip {
  display: flex;
  overflow-x: auto;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}

.forecast-focus-item {
  min-width: 90px;
  border: 1px solid rgba(0, 123, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  text-align: center;
  background: var(--box-light);
  color: var(--text-light);
}

body.dark-mode .forecast-focus-item {
  background: rgba(0, 123, 255, 0.12);
  border-color: rgba(0, 123, 255, 0.35);
  color: var(--text-dark);
}

.forecast-focus-item .emoji {
  font-size: 1.5rem;
}

.forecast-grid.advanced {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.forecast-card.advanced {
  gap: var(--spacing-md);
  background: linear-gradient(
    180deg,
    rgba(0, 123, 255, 0.06),
    rgba(0, 123, 255, 0.02)
  );
}

body.dark-mode .forecast-card.advanced {
  background: linear-gradient(
    180deg,
    rgba(14, 165, 233, 0.2),
    rgba(14, 116, 144, 0.08)
  );
}

.forecast-temps.advanced {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.forecast-temps.advanced .label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.forecast-temps.advanced .value {
  font-size: 1.2rem;
  font-weight: 600;
}

.forecast-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.metric-block {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 123, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.dark-mode .metric-block {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 123, 255, 0.4);
}

.metric-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.metric-value {
  font-weight: 600;
  font-size: 1.05rem;
}

.wind-compass {
  position: relative;
  width: 70px;
  height: 70px;
  margin-bottom: var(--spacing-xs);
  border-radius: 50%;
  border: 2px solid rgba(0, 123, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wind-compass-rose {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px dashed rgba(0, 123, 255, 0.3);
}

.wind-compass-arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 18px solid var(--accent);
  transform-origin: center 18px;
}

.wind-compass-label {
  font-size: 0.85rem;
  margin-top: var(--spacing-xs);
  display: block;
  text-align: center;
}

.wind-compass.is-empty {
  border-style: dashed;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.sun-track {
  margin-top: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.sun-track-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.sun-track-bar {
  position: relative;
  height: 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #0f172a 0%, #ffd166 50%, #0f172a 100%);
  overflow: hidden;
}

.sun-track-daylight {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sunrise, 0%);
  right: calc(100% - var(--sunset, 100%));
  background: linear-gradient(90deg, #ffd166, #fca311);
}

.sun-track-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.precip-timeline {
  margin-top: var(--spacing-md);
}

.precip-bars {
  display: grid;
  grid-template-columns: repeat(24, minmax(2px, 1fr));
  gap: 2px;
  height: 60px;
  align-items: flex-end;
}

.precip-bars.empty {
  align-items: center;
  justify-content: center;
  display: flex;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.precip-bar {
  display: inline-block;
  width: 100%;
  background: rgba(0, 123, 255, 0.4);
  border-radius: var(--radius-sm);
  min-height: 2px;
  height: var(--precip-height, 0%);
}

.precip-bar.is-night {
  background: rgba(15, 23, 42, 0.35);
}

body.dark-mode .precip-bar.is-night {
  background: rgba(255, 255, 255, 0.3);
}

.uv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.uv-chip.uv-low {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}

.uv-chip.uv-moderate {
  background: rgba(245, 158, 11, 0.15);
  color: #92400e;
}

.uv-chip.uv-high {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}

.uv-chip.uv-extreme {
  background: rgba(139, 92, 246, 0.15);
  color: #6d28d9;
}

.uv-chip.uv-unknown {
  background: rgba(107, 114, 128, 0.2);
  color: rgba(55, 65, 81, 0.9);
}

.hourly-matrix {
  margin-top: var(--spacing-xl);
  background: rgba(0, 123, 255, 0.05);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) 40px;
}

body.dark-mode .hourly-matrix {
  background: rgba(0, 123, 255, 0.15);
}

.hourly-matrix-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  overflow-x: auto;
}

.hourly-matrix-row {
  display: grid;
  grid-template-columns: 0px minmax(600px, 1fr);
  gap: var(--spacing-sm);
  align-items: center;
}

.matrix-header {
  font-weight: 600;
}

.matrix-day-label {
  font-weight: 600;
  color: var(--text-heading);
}

.matrix-hour-cells {
  display: grid;
  grid-template-columns: repeat(24, minmax(42px, 1fr));
  gap: 5px;
}

.matrix-cell {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 123, 255, 0.1);
  padding: 8px 4px;
  text-align: center;
  font-size: 0.75rem;
  min-height: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 50px; /* Breite der Blöcke */
}

.matrix-cell.lower {
  min-height: 280px; /* längere unteren Blöcke */
}

.hourly-matrix-grid.active-dragging {
  cursor: grabbing;
}

.hourly-matrix-grid {
  cursor: grab;
}

.matrix-cell.is-night {
  background: rgba(15, 23, 42, 0.08);
}

.matrix-cell.has-rain {
  border-color: rgba(0, 123, 255, 0.4);
  background: rgba(0, 123, 255, 0.15);
}

.matrix-cell .matrix-emoji {
  font-size: 1rem;
}

.matrix-header-cell {
  font-weight: 600;
  background: rgba(0, 123, 255, 0.12);
}

body.dark-mode .matrix-cell.is-night {
  background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .matrix-cell.has-rain {
  background: rgba(14, 165, 233, 0.25);
}

/* ============================================
   SOURCES SECTION
   ============================================ */

.sources-section {
  background: var(--box-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-light);
  margin-bottom: var(--spacing-xl);
  transition: var(--transition);
}

body.dark-mode .sources-section {
  background: var(--box-dark);
  box-shadow: var(--shadow-dark);
}

.sources-section h2 {
  margin-bottom: var(--spacing-lg);
}

.sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.source-card {
  background: rgba(0, 123, 255, 0.05);
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  transition: var(--transition);
}

body.dark-mode .source-card {
  background: rgba(0, 123, 255, 0.1);
}

.source-card:hover {
  box-shadow: 0 6px 18px rgba(0, 123, 255, 0.15);
}

.source-card h3 {
  margin-bottom: var(--spacing-md);
  color: var(--accent);
}

.source-content {
  font-size: 0.9rem;
}

/* Source comparison cards */
.source-compare {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--text-light);
}

body.dark-mode .source-compare {
  color: var(--text-dark);
}

.source-card {
  min-height: 110px;
}

/* Improve empty and error visuals */
.empty-state p,
.error-state p {
  font-size: 1.05rem;
  color: var(--text-muted);
}

/* ============================================
   ERROR MESSAGES
   ============================================ */

.error-container,
.toast-stack {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 360px;
  width: calc(100% - 32px);
  z-index: 1003;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.error-alert {
  background: rgba(20, 28, 50, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: toastSlideIn 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: auto;
  opacity: 0.95;
}

.error-alert.show {
  transform: translateY(0);
}

body.dark-mode .error-alert {
  background: rgba(20, 28, 50, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.error-alert.error-error {
  border-left: 3px solid #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

body.dark-mode .error-alert.error-error {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.error-alert.error-warning {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

body.dark-mode .error-alert.error-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

.error-alert.error-info {
  border-left: 3px solid #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  color: #0b4f91;
}

body.dark-mode .error-alert.error-info {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

.error-alert.error-success {
  border-left: 3px solid #22c55e;
  background: rgba(34, 197, 94, 0.12);
}

body.dark-mode .error-alert.error-success {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

@keyframes toastSlideIn {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 0.95;
  }
}

.error-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
}

.error-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  opacity: 0.9;
}

.error-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.error-title {
  font-weight: 600;
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
}

.error-message {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}

.error-meta {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.error-list {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
}

.error-list li {
  margin-bottom: 2px;
}

.error-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
  transition:
    background 0.2s,
    color 0.2s;
}

.error-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.error-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn-retry {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: var(--transition);
}

.btn-retry:hover {
  background: var(--accent-hover);
}

/* Error Types */
.error-error {
  border-left: 4px solid var(--danger);
}

.error-warning {
  border-left: 4px solid var(--warning);
}

.error-info {
  border-left: 4px solid var(--info);
}

.error-success {
  border-left: 4px solid var(--success);
}

/* ============================================
   MODAL
   ============================================ */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(2, 4, 12, 0.82);
  z-index: 999;
  pointer-events: none;
}

.modal-overlay.active {
  display: block;
  pointer-events: auto;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
  align-items: flex-start;
  justify-content: center;
}

#settings-modal {
  background: rgba(4, 7, 18, 0.96);
  backdrop-filter: blur(24px);
}

.modal.active {
  display: flex;
}

.modal-content {
  background: var(--modal-surface-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 100%;
  max-height: calc(100vh - 40px);
  margin: 20px auto;
  animation: modalSlideIn 0.3s ease;
  transition: var(--transition);
  overflow-y: auto;
}

body.dark-mode .modal-content {
  background: var(--modal-surface-dark);
}

#settings-modal .modal-content {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.6);
  width: min(560px, 100%);
  max-width: none;
  margin: 10px auto 30px;
}

@media (max-width: 640px) {
  #settings-modal {
    padding: 10px;
  }

  #settings-modal .modal-content {
    border-radius: 1.75rem;
    width: 100%;
    min-height: calc(100vh - 20px);
    margin: 0;
  }
}

#settings-modal .modal-body {
  padding-bottom: 2.5rem;
}

@keyframes modalSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
}

body.dark-mode .modal-header {
  border-bottom-color: var(--border-dark);
}

.modal-header h2 {
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: inherit;
}

.modal-close:hover {
  opacity: 0.7;
}

.modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  background: transparent;
}

.settings-lead {
  margin-bottom: 1rem;
  color: var(--text-muted);
  line-height: 1.4;
}

body.dark-mode .settings-lead {
  color: rgba(255, 255, 255, 0.75);
}

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.settings-section-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0;
}

.settings-row-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

body.dark-mode .settings-row-icon {
  background: rgba(255, 255, 255, 0.08);
}

.settings-row[data-accent="sun"] .settings-row-icon {
  background: rgba(255, 196, 0, 0.16);
  color: #fcd34d;
}

.settings-row[data-accent="leaf"] .settings-row-icon {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.settings-row[data-accent="marine"] .settings-row-icon {
  background: rgba(14, 165, 233, 0.18);
  color: #60a5fa;
}

.settings-row[data-accent="ember"] .settings-row-icon {
  background: rgba(248, 113, 113, 0.18);
  color: #fb7185;
}

.settings-row[data-accent="teal"] .settings-row-icon {
  background: rgba(45, 212, 191, 0.2);
  color: #5eead4;
}

.settings-row[data-accent="plum"] .settings-row-icon {
  background: rgba(192, 132, 252, 0.22);
  color: #c084fc;
}

.settings-row[data-accent="amber"] .settings-row-icon {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.settings-row[data-accent="indigo"] .settings-row-icon {
  background: rgba(129, 140, 248, 0.18);
  color: #a5b4fc;
}

.settings-row[data-accent="violet"] .settings-row-icon {
  background: rgba(167, 139, 250, 0.2);
  color: #c4b5fd;
}

.settings-row[data-accent="cyan"] .settings-row-icon {
  background: rgba(6, 182, 212, 0.22);
  color: #67e8f9;
}

.settings-row[data-accent="pink"] .settings-row-icon {
  background: rgba(244, 114, 182, 0.2);
  color: #f472b6;
}

.settings-row[data-accent="slate"] .settings-row-icon {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5f5;
}

.settings-row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.settings-row-body h3 {
  font-size: 1.05rem;
  margin: 0;
}

.settings-row-body p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

body.dark-mode .settings-row-body p {
  color: rgba(255, 255, 255, 0.75);
}

.settings-row-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-left: auto;
  min-width: 200px;
  justify-content: flex-end;
}

.settings-row-actions.stack {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.settings-row-actions.full-width {
  flex: 1 0 100%;
}

.tile-form {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .settings-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-row-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .tile-form {
    flex-direction: column;
    width: 100%;
  }

  .tile-field,
  .settings-select,
  .settings-input,
  .btn-secondary,
  .btn-link {
    width: 100%;
  }
}

.tile-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  min-width: 160px;
}

.switch-label {
  margin-right: 0.75rem;
  color: var(--color-text-primary);
  font-size: var(--font-body);
}

.btn-link {
  background: none;
  border: none;
  color: var(--accent-hover);
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.btn-link:hover {
  text-decoration: underline;
}

.tile-links {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tile-links a {
  color: #9eb5ff;
  text-decoration: none;
}

.tile-links a:hover {
  text-decoration: underline;
}

.settings-helper {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

body.dark-mode .settings-helper {
  color: rgba(255, 255, 255, 0.65);
}

.settings-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #e5edff;
  color: #1f2a68;
  width: fit-content;
}

body.dark-mode .settings-chip {
  background: #1f2a68;
  color: #f1f5ff;
}

.settings-advanced {
  border: 1px solid var(--border-light);
  border-radius: 22px;
  padding: var(--spacing-lg);
  background: var(--box-light);
}

body.dark-mode .settings-advanced {
  background: var(--box-dark);
  border-color: rgba(255, 255, 255, 0.08);
}

.settings-advanced summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: var(--spacing-md);
}

.settings-advanced summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 520px) {
  .settings-row {
    flex-direction: column;
  }

  .settings-row-actions,
  .tile-form {
    width: 100%;
    min-width: 0;
  }
}

.dark-mode-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 60px;
  height: 36px;
  cursor: pointer;
  margin: 0;
}

.dark-mode-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.dark-mode-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  border-radius: 34px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  padding: 3px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dark-mode-switch input:checked + .dark-mode-slider {
  background: #007bff;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.dark-mode-slider::after {
  content: "";
  position: absolute;
  height: 32px;
  width: 32px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-mode-switch input:checked + .dark-mode-slider::after {
  left: calc(100% - 35px);
  background: #fff;
}

.settings-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.settings-divider {
  height: 1px;
  background: var(--border-light);
  width: 100%;
}

body.dark-mode .settings-divider {
  background: var(--border-dark);
}

.settings-group {
  margin: 0;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 500;
}

.settings-select,
.settings-input {
  width: 100%;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--box-light);
}

body.dark-mode .settings-select,
body.dark-mode .settings-input {
  background: var(--box-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.settings-helper-label {
  font-weight: 600;
}

.settings-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.settings-input-grid {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.settings-input-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 500;
}

.settings-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  cursor: pointer;
}

.settings-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.settings-select {
  max-width: 300px;
}

.api-status-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.api-status-item {
  border: 1px solid var(--border-light);
  border-left-width: 4px;
  border-radius: 10px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--box-light);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: var(--transition);
}

body.dark-mode .api-status-item {
  border-color: var(--border-dark);
  background: var(--box-dark);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.api-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

.api-status-row-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.api-status-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.api-status-state {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
}

body.dark-mode .api-status-state {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}

.api-status-tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.6);
}

body.dark-mode .api-status-tag {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.api-status-message {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.8);
}

body.dark-mode .api-status-message {
  color: rgba(255, 255, 255, 0.9);
}

.api-status-meta,
.api-status-extra {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.6);
}

body.dark-mode .api-status-meta,
body.dark-mode .api-status-extra {
  color: rgba(255, 255, 255, 0.65);
}

.api-status-keyline {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-xs);
}

.api-status-key {
  font-size: 0.8rem;
  font-weight: 600;
}

.api-status-key.key-ok {
  color: #2ecc71;
}

.api-status-key.key-missing {
  color: #e67e22;
}

.api-status-action {
  border: 1px solid var(--border-light);
  background: rgba(0, 0, 0, 0.02);
  color: inherit;
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: var(--transition);
}

.api-status-action:hover {
  background: rgba(0, 0, 0, 0.08);
}

body.dark-mode .api-status-action {
  border-color: var(--border-dark);
  background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .api-status-action:hover {
  background: rgba(255, 255, 255, 0.12);
}

.api-status-empty {
  text-align: center;
  font-size: 0.9rem;
  padding: var(--spacing-sm);
  color: rgba(0, 0, 0, 0.6);
}

body.dark-mode .api-status-empty {
  color: rgba(255, 255, 255, 0.6);
}

.api-status-item.status-online {
  border-left-color: #2ecc71;
}

.api-status-item.status-warning {
  border-left-color: #f39c12;
}

.api-status-item.status-error {
  border-left-color: #e74c3c;
}

.api-status-item.status-missing-key {
  border-left-color: #8e44ad;
}

.api-status-item.status-skipped {
  border-left-color: #7f8c8d;
}

.api-status-item.status-invalid-key {
  border-left-color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
}

body.dark-mode .api-status-item.status-invalid-key {
  background: rgba(192, 57, 43, 0.15);
}

.api-status-item.status-pending {
  border-left-color: #3498db;
}

@media (max-width: 600px) {
  .settings-quick-actions {
    flex-direction: column;
  }

  .weather-current.advanced .current-main {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   FOOTER
   ============================================ */

.app-footer {
  background: rgba(0, 0, 0, 0.05);
  padding: var(--spacing-lg) var(--spacing-md);
  text-align: center;
  margin-top: auto;
  border-top: 1px solid var(--border-light);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

body.dark-mode .app-footer {
  background: rgba(0, 0, 0, 0.3);
  border-top-color: var(--border-dark);
}

.footer-text {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

.footer-text a {
  color: var(--accent);
  text-decoration: none;
}

.footer-text a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .app-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
}

.legal-section {
  margin-top: var(--spacing-xl);
}

.legal-card {
  background: var(--box-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-light);
  line-height: 1.6;
}

body.dark-mode .legal-card {
  background: var(--box-dark);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-dark);
}

.legal-card h2 {
  margin-bottom: var(--spacing-md);
}

.legal-card ul,
.legal-card ol {
  margin-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.legal-card a {
  color: var(--accent);
  text-decoration: none;
}

.legal-card a:hover {
  text-decoration: underline;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  :root {
    --spacing-md: 0.75rem;
    --spacing-lg: 1.25rem;
  }

  .app-header {
    padding: var(--spacing-md) 0;
  }

  .header-content {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .app-title {
    font-size: 1.5rem;
  }

  .header-controls {
    width: 100%;
  }

  .search-box {
    flex-direction: column;
  }

  .weather-current {
    grid-template-columns: 1fr;
  }

  .current-main {
    grid-template-columns: 1fr;
  }

  .weather-details {
    grid-template-columns: 1fr;
  }

  .sources-grid {
    grid-template-columns: 1fr;
  }

  .forecast-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .current-emoji {
    font-size: 3rem;
  }

  .current-temp {
    font-size: 2.25rem;
  }

  .error-container {
    max-width: calc(100vw - 40px);
    right: 20px;
    left: 20px;
  }

  .modal {
    width: 95vw;
  }
}

@media (max-width: 480px) {
  .app-title {
    font-size: 1.25rem;
  }

  .location-name {
    font-size: 1.25rem;
  }

  .current-emoji {
    font-size: 2.5rem;
  }

  .current-temp {
    font-size: 2rem;
  }

  .forecast-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hourly-item {
    width: 80px;
    padding: var(--spacing-sm);
  }

  .hourly-item .hour-emoji {
    font-size: 1.5rem;
  }

  .btn-primary {
    padding: var(--spacing-md) 1rem;
    font-size: 0.9rem;
  }
}

/* ============================================
   ACCESSIBILITY - WCAG 2.1 AA
   ============================================ */

/* Skip Link (for keyboard users) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Prefers Color Scheme */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--theme-bg);
    color: var(--theme-text);
  }
}

/* Enhanced Focus Visible for Keyboard Navigation */
*:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Remove default outline and apply consistent style */
button:focus,
input:focus,
select:focus,
a:focus {
  outline: none;
}

/* Contrast improvements for all states */
button,
.btn-primary,
.btn-secondary,
.btn-icon,
.btn-small {
  outline: none;
}

button:not(:disabled):hover,
button:not(:disabled):focus-visible {
  opacity: 1;
}

button:disabled,
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Heading hierarchy - semantic & readable */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.4;
}

h1 {
  font-size: 2.5rem;
  color: var(--text-heading);
}

h2 {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
}

/* Standard Light Mode */
[data-theme="light"] h2,
[data-theme="light"] .insight-card__text,
[data-theme="light"] .card p,
[data-theme="light"] .card small {
  color: #222 !important; /* dunkelgrau */
}

/* Dark Mode */
[data-theme="dark"] h2,
[data-theme="dark"] .insight-card__text,
[data-theme="dark"] .card p,
[data-theme="dark"] .card small {
  color: #f1f1f1 !important; /* helles Grau/Weiß */
}

h3 {
  font-size: 1.5rem;
  color: var(--text-heading);
  margin-bottom: var(--spacing-sm);
}

/* ARIA labels visibility (for screen readers) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Semantic region roles */
main {
  min-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* Better contrast for disabled states */
button:disabled,
input:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  color: var(--text-muted);
}

/* Link focus and hover states */
a {
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Form element focus states for better visibility */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 0px;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
}

.input-highlight {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25) !important;
  animation: inputPulse 1.6s ease;
}

@keyframes inputPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.35);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

/* Alert & Error messages - high contrast */
.alert-error {
  background-color: #f8d7da;
  border: 2px solid #721c24;
  color: #721c24;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  font-weight: 500;
}

body.dark-mode .alert-error {
  background-color: rgba(220, 53, 69, 0.2);
  border-color: #ff6b6b;
  color: #ff6b6b;
}

.alert-success {
  background-color: #d4edda;
  border: 2px solid #155724;
  color: #155724;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  font-weight: 500;
}

body.dark-mode .alert-success {
  background-color: rgba(40, 167, 69, 0.2);
  border-color: #51cf66;
  color: #51cf66;
}

.alert-info {
  background-color: #d1ecf1;
  border: 2px solid #0c5460;
  color: #0c5460;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  font-weight: 500;
}

body.dark-mode .alert-info {
  background-color: rgba(23, 162, 184, 0.2);
  border-color: #74c0fc;
  color: #74c0fc;
}

/* Dropdown/Select menu accessibility */
select {
  min-height: 44px; /* Touch-friendly */
  cursor: pointer;
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23007BFF' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-color: var(--box-light);
}

body.dark-mode select {
  background-color: var(--box-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f1f2f6' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* Buttons should be at least 44x44 for touch */
button,
.btn-primary,
.btn-secondary,
.btn-icon {
  min-height: 44px;
  min-width: 44px;
}

/* Better spacing for interactive elements */
button + button,
button + a,
a + button {
  margin-left: var(--spacing-sm);
}

/* High contrast for error/warning text */
.error-text,
.warning-text,
.success-text {
  font-weight: 600;
}

.error-text {
  color: #721c24;
}

body.dark-mode .error-text {
  color: #ff6b6b;
}

.warning-text {
  color: #856404;
}

body.dark-mode .warning-text {
  color: #ffd93d;
}

.success-text {
  color: #155724;
}

body.dark-mode .success-text {
  color: #51cf66;
}

/* Increased line-height for readability */
p,
li,
td,
label,
.card-text {
  line-height: 1.6;
}

/* Label styling for form inputs */
label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-heading);
  line-height: 1.4;
}

/* Increase icon button size for accessibility */
.icon-btn {
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Better contrast for placeholder text */
::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

/* ============================================
   TABS FOR EXTRA FEATURES
   ============================================ */

.extra-features-section {
  margin: var(--spacing-xl) 0;
}

.tabs-container {
  display: flex;
  gap: var(--spacing-sm);
  border-bottom: 2px solid var(--border-light);
  padding-bottom: var(--spacing-sm);
  overflow-x: auto;
  scroll-behavior: smooth;
}

body.dark-mode .tabs-container {
  border-bottom-color: var(--border-dark);
}

.tab-btn {
  background: transparent;
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
  min-height: 44px;
}

.tab-btn:hover {
  color: var(--accent);
  background: rgba(0, 123, 255, 0.05);
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

.tab-content {
  padding: var(--spacing-lg) 0;
  display: none;
}

.tab-content.active {
  display: block;
}

/* Maps Section */
.maps-section h2,
.alerts-section h2,
.historical-section h2,
.analytics-section h2 {
  margin-bottom: var(--spacing-md);
  font-size: 1.5rem;
}

#weather-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.alert-summary {
  font-weight: 600;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
}

body.dark-mode .alert-summary {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-dark);
}

.alert-card {
  display: flex;
  gap: var(--spacing-md);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  border: 1px solid var(--border-light);
  border-left-width: 5px;
  background: var(--box-light);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

body.dark-mode .alert-card {
  background: var(--box-dark);
  border-color: var(--border-dark);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}

.alert-card .alert-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.alert-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-sm);
  font-weight: 600;
}

.alert-card p {
  margin: 0;
  color: var(--text-muted);
}

.alert-card.alert-red {
  border-left-color: #e74c3c;
}

.alert-card.alert-orange {
  border-left-color: #f39c12;
}

.alert-card.alert-yellow {
  border-left-color: #f1c40f;
}

.alerts-empty {
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  background: rgba(0, 0, 0, 0.02);
}

body.dark-mode .alerts-empty {
  border-color: var(--border-dark);
  background: rgba(255, 255, 255, 0.05);
}

.historical-chart-canvas {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

body.dark-mode .historical-chart-canvas {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-dark);
}

/* Analytics Dashboard */
.analytics-panel {
  background: var(--box-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-light);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

body.dark-mode .analytics-panel {
  background: var(--box-dark);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-dark);
}

.analytics-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
}

.analytics-panel-header h3 {
  margin: 0;
}

.analytics-chip {
  font-size: 0.85rem;
  font-weight: 600;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: rgba(0, 123, 255, 0.08);
  color: var(--accent);
}

body.dark-mode .analytics-chip {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 123, 255, 0.25);
  color: var(--text-dark);
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-md);
}

.analytics-grid article {
  background: linear-gradient(
    135deg,
    rgba(0, 123, 255, 0.08),
    rgba(0, 123, 255, 0.02)
  );
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-sm);
}

body.dark-mode .analytics-grid article {
  background: linear-gradient(
    135deg,
    rgba(0, 123, 255, 0.25),
    rgba(255, 255, 255, 0.05)
  );
  border-color: rgba(255, 255, 255, 0.15);
}

.analytics-grid--disabled article {
  opacity: 0.6;
}

.analytics-grid article strong {
  font-size: 2rem;
  line-height: 1;
  color: var(--text-heading);
}

body.dark-mode .analytics-grid article strong {
  color: var(--text-dark);
}

.analytics-grid article span {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.analytics-empty {
  background: rgba(0, 0, 0, 0.03);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-top: -var(--spacing-sm);
  color: var(--text-muted);
}

body.dark-mode .analytics-empty {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-dark);
}

.analytics-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: space-between;
}

.analytics-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 500;
}

.analytics-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.analytics-footer .btn-secondary {
  align-self: flex-start;
}

@media (max-width: 640px) {
  .analytics-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

.section-subtitle {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin: 0 0 var(--spacing-xs);
  color: var(--text-muted);
}

body.dark-mode .section-subtitle {
  color: rgba(255, 255, 255, 0.65);
}

.historical-summary-meta {
  margin-top: var(--spacing-md);
  color: var(--text-muted);
  font-size: 0.9rem;
}

body.dark-mode .historical-summary-meta {
  color: var(--text-light);
}

.historical-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.historical-summary-card {
  background: var(--box-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

body.dark-mode .historical-summary-card {
  background: var(--box-dark);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.historical-summary-card .label {
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.historical-summary-card strong {
  font-size: 1.25rem;
  color: var(--text-heading);
}

body.dark-mode .historical-summary-card strong {
  color: #f8fafc;
}

.historical-table-wrapper {
  margin-top: var(--spacing-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  overflow-x: auto;
  background: var(--box-light);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

body.dark-mode .historical-table-wrapper {
  background: var(--box-dark);
  border-color: var(--border-dark);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.historical-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
}

.historical-table th,
.historical-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.95rem;
}

body.dark-mode .historical-table th,
body.dark-mode .historical-table td {
  border-bottom-color: var(--border-dark);
  color: var(--text-light);
}

.historical-table th {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.historical-table tbody tr[data-extreme="max"] {
  background: rgba(220, 53, 69, 0.08);
  border-left: 4px solid #dc3545;
}

.historical-table tbody tr[data-extreme="min"] {
  background: rgba(0, 123, 255, 0.08);
  border-left: 4px solid #007bff;
}

.historical-table tbody tr[data-extreme="rain"] {
  background: rgba(0, 150, 136, 0.1);
  border-left: 4px solid #009688;
}

body.dark-mode .historical-table tbody tr[data-extreme] {
  background-color: rgba(255, 255, 255, 0.04);
}

.historical-monthly-grid,
.historical-trend-panel {
  margin-top: var(--spacing-lg);
  background: var(--box-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-light);
}

body.dark-mode .historical-monthly-grid,
body.dark-mode .historical-trend-panel {
  background: var(--box-dark);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-dark);
}

.historical-monthly-grid header,
.historical-trend-panel header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--spacing-md);
  gap: var(--spacing-md);
}

.historical-monthly-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-md);
}

.historical-trend-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.trend-sparkline {
  width: 100%;
  height: 60px;
}

.trend-sparkline--empty {
  text-align: center;
  color: var(--text-muted);
}

.trend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-sm);
}

.trend-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.02);
}

body.dark-mode .trend-list li {
  background: rgba(255, 255, 255, 0.05);
}

.trend-list strong {
  font-size: 1.1rem;
}

.trend-list em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.85rem;
}

#weather-map {
  position: relative;
  background: var(--box-light);
}

body.dark-mode #weather-map {
  background: var(--box-dark);
}

.map-overlay-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 500;
  background: rgba(17, 24, 39, 0.85);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1.3;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.map-overlay-pill[data-tone="warning"] {
  background: rgba(255, 193, 7, 0.9);
  color: #1f1f1f;
}

body.dark-mode .map-overlay-pill {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

body.dark-mode .map-overlay-pill[data-tone="warning"] {
  background: rgba(255, 193, 7, 0.95);
  color: #111;
}

/* ============================================
   MODAL IMPROVEMENTS
   ============================================ */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.modal.active {
  display: flex;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
  pointer-events: none;
}

.modal-overlay.active {
  display: block;
  pointer-events: auto;
}

.modal-content {
  background: var(--box-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  position: relative;
  z-index: 1001;
  margin: 20px auto;
}

body.dark-mode .modal-content {
  background: var(--box-dark);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
}

body.dark-mode .modal-header {
  border-bottom-color: var(--border-dark);
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition);
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--danger);
}

.modal-body {
  padding: var(--spacing-lg);
}

/* ============================================
   RESPONSIVE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  .tabs-container {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .tab-btn {
    font-size: 0.9rem;
    padding: var(--spacing-sm);
  }

  .modal-content {
    margin: var(--spacing-sm);
  }
}

/* ============================================
   MODERN INSIGHTS & MAP PANELS
   ============================================ */

.insights-section {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.92),
    rgba(30, 64, 175, 0.65)
  );
  color: #f8fafc;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
}

.insight-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-height: 160px;
}

.insight-card h4 {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.8);
}

.insight-card strong {
  font-size: 1.5rem;
}

.insight-card small,
.insight-meta {
  color: rgba(248, 250, 252, 0.65);
  font-size: 0.85rem;
}

.sparkline {
  width: 100%;
  height: 60px;
}

.sparkline path {
  stroke-width: 2;
  fill: none;
}

.sparkline--area path {
  fill-opacity: 0.18;
  stroke-width: 1.5;
}

.forecast-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.forecast-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
  pointer-events: none;
}

.forecast-card:hover::after,
.forecast-card:focus-within::after {
  border-color: rgba(255, 255, 255, 0.35);
}

.forecast-card .inline-hour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
  gap: 4px;
  padding-top: var(--spacing-sm);
}

.inline-hour-cell {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 4px;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.2;
}

.inline-hour-cell strong {
  display: block;
  font-size: 0.85rem;
}

.inline-hour-cell.is-night {
  opacity: 0.65;
}

.forecast-card-action {
  margin-top: var(--spacing-sm);
  align-self: flex-end;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-weight: 600;
}

.day-detail-modal {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.8);
  backdrop-filter: blur(18px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  z-index: 500;
  pointer-events: none !important;
  visibility: hidden;
}

.day-detail-modal.is-visible {
  display: flex;
  pointer-events: auto !important;
  visibility: visible;
}

.day-detail-panel {
  background: #0f172a;
  color: #e2e8f0;
  width: min(900px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 28px;
  padding: var(--spacing-xl);
  box-shadow: 0 30px 90px rgba(2, 6, 23, 0.55);
  position: relative;
}

.day-detail-close {
  position: absolute;
  top: 18px;
  right: 20px;
  border: none;
  background: rgba(15, 118, 110, 0.25);
  color: #f8fafc;
  font-size: 1.35rem;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
}

.day-detail-body {
  display: grid;
  gap: var(--spacing-lg);
}

.day-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-md);
}

.day-detail-stats article {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  text-align: center;
}

.day-detail-panel .hourly-matrix {
  background: transparent;
  border: 1px solid rgba(226, 232, 240, 0.08);
}

.map-card {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-xl);
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

body.dark-mode .map-card {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.55);
}

.map-card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.map-card-eyebrow {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.map-card-subtitle {
  color: var(--text-muted);
  max-width: 640px;
}

.map-card-status {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
}

.map-card-chip {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.04);
}

.map-card-chip.chip-accent {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.4);
  color: #0c4a6e;
}

body.dark-mode .map-card-chip {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.45);
}

body.dark-mode .map-card-chip.chip-accent {
  background: rgba(14, 165, 233, 0.25);
  color: #bae6fd;
}

.map-card-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.map-toolbar-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
}

body.dark-mode .map-toolbar-hint {
  color: rgba(226, 232, 240, 0.8);
}

.map-layer-context {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: var(--spacing-md) var(--spacing-lg);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.dark-mode .map-layer-context {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.map-layer-context-body {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-lg);
  align-items: center;
}

.map-layer-context-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.map-layer-context-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: right;
  min-width: 140px;
}

.map-layer-context-meta small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.map-layer-context-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.08);
  color: var(--text-heading);
}

.map-layer-context-badge[data-state="active"] {
  background: rgba(16, 185, 129, 0.2);
  color: #047857;
}

.map-layer-context-badge[data-state="loading"] {
  background: rgba(59, 130, 246, 0.18);
  color: #1d4ed8;
}

.map-layer-context-badge[data-state="error"] {
  background: rgba(248, 113, 113, 0.25);
  color: #b91c1c;
}

.map-layer-context-badge[data-state="locked"] {
  background: rgba(251, 191, 36, 0.25);
  color: #92400e;
}

.map-layer-context-badge[data-state="inspector"] {
  background: rgba(99, 102, 241, 0.22);
  color: #3730a3;
}

body.dark-mode .map-layer-context-eyebrow,
body.dark-mode .map-layer-context-meta small {
  color: rgba(226, 232, 240, 0.7);
}

.map-card-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
}

.map-card-step {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.02);
}

.map-card-step-index {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: rgba(14, 165, 233, 0.18);
  color: #0f172a;
}

body.dark-mode .map-card-step {
  border-color: rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.5);
}

body.dark-mode .map-card-step-index {
  background: rgba(14, 165, 233, 0.35);
  color: #e0f2fe;
}

.map-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

.map-quick-action-btn {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, rgba(191, 219, 254, 0.6), #fff);
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  color: var(--text-heading);
  transition: var(--transition);
}

.map-quick-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.12);
}

.map-quick-action-icon {
  font-size: 1.35rem;
}

.map-quick-action-text {
  font-size: 0.9rem;
}

body.dark-mode .map-quick-action-btn {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(148, 163, 184, 0.3);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .map-quick-action-btn:hover {
  box-shadow: 0 15px 30px rgba(2, 6, 23, 0.45);
}

.map-layout {
  display: block;
  margin-bottom: var(--spacing-lg);
}

.map-ui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.map-ui-row {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.map-ui-row-toolbar {
  align-items: stretch;
}

.map-ui-row-toolbar > * {
  flex: 1 1 320px;
}

.map-ui-row-quick {
  flex-direction: column;
}

.map-ui-row-panels {
  align-items: stretch;
}

.map-ui-row-panels > * {
  flex: 1 1 360px;
}

.map-ui-row-radar {
  flex-direction: column;
}

.map-inspector-empty {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

.map-canvas-shell {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #dbeafe;
  border: 1px solid rgba(15, 23, 42, 0.08);
  min-height: clamp(420px, 55vh, 640px);
  height: clamp(420px, 55vh, 640px);
  touch-action: pan-x pan-y;
  cursor: grab;
}

.weather-map {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.weather-map .leaflet-control-layers,
.weather-map .leaflet-control-layers-toggle,
.weather-map .leaflet-control-layers-list {
  display: none !important;
}

.weather-map .leaflet-control-rainviewer,
.weather-map .rainviewer-control,
.weather-map .rainviewer-timeline {
  display: none !important;
}

.map-side-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  max-height: 100%;
  overflow-y: auto;
}

.map-side-panel > * {
  width: 100%;
}

body.dark-mode .map-side-panel {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.map-layer-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.dark-mode .map-layer-toolbar {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.map-radar-controls {
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.map-radar-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
}

.map-radar-mode {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  padding: 4px;
}

.map-radar-mode-btn {
  border: none;
  background: transparent;
  color: var(--text-heading);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
}

.map-radar-mode-btn.is-active {
  background: white;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}

.map-radar-playback {
  display: inline-flex;
  gap: 0.4rem;
}

.map-radar-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.map-radar-btn:hover {
  transform: translateY(-1px);
}

.map-radar-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.map-radar-timeline {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 220px;
}

.map-radar-timeline-label {
  min-width: 70px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.map-radar-timeline-track {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.map-radar-timeline-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
  width: 0;
  border-radius: inherit;
}

.map-radar-timeline-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0ea5e9;
  border: 2px solid white;
  box-shadow: 0 6px 18px rgba(6, 182, 212, 0.35);
  transition: left 0.15s ease;
}

.map-radar-empty {
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px dashed rgba(15, 23, 42, 0.12);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.map-radar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.map-radar-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

body.dark-mode .map-radar-controls {
  background: rgba(15, 23, 42, 0.35);
  border-color: rgba(148, 163, 184, 0.35);
}

body.dark-mode .map-radar-mode {
  background: rgba(15, 23, 42, 0.55);
}

body.dark-mode .map-radar-mode-btn {
  color: #f8fafc;
}

body.dark-mode .map-radar-mode-btn.is-active {
  background: rgba(15, 23, 42, 0.85);
  color: #38bdf8;
}

body.dark-mode .map-radar-btn {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.35);
  color: #f8fafc;
}

body.dark-mode .map-radar-timeline-track {
  background: rgba(148, 163, 184, 0.25);
}

body.dark-mode .map-radar-empty {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(148, 163, 184, 0.35);
  color: rgba(226, 232, 240, 0.85);
}

body.dark-mode .map-radar-meta,
body.dark-mode .map-radar-hint {
  color: rgba(226, 232, 240, 0.8);
}

.map-layer-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  min-height: 72px;
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

body.dark-mode .map-layer-btn {
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
  border-color: rgba(148, 163, 184, 0.25);
}

.map-layer-btn-icon {
  font-size: 1.35rem;
}

.map-layer-btn-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

body.dark-mode .map-layer-btn-label {
  color: rgba(226, 232, 240, 0.85);
}

.map-layer-btn.is-active {
  border-color: var(--accent);
  box-shadow: 0 10px 25px rgba(14, 165, 233, 0.25);
  transform: translateY(-1px);
}

.map-layer-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.map-layer-btn:not(.is-disabled):hover {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

#weather-map,
.weather-map-container {
  position: relative;
}

.map-inspector {
  background: rgba(15, 23, 42, 0.04);
  border-radius: 20px;
  padding: var(--spacing-lg);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

body.dark-mode .map-inspector {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.map-inspector h4 {
  margin-bottom: var(--spacing-sm);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.map-inspector ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-sm);
}

.map-inspector li {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 12px;
  padding: var(--spacing-sm);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-inspector li[data-focus="true"] {
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.16);
}

.map-overlay-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-sm);
  background: var(--box-light);
  color: var(--text-body);
  border-radius: 18px;
  padding: var(--spacing-sm);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 12px 30px rgba(15, 23, 42, 0.08);
}

.map-overlay-legend-item {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(148, 163, 184, 0.08);
  font-size: 0.9rem;
}

.map-overlay-legend-item strong {
  display: block;
  font-weight: 600;
}

.map-overlay-legend-item small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.75rem;
}

body.dark-mode .map-overlay-legend {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px rgba(2, 6, 23, 0.55);
  color: #f8fafc;
}

body.dark-mode .map-overlay-legend-item {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(15, 23, 42, 0.55);
}

.map-overlay-badge {
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.1);
}

.map-overlay-badge[data-state="active"] {
  background: rgba(16, 185, 129, 0.2);
  color: #047857;
}

.map-overlay-badge[data-state="warning"] {
  background: rgba(251, 191, 36, 0.25);
  color: #92400e;
}

.map-hover-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-9999px, -9999px);
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.45);
  pointer-events: none;
  backdrop-filter: blur(8px);
  min-width: 190px;
  z-index: 500;
  transition: opacity 0.12s ease;
}

.map-hover-tooltip.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.map-hover-tooltip.is-loading {
  opacity: 0.8;
}

.map-hover-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.map-hover-row + .map-hover-row {
  margin-top: 0.35rem;
}

.map-hover-row.secondary {
  font-size: 0.85rem;
  opacity: 0.9;
}

.map-hover-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.1rem;
}

.map-hover-temp {
  font-size: 1.4rem;
  font-weight: 600;
}

.map-hover-loading {
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

.map-overlay-badge[data-state="loading"] {
  background: rgba(34, 197, 94, 0.15);
  color: #166534;
}

.map-overlay-badge[data-state="locked"] {
  background: rgba(251, 191, 36, 0.25);
  color: #92400e;
}

.map-overlay-badge[data-state="error"] {
  background: rgba(248, 113, 113, 0.25);
  color: #b91c1c;
}

.map-overlay-badge[data-state="available"] {
  background: rgba(59, 130, 246, 0.18);
  color: #1e3a8a;
}

.map-overlay-notice {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 500;
  color: #fff;
  background: rgba(15, 23, 42, 0.75);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

body.dark-mode .map-overlay-notice {
  background: rgba(15, 23, 42, 0.9);
}

/* ============================================
   WEATHER MAP REFRESH
   ============================================ */

.map-shell {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-lg);
  border-radius: 20px;
  background: var(--box-light);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-light);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

body.dark-mode .map-shell {
  background: var(--box-dark);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-dark);
}

.map-shell-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.map-shell-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

body.dark-mode .map-shell-eyebrow {
  color: rgba(226, 232, 240, 0.75);
}

.map-shell-flags {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

.map-chip {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.04);
  font-size: 0.85rem;
  font-weight: 600;
}

.map-chip-live {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
  color: #065f46;
}

body.dark-mode .map-chip {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.6);
  color: #f8fafc;
}

body.dark-mode .map-chip-live {
  background: rgba(16, 185, 129, 0.35);
  color: #d1fae5;
}

.map-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.map-grid-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.map-viewport {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--box-light);
  min-height: clamp(320px, 50vh, 560px);
}

body.dark-mode .map-viewport {
  border-color: var(--border-dark);
  background: var(--box-dark);
}

#weather-map {
  min-height: clamp(320px, 50vh, 560px);
}

.map-grid-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.map-panel {
  background: rgba(249, 250, 251, 0.95);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.dark-mode .map-panel {
  background: rgba(15, 23, 42, 0.75);
  border-color: var(--border-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.map-layer-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

body.dark-mode .map-layer-toolbar {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.35);
}

.map-layer-btn {
  min-height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
}

body.dark-mode .map-layer-btn {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.25);
}

.map-layer-context {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.95);
}

body.dark-mode .map-layer-context {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.3);
}

.map-layer-context-body {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-lg);
  align-items: center;
}

.map-layer-context-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: right;
  min-width: 140px;
}

.map-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.map-quick-action-btn {
  flex: 1 1 120px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: #fff;
  padding: 0.65rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.map-quick-action-btn:hover {
  transform: translateY(-1px);
}

.map-quick-action-icon {
  font-size: 1.2rem;
}

body.dark-mode .map-quick-action-btn {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.35);
  color: #f8fafc;
}

.map-radar-controls {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.dark-mode .map-radar-controls {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(148, 163, 184, 0.35);
}

.map-overlay-legend {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.map-overlay-legend-item {
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.03);
}

body.dark-mode .map-overlay-legend-item {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.65);
}

.map-inspector {
  border-radius: 14px;
  padding: var(--spacing-md);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.03);
}

body.dark-mode .map-inspector {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.3);
}

@media (max-width: 1024px) {
  .map-grid {
    grid-template-columns: 1fr;
  }

  .map-grid-sidebar {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .map-shell {
    padding: var(--spacing-md);
  }

  .map-layer-context-body {
    flex-direction: column;
    text-align: left;
    gap: var(--spacing-md);
  }
}

.historical-chart .historical-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.historical-calendar-panel,
.historical-trend-panel {
  background: var(--box-light);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-light);
}

.historical-calendar-months {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.historical-calendar-months button {
  border: none;
  background: rgba(15, 23, 42, 0.08);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.historical-calendar-months button.active {
  background: var(--accent);
  color: white;
}

.historical-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.historical-calendar-cell {
  min-height: 90px;
  border-radius: 16px;
  padding: 6px;
  background: rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.8rem;
}

.historical-calendar-cell[data-weather="wet"] {
  background: rgba(14, 165, 233, 0.15);
}

.historical-trend-stats {
  margin-top: var(--spacing-md);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-md);
}

@media (max-width: 960px) {
  .insights-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .historical-chart .historical-dashboard {
    grid-template-columns: 1fr;
  }

  .map-card {
    padding: var(--spacing-lg);
  }

  .map-ui-row {
    flex-direction: column;
  }

  .weather-map {
    height: 420px;
  }
}

@media (max-width: 640px) {
  .map-card-header {
    flex-direction: column;
  }

  .map-quick-actions {
    grid-template-columns: 1fr;
  }

  .map-card-status {
    width: 100%;
  }

  .map-card-toolbar {
    gap: 0.25rem;
  }

  .map-layer-toolbar {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  }

  .map-layer-context-body {
    flex-direction: column;
    text-align: left;
  }

  .map-overlay-legend {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   WEATHER CARDS GRID - Visual Cards
   ======================================== */

.weather-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}

.weather-card-wrapper {
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
}

.weather-card-wrapper--wide {
  grid-column: span 2;
  aspect-ratio: unset;
  min-height: auto;
}

/* ===========================================
   WEATHER CARD - INHERITS FROM MASTER SYSTEM
   Background, border, shadow, hover, active states
   are defined in MASTER CARD & MODAL SYSTEM above.
   Only layout-specific styles are defined here.
   =========================================== */

.weather-card {
  /* Layout only - background/border/shadow from MASTER SYSTEM */
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 14px;
  color: #fff;
  text-align: left;
  position: relative;
  overflow: hidden;
}

/* Wide cards should auto-size to content */
.weather-card--wide {
  height: auto;
}

/* Shimmer effect on hover (optional enhancement) */
.weather-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.weather-card:hover::before {
  left: 100%;
}

.weather-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.weather-card__icon {
  font-size: 0.9rem;
  opacity: 0.9;
}

.weather-card__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weather-card__value-large {
  font-size: 3rem;
  font-weight: 200;
  line-height: 1;
  color: #fff;
  letter-spacing: -2px;
  position: relative;
  z-index: 1;
}

.weather-card__unit {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 4px;
  align-self: flex-end;
  margin-bottom: 6px;
}

.weather-card__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.weather-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: rgba(180, 140, 200, 0.35);
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.weather-card__sublabel {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Visual Variants */
.weather-card__visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 50px;
  z-index: 1;
}

.weather-card__visual--gradient {
  background: linear-gradient(
    180deg,
    rgba(180, 140, 200, 0.5) 0%,
    rgba(100, 70, 130, 0.3) 100%
  );
  border-radius: 12px;
  padding: 10px;
  margin: 4px 0;
  width: calc(100% - 8px);
}

.weather-card__visual--sun {
  margin-bottom: 4px;
  flex: 1;
}

.weather-card__visual--sun svg {
  width: 100%;
  height: auto;
  max-height: 70px;
}

.weather-card__visual--moon {
  margin-bottom: 4px;
  flex: 1;
}

.weather-card__visual--moon svg {
  width: 100%;
  height: auto;
  max-height: 60px;
}

.weather-card__sun-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin-top: auto;
}

/* Moon Card Info */
.weather-card__moon-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.weather-card__moon-phase {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
}

.weather-card__moon-illumination {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Moon Modal Styles */
.detail-card__moon-emoji {
  font-size: 3rem;
  margin-bottom: 8px;
}

.detail-card__description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-top: 8px;
}

/* Modal Text Helper Classes */
.modal-text,
.detail-text {
  color: rgba(255, 255, 255, 0.8);
}

.modal-text--muted,
.detail-text--muted {
  color: rgba(255, 255, 255, 0.7);
}

.modal-text--secondary,
.detail-text--secondary {
  color: rgba(255, 255, 255, 0.6);
}

/* Gauge Card */
.weather-card__gauge {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.weather-card__gauge svg {
  width: 80px;
  height: 80px;
}

.weather-card__gauge-value {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Center the numeric value inside the gauge */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Make the pressure card's gauge visually more roomy so the number doesn't touch the ring */
.weather-card--pressure .weather-card__gauge svg {
  width: 96px;
  height: 96px;
}

.weather-card--pressure .weather-card__gauge-value {
  /* Slightly shrink the number to increase breathing room */
  transform: translate(-50%, -50%) scale(0.92);
}

.weather-card--pressure .weather-card__value-large {
  font-size: 2.1rem;
}

/* Blob Style (for visibility, cloud cover) */
.weather-card__blob {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at center,
    rgba(140, 100, 160, 0.5) 0%,
    rgba(100, 70, 130, 0.2) 60%,
    transparent 75%
  );
  border-radius: 50%;
  aspect-ratio: 1;
  max-width: 90px;
  margin: 0 auto;
}

.weather-card__blob--purple {
  background: radial-gradient(
    ellipse at center,
    rgba(160, 100, 140, 0.55) 0%,
    rgba(120, 70, 120, 0.25) 55%,
    transparent 70%
  );
}

/* Wind Card */
.weather-card__wind-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.weather-card__wind-visual svg {
  width: 70px;
  height: 70px;
}

.weather-card__wind-value {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* UV Card */
.weather-card__uv-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.weather-card__uv-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.weather-card__uv-scale {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}

.uv-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* AQI Card */
.weather-card__aqi-value {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.aqi-gradient {
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    #4caf50,
    #8bc34a,
    #ffeb3b,
    #ff9800,
    #f44336,
    #9c27b0
  );
  border-radius: 2px;
  position: relative;
  margin: 4px 0;
}

.aqi-gradient__bar {
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

.aqi-gradient__marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}

.aqi-gradient--large {
  height: 6px;
  margin: var(--space-s) 0;
}

.aqi-gradient--large .aqi-gradient__marker {
  width: 12px;
  height: 12px;
}

/* EU AQI Gradient (0-100+ scale) */
.aqi-gradient--eu {
  height: 8px;
  margin: var(--space-m) 0;
}

.aqi-gradient__bar--eu {
  background: linear-gradient(
    90deg,
    #50c878 0%,
    #9acd32 20%,
    #ffd700 40%,
    #ff8c00 60%,
    #ff4500 80%,
    #8b0000 100%
  );
}

/* US AQI Gradient (0-300+ scale) */
.aqi-gradient--us {
  height: 8px;
  margin: var(--space-m) 0;
}

.aqi-gradient__bar--us {
  background: linear-gradient(
    90deg,
    #00e400 0%,
    #ffff00 16.6%,
    #ff7e00 33.3%,
    #ff0000 50%,
    #8f3f97 66.6%,
    #7e0023 100%
  );
}

/* AQI Content Tabs */
.aqi-content {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* AQI Scale List with Dots */
.aqi-scale-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.aqi-scale-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.aqi-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

/* Precipitation Card */
.weather-card__precip-value {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.weather-card__precip-icon {
  font-size: 1rem;
  margin-left: auto;
}

/* Pollen Card */
.weather-card--pollen {
  min-height: auto;
  height: auto;
  padding: 14px 16px 18px;
  overflow: visible;
  margin-bottom: 32px; /* Mehr Abstand nach unten für die Navigationsleiste */
}

.weather-card--wide {
  grid-column: span 2;
}

.weather-card__pollen-grid {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  margin-top: 8px;
  flex: 1;
  align-items: flex-start;
  padding-bottom: 12px;
}

.pollen-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  min-width: 0;
}

.pollen-gauge svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.pollen-gauge__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 4px;
  gap: 1px;
}

.pollen-gauge__icon {
  font-size: 0.9rem;
}

.pollen-gauge__label {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.pollen-gauge__value {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
}

.pollen-gauge__level {
  font-size: 0.6rem;
  color: var(--color-text-muted-2);
  white-space: nowrap;
}

/* ========================================
   DETAIL MODAL CARDS
   ======================================== */

.detail-card {
  /* Liquid Glass Design */
  background: linear-gradient(
    135deg,
    rgba(25, 35, 55, 0.5) 0%,
    rgba(20, 30, 50, 0.6) 50%,
    rgba(25, 35, 55, 0.5) 100%
  );
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-radius: var(--radius-m);
  padding: var(--space-l);
  margin-bottom: var(--space-m);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  position: relative;
  overflow: visible;
}

.detail-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.detail-card:hover::before {
  left: 100%;
}

.detail-card:hover {
  background: linear-gradient(
    135deg,
    rgba(30, 40, 60, 0.6) 0%,
    rgba(25, 35, 55, 0.7) 50%,
    rgba(30, 40, 60, 0.6) 100%
  );
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
}

.detail-card > * {
  position: relative;
  z-index: 1;
}

.detail-card:nth-child(1) {
  animation-delay: 0.1s;
}

.detail-card:nth-child(2) {
  animation-delay: 0.15s;
}

.detail-card:nth-child(3) {
  animation-delay: 0.2s;
}

.detail-card:nth-child(4) {
  animation-delay: 0.25s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.detail-card h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-m);
}

.detail-card__hero {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}

.detail-card__value {
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
}

.detail-card__label {
  font-size: 1.2rem;
  color: var(--color-text-muted);
}

.detail-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-s) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-card__row:last-child {
  border-bottom: none;
}

/* Factor Detail List in Modal */
.factor-detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.factor-detail-row {
  display: grid;
  grid-template-columns: 24px 90px 1fr 32px 40px;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.factor-detail-icon {
  font-size: 1rem;
  text-align: center;
}

.factor-detail-label {
  font-size: 0.8rem;
  color: var(--color-text);
}

.factor-detail-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.factor-detail-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.factor-detail-score {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
}

.factor-detail-weight {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-align: right;
}

[data-theme="light"] .factor-detail-bar {
  background: rgba(0, 0, 0, 0.08);
}

.detail-card__badge {
  background: rgba(100, 140, 200, 0.3);
  padding: 4px 12px;
  border-radius: 8px;
  font-weight: 500;
}

.detail-card__tabs {
  display: flex;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}

.detail-card__tab {
  flex: 1;
  padding: var(--space-s) var(--space-m);
  background: rgba(100, 140, 200, 0.2);
  border: none;
  border-radius: var(--radius-m);
  color: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

.detail-card__tab--active {
  background: rgba(100, 140, 200, 0.5);
}

.detail-card__list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-m);
}

.detail-card__list li {
  padding: var(--space-xs) 0;
  padding-left: var(--space-m);
  position: relative;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.detail-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.detail-card__sun-visual {
  margin: var(--space-m) 0;
}

.detail-card__sun-visual svg {
  width: 100%;
  height: auto;
}

/* ============================================
   SLEEK CHART SYSTEM - Anti-Squash Architecture
   ============================================ */

/* Chart Wrapper - allows horizontal scroll when needed */
.chart-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  padding-bottom: 4px;
}

.chart-wrapper::-webkit-scrollbar {
  height: 4px;
}

.chart-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.chart-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* Hourly Bars - Sleek Design */
.hourly-bars {
  display: flex;
  gap: 8px;
  min-width: max-content;
  padding: 12px 0;
  box-sizing: border-box;
}

.hourly-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  gap: 6px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.hourly-bar:hover {
  transform: scale(1.05);
}

.hourly-bar:active {
  transform: scale(0.98);
}

/* Sleek Bar Fill - Thin & Elegant */
.hourly-bar__fill {
  width: 10px;
  height: 48px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Inner fill bar - gradient with glow */
.hourly-bar__fill::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bar-height, 0%);
  min-height: 4px;
  background: linear-gradient(to top, #4ade80, #22c55e);
  border-radius: 20px;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

/* Precipitation variant - Dynamic blue gradient */
.hourly-bar__fill--precip {
  background: rgba(96, 165, 250, 0.08);
}

.hourly-bar__fill--precip::before {
  background: var(--precip-gradient, linear-gradient(to top, #3b82f6, #60a5fa));
  box-shadow: 0 0 8px var(--precip-glow, rgba(96, 165, 250, 0.4));
}

/* Clouds variant - Dynamic gray gradient */
.hourly-bar__fill--clouds {
  background: rgba(148, 163, 184, 0.08);
}

.hourly-bar__fill--clouds::before {
  background: var(--clouds-gradient, linear-gradient(to top, #64748b, #94a3b8));
  box-shadow: 0 0 6px var(--clouds-glow, rgba(148, 163, 184, 0.3));
}

/* UV variant - Dynamic warm colors */
.hourly-bar__fill--uv {
  background: rgba(251, 191, 36, 0.08);
}

.hourly-bar__fill--uv::before {
  background: var(--uv-gradient, linear-gradient(to top, #f59e0b, #fbbf24));
  box-shadow: 0 0 8px var(--uv-glow, rgba(251, 191, 36, 0.4));
}

/* Wind variant - Teal gradient */
.hourly-bar__fill--wind {
  background: rgba(34, 211, 238, 0.08);
}

.hourly-bar__fill--wind::before {
  background: var(--wind-gradient, linear-gradient(to top, #06b6d4, #22d3ee));
  box-shadow: 0 0 8px var(--wind-glow, rgba(34, 211, 238, 0.4));
}

/* Visibility variant - Green gradient */
.hourly-bar__fill--visibility {
  background: rgba(132, 204, 22, 0.08);
}

.hourly-bar__fill--visibility::before {
  background: var(--vis-gradient, linear-gradient(to top, #65a30d, #84cc16));
  box-shadow: 0 0 8px var(--vis-glow, rgba(132, 204, 22, 0.3));
}

/* Pressure variant - Purple-blue gradient */
.hourly-bar__fill--pressure {
  background: rgba(139, 92, 246, 0.08);
}

.hourly-bar__fill--pressure::before {
  background: var(
    --pressure-gradient,
    linear-gradient(to top, #7c3aed, #a78bfa)
  );
  box-shadow: 0 0 8px var(--pressure-glow, rgba(139, 92, 246, 0.3));
}

/* Humidity variant - Cyan gradient */
.hourly-bar__fill--humidity {
  background: rgba(56, 189, 248, 0.08);
}

.hourly-bar__fill--humidity::before {
  background: var(
    --humidity-gradient,
    linear-gradient(to top, #0284c7, #38bdf8)
  );
  box-shadow: 0 0 8px var(--humidity-glow, rgba(56, 189, 248, 0.4));
}

/* Sleek Typography for Chart Labels */
.hourly-bar__value {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 6px;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.02em;
}

.hourly-bar__amount {
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  line-height: 1;
}

.hourly-bar__time {
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  line-height: 1;
}

/* Hide every other time label on small screens */
@media (max-width: 400px) {
  .hourly-bar:nth-child(even) .hourly-bar__time {
    visibility: hidden;
  }
}

/* Direct style approach for hourly bars (Health page) */
.hourly-bar__fill[style*="--bar-height"] {
  background: rgba(100, 180, 100, 0.2);
}

.hourly-bar__fill[style*="--bar-height"]::before {
  height: var(--bar-height, 0%);
}

/* Alternative: Support direct background color on element */
.hourly-bar__fill[style*="background:"] {
  position: relative;
}

.hourly-bar__fill[style*="background:"]:not([class*="--"]) {
  overflow: visible;
}

/* ================================================
   ADDITIONAL VIEW STYLES - Production Ready
   ================================================ */

/* App View Base */
.app-view {
  min-height: 100vh;
  padding-bottom: 100px;
}

/* Unified Background Mode (triggered by JS) */
body.view-unified-bg {
  background-color: #131318 !important;
  --theme-bg: #131318 !important;
  --page-bg: #131318 !important;
}

body.view-unified-bg .app-shell {
  background-color: #131318 !important;
}

body.view-unified-bg .app-main-views {
  padding-top: 0 !important;
  background-color: #131318 !important;
  background: #131318 !important;
}

body.view-unified-bg [data-view] {
  background-color: #131318 !important;
  background: #131318 !important;
}

body.view-unified-bg .app-view {
  background-color: #131318 !important;
  background: #131318 !important;
}

body.view-unified-bg .app-view__content {
  background-color: #131318 !important;
  background: transparent !important;
}

/* Health View Container - Extra padding for fixed bottom nav */
#health-view-container {
  padding-bottom: 100px !important;
}

.app-view__header {
  padding: 20px 16px 12px;
  background: transparent;
  border-bottom: none;
  position: relative;
  top: 0;
  z-index: 1;
}

.app-view__header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
}

.app-view__content {
  padding: 0 16px 16px;
}

/* History Empty State */
.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  min-height: 50vh;
}

.history-empty__icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.history-empty__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-text);
}

.history-empty__text {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  max-width: 300px;
  margin-bottom: 24px;
}

.history-empty__demo {
  background: var(--color-surface);
  padding: 16px 20px;
  border-radius: 12px;
  text-align: left;
}

.history-empty__demo h4 {
  font-size: 0.85rem;
  margin-bottom: 8px;
  color: var(--color-text-muted);
}

.history-empty__demo ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-empty__demo li {
  font-size: 0.85rem;
  padding: 4px 0;
  color: var(--color-text-muted-2);
}

/* History Chart SVG Styles */
.history-chart-svg {
  width: 100%;
  min-height: 120px;
  overflow: hidden;
}

.history-chart-svg svg {
  display: block;
}

.history-chart-svg .chart-label {
  font-size: 10px;
  fill: var(--color-text-muted-2);
  font-family: inherit;
}

.history-no-data {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 20px;
}

/* Insight Card (new style) */
.insight-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--color-surface-variant, rgba(20, 30, 50, 0.6));
  border-radius: 12px;
  text-align: center;
  gap: 4px;
}

.insight-card__icon {
  font-size: 24px;
}

.insight-card__label {
  font-size: 11px;
  color: var(--color-text-muted);
}

.insight-card__value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
}

/* Health View Styles */
#health-view-container {
  min-height: calc(100vh - 180px);
}

.health-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .health-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.health-layout__left,
.health-layout__right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Layout-only - glassmorphism from MASTER CARD SYSTEM */
.health-card {
  padding: 16px;
  /* background/border/shadow/radius from MASTER SYSTEM */
}

.health-card h2 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-text-muted);
}

.health-card p {
  font-size: 1rem;
  color: var(--color-text);
}

/* Layout-only - glassmorphism from MASTER CARD SYSTEM */
.health-chart-card {
  padding: 16px;
  /* background/border/shadow/radius from MASTER SYSTEM */
}

.health-chart-card header {
  margin-bottom: 12px;
}

.health-chart-card header h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.health-chart-card header p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.health-chart-barlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.health-chart-row {
  display: grid;
  grid-template-columns: 40px 30px 1fr 50px;
  align-items: center;
  gap: 8px;
}

.health-chart-row__time {
  font-size: 0.75rem;
  color: var(--color-text-muted-2);
}

.health-chart-row__score {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.health-chart-row__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-align: right;
}

.score-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.score-bar__fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-danger),
    var(--color-warning),
    var(--color-success)
  );
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Color Variables for Charts */
:root {
  --color-temp-warm: #ff6b6b;
  --color-temp-cool: #4dabf7;
  --color-rain: #74c0fc;
}

/* Health Empty Notice */
.health-empty-notice {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  padding: 20px;
  font-style: italic;
}

/* ========================================
   HEALTH VIEW - REDESIGNED
   ======================================== */

.health-view-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  padding-bottom: 120px;
  margin-bottom: 20px;
}

/* ========================================
   QUICK CHECK SECTION
   ======================================== */

.quick-check-section {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 16px;
  padding-bottom: 20px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  margin-bottom: 80px; /* Extra margin for fixed bottom navigation */
}

.quick-check-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.quick-check-header-icon {
  font-size: 1.3rem;
}

.quick-check-header-text h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.quick-check-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.quick-check-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quick-check-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.quick-check-question {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}

.quick-check-answer {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.quick-check-icon {
  font-size: 1rem;
}

.quick-check-status {
  font-size: 0.9rem;
  font-weight: 600;
}

.quick-check-detail {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Light Theme */
[data-theme="light"] .quick-check-section {
  background: var(--color-surface);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .quick-check-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}

/* ========================================
   WEATHER ALERTS SECTION - REDESIGNED
   ======================================== */

.weather-alerts-section {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  cursor: pointer;
  transition: box-shadow 0.1s;
}

.weather-alerts-section:hover {
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
}

.weather-alerts-section:active {
  transform: scale(0.99);
}

.weather-alerts-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.weather-alerts-icon {
  font-size: 1.5rem;
}

.weather-alerts-title {
  flex: 1;
}

.weather-alerts-title h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.weather-alerts-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  display: block;
}

.weather-alerts-badge {
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}

/* Alert Status (empty state) */
.weather-alerts-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(76, 175, 80, 0.1);
}

.weather-alerts-status--good {
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.weather-alerts-status__icon {
  font-size: 2rem;
}

.weather-alerts-status__text strong {
  display: block;
  font-size: 0.95rem;
  color: #4caf50;
  margin-bottom: 2px;
}

.weather-alerts-status__text p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Alert Pills */
.weather-alerts-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.weather-alert-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--pill-color, rgba(255, 255, 255, 0.1));
  border-radius: 20px;
  font-size: 0.8rem;
}

.weather-alert-pill__icon {
  font-size: 1rem;
}

.weather-alert-pill__label {
  font-weight: 500;
}

.weather-alert-pill__count {
  background: var(--pill-color);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 2px;
}

/* Alert Preview */
.weather-alert-preview {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border-left: 3px solid #ff9800;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.weather-alert-preview__content {
  flex: 1;
  min-width: 0;
}

.weather-alert-preview__content strong {
  font-size: 0.85rem;
  display: block;
  margin-bottom: 4px;
}

.weather-alert-preview__content p {
  font-size: 0.8rem;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
  margin: 0;
  line-height: 1.4;
}

.weather-alert-preview__time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Alerts Footer */
.weather-alerts-footer {
  margin-top: 12px;
  text-align: center;
}

.weather-alerts-more {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  opacity: 0.8;
}

/* ========================================
   ALERTS MODAL STYLES
   ======================================== */

.alerts-modal-empty {
  text-align: center;
  padding: 24px 16px;
}

.alerts-modal-empty__icon {
  font-size: 3rem;
  margin-bottom: 12px;
  display: block;
}

.alerts-modal-empty h3 {
  font-size: 1.1rem;
  margin: 0 0 8px 0;
}

.alerts-modal-empty p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

.alerts-modal-summary {
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.alerts-modal-summary__status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.alerts-modal-summary__icon {
  font-size: 2rem;
}

.alerts-modal-summary__status strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 2px;
}

.alerts-modal-summary__status p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Alert Category Card */
.alert-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.alert-category-icon {
  font-size: 1.5rem;
}

.alert-category-info {
  flex: 1;
}

.alert-category-info strong {
  display: block;
  font-size: 0.95rem;
}

.alert-category-time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.alert-category-severity {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.alert-category-description {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.alert-recommendations {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.alert-recommendations-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 6px;
}

.alert-recommendations ul {
  margin: 0;
  padding-left: 16px;
}

.alert-recommendations li {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Light Theme Support */
[data-theme="light"] .weather-alerts-section {
  background: var(--color-surface);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .weather-alerts-status {
  background: rgba(76, 175, 80, 0.08);
}

[data-theme="light"] .weather-alert-pill {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .weather-alert-preview {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .alert-recommendations {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* Responsive */
@media (max-width: 400px) {
  .weather-alerts-header {
    flex-wrap: wrap;
  }

  .weather-alert-pills {
    gap: 6px;
  }

  .weather-alert-pill {
    padding: 5px 8px;
    font-size: 0.75rem;
  }
}

/* ========================================
   HEALTH CARDS SECTION - REDESIGNED
   ======================================== */

/* Health Cards Section */
.health-cards-section {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  margin-bottom: 20px;
}

.health-cards-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.health-cards-icon {
  font-size: 1.2rem;
}

.health-cards-header h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.health-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 480px) {
  .health-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 700px) {
  .health-cards-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Health Metric Card (clickable) */
.health-metric-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 10px;
  background: rgba(20, 28, 50, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
  min-height: 100px;
  width: 100%;
  color: inherit;
  font-family: inherit;
}

.health-metric-card:hover {
  background: rgba(30, 40, 70, 0.8);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
}

.health-metric-card:active {
  transform: scale(0.99);
}

.health-metric-card__header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

.health-metric-card__icon {
  font-size: 1rem;
}

.health-metric-card__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.health-metric-card__value {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 3px;
}

.health-metric-card__sublabel {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.3;
}

/* Light Theme Support */
[data-theme="light"] .health-cards-section {
  background: var(--color-surface);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .health-metric-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .health-metric-card:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .health-metric-card__label {
  color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .health-metric-card__sublabel {
  color: rgba(0, 0, 0, 0.5);
}

/* ========================================
   OUTDOOR SCORE SECTION - REDESIGNED
   ======================================== */

.outdoor-score-section {
  background: linear-gradient(
    145deg,
    rgba(30, 45, 80, 0.9),
    rgba(15, 25, 50, 0.95)
  );
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.outdoor-score-section:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.24);
}

.outdoor-score-section:active {
  transform: scale(0.99);
}

.outdoor-score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.outdoor-score-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.outdoor-score-icon {
  font-size: 1.4rem;
}

.outdoor-score-title h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.outdoor-score-time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 12px;
}

.outdoor-score-main {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 16px;
}

/* Circular Score Display */
.outdoor-score-circle {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.outdoor-score-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.outdoor-score-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 8;
}

.outdoor-score-progress {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

.outdoor-score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.outdoor-score-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}

.outdoor-score-label {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Score Details */
.outdoor-score-details {
  flex: 1;
  min-width: 0;
}

.outdoor-score-hint {
  font-size: 0.85rem;
  color: var(--color-text);
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border-left: 3px solid var(--score-color, #4caf50);
}

/* Factor Items */
.outdoor-factors-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.outdoor-factor-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.outdoor-factor-icon {
  font-size: 0.9rem;
  width: 20px;
  text-align: center;
}

.outdoor-factor-info {
  flex: 1;
  min-width: 0;
}

.outdoor-factor-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 2px;
}

.outdoor-factor-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.outdoor-factor-bar__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.outdoor-factor-score {
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}

/* Mini Timeline */
.outdoor-timeline-mini {
  margin-bottom: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.outdoor-timeline-mini__chart {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 50px;
}

.outdoor-mini-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.outdoor-mini-bar__fill {
  width: 100%;
  max-width: 16px;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
}

.outdoor-mini-bar__time {
  font-size: 0.55rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  height: 12px;
}

/* Footer */
.outdoor-score-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.outdoor-best-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text);
}

.outdoor-best-icon {
  font-size: 1rem;
}

.outdoor-best-time strong {
  color: #4caf50;
}

.outdoor-more-info {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* Light Theme */
[data-theme="light"] .outdoor-score-section {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95),
    rgba(240, 245, 255, 0.98)
  );
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .outdoor-score-title h3 {
  color: #1a1a2e;
}

[data-theme="light"] .outdoor-score-number {
  color: #1a1a2e;
}

[data-theme="light"] .outdoor-score-hint {
  background: rgba(0, 0, 0, 0.04);
  color: #1a1a2e;
}

[data-theme="light"] .outdoor-timeline-mini {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .outdoor-score-bg {
  stroke: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .outdoor-factor-bar {
  background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .outdoor-best-time {
  color: #1a1a2e;
}

/* Responsive Design for Outdoor Score */
@media (max-width: 400px) {
  .outdoor-score-main {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .outdoor-score-circle {
    width: 90px;
    height: 90px;
  }

  .outdoor-score-number {
    font-size: 1.5rem;
  }

  .outdoor-score-details {
    width: 100%;
  }

  .outdoor-factor-item {
    gap: 6px;
  }

  .outdoor-factor-label {
    font-size: 0.65rem;
  }

  .outdoor-factor-score {
    font-size: 0.7rem;
    min-width: 24px;
  }
}

@media (min-width: 600px) {
  .outdoor-score-section {
    padding: 24px;
  }

  .outdoor-score-circle {
    width: 120px;
    height: 120px;
  }

  .outdoor-score-number {
    font-size: 2.2rem;
  }

  .outdoor-timeline-mini__chart {
    height: 60px;
  }
}

/* Health Timeline Section - Legacy */
.health-timeline-section {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  margin-bottom: 0;
  overflow: visible;
}

.health-timeline-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.health-timeline-icon {
  font-size: 1.2rem;
}

.health-timeline-header h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.health-timeline-sublabel {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.health-timeline-chart {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 120px;
  padding: 0 4px;
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  margin-bottom: 45px;
  padding-bottom: 10px;
}

.health-timeline-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 24px;
  max-width: 45px;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding-bottom: 0;
}

.health-timeline-bar__fill {
  width: 16px;
  min-height: 5px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
  flex-shrink: 0;
  /* Height is set via inline style as percentage */
}

.health-timeline-bar__value {
  font-size: 0.65rem;
  font-weight: 600;
  margin-top: 4px;
  color: var(--color-text);
  white-space: nowrap;
}

.health-timeline-bar__time {
  font-size: 0.55rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  white-space: nowrap;
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.health-timeline-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.health-timeline-legend span {
  margin-right: 3px;
}

/* Timeline Tip - Best time indicator */
.health-timeline-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(76, 175, 80, 0.12);
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--color-text);
  border: 1px solid rgba(76, 175, 80, 0.2);
}

[data-theme="light"] .health-timeline-tip {
  background: rgba(76, 175, 80, 0.08);
  border-color: rgba(76, 175, 80, 0.15);
}

/* Light Theme Overrides */
[data-theme="light"] .health-metric-card {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .health-metric-card:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .health-metric-card__label {
  color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .health-metric-card__sublabel {
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .health-alerts-section,
[data-theme="light"] .health-cards-section,
[data-theme="light"] .health-timeline-section {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .health-alert-card__description {
  color: rgba(0, 0, 0, 0.7);
}

[data-theme="light"] .health-timeline-bar__value {
  color: rgba(0, 0, 0, 0.85);
}

[data-theme="light"] .health-timeline-bar__time {
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .health-timeline-legend {
  color: rgba(0, 0, 0, 0.6);
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* Production-Ready Utilities */
.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Smooth View Transitions */
[data-view] {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading Shimmer Effect */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-surface) 0%,
    var(--color-surface-variant) 50%,
    var(--color-surface) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ============================================
   SETTINGS SHEET CONTENT STYLES
   ============================================ */
.settings-sheet-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
}

.settings-info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  background: rgba(30, 40, 65, 0.8);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-info-card__icon {
  font-size: 32px;
  flex-shrink: 0;
}

.settings-info-card__content {
  flex: 1;
}

.settings-info-card__title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.settings-info-card__text {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* Settings Models List */
.settings-models-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-model-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(25, 35, 60, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-model-item--active {
  background: rgba(93, 123, 255, 0.15);
  border-color: rgba(93, 123, 255, 0.3);
}

.settings-model-item--disabled {
  opacity: 0.6;
}

.settings-model-item__icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
}

.settings-model-item__name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
}

.settings-model-item__badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.settings-model-item--active .settings-model-item__badge {
  background: rgba(93, 123, 255, 0.3);
  color: #a0bcff;
}

/* Settings Action Button */
.settings-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(
    135deg,
    rgba(93, 123, 255, 0.25),
    rgba(93, 123, 255, 0.12)
  );
  border: 1px solid rgba(93, 123, 255, 0.3);
  border-radius: 14px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}

.settings-action-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(93, 123, 255, 0.35),
    rgba(93, 123, 255, 0.2)
  );
  border-color: rgba(93, 123, 255, 0.5);
}

.settings-action-btn:active {
  transform: scale(0.98);
}

.settings-action-btn__icon {
  font-size: 20px;
}

.settings-action-btn__text {
  font-weight: 500;
}

/* Secondary action button variant */
.settings-action-btn--secondary {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.settings-action-btn--secondary:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.08)
  );
}

/* Export Preview Styles */
.export-preview {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.export-preview__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.export-preview__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.export-preview__item span {
  font-size: 16px;
}

/* Settings File Input */
.settings-file-input {
  display: block;
  cursor: pointer;
}

.settings-import-status {
  text-align: center;
  padding: 12px;
  font-size: 14px;
}

.settings-import-success {
  color: #4caf50;
}

.settings-import-error {
  color: #ff6b6b;
}

/* Discord Sheet Styles */
.settings-discord-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.settings-discord-logo {
  font-size: 40px;
}

.settings-discord-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}

.settings-discord-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.settings-discord-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  background: #5865f2;
  border-radius: 14px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.15s;
}

.settings-discord-btn:hover {
  background: #4752c4;
}

.settings-discord-btn:active {
  transform: scale(0.98);
}

.settings-discord-btn__icon {
  width: 24px;
  height: 24px;
}

/* ============================================
   API SETTINGS STYLES
   ============================================ */
.api-settings {
  max-width: 100%;
}

.api-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.api-item {
  background: rgba(25, 35, 60, 0.8);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
  transition: border-color 0.2s;
}

.api-item--active {
  border-color: rgba(76, 175, 80, 0.3);
}

.api-item--inactive {
  border-color: rgba(255, 255, 255, 0.08);
  opacity: 0.85;
}

.api-item__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.api-item__icon {
  font-size: 24px;
  flex-shrink: 0;
}

.api-item__info {
  flex: 1;
  min-width: 0;
}

.api-item__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.api-item__desc {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}

.api-item__status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
  flex-shrink: 0;
}

.api-item__status--active {
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
}

.api-item__status--inactive {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.api-item__key-section {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.api-key-input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  min-width: 0;
}

.api-key-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.api-key-input:focus {
  outline: none;
  border-color: rgba(93, 123, 255, 0.5);
}

.api-key-btn {
  padding: 10px 16px;
  background: rgba(93, 123, 255, 0.2);
  border: 1px solid rgba(93, 123, 255, 0.3);
  border-radius: 10px;
  color: #a0bcff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.api-key-btn:hover {
  background: rgba(93, 123, 255, 0.3);
}

.api-info-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 193, 7, 0.2);
  margin-top: 8px;
}

.api-info-note__icon {
  font-size: 16px;
  flex-shrink: 0;
}

.api-info-note p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

/* ============================================
   SETTINGS MODALS RESPONSIVE FIX
   ============================================ */
.bottom-sheet__body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px;
}

.bottom-sheet__body::-webkit-scrollbar {
  width: 6px;
}

.bottom-sheet__body::-webkit-scrollbar-track {
  background: transparent;
}

.bottom-sheet__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* Settings containers responsive - ALLE untereinander */
.settings-home,
.units-settings,
.language-settings,
.background-settings,
.home-settings,
.about-settings,
.settings-sheet-content,
.api-settings {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Fix für geschachtelte Modals */
.about-modal__container,
.unit-selector-content {
  max-width: min(480px, calc(100vw - 32px));
  max-height: 85vh;
  overflow-y: auto;
}

/* ALLE Karten/Cards untereinander stapeln */
.api-list,
.settings-models-list,
.background-settings,
.home-settings,
.units-settings,
.language-settings,
.settings-sheet-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
}

/* Cards kompakt halten */
.api-item,
.background-card,
.background-section,
.home-section,
.settings-info-card,
.units-row,
.language-option {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

/* Toast/Feedback styles */
.settings-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(76, 175, 80, 0.95);
  color: #fff;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 1004;
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.3s;
  pointer-events: none;
}

.settings-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.settings-toast--error {
  background: rgba(244, 67, 54, 0.95);
}

@media (max-width: 480px) {
  .bottom-sheet__body {
    padding: 12px;
  }

  .settings-info-card {
    padding: 14px;
    gap: 12px;
    flex-direction: column;
    text-align: center;
  }

  /* App-Sprache wählen – Text mittig ausrichten */
  .settings-info-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .settings-info-card__icon {
    font-size: 26px;
  }

  .settings-info-card__title {
    font-size: 15px;
  }

  .settings-info-card__text {
    font-size: 13px;
  }

  .api-item {
    padding: 14px;
  }

  .api-item__header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .api-item__key-section {
    flex-direction: column;
  }

  .api-key-btn {
    width: 100%;
  }

  .unit-selector-content {
    padding: 20px 16px 32px;
  }

  .about-modal__container {
    margin: 16px;
    padding: 20px;
  }

  .background-card {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .background-list__row {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .background-intervals {
    justify-content: center;
  }

  .home-location-btn {
    width: 100%;
    justify-content: center;
  }

  .home-current {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .home-clear-btn {
    width: 100%;
  }

  .language-option {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 360px) {
  .bottom-sheet__body {
    padding: 8px;
  }

  .settings-info-card {
    padding: 10px;
  }

  .chip {
    font-size: 10px;
    padding: 5px 8px;
  }

  .background-section {
    padding: 10px 12px;
  }
}
/* ============================================
   RADAR VIEW - Mobile Responsive
   ============================================ */

@media (max-width: 480px) {
  .radar-view {
    height: calc(100vh - 130px);
  }

  .radar-view__map-wrapper {
    margin: var(--space-xs);
    margin-bottom: 0;
    border-radius: var(--radius-m);
  }

  .radar-view__map {
    border-radius: var(--radius-m);
  }

  .radar-view__top-controls {
    top: var(--space-s);
    left: var(--space-s);
    right: var(--space-s);
  }

  .radar-view__header-info {
    padding: 8px 12px;
  }

  .radar-view__title {
    font-size: 0.9rem;
  }

  .radar-view__subtitle {
    font-size: 0.7rem;
  }

  .radar-view__layer-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .radar-view__layer-btn .material-symbols-outlined {
    font-size: 18px;
  }

  .radar-view__side-controls {
    right: var(--space-s);
  }

  .radar-view__control-btn {
    width: 36px;
    height: 36px;
  }

  .radar-view__control-btn .material-symbols-outlined {
    font-size: 20px;
  }

  .radar-view__legend {
    bottom: var(--space-s);
    left: var(--space-s);
    padding: 6px 10px;
    gap: 8px;
  }

  .radar-view__legend-item {
    font-size: 10px;
    gap: 4px;
    display: inline-flex;
    align-items: center;
  }

  .radar-view__legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
  }

  .radar-view__timeline {
    margin: var(--space-xs);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-m);
    gap: var(--space-s);
  }

  .radar-view__timeline-btn {
    width: 36px;
    height: 36px;
  }

  .radar-view__timeline-btn .material-symbols-outlined {
    font-size: 20px;
  }

  .radar-view__timeline-slider {
    height: 5px;
  }

  .radar-view__timeline-slider::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
  }

  .radar-view__timeline-label {
    font-size: 0.8rem;
    min-width: 40px;
  }
}

@media (max-width: 360px) {
  .radar-view__legend {
    gap: 6px;
    padding: 5px 8px;
  }

  .radar-view__legend-item {
    font-size: 9px;
  }

  .radar-view__timeline-controls {
    gap: 2px;
  }

  .radar-view__timeline-btn {
    width: 32px;
    height: 32px;
  }
}

/* Re-add missing swarm definitions for radar-view legend */

.radar-view__legend-swatch {
  display: inline-block;

  width: 12px;

  height: 12px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.2);

  flex-shrink: 0;
}

.radar-view__legend-swatch--rain {
  background: linear-gradient(90deg, #4fc3f7, #0288d1);
}

.radar-view__legend-swatch--snow {
  background: linear-gradient(90deg, #e0f7fa, #b3e5fc);
}

.radar-view__legend-swatch--temp {
  background: linear-gradient(90deg, #4fc3f7, #ff7043);
}

.radar-view__legend-swatch--wind {
  background: linear-gradient(90deg, #80cbc4, #004d40);
}

.radar-view__legend-swatch--clouds {
  background: linear-gradient(90deg, #cfd8dc, #90a4ae);
}

/* Updated Layer Button Style */

.radar-view__layer-btn {
  display: flex !important;

  align-items: center;

  justify-content: center;

  width: 32px !important;

  height: 32px !important;

  min-width: 32px;

  padding: 0 !important;

  background: rgba(10, 16, 32, 0.85);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: var(--radius-s);

  color: var(--color-text-secondary);

  cursor: pointer;

  pointer-events: auto;

  transition: all 0.15s ease;
}

.radar-view__layer-btn span:not(.material-symbols-outlined) {
  display: none !important;
}

.radar-view__layer-btn .material-symbols-outlined {
  font-size: 20px;

  color: var(--color-text-secondary);

  margin: 0 !important;
}

.radar-view__layer-btn:hover {
  background: rgba(255, 255, 255, 0.1);

  color: var(--color-text-primary);
}

/* ==========================================================================
   SIMPLE INTERACTIVITY - Only hide what needs to be hidden
   ========================================================================== */

/* Hide elements with hidden attribute */
[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* Ensure all overlay elements without active class don't block clicks */
.modal-overlay:not(.active),
.day-detail-modal:not(.is-visible),
.settings-subview-overlay:not(.active),
.bottom-sheet-overlay:not(.is-open) {
  pointer-events: none !important;
}

/* KRITISCH: Wenn Overlay offen ist, MUSS es sichtbar sein und Klicks fangen */
/* Uses 250ms ease transition (from design-system.css / health.css) */
.bottom-sheet-overlay.is-open {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

/* KRITISCH: Wenn Sheet sichtbar ist, MUSS es sichtbar sein */
/* Modal uses ONLY transform transition at 400ms cubic-bezier(0.4, 0, 0.2, 1) */
/* JS sets display:flex BEFORE adding visible class (double-RAF pattern) */
.bottom-sheet-overlay.is-open .bottom-sheet--visible,
.bottom-sheet.bottom-sheet--visible {
  transform: translateY(0) !important;
}

/* Toast stack should pass through clicks */
.toast-stack {
  pointer-events: none;
}
.toast-stack > * {
  pointer-events: auto;
}

/* Radar controls pass through, but children are clickable */
.radar-view__top-controls {
  pointer-events: none;
}
.radar-view__top-controls > * {
  pointer-events: auto;
}

.contributor-card {
  position: relative;
}

.contributor-card__rank {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 2px 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
  font-family: "Consolas", monospace;
}

/* ============================================
   ANDROID 15+ STYLE TRANSITION SYSTEM
   FLIP animations with Predictive Back gestures
============================================ */

:root {
  /* Android 15 Material Motion easing curves */
  --transition-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --transition-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --transition-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --transition-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --transition-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duration tokens */
  --transition-duration-short: 150ms;
  --transition-duration-medium: 300ms;
  --transition-duration-long: 450ms;
  --transition-duration-extra-long: 550ms;

  /* Z-index layers for transitions */
  --z-index-base: 1;
  --z-index-elevated: 100;
  --z-index-modal: 200;
  --z-index-transition-layer: 9999;
  --z-index-predictive-back: 10000;

  /* Predictive back gesture thresholds */
  --predictive-back-min-scale: 0.88;
  --predictive-back-threshold: 100;
  --predictive-back-edge-threshold: 50;
}

/* Transition Layer - Dedicated layer for animating elements */
.transition-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-transition-layer);
  pointer-events: none;
  overflow: hidden;
}

.transition-layer--active {
  pointer-events: auto;
}

/* Transition Clone - The animated element during FLIP */
.transition-clone {
  position: fixed;
  z-index: var(--z-index-transition-layer);
  will-change: transform, width, height, border-radius, opacity;
  transform-origin: top left;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.transition-clone--animating {
  transition:
    transform var(--transition-duration-long)
      var(--transition-easing-emphasized),
    width var(--transition-duration-long) var(--transition-easing-emphasized),
    height var(--transition-duration-long) var(--transition-easing-emphasized),
    border-radius var(--transition-duration-long)
      var(--transition-easing-emphasized),
    opacity var(--transition-duration-medium) var(--transition-easing-standard);
}

/* Source element states during transition */
.transition-source--hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Target modal/sheet states during transition */
.transition-target--preparing {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
}

.transition-target--animating {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Predictive Back Gesture styles */
.predictive-back-container {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-predictive-back);
  background: transparent;
  touch-action: pan-y;
  overflow: hidden;
}

.predictive-back-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background var(--transition-duration-short) linear;
}

.predictive-back-scrim--active {
  background: rgba(0, 0, 0, 0.3);
}

.predictive-back-content {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform-origin: center center;
  border-radius: 0;
  overflow: hidden;
  transition: none;
}

.predictive-back-content--animating {
  transition:
    transform var(--transition-duration-medium)
      var(--transition-easing-emphasized-decelerate),
    border-radius var(--transition-duration-medium)
      var(--transition-easing-standard);
}

.predictive-back-content--dragging {
  border-radius: 16px;
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.4),
    0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Indicator pill for predictive back */
.predictive-back-indicator {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 40px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  transform: translateY(-50%) scaleX(0);
  transition:
    transform var(--transition-duration-short) var(--transition-easing-spring),
    opacity var(--transition-duration-short) linear;
  opacity: 0;
}

.predictive-back-indicator--left {
  left: 8px;
  transform-origin: left center;
}

.predictive-back-indicator--right {
  right: 8px;
  transform-origin: right center;
}

.predictive-back-indicator--visible {
  transform: translateY(-50%) scaleX(1);
  opacity: 1;
}

.predictive-back-indicator--activated {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-50%) scaleX(1.5) scaleY(1.2);
}

/* Leaflet map protection during transitions */
.leaflet-container.is-animating {
  pointer-events: none !important;
  overflow: hidden !important;
}

.leaflet-container.is-animating * {
  pointer-events: none !important;
}

.leaflet-container.is-animating .leaflet-tile-container {
  will-change: auto !important;
}

.leaflet-container.is-animating .leaflet-zoom-animated {
  transition: none !important;
}

/* Modal animation states for FLIP */
.bottom-sheet--flip-enter {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.bottom-sheet--flip-exit {
  transform: none !important;
}

/* Disable all other transitions during FLIP */
.flip-active * {
  transition: none !important;
  animation: none !important;
}

.flip-active .transition-clone,
.flip-active .transition-clone * {
  transition: inherit;
}

/* Smooth content fade for modal during FLIP */
.bottom-sheet__body--flip-fade {
  opacity: 0;
  transition: opacity var(--transition-duration-medium)
    var(--transition-easing-standard);
  transition-delay: calc(var(--transition-duration-long) * 0.5);
}

.bottom-sheet__body--flip-fade-in {
  opacity: 1;
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration-short: 0ms;
    --transition-duration-medium: 0ms;
    --transition-duration-long: 0ms;
    --transition-duration-extra-long: 0ms;
  }

  .transition-clone--animating,
  .predictive-back-content--animating {
    transition: none !important;
  }
}

/* GPU acceleration hints */
.transition-clone,
.predictive-back-content,
.bottom-sheet--flip-enter,
.bottom-sheet--flip-exit {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}