:root[data-theme="light"] {
  --bg: radial-gradient(ellipse at center, #fff5e6 0%, #e6f3ff 25%, #f0f8ff 50%, #fafafa 75%, #ffffff 100%);
  --bg-solid: #ffffff;
  --panel: rgba(255, 255, 255, 0.9);
  --muted: #6b7280;
  /* вторичный текст */
  --text: #1a1a1a;
  /* основной текст */
  --brand: #2563eb;
  /* акцент (синий) */
  --brand-2: #059669;
  /* второй акцент (зелёный) */
  --ok: #16a34a;
  --danger: #dc2626;
}

/* Применяем градиент к body в светлой теме */
:root[data-theme="light"] body {
  background: var(--bg);
  background-attachment: fixed;
}

:root[data-theme="light"] header {
  background: transparent;
  border-bottom: none;
}

:root[data-theme="light"] .header-top {
  background: radial-gradient(ellipse at center, rgba(255, 245, 230, .9) 0%, rgba(230, 243, 255, .85) 25%, rgba(240, 248, 255, .8) 50%, rgba(250, 250, 250, .75) 75%, rgba(255, 255, 255, .7) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Поля ввода/селекты/тексты — светлые */
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea {
  background: #ffffff;
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, .12);
}

:root[data-theme="light"] .field input:focus,
:root[data-theme="light"] .field select:focus,
:root[data-theme="light"] .field textarea:focus {
  border-color: var(--brand);
}

/* Карточки/бордеры/иконки */
:root[data-theme="light"] .card {
  background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .01));
  border: 1px solid rgba(0, 0, 0, .08);
}

:root[data-theme="light"] .icon-link {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}

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

/* Блок "Итого" без тёмного градиента */
:root[data-theme="light"] .summary {
  background: rgba(0, 0, 0, .03) !important;
  border-color: rgba(0, 0, 0, .16);
}

/* Хиро-оверлей полегче */
:root[data-theme="light"] .hero-section::before {
  background: radial-gradient(ellipse at center,
      rgba(255, 245, 230, .3) 0%,
      rgba(230, 243, 255, .4) 25%,
      rgba(240, 248, 255, .5) 50%,
      rgba(250, 250, 250, .6) 75%,
      rgba(255, 255, 255, .7) 100%) !important;
}

/* Навигация/ссылки */
:root[data-theme="light"] nav a {
  color: #2b2b2b;
}

:root[data-theme="light"] nav a:hover {
  background: rgba(0, 0, 0, .06);
}

:root[data-theme="light"] .field input::placeholder,
:root[data-theme="light"] .field textarea::placeholder {
  color: #9ca3af;
  /* серый, но читаемый */
}

/* --- Калькулятор в светлой теме — светлые карточки и поля --- */
:root[data-theme="light"] #calc .card {
  background: linear-gradient(180deg, #ffffff, #f3f6fb) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

:root[data-theme="light"] #calc .summary {
  background: linear-gradient(180deg, rgba(150, 213, 251, 0.35), rgba(127, 255, 212, 0.18)) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* --- Исправление полей для светлой темы --- */
:root[data-theme="light"] #calc .field input,
:root[data-theme="light"] #calc .field select,
:root[data-theme="light"] #calc .field textarea,
:root[data-theme="light"] #contact .field input,
:root[data-theme="light"] #contact .field textarea {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid rgba(0, 0, 0, .12);
}

:root[data-theme="light"] #calc .field input::placeholder,
:root[data-theme="light"] #calc .field textarea::placeholder,
:root[data-theme="light"] #contact .field input::placeholder,
:root[data-theme="light"] #contact .field textarea::placeholder {
  color: #9ca3af !important;
}

:root[data-theme="light"] #calc .field input:focus,
:root[data-theme="light"] #calc .field select:focus,
:root[data-theme="light"] #calc .field textarea:focus,
:root[data-theme="light"] #calc input[type="number"]:focus,
:root[data-theme="light"] #contact .field :is(input, textarea):focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}

:root[data-theme="light"] #calc input[type="number"] {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid rgba(0, 0, 0, .12) !important;
}

/* Радиокнопки в светлой теме — сделать видимыми на белом фоне */
:root[data-theme="light"] #calc .radio .bullet {
  border-color: rgba(0, 0, 0, .45) !important;
  /* тёмный контур вместо белого */
  background: transparent !important;
}

:root[data-theme="light"] #calc .radio:hover .bullet {
  border-color: var(--brand) !important;
  /* подсветка при наведении */
}

:root[data-theme="light"] #calc .radio input:focus+.bullet {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .25) !important;
  /* синий фокус */
}

:root[data-theme="light"] #calc .radio input:checked+.bullet::after {
  background: var(--brand) !important;
  /* синий «пип» внутри */
}

/* --- 1) Подсказка "i" в светлой теме — темнее фон, читаемый текст --- */
:root[data-theme="light"] #calc .hint {
  background: rgba(0, 0, 0, .08) !important;
  color: #1f2937 !important;
  /* тёмно-серый текст */
  border: 1px solid rgba(0, 0, 0, .12) !important;
}

:root[data-theme="light"] #calc .hint:hover {
  background: rgba(0, 0, 0, .12) !important;
}

/* Тултип над "i" тоже делаем светлым и контрастным */
:root[data-theme="light"] #calc .hint[data-tip]:hover::after {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid rgba(0, 0, 0, .15) !important;
}

/* --- 2) Разделительные линии между секциями в калькуляторе --- */
:root[data-theme="light"] #calc .section.divider {
  border-top-color: rgba(0, 0, 0, .08) !important;
  /* была полупрозрачная белая */
}

:root[data-theme="light"] #calc .divider {
  border-top-color: rgba(0, 0, 0, .12) !important;
  /* внутренняя тонкая линия */
}

/* ==========================
   ОТЗЫВЫ В СВЕТЛОЙ ТЕМЕ
   ========================== */
:root[data-theme="light"] .review {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .85));
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm);
  padding: 16px;
  min-height: 160px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .review .pill {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-top: 10px;
}

:root[data-theme="light"] .review .pill:hover {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.25);
}

/* Аватар в светлой теме */
:root[data-theme="light"] .review .avatar {
  background: #f0f0f0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Текст отзыва в светлой теме */
:root[data-theme="light"] .review .text {
  color: #333;
}

/* Кнопки навигации отзывов в светлой теме */
:root[data-theme="light"] .nav-btns button {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #333;
}

:root[data-theme="light"] .nav-btns button:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.25);
}

/* Имя и рейтинг в светлой теме */
:root[data-theme="light"] .review .who>div>div:first-child {
  color: #1a1a1a;
  font-weight: 600;
}

:root[data-theme="light"] .review .muted {
  color: #666;
}

/* Герб в светлой теме */
:root[data-theme="light"] .region .city {
  color: var(--text);
}

:root[data-theme="light"] .region .region-sub {
  color: var(--muted);
}

/* В светлой теме — подложка нижней полосы на внутренних страницах */
:root[data-theme="light"] body:not(:has(.hero-section)) .header-bottom {
  background: radial-gradient(ellipse at center, rgba(255, 245, 230, .6) 0%, rgba(230, 243, 255, .5) 25%, rgba(240, 248, 255, .4) 50%, rgba(250, 250, 250, .3) 75%, rgba(255, 255, 255, .2) 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] body:has(.hero-section) .header-bottom {
  background: transparent;
  border-top: none;
}

:root[data-theme="light"] body:has(.hero-section) .header-top {
  border-bottom: none;
  box-shadow: none;
}

/* В светлой теме — цвет ссылок в нижней полосе на внутренних страницах */
:root[data-theme="light"] body:not(:has(.hero-section)) .header-bottom nav a {
  color: #1f2937;
}

:root[data-theme="light"] body:not(:has(.hero-section)) .header-bottom nav a:hover {
  background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] body:has(.hero-section) header.header-scrolled .header-top,
:root[data-theme="light"] html.header-nav-compact body:has(.hero-section) .header-top {
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* На главной поверх hero — тёмные ссылки для светлой темы */
:root[data-theme="light"] body:has(.hero-section) .header-bottom nav a {
  color: #1f2937;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85);
}

:root[data-theme="light"] body:has(.hero-section) .header-bottom nav a:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Мобильное выпадающее меню (бургер) */
:root[data-theme="light"] .mobile-nav-panel {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .mobile-nav-panel__nav a {
  color: #1f2937;
}

:root[data-theme="light"] .mobile-nav-panel__nav a:hover,
:root[data-theme="light"] .mobile-nav-panel__nav a:focus-visible {
  background: rgba(0, 0, 0, 0.06);
}

/* В светлой теме — если нужно, подчёркиваем бренд */
:root[data-theme="light"] .brand .city,
:root[data-theme="light"] .brand .region-sub {
  color: var(--text);
}

/* Кнопки каналов связи в карточке «Наши контакты» */
:root[data-theme="light"] .contact-channel {
  background: rgba(0, 0, 0, .05);
  border: 1px solid rgba(0, 0, 0, .1);
  color: var(--text);
}

:root[data-theme="light"] .contact-channel:hover {
  background: rgba(0, 0, 0, .09);
  border-color: rgba(0, 0, 0, .14);
}