/* Погода — стили */

/* Регистрируем цвета как анимируемые — иначе var(--ink) прыгает без серых оттенков */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #eef1f6; }
@property --card { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --card-soft { syntax: "<color>"; inherits: true; initial-value: #f5f7fb; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #12151c; }
@property --ink-2 { syntax: "<color>"; inherits: true; initial-value: #5b6472; }
@property --ink-3 { syntax: "<color>"; inherits: true; initial-value: #949cab; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #e7ebf2; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #3d7fe0; }
@property --accent-soft { syntax: "<color>"; inherits: true; initial-value: #eaf2fd; }
@property --danger { syntax: "<color>"; inherits: true; initial-value: #e5484d; }
@property --warn { syntax: "<color>"; inherits: true; initial-value: #f5a623; }
@property --ok { syntax: "<color>"; inherits: true; initial-value: #2fb56a; }
@property --alert-bg { syntax: "<color>"; inherits: true; initial-value: #cce5ff; }
@property --alert-border { syntax: "<color>"; inherits: true; initial-value: #b7d4f7; }
@property --scrim { syntax: "<color>"; inherits: true; initial-value: rgba(12, 20, 36, 0.42); }
@property --chart-grid { syntax: "<color>"; inherits: true; initial-value: #e7ebf2; }
@property --skeleton-a { syntax: "<color>"; inherits: true; initial-value: #eef1f6; }
@property --skeleton-b { syntax: "<color>"; inherits: true; initial-value: #e2e7f0; }
@property --theme-toggle-bg { syntax: "<color>"; inherits: true; initial-value: rgba(18, 21, 28, 0.08); }

:root {
  --bg: #eef1f6;
  --card: #ffffff;
  --card-soft: #f5f7fb;
  --ink: #12151c;
  --ink-2: #5b6472;
  --ink-3: #949cab;
  --line: #e7ebf2;
  --accent: #3d7fe0;
  --accent-soft: #eaf2fd;
  --danger: #e5484d;
  --warn: #f5a623;
  --ok: #2fb56a;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 8px 24px rgba(28, 48, 92, 0.10);
  --shadow-soft: 0 2px 12px rgba(28, 48, 92, 0.08);
  --stage-max: 460px;
  --sidebar-w: 264px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --alert-bg: #cce5ff;
  --alert-border: #8eb8e8;
  --alert-title: #1a5aad;
  --alert-body: #2f75c8;
  --scrim: rgba(12, 20, 36, 0.42);
  --chart-grid: #e7ebf2;
  --skeleton-a: #eef1f6;
  --skeleton-b: #e2e7f0;
  --promo-bg: linear-gradient(120deg, #eaf2fd, #f5f9ff);
  --theme-toggle-bg: rgba(18, 21, 28, 0.08);
  --theme-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --theme-dur: 0.75s;
}

html[data-theme="dark"] {
  --bg: #0f1419;
  --card: #1a222d;
  --card-soft: #232d3b;
  --ink: #eef2f7;
  --ink-2: #a8b3c4;
  --ink-3: #7d8a9c;
  --line: #354556;
  --accent: #6ba3f0;
  --accent-soft: #1e2f45;
  --danger: #ff6b6f;
  --warn: #f5b942;
  --ok: #3dd68c;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  --shadow-soft: 0 2px 14px rgba(0, 0, 0, 0.32);
  --alert-bg: #4a7fb8;
  --alert-border: #7eb0e0;
  --alert-title: #f2f7fc;
  --alert-body: #d7e6f5;
  --scrim: rgba(0, 0, 0, 0.55);
  --chart-grid: #2c3848;
  --skeleton-a: #1a222d;
  --skeleton-b: #2a3544;
  --promo-bg: linear-gradient(120deg, #1a2d45, #1e2633);
  --theme-toggle-bg: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
}

html[data-theme="dark"] {
  scrollbar-color: #4a5a70 transparent;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #4a5a70;
  background-clip: padding-box;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #5d7088;
  background-clip: padding-box;
}

* { box-sizing: border-box; }

/* ---------- Кастомные скроллбары ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: #c3cddd transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #c3cddd;
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #a7b4ca;
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Атрибут hidden должен всегда побеждать оформление (иначе .overlay/.dra */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* Плавная смена темы: анимируем сами CSS-переменные (текст проходит через серые оттенки) */
html.theme-animating {
  transition:
    --bg var(--theme-dur) var(--theme-ease),
    --card var(--theme-dur) var(--theme-ease),
    --card-soft var(--theme-dur) var(--theme-ease),
    --ink var(--theme-dur) var(--theme-ease),
    --ink-2 var(--theme-dur) var(--theme-ease),
    --ink-3 var(--theme-dur) var(--theme-ease),
    --line var(--theme-dur) var(--theme-ease),
    --accent var(--theme-dur) var(--theme-ease),
    --accent-soft var(--theme-dur) var(--theme-ease),
    --danger var(--theme-dur) var(--theme-ease),
    --warn var(--theme-dur) var(--theme-ease),
    --ok var(--theme-dur) var(--theme-ease),
    --alert-bg var(--theme-dur) var(--theme-ease),
    --alert-border var(--theme-dur) var(--theme-ease),
    --scrim var(--theme-dur) var(--theme-ease),
    --chart-grid var(--theme-dur) var(--theme-ease),
    --skeleton-a var(--theme-dur) var(--theme-ease),
    --skeleton-b var(--theme-dur) var(--theme-ease),
    --theme-toggle-bg var(--theme-dur) var(--theme-ease);
}

/* Тени и фон промо — без @property, но тоже смягчаем */
html.theme-animating,
html.theme-animating body,
html.theme-animating .view,
html.theme-animating .sidebar,
html.theme-animating .drawer,
html.theme-animating .overlay,
html.theme-animating .card,
html.theme-animating .metric-tile,
html.theme-animating .cookie-banner-inner,
html.theme-animating .chat-panel,
html.theme-animating .chat-log,
html.theme-animating .scrim,
html.theme-animating .alert,
html.theme-animating .promo {
  transition:
    box-shadow var(--theme-dur) var(--theme-ease),
    background var(--theme-dur) var(--theme-ease),
    background-color var(--theme-dur) var(--theme-ease) !important;
}

html.theme-animating .theme-toggle-face {
  /* Иконки темы анимируются своими keyframes, не общим color morph */
  transition: none !important;
}

button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Каркас приложения ---------- */

#app {
  display: flex;
  height: 100dvh;
  width: 100%;
}

.sidebar { display: none; }

.stage {
  flex: 1;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.view {
  width: 100%;
  max-width: var(--stage-max);
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}

.view::-webkit-scrollbar { width: 8px; }

/* ---------- Общие карточки ---------- */

.home-body,
.page-body {
  padding: 14px 12px 110px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Мобильный «лист» поверх героя — скругление сверху, как на макете */
.home-body {
  margin-top: -22px;
  position: relative;
  z-index: 2;
  border-radius: 28px 28px 0 0;
  background: var(--bg);
  padding-top: 16px;
}

/* Плавное появление контента при переходе между экранами */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.hero { animation: fade-in 0.4s ease both; }
.home-body > *,
.page-body > * { animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.home-body > *:nth-child(1), .page-body > *:nth-child(1) { animation-delay: 0.02s; }
.home-body > *:nth-child(2), .page-body > *:nth-child(2) { animation-delay: 0.06s; }
.home-body > *:nth-child(3), .page-body > *:nth-child(3) { animation-delay: 0.10s; }
.home-body > *:nth-child(4), .page-body > *:nth-child(4) { animation-delay: 0.14s; }
.home-body > *:nth-child(5), .page-body > *:nth-child(5) { animation-delay: 0.18s; }
.home-body > *:nth-child(6), .page-body > *:nth-child(6) { animation-delay: 0.22s; }
.home-body > *:nth-child(n+7), .page-body > *:nth-child(n+7) { animation-delay: 0.26s; }

/* Появление текста совета/ответа */
.advice-body.is-updated { animation: fade-in 0.5s ease; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}

.card-flush { padding: 6px 4px; }

.card-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.map-teaser-card {
  padding-top: 14px;
  padding-bottom: 16px;
}
.map-teaser-card .card-title { margin-bottom: 6px; }
.map-teaser-note {
  margin: 0 0 10px !important;
}

.section-title {
  margin: 6px 2px -2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: none;
}

.muted { color: var(--ink-3); }

/* ---------- Иконки-кнопки ---------- */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.18); }
.icon-btn svg { display: block; }

/* ---------- Переключатель темы: цветное солнышко ↔ полная луна ---------- */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: visible;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.theme-toggle:hover { transform: translateY(-1px) scale(1.04); filter: brightness(1.04); }
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle-stage {
  position: relative;
  width: 35px;
  height: 35px;
  display: block;
}
.theme-toggle-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.theme-toggle-face svg { display: block; width: 35px; height: 35px; }

/* Обводка фазы луны:
   — на странице «Фазы Луны» в светлой теме — мягкая обводка диска;
   — в тёмной теме — на странице фаз (не в сайдбаре). */
.moon-phase-ico .moon-phase-ring { stroke: none; }
.page--moon .moon-phase-ico .moon-phase-ring {
  stroke: rgba(64, 73, 97, 0.28);
  stroke-width: 1;
}
html[data-theme="dark"] .page--moon .moon-phase-ico .moon-phase-ring {
  stroke: rgba(210, 222, 238, 0.55);
  stroke-width: 0.85;
}

/* Сайдбар / тёмная тема: лёгкая светлая обводка диска, без «кривого» AA-ореола */
html[data-theme="dark"] .sidebar .moon-phase-ico,
html[data-theme="dark"] .drawer .moon-phase-ico {
  overflow: hidden;
  border-radius: 50%;
}
html[data-theme="dark"] .sidebar .moon-phase-ico .moon-phase-ring,
html[data-theme="dark"] .drawer .moon-phase-ico .moon-phase-ring {
  stroke: rgba(220, 230, 242, 0.55);
  stroke-width: 1;
}
html[data-theme="dark"] .sidebar .moon-phase-ico .moon-phase-shade,
html[data-theme="dark"] .drawer .moon-phase-ico .moon-phase-shade {
  fill: #1e2733;
}
html[data-theme="dark"] .sidebar .nav-item.is-active .moon-phase-ico .moon-phase-ring,
html[data-theme="dark"] .drawer .nav-item.is-active .moon-phase-ico .moon-phase-ring {
  stroke: rgba(230, 238, 248, 0.7);
}

/* Статичные состояния: видна только одна иконка */
.theme-toggle-face--sun { opacity: 1; transform: translateY(0) scale(1); }
.theme-toggle-face--moon { opacity: 0; visibility: hidden; transform: translateY(-18px) scale(0.7); }
html[data-theme="dark"] .theme-toggle-face--sun {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.7);
}
html[data-theme="dark"] .theme-toggle-face--moon {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Во время анимации тема не должна «проявлять» обе иконки */
.theme-toggle.is-switching-to-dark .theme-toggle-face--sun,
.theme-toggle.is-switching-to-light .theme-toggle-face--moon {
  visibility: visible !important;
  animation: theme-shake-down 0.3s cubic-bezier(0.33, 0.1, 0.25, 1) forwards;
}
.theme-toggle.is-switching-to-dark .theme-toggle-face--moon,
.theme-toggle.is-switching-to-light .theme-toggle-face--sun {
  visibility: visible !important;
  animation: theme-rise-in 0.3s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes theme-shake-down {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  25% { transform: translateY(3px) rotate(-9deg) scale(1.03); opacity: 1; }
  50% { transform: translateY(7px) rotate(8deg) scale(0.96); opacity: 0.85; }
  75% { transform: translateY(12px) rotate(-5deg) scale(0.85); opacity: 0.4; }
  100% { transform: translateY(20px) rotate(0deg) scale(0.65); opacity: 0; }
}
@keyframes theme-rise-in {
  0% { transform: translateY(-16px) rotate(-10deg) scale(0.65); opacity: 0; }
  60% { transform: translateY(2px) rotate(3deg) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
}

/* В шапке героя — без серой «коробки» */
.hero .theme-toggle {
  background: transparent;
}
.hero .theme-toggle:hover { background: transparent; }

.home-map-stack,
.home-forecast-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.home-map-stack > .map-card,
.home-map-stack > .daylight,
.home-forecast-stack > .card {
  margin: 0;
}
.home-forecast-stack > .ad-slot {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}
.home-forecast-stack > .ad-slot > .promo {
  flex: 1 1 auto;
  width: 100%;
  min-height: 120px;
}

/* Мобилка: баннер «на главный экран» — в самом низу */
@media (max-width: 899px) {
  .home-body {
    display: flex;
    flex-direction: column;
  }
  .home-forecast-stack {
    display: contents;
  }
  .home-forecast-stack > .ad-slot {
    order: 100;
    flex: none;
    min-height: 0;
    margin-top: 4px;
  }
  .home-forecast-stack > .ad-slot > .promo {
    min-height: 0;
  }
  .home-map-stack {
    order: 50;
  }
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar .brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  border-radius: 12px;
  padding: 2px 4px 2px 2px;
  margin: -2px -4px -2px -2px;
  transition: background 0.15s ease;
}
.sidebar .brand-link:hover { background: var(--card-soft); }
.sidebar .brand-ico {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}
.sidebar .brand-text { flex: 1; min-width: 0; }
.sidebar .brand .theme-toggle { margin-left: auto; }

.drawer-head .theme-toggle { display: none; }

/* ============================================================
   HERO (шапка с текущей погодой)
   ============================================================ */

.hero {
  position: relative;
  padding: 12px 12px 40px;
  color: #fff;
  overflow: hidden;
  /* На мобиле нижний лист налазает на шапку — углы героя не скругляем */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.hero.theme-day {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 42%),
    linear-gradient(168deg, #5aa3e8 0%, #89c0f2 38%, #b6daf8 72%, #d7ebfb 100%);
}
.hero.theme-morning {
  background:
    linear-gradient(180deg, rgba(255, 248, 235, 0.18) 0%, transparent 40%),
    linear-gradient(168deg, #6eb0ef 0%, #9dcdf6 42%, #c8e4fb 78%, #e8f4fc 100%);
}
.hero.theme-evening {
  background:
    linear-gradient(185deg, #3d6fad 0%, #6a8fc0 28%, #d4895c 62%, #f2c08a 100%);
}
.hero.theme-dawn {
  background:
    linear-gradient(175deg, #2f4a78 0%, #7a6e92 32%, #e8a07a 64%, #f6d2b0 100%);
}
.hero.theme-dusk {
  background:
    linear-gradient(178deg, #121c36 0%, #3a3558 34%, #8a5a68 62%, #c87a58 100%);
}
.hero.theme-night {
  background:
    linear-gradient(180deg, #0a1528 0%, #152844 48%, #1e3658 100%);
}
.hero.theme-cloudy {
  background:
    linear-gradient(170deg, #4e7aaa 0%, #7399bf 45%, #9bb6d0 78%, #b9cce0 100%);
}
.hero.theme-cloudy-morning {
  background:
    linear-gradient(170deg, #5a86b4 0%, #82a6c8 48%, #a9c2d8 100%);
}
.hero.theme-cloudy-evening {
  background:
    linear-gradient(172deg, #3a5a80 0%, #6e7088 42%, #a8907a 78%, #c4a890 100%);
}
.hero.theme-cloudy-dawn {
  background:
    linear-gradient(172deg, #314868 0%, #6e7088 40%, #b89888 78%, #d4b8a0 100%);
}
.hero.theme-cloudy-dusk {
  background:
    linear-gradient(178deg, #151e30 0%, #343848 48%, #6a5a68 100%);
}
.hero.theme-rain {
  background:
    linear-gradient(170deg, #3e5f86 0%, #5f7fa0 48%, #849eb8 100%);
}
.hero.theme-rain-evening {
  background:
    linear-gradient(172deg, #2f4664 0%, #555868 52%, #7a7068 100%);
}
.hero.theme-rain-dawn {
  background:
    linear-gradient(172deg, #2c4058 0%, #555868 52%, #7a746c 100%);
}
.hero.theme-rain-dusk {
  background:
    linear-gradient(178deg, #121820 0%, #2c303c 52%, #4a4450 100%);
}
.hero.theme-cloudy-night {
  background:
    linear-gradient(178deg, #121820 0%, #1c2838 52%, #2a384c 100%);
}
.hero.theme-rain-night {
  background:
    linear-gradient(178deg, #0e141c 0%, #182230 52%, #243040 100%);
}

/* Глубина неба: виньетка снизу + мягкий свет сверху (не отдельные круги) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 48%, rgba(8, 18, 36, 0.14) 100%),
    radial-gradient(120% 70% at 50% -15%, rgba(255, 255, 255, 0.16), transparent 58%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 55% at 78% 8%, rgba(255, 255, 255, 0.14), transparent 62%);
  pointer-events: none;
  z-index: 1;
}
.hero.theme-night::before,
.hero.theme-cloudy-night::before,
.hero.theme-rain-night::before {
  background:
    linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.22) 100%),
    radial-gradient(80% 50% at 50% 0%, rgba(120, 160, 220, 0.08), transparent 55%);
}
.hero.theme-night::after,
.hero.theme-cloudy-night::after,
.hero.theme-rain-night::after,
.hero.theme-dusk::after,
.hero.theme-cloudy-dusk::after,
.hero.theme-rain-dusk::after {
  background: radial-gradient(70% 45% at 70% 0%, rgba(160, 190, 255, 0.06), transparent 60%);
}
.hero.theme-dawn::before,
.hero.theme-evening::before,
.hero.theme-cloudy-dawn::before,
.hero.theme-cloudy-evening::before,
.hero.theme-rain-dawn::before,
.hero.theme-rain-evening::before,
.hero.theme-dusk::before {
  background:
    linear-gradient(180deg, transparent 35%, rgba(40, 20, 10, 0.12) 100%),
    radial-gradient(100% 60% at 50% 100%, rgba(255, 160, 100, 0.2), transparent 65%);
}
.hero.theme-dawn::after,
.hero.theme-evening::after,
.hero.theme-cloudy-dawn::after,
.hero.theme-cloudy-evening::after,
.hero.theme-rain-dawn::after,
.hero.theme-rain-evening::after {
  background: radial-gradient(85% 50% at 72% 12%, rgba(255, 210, 160, 0.2), transparent 60%);
}

/* Декор героя: солнце, лучи, облачные гряды, звёзды, дождь */
.hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero-decor.hero-decor--night {
  z-index: 1;
}
.hero-decor.hero-decor--day,
.hero-decor.hero-decor--rain,
.hero-decor.hero-decor--cloudy,
.hero-decor.hero-decor--glow {
  display: block;
}

.hero-horizon-glow {
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: -28%;
  height: 62%;
  background: radial-gradient(ellipse 70% 55% at 50% 100%,
    rgba(255, 170, 110, 0.42) 0%,
    rgba(255, 140, 90, 0.14) 42%,
    transparent 72%);
  pointer-events: none;
}
.hero-sky-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(40, 60, 110, 0.18) 0%,
    transparent 38%,
    rgba(255, 180, 130, 0.08) 100%);
  pointer-events: none;
}

/* Солнечный диск / bloom — один мягкий источник света, не куча белых кругов */
.hero-sun {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  animation: sun-breathe 11s ease-in-out infinite;
}
.hero-sun--day {
  top: -48px;
  right: 6%;
  width: 168px;
  height: 168px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 252, 235, 0.95) 0%,
      rgba(255, 236, 170, 0.45) 26%,
      rgba(255, 220, 140, 0.14) 48%,
      transparent 70%);
  filter: blur(1px);
}
.hero-sun--morning {
  top: -36px;
  right: 10%;
  width: 150px;
  height: 150px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 248, 230, 0.92) 0%,
      rgba(255, 220, 160, 0.4) 28%,
      rgba(255, 200, 140, 0.12) 50%,
      transparent 72%);
}
.hero-sun--evening {
  top: 28%;
  right: -6%;
  width: 240px;
  height: 240px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 220, 160, 0.85) 0%,
      rgba(255, 160, 90, 0.35) 30%,
      rgba(230, 100, 60, 0.12) 52%,
      transparent 72%);
  filter: blur(2px);
}
.hero-sun--dawn {
  left: 8%;
  bottom: 6%;
  width: 200px;
  height: 200px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 230, 190, 0.75) 0%,
      rgba(255, 170, 120, 0.32) 32%,
      rgba(220, 120, 90, 0.1) 55%,
      transparent 74%);
  filter: blur(2px);
}
.hero-sun--dusk {
  right: 12%;
  bottom: 2%;
  width: 210px;
  height: 210px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 190, 130, 0.7) 0%,
      rgba(220, 110, 80, 0.28) 34%,
      rgba(120, 60, 90, 0.1) 56%,
      transparent 74%);
  filter: blur(2px);
}
@keyframes sun-breathe {
  0%, 100% { transform: scale(1); opacity: 0.88; }
  50% { transform: scale(1.04); opacity: 1; }
}

/* Мягкие световые клинья (не тонкие белые палки) */
.hero-shaft {
  position: absolute;
  top: -8%;
  height: 78%;
  width: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 55%, transparent 100%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: blur(8px);
  transform-origin: top center;
  opacity: 0.28;
  animation: shaft-pulse 9s ease-in-out infinite;
}
.hero-shaft--1 { left: 22%; transform: rotate(-16deg); }
.hero-shaft--2 { left: 34%; transform: rotate(-5deg); animation-delay: 2.2s; opacity: 0.18; width: 44px; }
.hero.theme-evening .hero-shaft {
  background: linear-gradient(180deg, rgba(255, 210, 150, 0.22) 0%, rgba(255, 160, 100, 0.05) 55%, transparent 100%);
}
@keyframes shaft-pulse {
  0%, 100% { opacity: 0.14; }
  50% { opacity: 0.32; }
}

.hero-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  transform: translate(-50%, -50%);
  animation: star-twinkle 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.hero-raindrop {
  position: absolute;
  top: -24px;
  width: 1.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.55));
  animation: rain-fall linear infinite;
  z-index: 2;
}
@keyframes rain-fall {
  from { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.8; }
  to { transform: translateY(220px); opacity: 0; }
}

/* Облачные гряды: несколько долей в одном слое = форма облака, не растянутый овал */
.hero-cloud-bank {
  position: absolute;
  height: 78px;
  pointer-events: none;
  opacity: 0.58;
  filter: blur(12px);
  background:
    radial-gradient(ellipse 26% 72% at 12% 58%, rgba(255, 255, 255, 0.55) 0%, transparent 72%),
    radial-gradient(ellipse 34% 88% at 34% 42%, rgba(255, 255, 255, 0.5) 0%, transparent 74%),
    radial-gradient(ellipse 30% 78% at 56% 55%, rgba(255, 255, 255, 0.48) 0%, transparent 72%),
    radial-gradient(ellipse 28% 70% at 76% 46%, rgba(255, 255, 255, 0.42) 0%, transparent 72%),
    radial-gradient(ellipse 24% 64% at 92% 58%, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
  animation: cloud-drift 32s ease-in-out infinite;
}
.hero-cloud-bank--1 {
  width: 125%;
  left: -18%;
  top: 8%;
}
.hero-cloud-bank--2 {
  width: 118%;
  left: -10%;
  top: 34%;
  height: 68px;
  opacity: 0.4;
  filter: blur(16px);
  animation-duration: 40s;
  animation-delay: -12s;
}
.hero-cloud-bank--3 {
  width: 135%;
  left: -22%;
  top: 54%;
  height: 58px;
  opacity: 0.28;
  filter: blur(20px);
  animation-duration: 48s;
  animation-delay: -22s;
}
.hero.theme-cloudy-night .hero-cloud-bank,
.hero.theme-rain-night .hero-cloud-bank,
.hero.theme-cloudy-dusk .hero-cloud-bank,
.hero.theme-rain-dusk .hero-cloud-bank {
  opacity: 0.35;
  background:
    radial-gradient(ellipse 26% 72% at 12% 58%, rgba(170, 190, 220, 0.32) 0%, transparent 72%),
    radial-gradient(ellipse 34% 88% at 34% 42%, rgba(150, 175, 205, 0.28) 0%, transparent 74%),
    radial-gradient(ellipse 30% 78% at 56% 55%, rgba(160, 180, 210, 0.26) 0%, transparent 72%),
    radial-gradient(ellipse 28% 70% at 76% 46%, rgba(140, 165, 195, 0.22) 0%, transparent 72%),
    radial-gradient(ellipse 24% 64% at 92% 58%, rgba(130, 155, 185, 0.18) 0%, transparent 70%);
}
.hero.theme-rain .hero-cloud-bank,
.hero.theme-rain-evening .hero-cloud-bank,
.hero.theme-rain-dawn .hero-cloud-bank {
  opacity: 0.45;
  filter: blur(14px);
}
@keyframes cloud-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(14px, -4px, 0); }
}

.topbar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}
/* Кнопки и город выше звёзд; пустые ячейки шапки звёзды не перекрывают */
.topbar > .icon-btn,
.topbar > .topbar-title,
.topbar > .topbar-actions {
  position: relative;
  z-index: 3;
}

.topbar > .icon-btn:first-child {
  justify-self: start;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: end;
}

.topbar-title {
  min-width: 0;
  max-width: min(52vw, 220px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 10px;
  transition: background 0.15s ease;
  overflow: hidden;
  justify-self: center;
}
.topbar-title:hover { background: rgba(255, 255, 255, 0.16); }
.topbar-city {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.topbar-sub {
  font-size: 11px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hero-main {
  position: relative;
  z-index: 3;
  text-align: center;
  padding-top: 6px;
  isolation: isolate;
}
/* Мягкое «замыливание» под температурой — атмосферная вуаль, не карточка */
.hero-main::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  width: min(300px, 82%);
  height: 150px;
  background: radial-gradient(ellipse at 50% 42%,
    rgba(8, 22, 44, 0.32) 0%,
    rgba(8, 22, 44, 0.14) 45%,
    transparent 74%);
  filter: blur(22px);
  z-index: -1;
  pointer-events: none;
}
.hero.theme-day .hero-main::before,
.hero.theme-morning .hero-main::before,
.hero.theme-cloudy .hero-main::before,
.hero.theme-cloudy-morning .hero-main::before {
  background: radial-gradient(ellipse at 50% 42%,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.14) 48%,
    transparent 74%);
  filter: blur(20px);
}
.hero.theme-dawn .hero-main::before,
.hero.theme-evening .hero-main::before,
.hero.theme-cloudy-dawn .hero-main::before,
.hero.theme-cloudy-evening .hero-main::before {
  background: radial-gradient(ellipse at 50% 42%,
    rgba(40, 24, 20, 0.28) 0%,
    rgba(40, 24, 20, 0.1) 48%,
    transparent 74%);
}
.hero-reading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
}
.hero-temp {
  font-size: 76px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -2px;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 20px rgba(8, 22, 44, 0.22),
    0 1px 3px rgba(8, 22, 44, 0.18);
}
.hero-cond {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
  text-shadow: 0 1px 14px rgba(8, 22, 44, 0.35), 0 1px 2px rgba(8, 22, 44, 0.2);
}
.hero-yesterday {
  margin-top: 3px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 12px rgba(8, 22, 44, 0.45), 0 1px 2px rgba(8, 22, 44, 0.28);
  min-height: 16px;
}
.hero-ico {
  z-index: 2;
  opacity: 0.98;
  flex: 0 0 auto;
  animation: float 5s ease-in-out infinite;
}
.hero-ico .wicon {
  filter: drop-shadow(0 4px 12px rgba(12, 28, 56, 0.22));
}
.day-ico .wicon,
.hour-ico .wicon {
  filter: drop-shadow(0 1px 2px rgba(30, 50, 80, 0.12));
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ============================================================
   Почасовой прогноз
   ============================================================ */

.hourly-strip {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 2px 4px 6px;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.hourly-strip.is-dragging { cursor: grabbing; user-select: none; }
.hourly-strip::-webkit-scrollbar { display: none; height: 0; }

.hour {
  flex: 0 0 auto;
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 2px;
}
.hour-time { font-size: 11px; color: var(--ink-2); }
.hour-ico { height: 26px; display: flex; align-items: center; }
.hour-ico .wicon { width: 26px; height: 26px; }
.hour-rain {
  font-size: 9px;
  color: var(--ink);
  font-weight: 600;
  min-height: 12px;
}
.hour-rain.is-likely,
.hour-rain.is-high { color: var(--ink); }
.hour-temp { font-size: 13px; font-weight: 600; }
.hour.is-now { background: var(--accent-soft); border-radius: 12px; }
.hour.is-now .hour-time { color: var(--accent); font-weight: 600; }

/* Ряд почасовых значений: не сжимать колонки — горизонтальный скролл */
.hval-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 4px 2px;
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hval-row::-webkit-scrollbar { display: none; }
.hval {
  flex: 0 0 auto;
  min-width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hval-t { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.hval-v { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ============================================================
   Плитки показателей
   ============================================================ */

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.metric-tile {
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 78px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.metric-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.metric-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.metric-icon {
  display: inline-flex;
  color: #7cc0f5;
  flex-shrink: 0;
  line-height: 0;
}
.metric-icon svg { display: block; }
.metric-title {
  font-size: 12px;
  color: #7cc0f5;
  font-weight: 500;
}
.metric-value {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  margin-top: 4px;
  color: var(--ink);
}
.metric-sub {
  font-size: 12px;
  font-weight: 500;
  margin-top: auto;
  padding-top: 6px;
  line-height: 1.25;
  min-height: 1.25em;
}
.metric-sub.is-warn {
  background: linear-gradient(90deg, #e8883a 0%, #d42222 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 600;
}
.metric-tile--static { cursor: default; }
.metric-tile--static:hover { transform: none; box-shadow: var(--shadow-soft); }
.metric-value--sm { font-size: 22px; }

/* ============================================================
   Прогноз на N дней (строки с диапазоном)
   ============================================================ */

.day-list { display: flex; flex-direction: column; }

.day-row {
  display: grid;
  grid-template-columns: 74px 40px 1fr;
  align-items: center;
  gap: 8px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.day-row:last-child { border-bottom: none; }
.day-row--climate {
  /* оставлен для совместимости; визуально как обычная строка */
  opacity: 1;
  pointer-events: none;
}
.day-name { font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.day-climate {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--card-soft);
  border-radius: 6px;
  padding: 1px 6px;
  letter-spacing: 0.02em;
}
.day-ico { position: relative; display: flex; align-items: center; justify-content: center; }
.day-rain {
  position: absolute;
  bottom: -8px;
  font-size: 9px;
  color: var(--ink-2);
  font-weight: 600;
}
.day-rain.is-likely,
.day-rain.is-high { color: var(--ink-2); }

.range-wrap {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 8px;
}
.range-min { font-size: 13px; color: var(--ink-3); text-align: right; }
.range-max { font-size: 13px; color: var(--ink); font-weight: 600; }
.range-track {
  position: relative;
  height: 5px;
  background: var(--line);
  border-radius: 4px;
}
.range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #4a9fe0, #3ecf9a);
}

/* ============================================================
   Оповещение / советы / промо
   ============================================================ */

.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: none;
  background: var(--alert-bg);
  padding: 10px 12px;
  box-shadow: none;
}
.alert-ico {
  color: #3d7fe0;
  flex: 0 0 auto;
  margin-top: 1px;
  line-height: 0;
}
.alert-ico svg { display: block; }
html[data-theme="dark"] .alert-ico .ico-info circle:first-of-type { fill: #fff; }
html[data-theme="dark"] .alert-ico .ico-info rect,
html[data-theme="dark"] .alert-ico .ico-info circle:last-of-type { fill: var(--alert-bg); }
.alert-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert-text strong { font-size: 13px; color: var(--alert-title); font-weight: 700; }
.alert-text span { font-size: 12px; color: var(--alert-body); font-weight: 500; line-height: 1.35; }

.advice { }
.advice-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.advice-head .card-title { margin: 0; }
.advice-spark { color: var(--accent); display: inline-flex; }
.advice-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.advice-ai-btn {
  font-size: 0.92rem;
  padding: 8px 14px;
}
.advice-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  min-height: 1.5em;
  overflow-wrap: anywhere;
}

.skeleton-line {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 37%, var(--skeleton-a) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
  margin: 6px 0;
}
.skeleton-line.short { width: 62%; }
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.promo {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--promo-bg);
}
.promo-text { display: flex; flex-direction: column; gap: 3px; }
.promo-text strong { font-size: 14px; }
.promo-text span { font-size: 12px; color: var(--ink-2); }
.promo-badge { margin-left: auto; }

/* Рекламный слот: обёртка вокруг промо/баннера. Пустой баннер резервирует высоту,
   чтобы контент не «прыгал» при загрузке рекламы. */
.ad-slot { display: block; }
.ad-slot .adsbygoogle { display: block; min-height: 90px; }

/* Правый рекламный сайдбар (десктоп). На мобильных и планшетах скрыт. */
.ad-rail { display: none; }
.promo--rail {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
}
.promo--rail .promo-badge { margin-left: 0; }
.promo--rail .promo-text strong { font-size: 15px; }
.ad-slot--rail .adsbygoogle { min-height: 600px; }

/* ============================================================
   Световой день
   ============================================================ */

.daylight .card-title { margin-bottom: 4px; }
.daylight-times {
  display: flex;
  justify-content: space-between;
  margin: 2px 0 10px;
}
.daylight-times .right { text-align: right; }
.dl-label { display: block; font-size: 12px; color: var(--ink-3); }
.dl-value { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; }
.daylight-arc { display: flex; justify-content: center; padding: 2px 0 0; }
.sun-arc { width: 100%; max-width: 440px; height: auto; display: block; }
.sun-arc--daylight { border-radius: 12px; overflow: hidden; }

@media (min-width: 900px) {
  .daylight {
    display: flex;
    flex-direction: column;
  }
  .daylight-arc {
    flex: 1;
    align-items: center;
  }
  .daylight .sun-arc {
    max-width: min(100%, 480px);
  }
}
.sun-arc-done {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-arc 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes draw-arc { to { stroke-dashoffset: 0; } }
.sun-arc-dot {
  opacity: 0;
  animation: sun-pop 0.5s ease 0.9s forwards, sun-pulse 3s ease-in-out 1.4s infinite;
}
@keyframes sun-pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes sun-pulse {
  0%, 100% { filter: none; }
  50% { transform: scale(1.12); }
}

.daylight-note {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}
.daylight--polar-arc .daylight-times { margin-top: 4px; }
.sun-arc--polar text { font-family: inherit; }

/* Цвета полярных дуг (день — тёплые, ночь — холодные). */
.sun-arc--day {
  --polar-track: #d7e2f2;
  --polar-active: #f5a623;
  --polar-dot: #fdb813;
  --polar-horizon: #e2e9f3;
  --polar-label: #949cab;
}
.sun-arc--night {
  --polar-track: #c5d0de;
  --polar-active: #7e9ac4;
  --polar-dot: #a8bdd8;
  --polar-horizon: #d0d8e4;
  --polar-label: #949cab;
}
html[data-theme="dark"] .sun-arc--day {
  --polar-track: #3a4a5e;
  --polar-horizon: #3a4a5e;
  --polar-label: #7d8a9c;
}
html[data-theme="dark"] .sun-arc--night {
  --polar-track: #3a4a5e;
  --polar-active: #7e9ac4;
  --polar-dot: #dce6f5;
  --polar-horizon: #3a4a5e;
  --polar-label: #7d8a9c;
}

/* ============================================================
   Внутренние страницы (шапка + вкладки)
   ============================================================ */

.page-head {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  /* Непрозрачный фон обязателен: иначе при прокрутке контент просвечивает под шапкой. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.page-head .icon-btn { color: var(--ink); }
.page-head .icon-btn:hover { background: rgba(0,0,0,0.05); }
.page-head-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.page-head-title b { font-size: 16px; font-weight: 600; }
.page-head-title span { font-size: 12px; color: var(--ink-3); }

.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px;
  background: var(--card-soft);
  border-radius: 12px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto;
  text-align: center;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: 9px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab.is-active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

/* Крупное значение показателя */
.metric-hero {
  text-align: center;
  padding: 10px 0 4px;
}
.metric-hero-value {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}
.metric-hero-value.tone-ok { color: var(--ok); }
.metric-hero-value.tone-warn { color: var(--warn); }
.metric-hero-value.tone-danger { color: var(--danger); }
.metric-hero-value .unit { font-size: 20px; font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.metric-hero-caption { margin-top: 8px; font-size: 15px; font-weight: 600; }
.metric-hero-note { margin-top: 4px; font-size: 13px; color: var(--ink-2); }

/* ---------- Графики ---------- */

.chart { width: 100%; }
.chart--scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -4px;
  padding: 0 4px 4px;
  cursor: grab;
}
.chart--scroll.is-dragging { cursor: grabbing; }
.chart--scroll::-webkit-scrollbar { display: none; height: 0; }
.chart-inner {
  min-width: 100%;
}
.linechart {
  width: 100%;
  height: auto;
  max-height: 168px;
  display: block;
}
.chart--fit {
  display: flex;
  justify-content: center;
}
.chart--fit .chart-inner {
  min-width: 0;
  width: 100%;
  max-width: 560px;
}
.chart--fit .linechart {
  max-height: 160px;
}
.metric-chart-panel {
  margin-top: 14px;
  padding: 10px 6px 6px;
  background: var(--card-soft);
  border-radius: 16px;
}
.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
}
.chart-empty {
  padding: 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}

/* ---------- Шкала УФ / бейджи часов ---------- */

.uv-strip {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
  overflow-x: auto;
  /* Запас сверху: ring у .prob-badge.is-now / .uv-hour.is-now не обрезается */
  padding: 4px 2px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.uv-strip::-webkit-scrollbar { display: none; height: 0; }
.precip-strip { gap: 10px; padding-top: 5px; }
.precip-cell {
  flex: 0 0 auto;
  min-width: 52px;
  padding: 8px 6px !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.precip-h { font-size: 10px; opacity: 0.85; }
.precip-p { font-size: 12px; font-weight: 700; }
.uv-cell {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 0;
  border-radius: 6px;
}

.uv-hour-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 14px;
  padding: 2px 2px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.uv-hour-strip::-webkit-scrollbar { display: none; height: 0; }
.uv-hour {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 44px;
}
.uv-hour-card {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.uv-hour.is-now .uv-hour-card {
  box-shadow: 0 0 0 2px rgba(61, 127, 224, 0.45);
}
.uv-hour-t {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}
.uv-hour.is-now .uv-hour-t {
  color: var(--accent);
  font-weight: 650;
}

.prob-badge {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 56px;
}
.prob-badge-card {
  min-width: 56px;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
}
/* Светлая тема: неактивные % бледные, не «чёрные плитки». */
.prob-badge-card.tone-idle {
  background: #e8eef5;
  color: #6a7788;
}
.prob-badge-card.tone-low {
  background: #e3f2fb;
  color: #3d7fe0;
}
.prob-badge-card.tone-mid {
  background: #c5e4fa;
  color: #2a5f94;
}
.prob-badge-card.tone-high {
  background: #9fd0f5;
  color: #1a4a7a;
}
html[data-theme="dark"] .prob-badge-card.tone-idle {
  background: #2a3444;
  color: #a8b3c4;
}
html[data-theme="dark"] .prob-badge-card.tone-low {
  background: #2a4568;
  color: #d7e6f5;
}
html[data-theme="dark"] .prob-badge-card.tone-mid {
  background: #2f5a94;
  color: #eef2f7;
}
html[data-theme="dark"] .prob-badge-card.tone-high {
  background: #3d6eb8;
  color: #eef2f7;
}
.prob-badge-t {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}
.prob-badge.is-now .prob-badge-card {
  box-shadow: 0 0 0 2px rgba(61, 127, 224, 0.45);
}
.prob-badge.is-now .prob-badge-t {
  color: var(--accent);
  font-weight: 650;
}
.precip-cell.uv-cell {
  /* Цвет задаётся инлайном под тему; не форсим белый */
  color: inherit;
}
.uv-cell.dim { opacity: 0.35; }

.uv-scale {
  position: relative;
  height: 10px;
  margin: 10px 0 6px;
}
.uv-scale-bar {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #9E9E9E, #43A047 35%, #EF6C00 55%, #E91E63 78%, #8E24AA);
}
.uv-scale-marker {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 16px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.18);
  transform: translateX(-50%);
}

.level-list { display: flex; flex-direction: column; gap: 18px; }
.level-item { display: flex; gap: 10px; align-items: flex-start; }
.level-item--card {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.level-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
}
.level-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  box-shadow: none;
}
.level-body { min-width: 0; width: 100%; }
.level-body b { font-size: 15px; display: block; color: var(--ink); font-weight: 700; }
.level-body .range { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.level-body p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---------- Строки-бары (влажность по дням) ---------- */

.bar-row {
  display: grid;
  grid-template-columns: 72px 1fr 56px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.bar-row.allergen-row {
  grid-template-columns: minmax(72px, 34%) 1fr minmax(64px, 26%);
}
.bar-row.climate-row {
  grid-template-columns: 78px 1fr 110px;
}
.bar-row .bar-label {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.bar-row .bar-track {
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.bar-row .bar-fill {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #7cc0f5, #3d7fe0);
}
.bar-row .bar-fill.climate-fill {
  background: linear-gradient(90deg, #6eb6f5 0%, #3d7fe0 100%);
  box-shadow: inset 0 0 0 1px rgba(61, 127, 224, 0.15);
}
.bar-row .bar-value {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  line-height: 1.25;
}
.bar-row .allergen-lvl {
  white-space: nowrap;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  gap: 1px;
}
.bar-row .allergen-lvl strong {
  font-size: 13px;
  font-weight: 700;
}
.bar-row .allergen-lvl small {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
  text-transform: lowercase;
}
.climate-mm {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 2px;
}

/* ---------- FAQ ---------- */

.faq details { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron {
  color: var(--ink-3);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
.faq-item[open] .faq-chevron { transform: rotate(90deg); }
.faq-answer {
  padding: 0 0 12px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---------- Карта осадков ---------- */

#precip-map,
.precip-map-host {
  height: 340px;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 0;
}
.home .precip-map-host { height: 300px; }
.map-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.map-card-head .card-title { margin: 0; }
.map-card-more {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.map-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.map-scrub-label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.map-play {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s ease;
}
.map-play:hover { filter: brightness(1.08); }
.map-slider {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}
.map-time {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  min-width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.map-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 10px;
}
.map-legend .scale {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(140, 205, 245, 0.25), #7ec4f0, #3d7fe0, #2456b8);
}
.map-legend .scale--clouds {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.55),
    rgba(90, 160, 230, 0.55),
    rgba(50, 120, 210, 0.7),
    rgba(30, 80, 180, 0.85));
}
.precip-cloud-layer {
  pointer-events: none !important;
  /* transform/position задаёт Leaflet (zoomanim + layer point) */
}
.precip-fx-layer {
  pointer-events: none !important;
}
.leaflet-precipCloud-pane,
.leaflet-precipFx-pane {
  pointer-events: none !important;
}
/* Тёмная карта: инверсия светлых тайлов → серый фон, ближе к Яндексу */
.leaflet-layer.map-tiles-dark {
  filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.88) saturate(0.55);
}
.day-climate.day-seasonal {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

/* ---------- Луна ---------- */

.moon-layout-hero {
  display: flex;
  flex-direction: column;
}
.moon-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 160px;
  padding: 8px 0;
}
.moon-visual { flex: 0 0 auto; }
.moon-info { max-width: 320px; }
.moon-info b { font-size: 18px; display: block; }
.moon-info p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.moon-illum { font-size: 13px; color: var(--accent); font-weight: 600; margin-top: 6px; }

/* Освещённая часть диска — мягкий белый */
.moon-phase-ico .moon-phase-lit { fill: #f4f6fa; }
html[data-theme="dark"] .moon-phase-ico .moon-phase-lit { fill: #eef2f7; }
html[data-theme="dark"] .moon-phase-ico .moon-phase-shade { fill: #2a3340; }
.moon-calendar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
}
.moon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 10px 4px 8px;
  background: var(--card-soft);
  border-radius: var(--radius-sm);
  min-width: 0;
  overflow: hidden;
}
.moon-cell .moon-disk { display: flex; justify-content: center; }
.moon-cell .moon-disk svg { max-width: 100%; height: auto; }
.moon-cell .d { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-top: 6px; }
.moon-cell .n {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.25;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: balance;
}
.moon-astro-list .factor span:last-child {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.moon-side-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

@media (max-width: 420px) {
  .moon-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .moon-cell .n { font-size: 12px; min-height: 20px; }
}

/* ---------- Метеочувствительность / аллергены ---------- */

.gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 10px;
  margin-top: 2px;
  padding-bottom: 4px;
}
.gauge-ring { flex: 0 0 auto; }
.gauge-body { max-width: 360px; }
.gauge-body b { font-size: 17px; display: block; }
.gauge-body p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }

.factor-list { display: flex; flex-direction: column; gap: 10px; }
.factor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card-soft);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.factor .pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  color: #fff;
}

/* ============================================================
   Пусто/ошибка/загрузка
   ============================================================ */

.state-screen {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.state-screen p { color: var(--ink-2); margin: 0; }

.error-page-body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

.error-404 {
  text-align: center;
  padding: 32px 24px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.error-404-code {
  margin: 0 0 8px;
  font-size: clamp(64px, 18vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  opacity: 0.85;
}

.error-404-title {
  margin: 0 0 10px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
}

.error-404-text {
  margin: 0 0 22px;
  color: var(--ink-2);
  line-height: 1.45;
  font-size: 0.98rem;
}

.error-404-actions {
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.error-404-actions .btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* SPA 404: контент строго по центру viewport, без чата/рекламы */
body.is-404 .chat-fab,
body.is-404 .chat-panel,
body.is-404 .chat-scrim,
body.chat-hidden .chat-fab,
body.chat-hidden .chat-panel,
body.chat-hidden .chat-scrim {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
}

body.is-404 .ad-rail,
body.is-404 .vak-sticky-seed,
body.is-404 [data-sticky-ad],
body.is-404 .drawer,
body.is-404 .scrim,
body.is-404 .cookie-banner {
  display: none !important;
}

body.is-404 .sidebar {
  display: none !important;
}

.error-404-page {
  position: fixed;
  inset: 0;
  z-index: 500;
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px 16px;
  background: var(--bg);
  visibility: visible;
}

.error-404-page .page-body.error-404 {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 !important;
  gap: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  animation: none !important;
}

.error-404-page .page-body.error-404 > * {
  animation: none !important;
}

.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn {
  border: none;
  cursor: pointer;
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  transition: filter 0.15s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn.ghost { background: var(--card); color: var(--accent); box-shadow: var(--shadow-soft); }

/* ============================================================
   Меню (drawer на мобильном, sidebar на ПК)
   ============================================================ */

.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.scrim.show { opacity: 1; }

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 82%;
  max-width: 320px;
  background: var(--card);
  z-index: 50;
  transform: translateX(-100%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 10px;
}
.units-toggle { display: flex; gap: 8px; }
.unit-group {
  display: flex;
  background: var(--card-soft);
  border-radius: 10px;
  padding: 2px;
}
.unit-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--ink-2);
  border-radius: 8px;
  cursor: pointer;
}
.unit-btn.is-active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  font-weight: 600;
}

.nav-list { padding: 6px 8px 20px; display: flex; flex-direction: column; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 12px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}
.nav-item:hover { background: var(--card-soft); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item .nav-ico {
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  line-height: 0;
}
.nav-item .nav-ico svg { display: block; }
.nav-item.is-active .nav-ico { color: var(--accent); }

/* ============================================================
   Поиск
   ============================================================ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.search-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 8px 4px;
  background: transparent;
  color: var(--ink);
}
.search-results { flex: 1; overflow-y: auto; padding: 6px 0; }
.result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.result-item:hover { background: var(--card-soft); }
.result-ico { color: var(--accent); flex: 0 0 auto; }
.result-body { display: flex; flex-direction: column; }
.result-name { font-size: 15px; }
.result-sub { font-size: 12px; color: var(--ink-3); }
.result-note {
  padding: 20px 16px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}

/* ============================================================
   Погодный чат-помощник
   ============================================================ */

.chat-fab {
  position: fixed;
  /* Левее скроллбара: середина зазора между контентом и полосой прокрутки */
  right: calc(10px + env(safe-area-inset-right, 0px) + 14px);
  bottom: 16px;
  z-index: 70;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a90e2, #3d7fe0);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(45, 105, 205, 0.42);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: fab-in 0.4s ease both;
}
@keyframes fab-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
.chat-fab:hover { transform: translateY(-2px) scale(1.05); }
.chat-fab.is-active { transform: rotate(90deg) scale(0.9); }

.chat-scrim {
  position: fixed;
  inset: 0;
  z-index: 69;
  background: rgba(12, 20, 36, 0.45);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.chat-scrim.is-open { opacity: 1; pointer-events: auto; }

.chat-panel {
  position: fixed;
  right: calc(10px + env(safe-area-inset-right, 0px) + 14px);
  bottom: 80px;
  z-index: 70;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100dvh - 110px));
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(12, 20, 36, 0.30);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-panel.is-open { opacity: 1; transform: none; }

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 12px 16px;
  background: linear-gradient(135deg, #4a90e2, #3d7fe0);
  color: #fff;
}
.chat-head-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-head-title b { font-size: 15px; display: block; }
.chat-head-title span { font-size: 12px; opacity: 0.85; }
.chat-head-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.chat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6ee7a0;
  box-shadow: 0 0 0 0 rgba(110, 231, 160, 0.7);
  animation: chat-pulse 2s ease infinite;
  flex: 0 0 auto;
}
@keyframes chat-pulse {
  0% { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(110, 231, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0); }
}
.chat-close,
.chat-clear {
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-close:hover,
.chat-clear:hover { background: rgba(255, 255, 255, 0.28); }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
}
.chat-msg {
  max-width: 88%;
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.45;
  border-radius: 16px;
  animation: msg-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  white-space: pre-wrap;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chat-msg-bot {
  align-self: flex-start;
  background: var(--card);
  color: var(--ink);
  border-bottom-left-radius: 5px;
  box-shadow: var(--shadow-soft);
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.chat-typing { display: flex; gap: 4px; align-items: center; }
.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: typing 1.2s ease infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 4px;
}
.chat-chip {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--accent);
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.chat-chip:hover { background: var(--accent-soft); }

.chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--card);
}
.chat-input input {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--card-soft);
  border-radius: 22px;
  padding: 10px 15px;
  font-size: 14px;
  outline: none;
  color: var(--ink);
}
.chat-input input:focus { border-color: var(--accent); }
.chat-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s ease;
}
.chat-send:hover { filter: brightness(1.08); }

/* Мобильный чат — почти на весь экран, снизу */
@media (max-width: 899px) {
  .chat-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .chat-panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: min(88dvh, 640px);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transform-origin: bottom center;
  }
  .chat-panel.is-open { transform: translateY(0); }
  body.chat-open { overflow: hidden; }
}

.map-status {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}

.advice-body.is-typing::after {
  content: "▋";
  margin-left: 2px;
  color: var(--accent);
  animation: caret 0.8s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.advice-wait {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: 14px;
}
.advice-spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
  flex: 0 0 auto;
}

/* ============================================================
   Адаптив под ПК
   ============================================================ */

@media (min-width: 900px) {
  body { overflow: hidden; }

  /* На ПК возвращаем видимые полосы горизонтального скролла */
  .hourly-strip,
  .uv-hour-strip,
  .uv-strip,
  .chart--scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 192, 245, 0.45) transparent;
  }
  .hourly-strip::-webkit-scrollbar,
  .uv-hour-strip::-webkit-scrollbar,
  .uv-strip::-webkit-scrollbar,
  .chart--scroll::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  .hourly-strip::-webkit-scrollbar-thumb,
  .uv-hour-strip::-webkit-scrollbar-thumb,
  .uv-strip::-webkit-scrollbar-thumb,
  .chart--scroll::-webkit-scrollbar-thumb {
    background: rgba(124, 192, 245, 0.45);
    border-radius: 999px;
  }

  .hour { width: 56px; padding: 6px 4px; gap: 5px; }
  .hour-time { font-size: 12px; }
  .hour-ico { height: 32px; }
  .hour-ico .wicon { width: 32px; height: 32px; }
  .hour-temp { font-size: 14px; }
  .hourly-strip { padding: 4px 6px 10px; }

  .metric-tile { padding: 14px; min-height: 96px; gap: 3px; }
  .metric-value { font-size: 30px; margin-top: 6px; }
  .card-flush { padding: 10px 6px; }
  .alert { padding: 12px 14px; gap: 12px; }
  .alert-text strong { font-size: 14px; }
  .alert-text span { font-size: 13px; }

  .uv-hour-card { width: 48px; height: 48px; font-size: 18px; }
  .uv-hour { min-width: 48px; }

  .sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    height: 100dvh;
    background: var(--card);
    border-right: 1px solid var(--line);
    overflow-y: auto;
  }
  .sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 18px 12px;
  }
  .sidebar .brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
  }
  .sidebar .brand-text { flex: 1; min-width: 0; }
  .sidebar .brand b { font-size: 17px; color: var(--ink); }
  .sidebar .brand .brand-city { font-size: 12px; color: var(--ink-3); display: block; }
  .sidebar .brand .theme-toggle { margin-left: auto; }
  .sidebar .drawer-head { padding: 4px 16px 12px; }
  .sidebar .nav-list { padding: 4px 10px 24px; }

  .side-search-wrap {
    position: relative;
    z-index: 20;
    margin: 4px 14px 8px;
  }
  .side-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    background: var(--card-soft);
    border-radius: 12px;
  }
  .side-search-ico { color: var(--ink-3); display: inline-flex; }
  .side-search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    width: 100%;
    color: var(--ink);
  }
  /* Выпадающий список справа от сайдбара — не перекрывает пункты меню. */
  .side-search-results {
    position: fixed;
    left: var(--sidebar-w);
    top: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    width: min(340px, calc(100vw - var(--sidebar-w) - 24px));
    max-height: min(420px, 70vh);
    overflow-y: auto;
    margin-left: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(12, 20, 36, 0.18);
  }
  .side-search-results[hidden] { display: none !important; }
  .side-search-results .result-item { padding: 11px 12px; border-bottom: 1px solid var(--line); }
  .side-search-results .result-item:last-child { border-bottom: none; }
  .side-search-results .result-name { font-size: 14px; }
  .side-search-results .result-note { padding: 14px 12px; }

  /* На ПК мобильный drawer и его затемнение не нужны */
  #menu-drawer.drawer { display: none !important; }
  /* Гамбургер в шапке не нужен — слева постоянное меню */
  .hero [data-action="open-menu"] { visibility: hidden; }
  /* Тема на ПК только в боковом меню */
  .hero .theme-toggle { display: none !important; }

  :root { --stage-max: 1360px; }

  .stage {
    justify-content: flex-start;
    padding: 0;
  }
  .view {
    max-width: none;
    padding: 0 0 20px;
  }

  /* Ограничиваем ширину «телефонных» страниц, но выкладываем в 2 колонки */
  .home {
    max-width: 1360px;
    margin: 0 auto;
    padding: 22px 28px 0;
    padding-right: 64px;
  }
  .home .hero {
    border-radius: 26px;
    padding: 20px 26px 30px;
  }
  .hero-temp { font-size: 88px; }
  .hero-reading { gap: 10px; }

  .page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    padding-right: 64px;
  }
  .page-head {
    /* На ПК фон тоже непрозрачный, чтобы заголовок при прокрутке перекрывал контент. */
    background: var(--bg);
    border-bottom: none;
    padding: 18px 0 6px;
  }
  .page-head .icon-btn { display: none; } /* назад не нужен — есть боковое меню */
  .page-head.with-back .icon-btn { display: inline-flex; }

  .page-body {
    padding: 18px 0 110px;
    padding-right: 0;
  }

  .home-body {
    margin-top: 0;
    border-radius: 0;
    background: transparent;
    padding: 18px 0 110px;
    padding-right: 0;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-auto-flow: dense;
    gap: 16px;
    align-items: stretch;
  }
  .home-body > .card-flush { grid-column: 1 / -1; }
  .home-body > .alert { grid-column: 1 / -1; }
  .home-body > .metrics-grid,
  .home-body .metrics-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
  }
  .page .metrics-grid--day {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-body > .advice { grid-column: 1 / -1; }
  .home-body > .home-forecast-stack,
  .home-body > .home-map-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    height: 100%;
  }

  .moon-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 16px;
    align-items: stretch;
  }
  .moon-layout-hero,
  .moon-layout-side {
    min-width: 0;
    height: 100%;
  }
  .moon-layout-hero {
    display: flex;
    flex-direction: column;
  }
  .moon-layout-hero .moon-hero {
    flex: 1 1 auto;
    justify-content: center;
  }
  .moon-layout-calendar { grid-column: 1 / -1; }
  .moon-calendar { gap: 12px; }
  .moon-cell { padding: 14px 8px 12px; }
  .moon-cell .d { font-size: 12px; margin-top: 8px; }
  .moon-cell .n { font-size: 12px; min-height: 28px; }
  .moon-info b { font-size: 20px; }
  .moon-info p { font-size: 14px; }
  .moon-layout-side .card-title { margin-bottom: 12px; }
  .moon-layout-side .factor-list { gap: 8px; }

  /* Чат: между контентом и скроллбаром */
  .chat-fab {
    right: 11px;
  }
  .chat-panel {
    right: 11px;
  }

  .page .precip-map-host { height: min(520px, 58vh); }

  .overlay {
    max-width: 520px;
    left: 50%;
    top: 8%;
    bottom: auto;
    transform: translateX(-50%);
    height: min(70vh, 620px);
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(12,20,36,0.35);
    overflow: hidden;
  }
  .search-head { border-radius: 0; }

  .linechart { max-height: 168px; }
  .chart--fit .linechart { max-height: 150px; }

  body.is-404 .sidebar {
    display: none !important;
  }
  body.is-404 .chat-fab,
  body.is-404 .chat-panel,
  body.is-404 .chat-scrim {
    display: none !important;
  }
}

/* Широкие экраны: правый ad-rail (если включён) + контент.
   Без rail — view на всю ширину stage, без «дыры» справа. */
@media (min-width: 1200px) {
  .stage {
    justify-content: flex-start;
    gap: 28px;
  }
  .view {
    flex: 1 1 auto;
    max-width: none;
  }
  body.has-ad-rail .stage {
    justify-content: center;
  }
  body.has-ad-rail .view {
    max-width: 1200px;
  }
  body.is-404 .stage {
    justify-content: center !important;
    align-items: center !important;
  }
  body.is-404 .view,
  body.is-404 #view {
    max-width: none !important;
    width: 100% !important;
    flex: none !important;
  }
  body.is-404 .ad-rail {
    display: none !important;
  }
  .ad-rail {
    display: block;
    flex: 0 0 300px;
    align-self: stretch;
    height: 100dvh;
    overflow-y: auto;
    padding: 22px 8px 20px 0;
  }
  .ad-rail::-webkit-scrollbar { width: 8px; }
  .ad-rail-inner {
    position: sticky;
    top: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

@media (min-width: 1280px) {
  .home-body {
    grid-template-columns: 1.15fr 1.35fr;
  }
  .home-body > .card-flush,
  .home-body > .alert,
  .home-body > .advice,
  .home-body > .metrics-grid { grid-column: 1 / -1; }
  .home-body > .home-forecast-stack,
  .home-body > .home-map-stack {
    min-width: 0;
  }
  .home-body .home-map-stack .daylight .sun-arc,
  .home-body .daylight .sun-arc {
    max-width: 520px;
  }
  .home-body .metrics-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(6, 1fr);
  }
  .page .metrics-grid--day {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Тёмная тема: доп. правки, чтобы текст нигде не «терялся» */
html[data-theme="dark"] .page-head .icon-btn { color: var(--ink); }
html[data-theme="dark"] .page-head .icon-btn:hover { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .unit-btn.is-active {
  background: var(--card);
  color: var(--ink);
}
html[data-theme="dark"] .nav-item:hover { background: var(--card-soft); }
html[data-theme="dark"] .tab.is-active {
  background: var(--card);
  color: var(--ink);
}
html[data-theme="dark"] .search-head { background: var(--card); }
html[data-theme="dark"] .chat-msg-bot {
  background: var(--card);
  color: var(--ink);
}
html[data-theme="dark"] .chat-chip {
  background: var(--card-soft);
  border-color: var(--line);
  color: var(--accent);
}
html[data-theme="dark"] .chat-input input {
  background: var(--card-soft);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .result-item:hover { background: var(--card-soft); }
html[data-theme="dark"] .hour.is-now { background: var(--accent-soft); }
html[data-theme="dark"] .moon-cell { background: var(--card-soft); }
html[data-theme="dark"] .factor { background: var(--card-soft); color: var(--ink); }
html[data-theme="dark"] .faq-item summary { color: var(--ink); }
html[data-theme="dark"] .faq-answer { color: var(--ink-2); }
html[data-theme="dark"] .btn.ghost {
  background: var(--card-soft);
  color: var(--accent);
}
html[data-theme="dark"] .map-status,
html[data-theme="dark"] .result-note { color: var(--ink-3); }
html[data-theme="dark"] .advice-body { color: var(--ink-2); }
html[data-theme="dark"] .promo-text strong { color: var(--ink); }
html[data-theme="dark"] .promo-text span { color: var(--ink-2); }
html[data-theme="dark"] .metric-title { color: #7cc0f5; }
html[data-theme="dark"] .metric-icon { color: #7cc0f5; }
html[data-theme="dark"] .hour-rain,
html[data-theme="dark"] .hour-rain.is-likely,
html[data-theme="dark"] .hour-rain.is-high {
  color: var(--ink);
}
html[data-theme="dark"] .day-rain,
html[data-theme="dark"] .day-rain.is-likely,
html[data-theme="dark"] .day-rain.is-high {
  color: var(--ink-2);
}
html[data-theme="dark"] .day-name { color: var(--ink); }
html[data-theme="dark"] .range-max { color: var(--ink); }
html[data-theme="dark"] .range-min { color: var(--ink-3); }
html[data-theme="dark"] .card-title { color: var(--ink); }
html[data-theme="dark"] .side-search { background: var(--card-soft); }
html[data-theme="dark"] .side-search-input { color: var(--ink); }
html[data-theme="dark"] .side-search-results {
  background: var(--card);
  border-color: var(--line);
}
html[data-theme="dark"] .leaflet-container { background: #1a222d; }
html[data-theme="dark"] .state-screen p { color: var(--ink-2); }
html[data-theme="dark"] .search-input { color: var(--ink); }
html[data-theme="dark"] .chat-head-title b,
html[data-theme="dark"] .chat-head-title span { color: #fff; }

/* ============================================================
   Sticky VAK345 — seed fixed (не раздувает #app), выше #app
   чтобы слот был «видим» для сети; клики сквозь пустой seed.
   ============================================================ */

.rekl-bk {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  height: 250px;
  min-height: 250px;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
  background: transparent;
  opacity: 0;
}

.rekl-bk #movie_video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media (max-width: 899px) {
  body > div.dracula-processed,
  body > div.dracula-style-txt-border {
    min-height: 0;
  }
}

@media (min-width: 900px) {
  .rekl-bk {
    left: auto;
    right: 0;
    width: 560px;
    height: 300px;
    min-height: 300px;
  }
  .rekl-bk #movie_video {
    min-height: 300px;
  }
}

body.has-sticky-ad-closed .rekl-bk,
body.has-sticky-ad-closed > div.dracula-processed,
body.has-sticky-ad-closed > div.dracula-style-txt-border {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
}

/* Оверлей сети — поверх cookie */
body > div.dracula-processed,
body > div.dracula-style-txt-border {
  z-index: 2147483647 !important;
}

/* ============================================================
   Уведомление о cookies — mobile по центру; desktop справа поверх чата.
   ============================================================ */

.cookie-banner {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: min(340px, calc(100vw - 20px));
  max-width: min(340px, calc(100vw - 20px));
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.28s var(--theme-ease), transform 0.28s var(--theme-ease);
  height: auto;
}

body.has-sticky-ad .home-body,
body.has-sticky-ad .page-body {
  padding-bottom: calc(258px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px) {
  body.has-sticky-ad .home-body,
  body.has-sticky-ad .page-body {
    padding-bottom: calc(308px + env(safe-area-inset-bottom, 0px));
  }
}

body.has-sticky-ad .cookie-banner {
  z-index: 90;
}

body.has-sticky-ad .chat-fab,
body.has-sticky-ad .chat-panel,
body.has-sticky-ad .chat-scrim {
  z-index: 70;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid rgba(61, 127, 224, 0.16);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(28, 48, 92, 0.05),
    0 8px 22px rgba(28, 48, 92, 0.12);
}

.cookie-banner-ico {
  flex: 0 0 auto;
  display: block;
  width: 34px;
  height: 34px;
  padding: 3px;
  border-radius: 11px;
  background: var(--accent-soft);
  box-sizing: border-box;
}

.cookie-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cookie-banner-text strong {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.cookie-banner-text span {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink-2);
}

.cookie-banner-btn {
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 13px;
  white-space: nowrap;
  border-radius: 999px;
}

.cookie-banner-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

body.cookies-visible {
  /* намеренно пусто: без padding/margin, чтобы контент не прыгал */
}

@media (max-width: 520px) {
  .cookie-banner {
    left: 50%;
    right: auto;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    width: min(320px, calc(100vw - 16px));
    max-width: min(320px, calc(100vw - 16px));
  }
  .cookie-banner-inner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 10px;
  }
  .cookie-banner-text { flex: 1 1 calc(100% - 44px); }
  .cookie-banner-actions {
    width: 100%;
  }
  .cookie-banner-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 8px 12px;
  }
}

/* Desktop: справа внизу, полностью перекрывает chat-fab */
@media (min-width: 900px) {
  .cookie-banner {
    left: auto;
    right: 4px;
    bottom: 14px;
    width: 380px;
    max-width: 380px;
    transform: translateY(12px);
  }
  .cookie-banner.is-visible {
    transform: translateY(0);
  }
  .cookie-banner-inner {
    padding: 12px 14px;
    gap: 12px;
    min-height: 56px;
  }
}

html[data-theme="dark"] .cookie-banner-inner {
  background: var(--card);
  border-color: rgba(107, 163, 240, 0.2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}
html[data-theme="dark"] .cookie-banner-text strong { color: var(--ink); }
html[data-theme="dark"] .cookie-banner-text span { color: var(--ink-2); }
html[data-theme="dark"] .cookie-banner-ico {
  background: var(--accent-soft);
}

/* SEO: скрытый H1, перелинковка; crawl-блок только для ботов */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.related-cities-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.related-cities-list a {
  color: var(--accent, #2a6fdb);
  text-decoration: none;
  font-size: 0.92rem;
}
.related-cities-list a:hover { text-decoration: underline; }

.seo-crawl {
  max-width: 720px;
  margin: 12px auto;
  padding: 12px 16px;
  color: var(--ink);
}
.seo-crawl[hidden] { display: none !important; }

/* Уважаем настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}