/* ============================================
   MarketplaceHelp.ru — Theme System
   Light mode overrides + Glassmorphism + Hover effects
   
   Подключение: <link rel="stylesheet" href="/css/theme.css">
   ============================================ */

/* ── ПАЛИТРА ──
   Прежний акцент — синий 4F8EF7 плюс фиолетовый 7C5CFC — заменён
   бирюзовой парой 15.08.2026. Причина не вкусовая: эта сине-фиолетовая
   пара стала машинной подписью, её ставит по умолчанию любая нейросеть.

   Почему именно бирюза: в продукте цвета уже заняты смыслами —
   зелёный рост, красный падение, оранжевый Ozon, фиолетовый WB.
   Акцент интерфейса не должен ни с одним из них путаться на графиках.
   Бирюза — единственный свободный участок спектра.

   ВНИМАНИЕ: значения ниже пока НЕ единственный источник правды.
   Те же токены продублированы в :root на 23 страницах (index.php,
   dashboard.php, auth.php, agency/, academy/, admin/ и других) — там они
   перекрывают этот файл, потому что инлайновый <style> идёт после <link>.
   Все копии приведены к одним значениям скриптом _recolor.ps1.
   Свести их в один источник — отдельная задача; до тех пор менять цвет
   нужно скриптом, а не руками, иначе снова разъедется.
   ─────────────────────────────────────────── */

:root {
  --bg:      #0E1013;
  --bg2:     #15181D;
  --bg3:     #1C2027;
  --border:  #272C34;
  --text:    #E7EAEF;
  --muted:   #8A93A3;   /* было 5A6380: контраст 3.1 на тёмном, ниже нормы */
  --accent:  #0F766E;   /* заливка кнопок: белый текст даёт 5.5 */
  --accent2: #14B8A6;   /* ссылки и наведение на тёмном: 7.2 */

  /* Палитра данных не меняется — за ней закреплены смыслы */
  --green:   #22C55E;
  --red:     #EF4444;
  --orange:  #F97316;
  --yellow:  #CA8A04;
  --purple:  #7C3AED;
  --ozon:    #E55B00;
  --wb:      #8B18A8;
}

/* ── LIGHT THEME ──
   html[data-theme="light"] имеет специфичность 0,1,1
   что выше чем :root (0,1,0) в инлайновых стилях.
   Поэтому переменные гарантированно перекрываются.
   ─────────────────────────────────────────── */

html[data-theme="light"] {
  --bg:      #f0f1f4 !important;
  --bg2:     #ffffff !important;
  --bg3:     #e7e9ee !important;
  --border:  #d2d5db !important;
  --text:    #1a1d28 !important;
  --muted:   #6b7085 !important;
  --accent:  #0F766E !important;   /* тот же, что на тёмной: белый текст читается на обеих */
  --accent2: #0D9488 !important;
  --green:   #16a34a !important;
  --red:     #dc2626 !important;
  --orange:  #d97706 !important;
  --yellow:  #ca8a04 !important;
  --purple:  #7c3aed !important;
  --ozon:    #e55b00 !important;
  --wb:      #8b18a8 !important;
}


/* ── BODY BACKGROUND ──
   Перебиваем жёсткий background:var(--bg) на обоих темах
   ─────────────────────────────────────────── */

html[data-theme="light"] body {
  background: #f0f1f4 !important;
  color: #1a1d28 !important;
}

/* Auth page grid pattern — делаем светлее */
html[data-theme="light"] body::before {
  opacity: 0.08 !important;
}


/* ── GLASSMORPHISM — НАВБАРЫ ── */

html[data-theme="dark"] nav,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sa-topbar,
html[data-theme="dark"] .nav {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(14,16,19, 0.82) !important;
}

html[data-theme="light"] nav,
html[data-theme="light"] .topbar,
html[data-theme="light"] .sa-topbar,
html[data-theme="light"] .nav {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.72) !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}


/* ── GLASSMORPHISM — КАРТОЧКИ (тёмная) ── */

html[data-theme="dark"] .stat,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .feat,
html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .feat-card,
html[data-theme="dark"] .plat-block,
html[data-theme="dark"] .table-wrap {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(21,24,29, 0.7) !important;
}

/* ── GLASSMORPHISM — КАРТОЧКИ (светлая) ── */

html[data-theme="light"] .stat,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .feat,
html[data-theme="light"] .preview-card,
html[data-theme="light"] .feat-card,
html[data-theme="light"] .plat-block,
html[data-theme="light"] .table-wrap {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}


/* ══════════════════════════════════════════
   HOVER-ЭФФЕКТЫ — карточки приподнимаются
   ══════════════════════════════════════════ */

/* Feature cards (index.php — блок "Функционал") */
.feat {
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),
              border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}
.feat:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18) !important;
}
html[data-theme="light"] .feat:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.10) !important;
}

/* Pricing cards */
.plan-card {
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),
              border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}
.plan-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.22) !important;
}
.plan-card.hot:hover {
  box-shadow: 0 16px 40px rgba(15,118,110,0.25) !important;
}
html[data-theme="light"] .plan-card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] .plan-card.hot:hover {
  box-shadow: 0 16px 40px rgba(15,118,110,0.18) !important;
}

/* Preview cards (index.php — живой пример) */
.preview-card {
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),
              border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}
.preview-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(15,118,110,0.3) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important;
}
html[data-theme="light"] .preview-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.08) !important;
}

/* Stats row items */
.stat {
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1),
              border-color 0.2s ease,
              box-shadow 0.2s ease !important;
}
.stat:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(15,118,110,0.25) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}
html[data-theme="light"] .stat:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

/* Feature cards (help page) */
.feat-card {
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),
              border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}
.feat-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.15) !important;
}
html[data-theme="light"] .feat-card:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;
}

/* Steps (index.php — "Три шага") */
.step {
  transition: background 0.2s ease !important;
}

/* Hero buttons */
.btn-main {
  transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s !important;
}
.btn-main:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(15,118,110,0.3) !important;
}
.btn-ghost {
  transition: all 0.18s !important;
}
.btn-ghost:hover {
  transform: translateY(-1px) !important;
}

/* Stats row on landing */
.stats-row {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Platform badges in hero */
.plat-badge {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.plat-badge:hover {
  transform: translateY(-2px) !important;
}


/* ══════════════════════════════════════════
   СВЕТЛАЯ ТЕМА — СПЕЦИФИЧНЫЕ ЭЛЕМЕНТЫ
   ══════════════════════════════════════════ */

/* Инпуты */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .input-wrap input,
html[data-theme="light"] .mapper-select {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: #1a1d28 !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #6b7085 !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] .input-wrap input:focus,
html[data-theme="light"] select:focus {
  border-color: #0F766E !important;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.15) !important;
}

/* Таблицы */
html[data-theme="light"] table th,
html[data-theme="light"] .col-table th {
  background: rgba(0,0,0,0.03) !important;
}
html[data-theme="light"] table td,
html[data-theme="light"] .col-table td,
html[data-theme="light"] tr td {
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] table tr:hover td,
html[data-theme="light"] tbody tr:hover td {
  background: rgba(15,118,110,0.04) !important;
}

/* Auth card */
html[data-theme="light"] .card {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .card::before {
  opacity: 0.5;
}

/* Auth tabs */
html[data-theme="light"] .tabs {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .tab.active {
  background: #fff !important;
  color: #1a1d28 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Upload screen */
html[data-theme="light"] .upload-screen {
  background: #f0f1f4 !important;
}
html[data-theme="light"] .drop-zone {
  background: rgba(255,255,255,0.7) !important;
  border-color: #d2d5db !important;
}
html[data-theme="light"] .drop-zone:hover,
html[data-theme="light"] .drop-zone.dragover {
  border-color: #0F766E !important;
  background: rgba(15,118,110,0.04) !important;
}

/* Dashboard badges */
html[data-theme="light"] .sa-badge-free {
  background: rgba(107,112,133,0.10) !important;
  border-color: rgba(107,112,133,0.25) !important;
}
html[data-theme="light"] .sa-badge-pro {
  background: rgba(13,148,136,0.10) !important;
  border-color: rgba(13,148,136,0.30) !important;
}
html[data-theme="light"] .sa-badge-admin {
  background: rgba(220,38,38,0.08) !important;
  border-color: rgba(220,38,38,0.20) !important;
}

/* Dashboard tab bar */
html[data-theme="light"] .sa-tab.active {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #1a1d28 !important;
}

/* Кнопки outline/ghost */
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .plan-btn-outline,
html[data-theme="light"] .sa-logout,
html[data-theme="light"] .btn-logout,
html[data-theme="light"] .cookie-no {
  border-color: rgba(0,0,0,0.15) !important;
  color: #6b7085 !important;
}
html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] .plan-btn-outline:hover {
  border-color: #0F766E !important;
  color: #0F766E !important;
}
html[data-theme="light"] .sa-logout:hover,
html[data-theme="light"] .btn-logout:hover {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}

/* Cookie banner */
html[data-theme="light"] .cookie {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
}

/* Footer */
html[data-theme="light"] footer,
html[data-theme="light"] .footer {
  border-top-color: rgba(0,0,0,0.06) !important;
}

/* Hero gradient */
html[data-theme="light"] .hero::before {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(15,118,110,0.08) 0%, transparent 65%),
              radial-gradient(ellipse 40% 30% at 85% 55%, rgba(13,148,136,0.05) 0%, transparent 55%) !important;
}

/* Hero title gradient text — нужен контраст на светлом */
html[data-theme="light"] .hero h1 {
  background: linear-gradient(135deg, #1a1d28 20%, #0F766E 60%, #0D9488 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Stats row */
html[data-theme="light"] .stats-row {
  background: rgba(255,255,255,0.75) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Steps grid */
html[data-theme="light"] .steps {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .step {
  background: rgba(255,255,255,0.65) !important;
}

/* CTA final */
html[data-theme="light"] .cta-final {
  background: linear-gradient(180deg, transparent, rgba(15,118,110,0.04)) !important;
}

/* Pricing: Pro card glow */
html[data-theme="light"] .plan-card.hot {
  border-color: rgba(15,118,110,0.4) !important;
  background: linear-gradient(135deg, rgba(15,118,110,0.04), rgba(13,148,136,0.04)) !important;
}
/* Agency card */
html[data-theme="light"] .plan-card[style*="border-color:rgba(249,115,22"] {
  border-color: rgba(217,119,6,0.3) !important;
  background: linear-gradient(135deg, rgba(217,119,6,0.04), rgba(202,138,4,0.06)) !important;
}

/* Privacy page highlight */
html[data-theme="light"] .highlight {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Help page notes */
html[data-theme="light"] .note {
  background: rgba(234,179,8,0.06) !important;
  border-color: rgba(234,179,8,0.18) !important;
}
html[data-theme="light"] .tip {
  background: rgba(15,118,110,0.05) !important;
  border-color: rgba(15,118,110,0.15) !important;
}

/* Help page FAQ cards */
html[data-theme="light"] div[style*="background:var(--bg2)"] {
  background: rgba(255,255,255,0.75) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Saved upload cards */
html[data-theme="light"] div[style*="background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding"] {
  background: rgba(255,255,255,0.75) !important;
}

/* Admin page table */
html[data-theme="light"] .stat-val {
  color: inherit;
}

/* Mapper panel */
html[data-theme="light"] .mapper-panel {
  background: rgba(255,255,255,0.80) !important;
  border-color: rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] .mapper-btn {
  border-color: rgba(0,0,0,0.10) !important;
}

/* Code blocks */
html[data-theme="light"] code {
  background: rgba(0,0,0,0.05) !important;
  color: #0F766E !important;
}

/* Chart.js canvas containers */
html[data-theme="light"] canvas {
  filter: none;
}

/* SVG text in demo charts */
html[data-theme="light"] .chart-svg text {
  fill: #6b7085 !important;
}


/* ── СКРОЛЛБАР ── */
html[data-theme="light"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(0,0,0,0.02); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 9999px; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }

html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 9999px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }


/* ── SELECTION ── */
::selection {
  background: var(--accent);
  color: #fff;
}


/* ── SMOOTH THEME TRANSITION ── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease !important;
}


/* ── THEME TOGGLE BUTTON ── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.18s;
  color: var(--muted);
  font-size: 1rem;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(15,118,110, 0.08);
}

/* Показываем правильную иконку */
.theme-toggle .icon-sun  { display: inline; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: inline; }


/* ── PREFERS REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .feat:hover, .plan-card:hover, .preview-card:hover,
  .stat:hover, .feat-card:hover, .btn-main:hover {
    transform: none !important;
  }
}


/* ── MOBILE NAV (лендинг) ── */

@media (max-width: 600px) {
  /* Скрываем «Инструкция», «Войти», «Начать бесплатно» */
  .nav a[href="/help.php"],
  .nav a[href="/auth.php"].nav-link,
  .nav .nav-btn {
    display: none !important;
  }
  .nav .nav-link {
    padding: 5px 8px !important;
    font-size: .75rem !important;
  }
  .theme-toggle {
    width: 30px;
    height: 30px;
    font-size: .85rem;
  }
  .nav .logo-name, .nav .nav-name {
    font-size: .78rem !important;
  }
  .lang-sw { font-size: .7rem !important; padding: 3px 6px !important; }
  .lang-sw a { padding: 2px 5px !important; font-size: .65rem !important; }

  /* Dashboard topbar */
  .sa-topbar { flex-wrap: wrap !important; gap: 6px !important; padding: 8px 12px !important; }
  .sa-topbar-right { gap: 4px !important; }
}

@media (max-width: 768px) and (min-width: 601px) {
  .nav .nav-btn { display: none !important; }
  .nav .nav-link { padding: 6px 10px !important; font-size: .8rem !important; }
}