/* Препка v2 — всё приложение (кабинет, уроки, каталог, банк) в стиле /next.
   Подключается только на /v2/ поверх обычных стилей: основной сайт не меняется.
   Цвета, градиенты и тени из обычных стилей перекрашивает сгенерированный v2-skin.gen.css (tools/build-v2-skin.py),
   а здесь — переменные и ручная доводка компонентов. */

/* ---------- переменные ---------- */
html.v2 {
  --font-d: 'Dela Gothic One', 'Arial Black', system-ui, sans-serif;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-xl: 24px; --r-lg: 20px; --r-md: 16px; --r-sm: 12px;
  --ink: #0E0E10; --acid: #D4FF3A; --blue: #3B3BFF; --red: #FF4A1C;
  --violet: #3B3BFF; --pink: #FF4A1C; --lime: #D4FF3A; --orange: #FF4A1C; --cyan: #3B3BFF;
  --accent: #3B3BFF;
  --grad: linear-gradient(#3B3BFF, #3B3BFF);
  --grad-2: linear-gradient(#FF4A1C, #FF4A1C);
  --grad-3: linear-gradient(#D4FF3A, #D4FF3A);
  --grad-ink: linear-gradient(#2B2BE0, #2B2BE0);
  --on-lime: #0E0E10;
  --chart: #3B3BFF;
}
html.v2, html.v2[data-theme="light"] {
  --bg: #FFFFFF; --bg-2: #F8F8FA;
  --surface: #FFFFFF; --surface-2: #F2F2F4; --surface-3: #E4E4E9;
  --solid: #FFFFFF; --border: #E8E8EC; --border-2: #D6D6DC;
  --text: #0E0E10; --muted: #4A4A55; --faint: #6E6E78;
  --accent-ink: #2B2BE0; --accent-ink-2: #C9340D;
  --shadow: none;
}
html.v2[data-theme="dark"] {
  --bg: #0E0E10; --bg-2: #141418;
  --surface: #18181C; --surface-2: #222229; --surface-3: #2C2C33;
  --solid: #18181C; --border: #2A2A31; --border-2: #3A3A44;
  --text: #F5F5F7; --muted: #C9C7D1; --faint: #8C8C97;
  --accent-ink: #A3A3FF; --accent-ink-2: #FF8A6B;
  --shadow: none;
  --chart: #D4FF3A;
}

/* ---------- база ---------- */
html.v2 body { font-family: var(--font); }
html.v2 body::before, html.v2 body::after { display: none; }
html.v2 h1, html.v2 h2, html.v2 h3, html.v2 h4 { font-family: var(--font-d); font-weight: 400; letter-spacing: -.02em; }
html.v2 ::selection { background: var(--acid); color: var(--ink); }
html.v2 :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------- логотип ---------- */
html.v2 .logo-mark, html.v2 .lms-logo-icon { background: var(--ink); color: var(--acid); border-radius: 12px; transform: none; }
html.v2[data-theme="dark"] .logo-mark, html.v2[data-theme="dark"] .lms-logo-icon { background: var(--acid); color: var(--ink); }
html.v2 .logo:hover .logo-mark { transform: rotate(-8deg); }
html.v2 .logo-word, html.v2 .lms-logo-text { font-family: var(--font-d); font-weight: 400; }
html.v2 .logo-word i { color: var(--blue); }

/* ---------- кнопки: плоские, без бликов и свечения ---------- */
html.v2 .btn { border-radius: 999px; transition: transform .2s cubic-bezier(.2, .9, .3, 1.35), background-color .2s, color .2s; }
html.v2 .btn:hover { transform: translateY(-2px) rotate(-1deg); }
html.v2 .btn:active { transform: scale(.96); }
html.v2 .btn-primary::after, html.v2 .btn-lime::after { display: none; }
html.v2 .btn-primary { background: var(--acid); color: var(--ink); border: 0; }
html.v2 .btn-primary:hover { background: #C6F51F; }
html.v2 .btn-lime { background: var(--acid); color: var(--ink); }
html.v2 .btn-ghost { border-color: transparent; background: var(--surface-2); }
html.v2 .btn-topbar-cta { background: var(--acid); color: var(--ink); border: 0; }

/* ---------- плитки и карточки: плоские поверхности, без стекла ---------- */
html.v2 .tile { backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--border); }
html.v2 .pill, html.v2 .chip, html.v2 .badge { border-color: transparent; }

/* ---------- шапка сайта ---------- */
html.v2 .topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }

/* ---------- кабинет: боковое меню как в шапке /next — активный пункт чёрной плашкой ---------- */
html.v2 .lms-sidebar { background: var(--bg-2); border-right: 0; }
html.v2 .lms-nav-item { color: var(--muted); border-radius: 999px; }
html.v2 .lms-nav-item:hover { background: var(--surface-3); color: var(--text); }
html.v2 .lms-nav-item.active { background: var(--acid); color: var(--ink); }
html.v2 .lms-nav-item.active .lms-ico { color: var(--ink); }
html.v2 .lms-main, html.v2 .lms-topbar { background: var(--bg); }
html.v2 .lms-topbar { border-bottom: 0; }
html.v2 .lms-page-caption { font-family: var(--font-d); font-weight: 400; }

/* ---------- островки старого стиля, которые задаются не переменными ---------- */
/* аватарки и кружки с инициалами — чёрные с кислотной буквой */
html.v2 .lms-avatar-btn, html.v2 .cab-avatar, html.v2 .cab-ava, html.v2 .rv-ava, html.v2 .qa-ava { background: var(--ink) !important; color: var(--acid) !important; }
html.v2[data-theme="dark"] .lms-avatar-btn, html.v2[data-theme="dark"] .cab-avatar, html.v2[data-theme="dark"] .cab-ava,
html.v2[data-theme="dark"] .rv-ava, html.v2[data-theme="dark"] .qa-ava { background: var(--acid) !important; color: var(--ink) !important; }
/* «Назад в кабинет» — обычная плашка поверхности */
html.v2 .lms-back-link { background: var(--surface-2); color: var(--text); border-color: transparent; }
/* кольца прогресса: градиент в разметке перекрашиваем через stop-color */
html.v2 .ring stop { stop-color: var(--blue); }
html.v2[data-theme="dark"] .ring stop { stop-color: var(--acid); }
/* вопрос куратору — чёрная кнопка, как основные действия */
html.v2 .qa-fab { background: var(--ink); color: #FFFFFF; }
html.v2[data-theme="dark"] .qa-fab { background: var(--acid); color: var(--ink); }
html.v2 .avatar { background: var(--ink); color: var(--acid); }
html.v2[data-theme="dark"] .avatar { background: var(--acid); color: var(--ink); }
/* карточки курсов: без цветных пятен, значок предмета — чёрный с кислотным знаком */
html.v2 .cc2::before { display: none; }
html.v2 .cc2-ico:not(.has-img) { background: var(--ink); color: var(--acid); }
html.v2[data-theme="dark"] .cc2-ico:not(.has-img) { background: var(--acid); color: var(--ink); }