/* ==========================================================
   Проект: MOYAMOVA
   Файл: theme.dark.css
   Назначение: Тёмная тема оформления приложения
   Версия: 1.0
   Обновлено: 2025-11-17
   ========================================================== */
/* ======================================================================================
   Dark Theme — Tokens & Overlays
   NOTE: Brand/Success/Danger colors are NOT changed here by agreement.
   ====================================================================================== */
:root[data-theme="dark"]{
  --focus-ring: color-mix(in srgb, var(--brand) 45%, rgba(255,255,255,.12));

  color-scheme: dark;

  /* Neutral palette (dark) */
  --bg: #0c1016;
  --surface-1: #111821;
  --surface-2: #141d27;
  --surface-3: #182433;
  --text: #dce2e8;
  --text-muted: #aeb6c0;
  --header-title: #e6e8eb;
  --border: #2a3a4d;
  --divider: #2f4156;

  /* Donate CTA borders (brand preserved) */
  --donate-mono-border:   #f7c948; /* yellow */
  --donate-paypal-border: #0b57d0; /* blue   */

  /* Completed sets (home) */
  --set-done-bg:     color-mix(in srgb, var(--brand) 16%, var(--surface-2));
  --set-done-border: color-mix(in srgb, var(--brand) 50%, var(--surface-2));
  --set-done-text:   color-mix(in srgb, var(--brand) 80%, #e6e8eb);

  /* Shadows / overlays */
  --shadow-color: 0,0,0;
  --overlay-bg: rgba(0,0,0,.55);

  /* Links / selection / scrollbars */
  /* Keep brand as-is (defined in tokens.css), only derive helpers */
  --link: var(--brand);
  --selection-bg: rgba(53,182,255,.20); /* derived from brand, translucent */
  --selection-fg: var(--text);

  --scrollbar-track: #0e1319;
  --scrollbar-thumb: #243141;
  --scrollbar-thumb-hover: #2b3a4d;
}

/* ======================================================================================
   Base surfaces
   ====================================================================================== */
html[data-theme="dark"],
html[data-theme="dark"] body{
  background: var(--bg);
  color: var(--text);
}

/* Header / Content / Footer */
html[data-theme="dark"] .header{
  background: var(--surface-1);
  border-bottom: 1px solid var(--divider);
}
html[data-theme="dark"] .content{
  background: var(--bg);
}
html[data-theme="dark"] .footer{
  background: var(--surface-1);
  border-top: 1px solid var(--divider);
  color: var(--text-muted);
}
/* App footer (нижняя навигация) */
html[data-theme="dark"] .app-footer{
  background: var(--surface-1);
  border-top: 1px solid var(--divider);
  color: var(--text-muted);
}

/* Offcanvas (гамбургер) */
html[data-theme="dark"] .oc-root .oc-overlay{
  background: var(--overlay-bg);
}
html[data-theme="dark"] .oc-root .oc-panel{
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(var(--shadow-color), .45);
  border-left: 1px solid var(--divider);
}
html[data-theme="dark"] .oc-panel .oc-header{
  background: var(--surface-3);
  border-bottom: 1px solid var(--divider);
}
html[data-theme="dark"] .oc-panel .menu-item{
  border-bottom: 1px solid var(--divider);
}
html[data-theme="dark"] .oc-panel .menu-label{
  color: var(--text-muted);
}

/* Inputs / Cards / Panels */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background: var(--surface-1);
  color: var(--text);
  border: 1px solid var(--border);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .sheet{
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: 0 6px 14px rgba(var(--shadow-color), .25);
}

/* Links / Selection / Scrollbars */
html[data-theme="dark"] a{ color: var(--link); }
html[data-theme="dark"] a:hover{ text-decoration: underline; }

html[data-theme="dark"] ::selection{
  background: var(--selection-bg);
  color: var(--selection-fg);
}

html[data-theme="dark"] *{ scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
html[data-theme="dark"] ::-webkit-scrollbar{ width: 12px; height: 12px; }
html[data-theme="dark"] ::-webkit-scrollbar-track{ background: var(--scrollbar-track); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background: var(--scrollbar-thumb); border-radius: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background: var(--scrollbar-thumb-hover); }

/* ======================================================================================
   App-specific safe fixes (не трогаем бренд)
   ====================================================================================== */
/* Dicts tables: selected row + cells */
html[data-theme="dark"] .dicts-table tbody td{
  background: var(--surface-2);
  border-color: var(--border);
}
html[data-theme="dark"] .dicts-table tbody tr.is-selected > td{
  background: var(--surface-1) !important;
  border-color: var(--burger); /* keep brand border */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--burger) 20%, transparent);
}

/* Быстрые действия внизу бургера */
html[data-theme="dark"] .actions-row-bottom{
  background: var(--surface-2);
  border-top: 1px solid var(--divider);
}
/* только цвет разделителей — ширину/стиль берём из базы */
html[data-theme="dark"] .actions-row-bottom .action-btn:not(:last-child){
  border-right-color: var(--divider) !important;
}

/* Флаги (Dicts & Mistakes) — убрать белую подложку */
html[data-theme="dark"] .dict-flag{
  background: transparent !important;
}

/* Ответы в карточках — белый текст */
html[data-theme="dark"] .answer-btn{
  -webkit-text-fill-color:#fff;
  color:#fff;
}

/* Заголовок MOYAMOVA — берём цвет из токена */
html[data-theme="dark"] .brand,
html[data-theme="dark"] .brand-title{
  color: var(--header-title) !important;
}

/* ======================================================================================
   Footer icons mapping (dark only)
   ====================================================================================== */
html[data-theme="dark"] .nav-btn [data-icon="home"]   { background-image:url("../img/home_dark.svg"); }
html[data-theme="dark"] .nav-btn [data-icon="book"]   { background-image:url("../img/book_dark.svg"); }
html[data-theme="dark"] .nav-btn [data-icon="star"]   { background-image:url("../img/star_dark.svg"); }
html[data-theme="dark"] .nav-btn [data-icon="warning"]{ background-image:url("../img/warning_dark.svg"); }
html[data-theme="dark"] .nav-btn [data-icon="stats"]  { background-image:url("../img/stats_dark.svg"); }
/* Active (selected tab) */
html[data-theme="dark"] .nav-btn.active [data-icon="home"]   { background-image:url("../img/home_active.svg"); }
html[data-theme="dark"] .nav-btn.active [data-icon="book"]   { background-image:url("../img/book_active.svg"); }
html[data-theme="dark"] .nav-btn.active [data-icon="star"]   { background-image:url("../img/star_active.svg"); }
html[data-theme="dark"] .nav-btn.active [data-icon="warning"]{ background-image:url("../img/warning_active.svg"); }
html[data-theme="dark"] .nav-btn.active [data-icon="stats"]  { background-image:url("../img/stats_active.svg"); }

/* ======================================================================================
   Donate (донат) — dark overrides (перекрывают inline-CSS из donate.js)
   ====================================================================================== */
html[data-theme="dark"] .donate-sheet{
  background: var(--bg) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .donate-top{
  background: var(--surface-1) !important;
  border-bottom: 1px solid var(--divider) !important;
}

/* Карточки и сообщения */
html[data-theme="dark"] .donate-section{
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] .donate-message{
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .donate-cta{
  background: var(--surface-1) !important;
  border-color: var(--border) !important;            /* базовая рамка в дарке */
  box-shadow: 0 8px 18px rgba(var(--shadow-color), .28) !important;
}
/* внутренняя большая кнопка — тёмная заливка, текст — брендовая ссылка */
html[data-theme="dark"] .donate-cta a,
html[data-theme="dark"] .donate-cta button,
html[data-theme="dark"] .donate-cta .cta-btn{
  background: var(--surface-2) !important;
  color: var(--link) !important;
}
/* цветные рамки вариантов (карточка + сама кнопка) */
html[data-theme="dark"] .donate-cta--mono   { border-color: var(--donate-mono-border) !important; }
html[data-theme="dark"] .donate-cta--paypal { border-color: var(--donate-paypal-border) !important; }
html[data-theme="dark"] .donate-cta--mono   a,
html[data-theme="dark"] .donate-cta--mono   button,
html[data-theme="dark"] .donate-cta--mono   .cta-btn{ border-color: var(--donate-mono-border) !important; }
html[data-theme="dark"] .donate-cta--paypal a,
html[data-theme="dark"] .donate-cta--paypal button,
html[data-theme="dark"] .donate-cta--paypal .cta-btn{ border-color: var(--donate-paypal-border) !important; }

/* Donate: заголовки над кнопками (dark) */
html[data-theme="dark"] .donate-cta h1,
html[data-theme="dark"] .donate-cta h2,
html[data-theme="dark"] .donate-cta h3,
html[data-theme="dark"] .donate-cta .cta-title,
html[data-theme="dark"] .donate-cta .donate-cta__title{
  color: var(--text) !important;
  opacity: 1 !important;
}

/* (не обязательно) подписи/абзацы в карточке делать чуть тише */
html[data-theme="dark"] .donate-cta p{
  color: var(--text-muted) !important;
}

/* общий текст внутри страницы доната (на случай новых абзацев) */
html[data-theme="dark"] .donate-content{
  color: var(--text) !important;
}

/* Donate: баннер как в светлой теме — только нижняя линия */
html[data-theme="dark"] .donate-note{
  background: transparent !important;         /* убираем подложку */
  border: 0 !important;                        /* убираем рамку по кругу */
  border-bottom: 1px solid var(--divider) !important; /* оставляем только нижнюю */
  border-radius: 0 !important;                 /* без скругления */
  box-shadow: none !important;                 /* без тени */
  color: var(--text-muted) !important;         /* текст — спокойный */
}

/* иконка рядом с текстом — остаётся приглушённой */
html[data-theme="dark"] .donate-note .icon,
html[data-theme="dark"] .donate-note svg{
  color: var(--text-muted) !important;
  fill: currentColor !important;
  opacity: .9;
}

/* ======================================================================================
   Dicts/Mistakes — preview modal
   ====================================================================================== */
html[data-theme="dark"] .mmodal__overlay{
  background: rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] .mmodal__panel{
  background: var(--surface-1) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 28px rgba(var(--shadow-color), .45) !important;
}
html[data-theme="dark"] .mmodal__header{
  background: var(--surface-1) !important;
  border-bottom: 1px solid var(--divider) !important;
}
html[data-theme="dark"] .mmodal__body{
  background: var(--surface-1) !important;
}
html[data-theme="dark"] .mmodal__close{
  background: rgba(53,182,255,.08) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  box-shadow: 0 1px 4px rgba(53,182,255,.2) !important;
}
html[data-theme="dark"] .mmodal__close:hover{
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(53,182,255,.35) !important;
}
/* таблица в модалке */
html[data-theme="dark"] .dict-table thead th{
  color: var(--text) !important;
  opacity: .75;
  border-bottom: 1px solid var(--divider) !important;
}
html[data-theme="dark"] .dict-table tbody td{
  color: var(--text) !important;
  border-bottom: 1px solid var(--divider) !important;
  background: transparent !important;
}
/* Заголовок модалки */
html[data-theme="dark"] .mmodal__header .mmodal__title,
html[data-theme="dark"] .mmodal__title,
html[data-theme="dark"] .mmodal__header h1,
html[data-theme="dark"] .mmodal__header h2,
html[data-theme="dark"] .mmodal__header h3{
  color: var(--text) !important;
  opacity: 1 !important;
}

/* ======================================================================================
   Home — learned sets (is-done)
   ====================================================================================== */
html[data-theme="dark"] .set-pill.is-done{
  /* fallback для движков без color-mix (перекроется строкой ниже) */
  background: rgba(53,182,255,.16) !important;
  border-color: rgba(53,182,255,.50) !important;
  color: #cfe9ff !important;

  /* основная версия через токены */
  background: var(--set-done-bg) !important;
  border-color: var(--set-done-border) !important;
  color: var(--set-done-text) !important;

  box-shadow: none !important;
}
@media (hover:hover){
  html[data-theme="dark"] .set-pill.is-done:hover{
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 28%, transparent) !important;
  }
}
/* если сет выучен и выбран — показываем активное состояние */
html[data-theme="dark"] .set-pill.is-done.is-active,
html[data-theme="dark"] .set-pill.is-active.is-done{
  background: var(--surface-1) !important;
  border-color: var(--brand) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent) !important;
}

/* ======================================================================================
   Legal (legal.js) — dark overrides
   ====================================================================================== */
html[data-theme="dark"] .legal-sheet{
  background: var(--surface-1) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .legal-top{
  background: var(--surface-1) !important;
  border-bottom: 1px solid var(--divider) !important;
  color: var(--text) !important;
}
/* Tabs */
html[data-theme="dark"] .legal-tab{
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
@media (hover:hover){
  html[data-theme="dark"] .legal-tab:hover{ background: var(--surface-2) !important; }
}
html[data-theme="dark"] .legal-tab[aria-selected="true"]{
  background: var(--surface-1) !important;
  border-color: var(--burger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--burger) 20%, transparent) !important;
}
/* Content */
html[data-theme="dark"] .legal-content{
  background: var(--surface-1) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .legal-content h1,
html[data-theme="dark"] .legal-content h2,
html[data-theme="dark"] .legal-content h3{
  color: var(--text) !important;
}
html[data-theme="dark"] .legal-content a{ color: var(--link) !important; }
html[data-theme="dark"] .legal-content a:hover{ text-decoration: underline; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Accessible focus styles (dark) */
html[data-theme="dark"] :where(a,button,[role="button"],input,select,textarea,.btn,.answer-btn):focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent);
}
html[data-theme="dark"] :where(a,button,[role="button"],input,select,textarea,.btn,.answer-btn):focus{
  outline: none;
}

/* ===== Heart button (text ♡/♥) ===== */
.heart{
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  line-height: 1;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  transition: color .25s ease, transform .2s ease;
}

/* Цвета (можешь скорректировать переменные под свою тему) */
.heart{ color: var(--icon-muted, #cbd5e1); }
.heart.is-fav{ color: var(--icon-active, #fbbf24); }   /* активное сердце */
/* hover-цвет только для нужного состояния */
@media (hover: hover) and (pointer: fine){
  .heart:not(.is-fav):hover { color: var(--icon-muted-hover, #94a3b8); }
  .heart.is-fav:hover       { color: var(--icon-active-hover, #f59e0b); }
}
/* можно оставить общий “слегка увеличить” */
.heart:hover{ transform: scale(1.06); }

/* Звёзды тренера на месте (если нужно) */
.trainer-stars .star{ opacity:.45; }
.trainer-stars .star.on{ opacity:1; }

/* === Trainer stars: размер, золото, анимация === */
.trainer-stars{ display:flex; gap:4px; align-items:center; }

/* базовый вид */
.trainer-stars .star{
  font-size: 22px;              /* было меньше — сделали крупнее */
  line-height: 1;
  color: var(--star-muted, #cbd5e1);
  opacity: .55;
  transform: translateZ(0);
  transition: color .22s ease, opacity .22s ease, transform .22s ease, text-shadow .22s ease;
}

/* активная звезда */
.trainer-stars .star.on{
  color: var(--star-gold, #fbbf24);  /* золото */
  opacity: 1;
  text-shadow: 0 0 0 rgba(0,0,0,0);
  animation: star-pop .26s ease;     /* лёгкий поп при появлении */
}

/* “поп” при появлении */
@keyframes star-pop{
  0%   { transform: scale(.88); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* уважаем системное “меньше анимаций” */
@media (prefers-reduced-motion: reduce){
  .trainer-stars .star.on{ animation: none; }
}

/* Унифицируем золото со сердцем */
:root{
  --star-gold: var(--icon-active, #fbbf24);
  --star-muted: #cbd5e1;
}

.trainer-stars{ display:flex; gap:4px; align-items:center; }

/* базовый вид */
.trainer-stars .star{
  font-size: 22px;
  color: var(--star-muted);
  opacity: .55;
  transition: color .22s ease, opacity .22s ease, transform .22s ease, text-shadow .22s ease;
}

/* активная */
.trainer-stars .star.on{
  color: var(--star-gold);
  opacity: 1;
  animation: star-pop .26s ease;
}

/* лёгкий поп */
@keyframes star-pop{
  0%{ transform: scale(.88) }
  60%{ transform: scale(1.18) }
  100%{ transform: scale(1) }
}

/* уважаем меньше анимаций */
@media (prefers-reduced-motion: reduce){
  .trainer-stars .star.on{ animation: none; }
}

/* === IDK ("Не знаю") — тактильный отклик: пресс + риппл === */
.idk-btn{
  position: relative;
  overflow: hidden;                /* чтобы риппл не выходил за края */
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background-color .18s ease, color .18s ease;
}

/* лёгкое "вдавливание" при нажатии */
.idk-btn:active{
  transform: translateY(1px) scale(.98);
}

/* риппл из центра (использует currentColor) */
.idk-btn::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .28s ease, opacity .28s ease;
  pointer-events: none;            /* чтобы не мешал клику */
}

/* запуск риппла: при активном нажатии или через .tapped (см. JS ниже) */
.idk-btn:active::after,
.idk-btn.tapped::after{
  opacity: .15;
  transform: translate(-50%, -50%) scale(14);
}

/* уважаем системные настройки "меньше анимаций" */
@media (prefers-reduced-motion: reduce){
  .idk-btn{ transition: none; }
  .idk-btn::after{ transition: none; }
}

/* Фокус с клавиатуры — видно, что кнопка активна */
.idk-btn:focus-visible{
  outline: 2px solid var(--brand, #35b6ff);
  outline-offset: 2px;
}

/* Состояние disabled — риппл и нажатие отключены */
.idk-btn:disabled{
  opacity: .5;
  pointer-events: none;
}

/* Контрастный режим — риппл чуть сильнее заметен */
@media (prefers-contrast: more){
  .idk-btn:active::after{ opacity: .22; }
}

/* Чуть аккуратнее на тёмной теме (если нужно) */
@media (prefers-color-scheme: dark){
  .idk-btn:active::after{ opacity: .18; }
}

/* === Половинные звёзды (визуал для 0.5 шага) === */
.trainer-stars{ display:flex; gap:4px; align-items:center; }

/* базовый вид */
.trainer-stars .star{
  position: relative;
  font-size: 22px;
  line-height: 1;
  color: var(--star-muted, #cbd5e1);
  opacity: .55;
  transition: color .22s ease, opacity .22s ease, transform .22s ease;
}

/* полная звезда */
.trainer-stars .star.full{
  color: var(--star-gold, #fbbf24);
  opacity: 1;
  animation: star-pop .22s ease;
}

/* половинка: базовый символ бледный, сверху золотая половина */
.trainer-stars .star.half{
  color: var(--star-muted, #cbd5e1);
  opacity: 1;
}
.trainer-stars .star.half::before{
  content: '★';
  position: absolute;
  left: 0; top: 0;
  width: 50%; height: 100%;
  overflow: hidden;
  color: var(--star-gold, #fbbf24);
}

/* лёгкий поп-эффект */
@keyframes star-pop{
  0%{ transform: scale(.88) }
  60%{ transform: scale(1.18) }
  100%{ transform: scale(1) }
}
@media (prefers-reduced-motion: reduce){
  .trainer-stars .star.full{ animation: none; }
}

/* поддержка половинок: базовый символ + наложение левой половины золотом */
.trainer-stars .star { position: relative; line-height: 1; }

/* ==========================================================
 * ЗОНА 2: Подсказки
 * ========================================================== */

.home-hints .hints-title{
  margin:0 0 6px;
  font-size:14px;
  text-align:left;      /* можно сделать center, если захочешь */
  font-weight:700;
  opacity:.8;
}

/* тело подсказки — фиксированная высота + скролл */
.home-hints .hints-body{
  /* важно: переопределяем старый flex */
  display:block;

  /* фиксированная высота блока */
  height:2.6em;                     /* подгони под вкус: 3.2–4em */

  overflow-y:auto;                  /* лишний текст прокручивается */
  -webkit-overflow-scrolling:touch; /* плавный скролл на iOS */

  text-align:center;
  opacity:.75;
  font-size:15px;
  line-height:1.4;
}

/* --- Подсказка: пример использования слова --- */

.home-hints .hint-example{
  width:100%;
}

.home-hints .hint-de,
.home-hints .hint-tr{
  margin:0;
  text-align:center;
}

/* Немецкий пример: чуть жирнее + кликабелен */
.home-hints .hint-de{
  font-weight:600;
  margin-bottom:2px;
  cursor:pointer;
}

/* Перевод по умолчанию скрыт */
.home-hints .hint-tr{
  opacity:.9;
  display:none;
}

/* Когда показан */
.home-hints .hint-tr.is-visible{
  display:block;
}

/* Подсветка тренируемого слова */
.home-hints .hint-word{
  font-weight:700;
  color:var(--brand,#35b6ff);
}

/* === MOYAMOVA modal (dark) === */
.mm-modal-open { overflow: hidden; }

.mm-modal-backdrop{
  position: fixed; inset: 0; z-index: 2147483646;
  display: grid; place-items: center;
  background: rgba(0,0,0,.36);
  backdrop-filter: blur(2px);
  opacity: 1; transition: opacity .18s ease;
}
.mm-modal-backdrop.hide{ opacity: 0; }

.mm-modal{
  width: min(92vw, 500px);
  background: rgba(20,30,50,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  padding: 20px 18px 14px;
  transform: translateY(0) scale(1);
  transition: transform .18s ease;
  font: 14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.mm-modal__icon{ font-size: 22px; line-height: 1; margin-bottom: 6px; }
.mm-modal__title{ font-weight: 700; font-size: 16px; margin: 4px 0 6px; }
.mm-modal__text{ opacity: .9; margin: 0 0 12px; }

.mm-modal__btns{
  display: flex; gap: .5rem; justify-content: flex-end;
}
.mm-btn{
  cursor: pointer;
  border-radius: 12px;
  padding: .52rem .9rem;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  font: 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.mm-btn:active{ transform: translateY(1px); }
.mm-btn--primary{
  background: #fff; color: #111; border-color: #fff;
}

/* Центрируем содержимое модального окна */
.mm-modal{
  display:flex !important;         /* перебиваем возможную grid-раскладку */
  flex-direction:column;
  align-items:center;              /* по центру по горизонтали */
  text-align:center;               /* центр текста */
}

.mm-modal__icon{
  margin: 0 auto .5rem;            /* иконка по центру */
}

.mm-modal__title{
  text-align:center;
}

.mm-modal__text{
  text-align:center;
}

.mm-modal__btns{
  width:100%;
  display:flex;
  justify-content:center;          /* центруем кнопки */
  gap:.5rem;
}

.mm-modal-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px}
.mm-modal{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;margin:0 auto!important;width:min(92vw,560px);box-sizing:border-box}


.mistakes-preview{
  cursor:pointer;
  font-size:18px;
  opacity:.8;
  transition:transform .1s ease, opacity .1s ease;
}
.mistakes-preview:hover{
  transform:scale(1.15);
  opacity:1;
}
/* опционально: .mistakes-delete сделать pointer */
.mistakes-delete{ cursor:pointer; }
/* ========================= Конец файла: theme.dark.css ========================= */