/* meow_skin.css — overrides поверх inline-стилей старых шаблонов.
   Подключается ПОСЛЕ meow_theme.css в _navbar.html, чтобы переопределять hardcoded цвета.

   ЦЕЛЬ: одно из двух
     1) В светлой теме оставить узнаваемые яркие градиенты (но ВЕЗДЕ одинаковые),
     2) В тёмной — сделать ВСЕ страницы читаемыми (тёмный фон, светлый текст).

   Без переписывания шаблонов — только селекторы + !important там где надо
   побороть inline-стили. Подходит и старым (quizz, import_random, mc_quiz_word,
   matching, pichide, coding) и новым (games_hub, learn_now, mistakes, ...).
*/

/* ========== Базовая палитра body на всех страницах ========== */
html:not([data-theme="dark"]),
html:not([data-theme="dark"]) body,
body {
  background: #f6f3ee !important;
  background-image: none !important;
  color: var(--meow-text);
  transition: background .25s ease, color .25s ease;
}

html:not([data-theme="dark"]) .particles {
  display: none !important;
}

html:not([data-theme="dark"]) .container,
html:not([data-theme="dark"]) .container-fluid,
html:not([data-theme="dark"]) .main-content,
html:not([data-theme="dark"]) .wrap,
html:not([data-theme="dark"]) .quiz-container,
html:not([data-theme="dark"]) .matching-container,
html:not([data-theme="dark"]) .calendar-section,
html:not([data-theme="dark"]) .action-card,
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .meow-card {
  background: #fbf7f0 !important;
  background-image: none !important;
  color: #050505 !important;
  border-color: rgba(5, 5, 5, .12) !important;
}

html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3 {
  color: #050505 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Текстовые элементы внутри body — наследуют цвет, кроме явных карточек */
body, body p, body li, body td, body label, body span:not([class*="meow-grad"]):not([class*="badge"]):not([class*="pill"]) {
  color: inherit;
}

/* ========== Light theme: единообразие кнопок ==========
   Старые шаблоны имеют свои хардкодед `.create-quiz-btn`, `.process-btn`, `.submit-btn`,
   `.btn`, `.main-btn`. Не трогаем их — пусть остаются яркими, как было.
   Только smooth-переходы. */
.kp-btn, .btn, .create-quiz-btn, .process-btn, .submit-btn, .main-btn {
  transition: transform .15s var(--meow-ease-spring),
              box-shadow .2s var(--meow-ease),
              filter .2s var(--meow-ease);
}
.kp-btn:hover, .btn:hover, .create-quiz-btn:hover, .process-btn:hover, .submit-btn:hover, .main-btn:hover {
  filter: brightness(1.05);
}
.kp-btn:active, .btn:active, .create-quiz-btn:active, .process-btn:active, .submit-btn:active, .main-btn:active {
  transform: scale(.97);
}

/* ========== ТЁМНАЯ ТЕМА: переопределяем типичные светлые карточки ==========
   Старые шаблоны используют:
     - background: #fff / white / rgba(255,255,255,*)
     - background: #f5f5f5 / #f6f7fb / #f0f0f0
     - color: #333 / #444 / black
   Их нужно затемнить, чтобы было видно текст. */
[data-theme="dark"] body {
  background: var(--meow-bg-grad) !important;
  color: var(--meow-text) !important;
}

[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .main-content,
[data-theme="dark"] .wrap,
[data-theme="dark"] .quiz-container,
[data-theme="dark"] .matching-container,
[data-theme="dark"] .calendar-section,
[data-theme="dark"] .action-card,
[data-theme="dark"] .card,
[data-theme="dark"] .meow-card {
  color: var(--meow-text);
}

/* Любой светлый блочный контейнер — затемняем */
[data-theme="dark"] [style*="background: rgba(255,255,255"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"] {
  background: var(--meow-bg-card) !important;
  color: var(--meow-text) !important;
  border-color: var(--meow-border) !important;
}

[data-theme="dark"] [style*="background: #f5f5f5"],
[data-theme="dark"] [style*="background:#f5f5f5"],
[data-theme="dark"] [style*="background: #f6f7fb"],
[data-theme="dark"] [style*="background:#f6f7fb"],
[data-theme="dark"] [style*="background: #f0f0f0"],
[data-theme="dark"] [style*="background:#f0f0f0"],
[data-theme="dark"] [style*="background: #eef0f4"] {
  background: var(--meow-bg-soft) !important;
  color: var(--meow-text) !important;
}

/* Inputs / textareas / selects — стандартизуем под тёмную тему */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="file"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] [contenteditable="true"] {
  background: var(--meow-bg-soft) !important;
  color: var(--meow-text) !important;
  border-color: var(--meow-border) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] [contenteditable="true"]:empty::before {
  color: var(--meow-text-muted) !important;
  opacity: .9;
}

/* Mark/highlight, code, kbd — для тёмной темы.
   ВАЖНО: исключаем code с языком Prism (class="language-*"), а также pre/code внутри
   .sortable (Parsons) — у них своя подсветка через Prism, наш override её убивает. */
[data-theme="dark"] code:not([class*="language-"]),
[data-theme="dark"] kbd {
  background: #0f1115 !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}
[data-theme="dark"] pre:not([class*="language-"]):not(:has(code[class*="language-"])):not(.sortable *) {
  background: #0f1115 !important;
  color: #eaecef !important;
  border-color: #2a3142 !important;
}
/* Prism токены — НЕ трогаем (Prism сам красит `.token.*`) */
[data-theme="dark"] .token { /* no-op, для документации */ }
[data-theme="dark"] mark {
  background: #fdcb6e !important;
  color: #1c1c1c !important;
}

/* Якоря по умолчанию: чтобы не сливались */
[data-theme="dark"] a:not(.meow-btn):not(.meow-cta):not(.btn):not(.quick):not(.recent):not(.opt):not(.game):not(.line):not(.pill):not(.meow-pill):not([class*="meow-grad"]) {
  color: var(--meow-primary);
}
[data-theme="dark"] a:not(.meow-btn):not(.meow-cta):not(.btn):not(.quick):not(.recent):not(.opt):not(.game):not(.line):not(.pill):not(.meow-pill):not([class*="meow-grad"]):hover {
  color: var(--meow-accent);
}

/* Заголовки — белый/светлый */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
  color: var(--meow-text) !important;
}

/* Бейджи priority в календаре — чтобы оставались читаемыми */
[data-theme="dark"] .calendar-event-item .evt-title {
  color: var(--meow-text);
}

/* Светлые subtle backgrounds в календаре */
[data-theme="dark"] .calendar-day {
  background: var(--meow-bg-card) !important;
  color: var(--meow-text);
  border-color: var(--meow-border) !important;
}
[data-theme="dark"] .calendar-day.today {
  outline: 2px solid var(--meow-accent);
}

/* Универсальные shadows — на тёмной теме делаем глубже */
[data-theme="dark"] .meow-card,
[data-theme="dark"] .card,
[data-theme="dark"] .action-card {
  box-shadow: var(--meow-shadow);
}

/* Library file rows: на тёмной теме чтобы оставались видны */
[data-theme="dark"] .file-item-block,
[data-theme="dark"] .folder-item-block {
  background: var(--meow-bg-card) !important;
  color: var(--meow-text) !important;
  border-color: var(--meow-border) !important;
}

/* Hover-preview popup, который мы делаем JS-ом — уже использует .meow-card,
   но для надёжности гарантируем читаемость. */
.meow-card { background: var(--meow-bg-card); color: var(--meow-text); border: 1px solid var(--meow-border); }

/* ========== ТЁМНАЯ ТЕМА: переопределение названных CSS-классов из старых шаблонов ==========
   Эти классы используются в quizz, matching, mc_quiz_word, import_random, library,
   mycalendar, flashcards и др. Каждый из них имеет hardcoded `background: white/#fff/rgba(255,...)`
   в своём шаблоне — на dark надо принудительно затемнить, чтобы текст не сливался. */

[data-theme="dark"] .container,
[data-theme="dark"] .container.dark-mode,
[data-theme="dark"] .card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-content,
[data-theme="dark"] .deck-card,
[data-theme="dark"] .auth-container,
[data-theme="dark"] .account-container,
[data-theme="dark"] .study-header,
[data-theme="dark"] .flashcard-face,
[data-theme="dark"] .choice-option,
[data-theme="dark"] .achievement-badge,
[data-theme="dark"] .achievement-notification,
[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .header,
[data-theme="dark"] .hero,
[data-theme="dark"] .panel,
[data-theme="dark"] .form-section,
[data-theme="dark"] .output-container,
[data-theme="dark"] .text-extract,
[data-theme="dark"] .quiz-question,
[data-theme="dark"] .play-mode-controls,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .mc-popup,
[data-theme="dark"] .meow-card {
  background: var(--meow-bg-card) !important;
  color: var(--meow-text) !important;
  border-color: var(--meow-border) !important;
  backdrop-filter: none !important;
}

[data-theme="dark"] .reveal,
[data-theme="dark"] .partial,
[data-theme="dark"] .tree-row,
[data-theme="dark"] .folder-browser-item,
[data-theme="dark"] .selected-count,
[data-theme="dark"] .timer-progress,
[data-theme="dark"] .bottom-toolbar,
[data-theme="dark"] .dropdown-content > a,
[data-theme="dark"] .mc-options,
[data-theme="dark"] .mc-option-row {
  background: var(--meow-bg-soft) !important;
  color: var(--meow-text) !important;
  border-color: var(--meow-border) !important;
}

/* Светлый бэйдж user-pill: на dark — чуть светлее фона, без перекрытия */
[data-theme="dark"] .user-pill,
[data-theme="dark"] .meow-user-pill {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: var(--meow-text) !important;
}

/* Кнопка «Назад в меню» и подобные — ссылки */
[data-theme="dark"] .back-to-main {
  background: var(--meow-bg-soft) !important;
  color: var(--meow-text) !important;
}

/* Кодовые/output блоки специфичные для quizz/coding */
[data-theme="dark"] .output-container code,
[data-theme="dark"] .output-container blockquote {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--meow-text) !important;
}

/* Полупрозрачные подложки внутри блоков (часто — оттенки .15..0.95) */
[data-theme="dark"] [class*="container"] > [style*="background: rgba(255"],
[data-theme="dark"] [class*="card"] > [style*="background: rgba(255"] {
  background: rgba(255, 255, 255, .04) !important;
}

/* Разделители границ */
[data-theme="dark"] hr,
[data-theme="dark"] [style*="border-bottom:1px solid #eee"],
[data-theme="dark"] [style*="border-bottom: 1px solid #eee"],
[data-theme="dark"] [style*="border:1px solid #ddd"],
[data-theme="dark"] [style*="border: 1px solid #ddd"] {
  border-color: var(--meow-border) !important;
}

/* Таблицы (если используются native <table> с подложкой #f6f7fb) */
[data-theme="dark"] table thead th {
  background: var(--meow-bg-soft) !important;
  color: var(--meow-text) !important;
}
[data-theme="dark"] table td,
[data-theme="dark"] table th {
  border-color: var(--meow-border) !important;
}

/* Bootstrap-стиль чёрный текст (.text-dark, .text-body) — выгладывается у мyycalendar */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] .text-muted {
  color: var(--meow-text-soft) !important;
}

/* Обводка inputs с focus в dark — чтобы видно было */
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] [contenteditable="true"]:focus {
  outline: 2px solid var(--meow-primary) !important;
  outline-offset: 1px;
}

/* Inline `style="background: white/.../#fff"` уже покрыли в верхнем блоке;
   ниже — для редких inline `background-color: ...` написаний. */
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:white"] {
  background-color: var(--meow-bg-card) !important;
  color: var(--meow-text) !important;
}

/* ========== Light theme: единый "паркетный" фон под полупрозрачные карточки ==========
   Чтобы все страницы выглядели "одной семьёй" — фоном идёт градиент meow_theme.css,
   а у светлых карточек фон белый/полупрозрачный — выглядит как кафедра поверх ткани. */
@media (min-width: 720px) {
  .meow-card, .card, .action-card {
    backdrop-filter: saturate(1.05);
  }
}

/* ========== Hover-preview anchor accent (общая мелочь) ========== */
[data-meow-fpath] { transition: transform .15s var(--meow-ease); }
[data-meow-fpath]:hover { transform: translateY(-1px); }

/* ========== ЧАТ (social_chat) — тёмная тема ==========
   У чата свой инлайн-палитра (:root{--card/--ink/--line/--muted}) и много hardcoded
   светлых поверхностей (.dialog-btn, .bubble, .messages, .composer...), не покрытых
   общими селекторами выше. Затемняем их явно. */
[data-theme="dark"] .chat-shell{ --bg:#0f1115; --card:#1a1f2b; --ink:#eaecef; --muted:#9aa3b2; --line:#2a3142; }
[data-theme="dark"] .chat-shell .panel,
[data-theme="dark"] .chat-panel{ background:#161b26 !important; border-color:#2a3142 !important; }
[data-theme="dark"] .chat-panel{ background:linear-gradient(180deg,#161b26 0,#11151e 100%) !important; }
[data-theme="dark"] .side-head,
[data-theme="dark"] .chat-head{ border-color:#2a3142 !important; }
[data-theme="dark"] .composer{ border-color:#2a3142 !important; background:#161b26 !important; }
[data-theme="dark"] .messages{ background:linear-gradient(180deg,#12161f,#0f131b) !important; }
[data-theme="dark"] .dialog-btn{ background:#1f2633 !important; border-color:#2f3850 !important; color:#eaecef !important; }
[data-theme="dark"] .dialog-btn.active{ background:#28324a !important; border-color:#4a5a80 !important; }
[data-theme="dark"] .dialog-name{ color:#f0ece6 !important; }
[data-theme="dark"] .dialog-time{ color:#8893a4 !important; }
[data-theme="dark"] .dialog-note,[data-theme="dark"] .chat-sub{ color:#9aa3b2 !important; }
[data-theme="dark"] .me-id{ background:#2a3142 !important; color:#f0c98d !important; }
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .back-btn{ background:#232a38 !important; border-color:#3a4358 !important; color:#f0c98d !important; }
[data-theme="dark"] .btn.ghost{ background:#232a38 !important; color:#f0c98d !important; border-color:#3a4358 !important; }
[data-theme="dark"] .group-box{ background:#161b26 !important; border-color:#2a3142 !important; }
[data-theme="dark"] .group-box .group-input,
[data-theme="dark"] .composer textarea{ background:#1f2633 !important; border-color:#3a4358 !important; color:#eaecef !important; }
[data-theme="dark"] .day-chip{ background:rgba(255,255,255,.08) !important; border-color:#2a3142 !important; color:#b6bcc6 !important; }
[data-theme="dark"] .bubble{ background:#222a38 !important; border-color:#39435a !important; color:#eaecef !important; box-shadow:0 3px 0 #11151e,0 12px 22px rgba(0,0,0,.4) !important; }
[data-theme="dark"] .bubble.mine{ background:linear-gradient(135deg,#1c3a4a,#16475e) !important; color:#dff3fb !important; border-color:#2f7491 !important; box-shadow:0 3px 0 #0c2531,0 12px 22px rgba(0,0,0,.4) !important; }
[data-theme="dark"] .bubble.admin{ background:linear-gradient(135deg,#2e2b16,#26301a) !important; border-color:#5a5326 !important; color:#f0e6c8 !important; }
[data-theme="dark"] .bubble.system{ background:#232a38 !important; color:#b6bcc6 !important; border-color:#2a3142 !important; }
[data-theme="dark"] .message-quote-row{ background:rgba(255,255,255,.05) !important; border-left-color:#d7a95f !important; color:#b6bcc6 !important; }
[data-theme="dark"] .message-quote-author,
[data-theme="dark"] .reply-preview-author{ color:#f0c98d !important; }
[data-theme="dark"] .meta{ color:rgba(234,236,239,.55) !important; }
[data-theme="dark"] .reply-preview{ background:#1f2633 !important; border-color:#3a4358 !important; color:#eaecef !important; }
[data-theme="dark"] .reply-preview-text{ color:#c2c8d2 !important; }
[data-theme="dark"] .reply-clear{ background:#232a38 !important; border-color:#3a4358 !important; color:#f0c98d !important; }
[data-theme="dark"] .checks label{ color:#cdd3dd !important; }
[data-theme="dark"] .checks label:hover{ background:#232a38 !important; border-color:#3a4358 !important; }
[data-theme="dark"] .avatar,[data-theme="dark"] .message-avatar{ background:#2a3142 !important; border-color:#3a4358 !important; }

/* ========== GAMES HUB + АККАУНТ — тёмная тема через неймспейс-переменные ==========
   Обе страницы используют var(--games-*) / var(--account-*) для карточек/текста.
   Имена уникальны для своих страниц, поэтому переопределять их на body глобально безопасно. */
[data-theme="dark"] body{
  --games-bg:#0f1115; --games-ink:#eaecef; --games-muted:#9aa3b2; --games-line:#2a3142;
  --games-card:#1a1f2b; --games-shadow:0 18px 44px rgba(0,0,0,.5); --games-soft-shadow:0 10px 26px rgba(0,0,0,.4);
  --account-bg:#0f1115; --account-ink:#eaecef; --account-muted:#9aa3b2; --account-line:#2a3142;
  --account-card:#1a1f2b; --account-shadow:0 18px 44px rgba(0,0,0,.5);
}
/* games_hub: hardcoded-светлые места */
[data-theme="dark"] .hero-copy h1{ color:#f1ece4 !important; }
[data-theme="dark"] .filter-btn.is-active{ background:#28324a !important; color:#f0c98d !important; box-shadow:inset 0 0 0 1px #4a5a80 !important; }
[data-theme="dark"] .favorite-action:hover,[data-theme="dark"] .favorite-action:focus{ background:#28324a !important; }
[data-theme="dark"] .demo-guide-close{ background:#232a38 !important; color:#f0c98d !important; }
/* account: hardcoded-светлые места */
[data-theme="dark"] .btn-ghost{ background:#232a38 !important; color:#eaecef !important; border-color:#3a4358 !important; }
[data-theme="dark"] .privacy-row strong{ color:#eaecef !important; }

/* ========== БИБЛИОТЕКА (library) — тёмная тема (hardcoded white, без переменных) ========== */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .folder-card,
[data-theme="dark"] .file-card,
[data-theme="dark"] .dropdown-content,
[data-theme="dark"] .meow-prio-item{ background:#1a1f2b !important; border-color:#2a3142 !important; color:#eaecef !important; }
[data-theme="dark"] .file-name,[data-theme="dark"] .folder-name{ color:#eaecef !important; }
[data-theme="dark"] .file-card.is-selected{ background:#24304a !important; border-color:#4a5a80 !important; }
[data-theme="dark"] .breadcrumbs{ background:rgba(255,255,255,.06) !important; border-color:#2a3142 !important; }
[data-theme="dark"] .breadcrumb-item{ color:#f0c98d !important; }
[data-theme="dark"] .tree-row:hover{ background:#232a38 !important; }
[data-theme="dark"] .tree-row.home-row,
[data-theme="dark"] .tree-row.home-row:hover{ background:linear-gradient(135deg,#28324a,#1a1f2b) !important; }
[data-theme="dark"] .tree-row.selected{ background:linear-gradient(90deg,rgba(74,90,128,.5),rgba(40,50,74,.7)) !important; color:#f0ece6 !important; }
[data-theme="dark"] .meow-prio-item .ext-pill{ background:#3a3320 !important; color:#f0c98d !important; }
[data-theme="dark"] .dropdown-content a:hover{ background:#232a38 !important; }