/* ===================================================================
   F1 Info — Clean Apple Redesign (V1 light + dark)
   ─────────────────────────────────────────────────────────────────
   Подключить ПОСЛЕ оригинального <style> блока, например так:
     <link rel="stylesheet" href="redesign.css">
   или вставить содержимое этого файла в конец <style> в index.html.

   Идея: переопределяем CSS-переменные + ключевые компоненты в стиле
   apple.com / iOS Settings. DOM и классы исходника не меняются,
   JS-логика работает без изменений.

   Тема переключается атрибутом на <html> или <body>:
     data-theme="light" | data-theme="dark"
   По умолчанию читается prefers-color-scheme.
   =================================================================== */

/* ===== 1. Design tokens ======================================================
   Theme resolution order (low → high specificity):
     :root (light defaults)                       ← baseline
     [data-theme="light"] (any element)           ← explicit light
     [data-theme="dark"]  (any element)           ← explicit dark

   NOTE: we intentionally do NOT use `@media (prefers-color-scheme: dark)` here
   to avoid leaking a global dark override into nested scopes. Auto-mode is
   handled by a tiny JS bootstrap that writes data-theme on <html>.
=============================================================================== */

:root,
[data-theme="light"] {
  /* Light theme */
  --bg-primary:       #F5F5F7;
  --bg-secondary:     #FFFFFF;
  --bg-card:          #FFFFFF;
  --bg-card-hover:    #FAFAFA;
  --bg-sunk:          #EDEDEF;

  --text-primary:     #1D1D1F;
  --text-secondary:   #6E6E73;
  --text-muted:       #A1A1A6;

  --border:           rgba(0,0,0,0.06);
  --border-light:     rgba(0,0,0,0.04);

  --accent:           #E63946;
  --accent-dark:      #B8232F;
  --accent-glow:      rgba(230, 57, 70, 0.14);
  --accent-soft:      rgba(230, 57, 70, 0.08);

  --success:          #30D158;
  --warning:          #FF9F0A;
  --info:             #0A84FF;

  --radius-sm:        10px;
  --radius-md:        14px;
  --radius-lg:        18px;
  --radius-xl:        22px;
  --radius-hero:      26px;

  --shadow-sm:        0 1px 2px rgba(0,0,0,0.04);
  --shadow:           0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.08);
  --shadow-lg:        0 4px 12px rgba(0,0,0,0.06), 0 20px 40px -16px rgba(0,0,0,0.12);

  --transition:       all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-sans:        -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                      "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono:        "SF Mono", "JetBrains Mono", ui-monospace, "Menlo", monospace;

  /* Letter spacing rhythm */
  --ls-tight:         -0.03em;
  --ls-normal:        -0.01em;
  --ls-wide:          0.05em;

  /* Team colors — оставляем как есть, они про пилотов */
}

/* Dark theme — applies to any element with [data-theme="dark"] and everything inside it */
[data-theme="dark"] {
  --bg-primary:       #000000;
  --bg-secondary:     #1C1C1E;
  --bg-card:          #1C1C1E;
  --bg-card-hover:    #2C2C2E;
  --bg-sunk:          #0A0A0A;

  --text-primary:     #F5F5F7;
  --text-secondary:   #98989F;
  --text-muted:       #636366;

  --border:           rgba(255,255,255,0.08);
  --border-light:     rgba(255,255,255,0.05);

  --accent:           #FF4B5C;
  --accent-dark:      #D7394A;
  --accent-glow:      rgba(255, 75, 92, 0.22);
  --accent-soft:      rgba(255, 75, 92, 0.12);

  --shadow-sm:        0 1px 0 rgba(255,255,255,0.02) inset;
  --shadow:           0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-lg:        0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -16px rgba(0,0,0,0.6);
}

/* ===== 2. Base ============================================================== */

html, body {
  background: var(--bg-primary);
  transition: background-color 0.3s ease;
}

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app {
  background: var(--bg-primary) !important;
}

/* Tabular numbers where sensible */
.race-number, .driver-position, .result-position,
.points-value, .season-year, .result-time,
.timer-value, .standings-points, .standings-pos,
.constructor-points-value, .constructor-position,
.driver-points {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: var(--ls-normal);
}

/* ===== 3. Header ============================================================ */

.header {
  background: var(--bg-primary) !important;
  border-bottom: none !important;
  padding: 14px 20px 10px !important;
}

.logo {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: var(--ls-tight) !important;
}

.logo-text {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  letter-spacing: var(--ls-normal);
}

.header-left {
  gap: 6px !important;
  align-items: baseline !important;
}

.season-badge {
  padding: 6px 12px !important;
  background: var(--border) !important;
  border-radius: 999px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
}

.season-year {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.season-label {
  font-size: 10px !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
  font-weight: 500 !important;
}

/* ===== 4. Content scroll ==================================================== */

.content {
  padding: 8px 16px 100px !important;
  background: var(--bg-primary) !important;
}

/* ===== 5. Tab header (back + title) ========================================= */

.tab-header {
  margin: 6px 0 18px !important;
  gap: 10px !important;
}

.tab-header h2,
.gp-tab-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: var(--ls-tight) !important;
  line-height: 1.1 !important;
}

.back-btn, .gp-back-btn {
  width: 36px !important;
  height: 36px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 50% !important;
  color: var(--text-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--shadow-sm);
}

.back-btn:active, .gp-back-btn:active {
  background: var(--bg-card-hover) !important;
  transform: scale(0.94);
}

/* ===== 6. Home — Hero Live =================================================== */

.home-hero {
  background: linear-gradient(135deg, #1D1D1F 0%, #2C2C2E 100%) !important;
  border-radius: var(--radius-hero) !important;
  padding: 28px 24px 30px !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  border: none !important;
}

.hero-lines { opacity: 0.08 !important; }
.hero-lines span { background: #fff !important; }

.hero-flag {
  opacity: 0.18 !important;
  color: rgba(255,255,255,0.35) !important;
}

.hero-badge {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: #fff !important;
  border: none !important;
  margin-bottom: 16px !important;
  gap: 6px !important;
}

.hero-dot {
  width: 6px !important; height: 6px !important;
  background: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(230,57,70,0.25) !important;
}

.hero-title {
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  margin-bottom: 6px !important;
  color: #fff !important;
}

.hero-subtitle {
  font-size: 15px !important;
  color: rgba(255,255,255,0.62) !important;
  font-weight: 400 !important;
}

/* ===== 7. Home — Next race timer ============================================ */

.home-next {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 14px 18px 14px !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 14px !important;
}

.home-next-glow { display: none !important; }

.home-next-header {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.home-next-icon {
  width: 32px !important; height: 32px !important;
  background: var(--border) !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
  border: none !important;
}

.home-next-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
}

.home-next-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin-top: 1px !important;
}

.timer-divider { display: none !important; }

.timer-item {
  text-align: center !important;
}

.home-next-timer,
#home-next-timer {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  padding: 4px 0 0 !important;
  background: transparent !important;
  border: none !important;
  white-space: nowrap !important;
}

.timer-value,
.home-next-timer .timer-value,
#home-next-timer .timer-value {
  font: 500 28px/1 -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.04em !important;
  color: var(--text-primary) !important;
}
.timer-value.accent,
.home-next-timer .timer-value.accent,
#home-next-timer .timer-value.accent {
  color: var(--accent) !important;
}

.timer-value.accent {
  color: var(--accent) !important;
}

.timer-label {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  margin-top: 6px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
}

/* ===== 8. Home — Stats ====================================================== */

.home-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.stat-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 16px !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
  position: relative;
  min-width: 0;  /* ✅ позволяет ужать содержимое и работать ellipsis */
}

.stat-glow { display: none !important; }

.stat-icon {
  display: none !important;  /* свернули в точку-акцент перед лейблом */
}

.stat-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
  margin-bottom: 10px !important;
  position: relative;
  padding-left: 12px !important;
}
.stat-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 99px;
  background: var(--accent);
}
.stat-card.blue .stat-label::before { background: var(--info); }

.stat-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: var(--ls-normal) !important;
  /* ✅ длинные имена усекаются с многоточием */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.stat-points {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 3px !important;
  font-weight: 500 !important;
}

.stat-points.blue { color: var(--info) !important; }

/* ===== 9. Home — Menu list (Apple Settings) ================================= */

.home-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
}

.home-menu .menu-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}

.home-menu .menu-item:last-child {
  border-bottom: none !important;
}

.home-menu .menu-item:active {
  background: var(--bg-card-hover) !important;
  transform: none !important;
}

.home-menu .menu-item::after {
  content: '';
  position: absolute;
  right: 16px; top: 50%;
  width: 8px; height: 14px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' fill='none'><path d='M2 2l6 6-6 6' stroke='%23A1A1A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
}

.home-menu .menu-icon-box {
  width: 32px !important;
  height: 32px !important;
  background: var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}

.home-menu .menu-icon-box svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.75 !important;
}

.home-menu .menu-text {
  flex: 1;
  min-width: 0;
}

.home-menu .menu-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  letter-spacing: var(--ls-normal) !important;
}
.home-menu .menu-title.wrap-gp br { display: none !important; }
.home-menu .menu-title.wrap-gp { white-space: normal !important; }

.home-menu .menu-subtitle {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  margin-top: 1px !important;
  font-weight: 400 !important;
}

/* ===== 10. Generic list rows (action-btn, calendar, results, standings) ===== */

.action-btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px 18px !important;
  color: var(--text-primary) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: var(--ls-normal) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 10px !important;
  transition: var(--transition);
}

.action-btn:active {
  background: var(--bg-card-hover) !important;
  transform: scale(0.98);
}

.action-btn svg {
  color: var(--text-muted) !important;
}

.content-box,
#next-content.content-box,
#next-results-content.content-box,
#standings-content.content-box,
#constructors-content.content-box,
#standings-years.content-box,
.content-box.results-shell {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* gp-content — обёртка вокруг hero+sessions, тоже прозрачная и без полей */
#tab-next .gp-content,
.gp-content {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Results-страница (расписание GP / результаты сессии):
   контейнер — flex column, минимальные отступы. Padding по бокам наследуем
   от .content; никаких лишних gap'ов. */
#tab-next .results-template,
.results-template {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}
#tab-next .content-box.results-shell,
.content-box.results-shell {
  padding: 0 !important;
  margin: 0 !important;
}

/* Center notice / empty state (iOS-style card) */
.center-notice {
  min-height: 48vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

.center-notice-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 16px 16px;
  text-align: center;
}

.center-notice-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--ls-normal);
}

.center-notice-sub {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.35;
}

.gp-sessions-title {
  display: none !important;
}

/* Sessions list — единый flex с gap'ом, БЕЗ доп. margin'ов */
.gp-sessions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.gp-session-card {
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
}

/* Hero — без нижнего отступа: гэп задаёт родитель .results-template */
.results-hero,
.gp-hero {
  margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   Calendar cards
   В оригинальной разметке: .calendar-card > .calendar-row >
     .calendar-number (44×44 красная плашка) + .calendar-info > h3 +
     .calendar-meta + share btn
   Сохраняем структуру, переопределяем только цвета.
───────────────────────────────────────────────────────────────── */

.calendar-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  /* Отключаем красный glow в light-теме (он слишком ярко) */
}
[data-theme="light"] .calendar-card::before {
  background: rgba(230, 57, 70, 0.04) !important;
}

.calendar-number {
  background: var(--accent-soft) !important;
  border-color: transparent !important;
  color: var(--accent) !important;
}

.calendar-info h3 {
  color: var(--text-primary) !important;
}

.calendar-meta {
  color: var(--text-secondary) !important;
}

.calendar-share-btn {
  background: var(--border) !important;
  border-color: transparent !important;
  color: var(--text-secondary) !important;
}

.calendar-divider {
  background: var(--border) !important;
}

.calendar-stat .label {
  color: var(--text-muted) !important;
}
.calendar-stat .value {
  color: var(--text-primary) !important;
}

.calendar-status {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--border) !important;
  color: var(--text-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────
   Standings — НЕ ломаем структуру
   В оригинале: .standings-hero (красный градиент с лидером сезона) +
   .standings-card > .standings-card-inner > .standings-row-top/bottom
   Перекрашиваем только в светлой теме (в тёмной оставляем как есть).
───────────────────────────────────────────────────────────────── */

[data-theme="light"] .standings-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}
/* НЕ трогаем accent-бар (.standings-accent) — он несёт цвет команды */
[data-theme="light"] .standings-pos {
  background: var(--border) !important;
  border-color: transparent !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .standings-name {
  color: var(--text-primary) !important;
}
[data-theme="light"] .standings-team {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .standings-points strong {
  color: var(--text-primary) !important;
}
[data-theme="light"] .standings-points span {
  color: var(--text-muted) !important;
}
[data-theme="light"] .standings-row-bottom {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .standings-current-box,
[data-theme="light"] .standings-current {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   Driver cards (в Standings и Results)
   Используют .driver-card.podium-1/2/3 с border-color акцентами
   и .driver-card.is-light (специфичный класс из проекта)
───────────────────────────────────────────────────────────────── */

[data-theme="light"] .driver-card,
[data-theme="light"] .constructor-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-left-width: 4px !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .driver-name,
[data-theme="light"] .constructor-name {
  color: var(--text-primary) !important;
}
[data-theme="light"] .driver-team {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .driver-position,
[data-theme="light"] .constructor-position {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .driver-points,
[data-theme="light"] .constructor-points-value {
  color: var(--text-primary) !important;
}
[data-theme="light"] .points-label,
[data-theme="light"] .constructor-points-label {
  color: var(--text-muted) !important;
}

/* ===== 11. Standings toggle =================================================
   Сегмент Пилоты/Команды. Активная кнопка — акцентный красный.
============================================================================= */

.standings-toggle {
  background: var(--bg-sunk) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  margin-bottom: 16px !important;
}

.toggle-btn {
  color: var(--text-secondary) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background: transparent !important;
}

.toggle-btn.active {
  background: var(--text-primary) !important;
  color: var(--bg-card) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}
.toggle-btn.active svg {
  color: var(--bg-card) !important;
}

/* In dark theme keep background slightly lifted */
[data-theme="dark"] .standings-toggle {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ===== 12. Settings ========================================================= */

.settings-section {
  margin-bottom: 18px !important;
}

.section-title {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
  padding: 0 4px 8px !important;
}

.settings-card,
.timezone-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 16px !important;
  box-shadow: var(--shadow-sm) !important;
}

.settings-user-row,
.timezone-row {
  gap: 12px !important;
  align-items: center !important;
}

.settings-user-icon,
.timezone-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: var(--border) !important;
  color: var(--text-primary) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.settings-user-label,
.timezone-label {
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
}

.settings-user-value,
.timezone-value {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin-top: 1px !important;
  letter-spacing: var(--ls-normal) !important;
}

.select-input {
  background: var(--bg-sunk) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  width: 100% !important;
  margin-top: 12px !important;
  font-family: var(--font-sans) !important;
}

/* ===== 13. Theme switcher (кастомный блок в Settings) ======================== */

.theme-switcher {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.theme-switcher-label {
  flex: 1;
}
.theme-switcher-label .t1 {
  font-size: 15px; font-weight: 600; color: var(--text-primary);
  letter-spacing: var(--ls-normal);
}
.theme-switcher-label .t2 {
  font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}

.theme-seg {
  display: inline-flex;
  background: var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.theme-seg button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: var(--ls-normal);
}
.theme-seg button.on {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* ===== 14. GP / Next race sessions ========================================== */

.gp-hero, .gp-session-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* gp-card — это просто обёртка вокруг hero + sessions, БЕЗ собственного фона/рамки */
.gp-card {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.gp-hero {
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
}

.gp-round {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
}

.gp-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: var(--ls-tight) !important;
  margin-top: 4px !important;
}

.gp-meta, .gp-meta-item {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

.gp-sessions-title, .sessions-title {
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
  padding: 0 4px 8px !important;
}

.gp-session-card {
  padding: 12px 14px !important;
  margin: 0 !important;
}

.gp-session-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: var(--ls-normal) !important;
}

.gp-session-day, .gp-session-time {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.gp-session-icon {
  background: var(--border) !important;
  color: var(--text-primary) !important;
  border: none !important;
  border-radius: 10px !important;
}

/* ===== 15. News cards ======================================================= */

.news-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 16px !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 10px !important;
}

.news-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: var(--ls-normal) !important;
  line-height: 1.3 !important;
  text-wrap: pretty;
}

.news-excerpt {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  margin-top: 6px !important;
  line-height: 1.45 !important;
}

.news-meta, .news-time {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
}

.news-badge {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
}

/* ===== 16. Live tab placeholder ============================================= */

.live-placeholder {
  background: linear-gradient(135deg, #1D1D1F 0%, #2C2C2E 100%) !important;
  border-radius: var(--radius-hero) !important;
  color: #fff !important;
}

.live-title {
  font-size: 40px !important;
  font-weight: 700 !important;
  letter-spacing: var(--ls-tight) !important;
}

.live-subtitle {
  color: rgba(255,255,255,0.62) !important;
  font-size: 15px !important;
}

.live-badge {
  background: rgba(255,255,255,0.12) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

.live-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(230,57,70,0.25) !important;
}

/* ===== 17. Bottom Navigation ================================================ */

.bottom-nav {
  background: color-mix(in srgb, var(--bg-primary) 86%, transparent) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-top: 1px solid var(--border) !important;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) !important;
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
  .bottom-nav {
    background: var(--bg-secondary) !important;
  }
}

.nav-item {
  color: var(--text-muted) !important;
  gap: 3px !important;
  padding: 6px 14px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

.nav-item svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.75 !important;
}

.nav-item.active {
  color: var(--accent) !important;
}

/* ===== 18. Modal ============================================================ */

.modal-backdrop {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-primary) !important;
}

.modal-btn {
  background: var(--border) !important;
  color: var(--text-primary) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  font-family: var(--font-sans) !important;
}

.modal-btn.primary {
  background: var(--accent) !important;
  color: #fff !important;
}

.modal-input {
  background: var(--bg-sunk) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

/* ===== 19. Scrollbar ======================================================== */

.content::-webkit-scrollbar {
  width: 4px;
}
.content::-webkit-scrollbar-thumb {
  background: var(--border) !important;
  border-radius: 2px;
}

/* ============================================================================
   ===== 20. LIGHT-THEME OVERRIDES ============================================
   Dark-тема — гоночная, не трогаем. Здесь только переопределения для light:
   фиксим хардкоды `color:#fff`, перекрашиваем тёмные градиенты карточек,
   подменяем border-цвета. Шер-модалка и шер-PNG не трогаются ВЕЗДЕ — они
   должны выглядеть одинаково в любой теме (это превью для экспорта).
============================================================================ */

/* ── Calendar: общая статистика "Всего гонок / Пройдено / Осталось" ─────── */
[data-theme="light"] .calendar-stats {
  background: linear-gradient(90deg,
    var(--accent-soft) 0%,
    var(--bg-card) 100%) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .calendar-stat .label {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .calendar-stat .value {
  color: var(--text-primary) !important;
}
[data-theme="light"] .calendar-stat .value.accent {
  color: var(--accent) !important;
}
[data-theme="light"] .calendar-divider {
  background: var(--border) !important;
}

/* ── Calendar: карточка этапа ──────────────────────────────────────────── */
[data-theme="light"] .calendar-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .calendar-card::before {
  background: rgba(230, 57, 70, 0.04) !important;
}
[data-theme="light"] .calendar-info h3 {
  color: var(--text-primary) !important;
}
[data-theme="light"] .calendar-meta {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .calendar-number {
  background: var(--accent-soft) !important;
  border-color: transparent !important;
  color: var(--accent) !important;
}
[data-theme="light"] .calendar-share-btn {
  background: var(--border) !important;
  border-color: transparent !important;
  color: var(--text-secondary) !important;
}

/* Calendar status pill ("Завершено", "Следующая") */
[data-theme="light"] .calendar-status {
  background: var(--border) !important;
  border-color: transparent !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .calendar-status.next {
  background: var(--accent-soft) !important;
  border-color: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* ── GP Detail: страница этапа с расписанием сессий ─────────────────────── */
/* Hero-плашка этапа: красный градиент остаётся как «вывеска».
   Адаптируем тёмный sticky-header под обе темы. */

/* GP tab header (sticky bar over content) — делаем прозрачным,
   чтобы не создавать тёмную полосу по бокам красного hero */
.gp-tab-header {
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  padding: 12px 0 !important;
  margin: 0 0 12px !important;
}
.gp-tab-header::after {
  display: none !important;  /* отключаем тёмный fade-out */
}
.gp-tab-header.is-results {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
}
.gp-back-btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  width: 36px !important;
  height: 36px !important;
  box-shadow: var(--shadow-sm) !important;
}
.gp-back-btn:active {
  background: var(--bg-card-hover) !important;
}
.gp-tab-title {
  color: var(--text-primary) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

[data-theme="light"] .gp-back-btn {
  color: var(--text-primary) !important;
}
[data-theme="light"] .gp-name {
  color: var(--text-primary) !important;
}
[data-theme="light"] .gp-meta,
[data-theme="light"] .gp-meta-item {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .gp-sessions-title {
  color: var(--text-muted) !important;
}

/* Session card в расписании этапа */
[data-theme="light"] .gp-session-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .gp-session-icon {
  background: var(--border) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .gp-session-name {
  color: var(--text-primary) !important;
}
[data-theme="light"] .gp-session-day,
[data-theme="light"] .gp-session-time {
  color: var(--text-secondary) !important;
}

/* ── Results: страница сессии ────────────────────────────────────────────── */
/* Hero-плашка сессии (красный градиент с linelines) — оставляем красной */
/* Карточки результатов (driver rows) — подгоняем под light */
[data-theme="light"] .results-shell {
  color: var(--text-primary) !important;
}
[data-theme="light"] .results-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .results-card .results-rank,
[data-theme="light"] .results-card .results-driver,
[data-theme="light"] .results-card .results-time,
[data-theme="light"] .results-card .results-gap,
[data-theme="light"] .results-card .results-driver-info {
  color: var(--text-primary) !important;
}
[data-theme="light"] .results-card .results-team {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .results-card .results-rank-bar {
  /* Default fallback; overridden by team rules below */
  background: var(--border) !important;
}

/* Empty / fallback "Результаты недоступны" */
[data-theme="light"] .results-fallback {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .results-shell.error {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── Standings: list cards (когда смотрим архив или текущий сезон) ───────── */
[data-theme="light"] .standings-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .standings-pos {
  background: var(--border) !important;
  border-color: transparent !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .standings-name {
  color: var(--text-primary) !important;
}
[data-theme="light"] .standings-team {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .standings-points strong {
  color: var(--text-primary) !important;
}
[data-theme="light"] .standings-points span {
  color: var(--text-muted) !important;
}
[data-theme="light"] .standings-row-bottom {
  color: var(--text-secondary) !important;
}

/* ── Driver / Constructor cards (на странице чемпионата) ─────────────────── */
[data-theme="light"] .driver-card,
[data-theme="light"] .constructor-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-left-width: 1px !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
/* Убираем подиумные золото/серебро/бронзу — единый стиль */
.driver-card.podium-1,
.driver-card.podium-2,
.driver-card.podium-3,
.constructor-card.podium-1,
.constructor-card.podium-2,
.constructor-card.podium-3 {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
.driver-card.podium-1 .driver-position,
.driver-card.podium-2 .driver-position,
.driver-card.podium-3 .driver-position,
.constructor-card.podium-1 .constructor-position,
.constructor-card.podium-2 .constructor-position,
.constructor-card.podium-3 .constructor-position {
  background: var(--border) !important;
  color: var(--text-primary) !important;
}
/* Убираем цветную полосу слева у driver-card (::before и border-left команд) */
.driver-card::before,
.constructor-card::before {
  display: none !important;
}
.driver-card,
.constructor-card {
  border-left-width: 1px !important;
  border-left-color: var(--border) !important;
}

/* Standings hero (Лидер сезона) — тёмный graphite + красный glow */
.standings-hero {
  background:
    radial-gradient(circle at 100% 0%, rgba(230,57,70,0.55) 0%, rgba(230,57,70,0) 60%),
    linear-gradient(135deg, #1D1D1F 0%, #2C2C2E 100%) !important;
  border-radius: var(--radius-hero, 22px) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  padding: 18px 20px !important;
  margin-bottom: 12px !important;
  position: relative !important;
  overflow: hidden !important;
}
.standings-hero::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 16% !important;
  bottom: 16% !important;
  width: 3px !important;
  background: var(--accent) !important;
  border-radius: 0 3px 3px 0 !important;
  display: block !important;
}
.standings-hero-watermark { display: none !important; }
.standings-hero-header { margin-bottom: 6px !important; }
.standings-hero-icon { color: var(--accent) !important; }
.standings-hero-label {
  color: rgba(255,255,255,0.7) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}
.standings-hero-title {
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 2px !important;
}
.standings-hero-subtitle {
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
  margin-bottom: 14px !important;
}
.standings-hero-stats {
  gap: 24px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.standings-hero-stat-label {
  color: rgba(255,255,255,0.55) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin-bottom: 2px !important;
}
.standings-hero-stat-value {
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
/* Подсветим первую stat (очки) красным, как главный показатель */
.standings-hero-stats > div:first-child .standings-hero-stat-value {
  color: var(--accent) !important;
}
[data-theme="light"] .driver-name,
[data-theme="light"] .constructor-name {
  color: var(--text-primary) !important;
}
[data-theme="light"] .driver-team,
[data-theme="light"] .driver-position,
[data-theme="light"] .constructor-position {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .driver-points,
[data-theme="light"] .constructor-points-value {
  color: var(--text-primary) !important;
}
[data-theme="light"] .points-label,
[data-theme="light"] .constructor-points-label {
  color: var(--text-muted) !important;
}

/* ── News ────────────────────────────────────────────────────────────────── */
[data-theme="light"] .news-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* ── Share modal & share preview — НЕ трогаем НИГДЕ ──────────────────────── */
/* Шер-карточка — это превью PNG для экспорта в чат бот. Должно выглядеть
   одинаково в любой теме (тёмный/красный фирменный стиль). */

/* ── Results page — full coverage ────────────────────────────────────────── */
/* Hero (страница расписания GP / страница сессии) — Clean Apple dark
   с красным акцентом: чёрный graphite + красный glow в правом верхнем углу,
   красный badge, красная share-кнопка. Применяется в обеих темах. */
.results-hero {
  background:
    radial-gradient(circle at 100% 0%, rgba(230,57,70,0.55) 0%, rgba(230,57,70,0) 60%),
    linear-gradient(135deg, #1D1D1F 0%, #2C2C2E 100%) !important;
  border-radius: var(--radius-hero, 22px) !important;
  overflow: hidden !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  position: relative !important;
}
/* Красная вертикальная полоска-акцент слева — F1-DNA */
.results-hero::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 16% !important;
  bottom: 16% !important;
  width: 3px !important;
  background: var(--accent) !important;
  border-radius: 0 3px 3px 0 !important;
  display: block !important;
}
.results-hero.is-schedule {
  /* Make schedule hero match session results hero */
  border-radius: var(--radius-hero, 22px) !important;
}

/* Schedule hero should keep badge inside the top row (same as session results) */
.results-hero.is-schedule .results-badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin-bottom: 0 !important;
  align-self: flex-end !important;
  z-index: auto !important;
}

/* Schedule hero: keep typography spacing consistent with session results */
.results-hero.is-schedule .results-title {
  margin-top: 0 !important;
}
/* Use the same meta spacing as .results-meta (8px) */
.results-hero.is-schedule .results-meta {
  margin-top: 8px !important;
}

.results-hero-content {
  padding: 16px 18px 18px !important;
}
.results-hero-top {
  margin-bottom: 10px !important;
}

/* Прячем визуальный шум — анимированные полосы и крутящийся флаг */
.results-speedlines,
.results-speedline,
.results-flag-accent,
.results-glow {
  display: none !important;
}

/* Hero badge (РАУНД N) — акцентный красный, заметный */
.results-badge {
  background: var(--accent) !important;
  border: none !important;
  color: #fff !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 2px 8px rgba(230,57,70,0.35) !important;
}
.results-badge svg { color: #fff !important; }

/* Hero back-кнопка — стеклянная белая, share-кнопка — красная акцентная */
.results-back-btn {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #fff !important;
}
.results-back-btn svg { color: #fff !important; }
.results-share-btn {
  background: var(--accent) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(230,57,70,0.35) !important;
}
.results-share-btn svg { color: #fff !important; }

/* Точка-разделитель (страна) и meta — белесые на тёмном */
.results-meta,
.results-country,
.results-flag {
  color: rgba(255,255,255,0.78) !important;
}
.results-title { color: #fff !important; }

.results-title {
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

.results-meta {
  font-size: 12px !important;
  color: rgba(255,255,255,0.85) !important;
  margin-top: 8px !important;
}

.results-divider {
  display: none !important;  /* убираем блестящую полосу под названием */
}

.results-back-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.2) !important;
  border: none !important;
}

.results-share-btn {
  width: 36px !important;
  height: 36px !important;
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-theme="light"] .results-template { color: var(--text-primary) !important; }

[data-theme="light"] .results-back-btn,
[data-theme="light"] .results-share-btn,
[data-theme="light"] .results-badge,
[data-theme="light"] .results-badge svg,
[data-theme="light"] .results-badge span,
[data-theme="light"] .results-title,
[data-theme="light"] .results-title-name,
[data-theme="light"] .results-meta,
[data-theme="light"] .results-meta-item,
[data-theme="light"] .results-divider {
  /* эти элементы ВНУТРИ красного hero — оставляем их белыми, не перекрашиваем */
}

/* Карточки результатов (driver rows) — под light-палитру */
[data-theme="light"] .results-card-content {
  color: var(--text-primary) !important;
}
[data-theme="light"] .results-driver,
[data-theme="light"] .results-time {
  color: var(--text-primary) !important;
}
[data-theme="light"] .results-gap {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .results-rank-bar {
  /* Default fallback; team rules below override */
  background: var(--border) !important;
}

/* Team colors for results cards (like Standings) */
[data-theme="light"] .results-card[data-team="Red Bull"] .results-rank-bar { background: var(--team-redbull) !important; }
[data-theme="light"] .results-card[data-team="McLaren"] .results-rank-bar { background: var(--team-mclaren) !important; }
[data-theme="light"] .results-card[data-team="Ferrari"] .results-rank-bar { background: var(--team-ferrari) !important; }
[data-theme="light"] .results-card[data-team="Mercedes"] .results-rank-bar { background: var(--team-mercedes) !important; }
[data-theme="light"] .results-card[data-team="Aston Martin"] .results-rank-bar { background: var(--team-aston) !important; }
[data-theme="light"] .results-card[data-team="Alpine"] .results-rank-bar { background: var(--team-alpine) !important; }
[data-theme="light"] .results-card[data-team="Williams"] .results-rank-bar { background: var(--team-williams) !important; }
[data-theme="light"] .results-card[data-team="RB"] .results-rank-bar { background: var(--team-rb) !important; }
[data-theme="light"] .results-card[data-team="Kick Sauber"] .results-rank-bar { background: var(--team-sauber) !important; }
[data-theme="light"] .results-card[data-team="Sauber"] .results-rank-bar { background: var(--team-sauber) !important; }
[data-theme="light"] .results-card[data-team="Haas"] .results-rank-bar { background: var(--team-haas) !important; }
[data-theme="light"] .results-card[data-team="Audi"] .results-rank-bar { background: var(--team-audi) !important; }
[data-theme="light"] .results-card[data-team="Red Bull Racing Audi"] .results-rank-bar { background: var(--team-audi) !important; }
[data-theme="light"] .results-card[data-team="Cadillac"] .results-rank-bar { background: var(--team-cadillac) !important; }

[data-theme="light"] .results-list { /* контейнер */ }

/* Header в начале страницы Results (тот, что вне hero) */
[data-theme="light"] .results-header {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .results-header-icon { color: var(--accent) !important; }
[data-theme="light"] .results-header-title { color: var(--text-primary) !important; }
[data-theme="light"] .results-header-year { color: var(--text-secondary) !important; }

/* Меню/архив сезонов в Results */
[data-theme="light"] .results-menu .menu-item,
[data-theme="light"] .race-btn,
[data-theme="light"] .year-btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .race-btn:active,
[data-theme="light"] .year-btn:active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ── Standings hero (полное покрытие sub-классов) ────────────────────────── */
/* Hero ОСТАЁТСЯ красным — это вывеска лидера сезона. Внутри текст белый. */
/* (ничего не переопределяем — всё берётся из оригинального CSS) */

/* ── News page ───────────────────────────────────────────────────────────── */
[data-theme="light"] .news-cards,
[data-theme="light"] .news-content { /* контейнеры — без правок */ }

[data-theme="light"] .news-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .news-card:active {
  background: var(--bg-card-hover) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .news-badge {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
[data-theme="light"] .news-link {
  color: var(--accent) !important;
}

/* ── Notifications (Settings → Уведомления) ──────────────────────────────── */
[data-theme="light"] .notifications-list { /* контейнер */ }

[data-theme="light"] .notification-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="light"] .notification-item strong {
  color: var(--text-primary) !important;
}
[data-theme="light"] .notif-select {
  background: var(--bg-sunk) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* iOS-style switch (Settings, нотификации) */
[data-theme="light"] .switch .slider {
  background: var(--bg-sunk) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .switch .slider::before {
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
[data-theme="light"] .switch input:checked + .slider {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ── Live tab (стрим/трек) — оставляем тёмным как кинозал ─────────────────── */
/* live-content, live-track, live-pulse, live-glow, live-underline — НЕ трогаем,
   это специальный экран с подложкой трека, выглядит одинаково в обеих темах */

/* ── Home — extra hardcoded #fff fixes ──────────────────────────────────── */
[data-theme="light"] .home-next-name { color: var(--text-primary) !important; }
[data-theme="light"] .home-next-icon {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
[data-theme="light"] .home-next-text { color: var(--text-primary) !important; }
/* .hero-title / .hero-subtitle живут на тёмном hero-блоке в обеих темах — не перекрашиваем */
[data-theme="light"] .timer-value { color: var(--text-primary) !important; }

/* Имя следующей гонки: показываем только название (страна/место не нужно) */
.home-next-name {
  display: block !important;
}
.home-next-name .gp-line-name {
  display: block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary) !important;
  line-height: 1.2 !important;
}
/* Вторая строка (страна) — скрываем полностью */
.home-next-name .gp-line-country {
  display: none !important;
}
[data-theme="light"] .timer-value.accent { color: var(--accent) !important; }
[data-theme="light"] .stat-title,
[data-theme="light"] .menu-title { color: var(--text-primary) !important; }

/* ── Modal (custom-notif modal в Settings) ───────────────────────────────── */
[data-theme="light"] .modal {
  background: rgba(0,0,0,0.4);
}

/* save-btn (red CTA) — везде красный, light не трогаем (он уже красный) */

/* ── Tab pane / generic containers ───────────────────────────────────────── */
/* .tab-pane, .header-right, .hero-content и т.п. — это позиционные классы,
   у них в оригинале нет цветовых хардкодов, перекрывать не нужно. */

/* ── Archive standings hero (Чемпионат → Архив по годам) ─────────────────── */
/* Стиль соответствует .gp-hero: тёмный bg + красный градиент + красные акценты */
.archive-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg,
      rgba(225, 6, 0, 0.28) 0%,
      rgba(225, 6, 0, 0.1) 55%,
      rgba(0, 0, 0, 0.15) 100%),
    var(--bg-card);
  border: 1px solid rgba(225, 6, 0, 0.28);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.archive-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
  opacity: 0.85;
  pointer-events: none;
}

.archive-hero::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: rgba(225, 6, 0, 0.25);
  filter: blur(60px);
  border-radius: 50%;
  pointer-events: none;
}

.archive-hero-icon {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(225, 6, 0, 0.18);
  border: 1px solid rgba(225, 6, 0, 0.32);
  color: var(--accent);
}

.archive-hero-text {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.archive-hero-label {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  background: rgba(225, 6, 0, 0.18);
  border-radius: 999px;
}

.archive-hero-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.archive-hero-year {
  position: relative;
  flex-shrink: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
