/* =====================================================================
   Стиль кнопок (Настройки → Оформление → Кнопки). Работает поверх любого
   оформления: цвета берутся из оформления, а форма, объём и поведение — отсюда.
   :not(#_) поднимает приоритет, чтобы выбор пользователя был важнее
   стандартных кнопок оформления. «auto» — как задумано в оформлении.

   Группы кнопок:
     главные      — .next-btn .reveal-btn .plan-buy-btn
     второстепенные — .mini-btn .choice-btn .quick-btn .tab-btn .lessons-tab
     варианты ответа — .quiz-option .tile
     шапка        — .partner-btn .coins-pill .sub-pill .streak-pill
   ===================================================================== */

/* Отклик на нажатие — для всех стилей */
:is(.next-btn, .reveal-btn, .plan-buy-btn, .mini-btn, .choice-btn, .quick-btn, .tab-btn, .lessons-tab, .quiz-option, .tile, .partner-btn, .coins-pill, .sub-pill, .streak-pill) {
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, filter .15s ease;
}
:is(.next-btn, .reveal-btn, .plan-buy-btn, .mini-btn, .choice-btn, .quick-btn, .partner-btn, .coins-pill, .sub-pill, .streak-pill):active { transform: scale(.96); }
:is(.next-btn, .reveal-btn, .plan-buy-btn, .mini-btn, .choice-btn, .quick-btn, .tab-btn, .quiz-option):focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

/* Кнопки-варианты не наследуют цвет текста в браузере — задаём явно (иначе в тёмных
   оформлениях текст ответа был тёмным на тёмном) */
button:is(.quiz-option, .choice-btn, .quick-btn, .tile, .tab-btn, .lessons-tab):not(.selected):not(.active) { color: var(--ink); }

/* Главная кнопка урока заметнее остальных и в «авто» */
.next-btn { font-weight: 800; letter-spacing: .01em; }


/* ---------------------------------------------------------------- Объёмные
   Как настоящие клавиши: толстая нижняя грань, при нажатии «проваливаются». */
:is(html[data-btn="3d"], .btn-demo[data-btn="3d"]):not(#_) :is(.next-btn, .reveal-btn, .plan-buy-btn) {
  border: none; border-radius: 16px;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--coral) 60%, #000);
}
:is(html[data-btn="3d"], .btn-demo[data-btn="3d"]):not(#_) :is(.reveal-btn, .plan-buy-btn) { box-shadow: 0 5px 0 color-mix(in srgb, var(--indigo) 60%, #000); }
:is(html[data-btn="3d"], .btn-demo[data-btn="3d"]):not(#_) :is(.next-btn, .reveal-btn, .plan-buy-btn):active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--coral) 60%, #000); }
:is(html[data-btn="3d"], .btn-demo[data-btn="3d"]):not(#_) :is(.mini-btn, .choice-btn, .quick-btn, .quiz-option, .tile, .tab-btn) {
  border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 14px;
}
:is(html[data-btn="3d"], .btn-demo[data-btn="3d"]):not(#_) :is(.mini-btn, .choice-btn, .quick-btn, .quiz-option, .tile):active { transform: translateY(2px); border-bottom-width: 2px; }
:is(html[data-btn="3d"], .btn-demo[data-btn="3d"]):not(#_) :is(.partner-btn, .coins-pill, .sub-pill, .streak-pill) { border-bottom-width: 3px; }


/* ---------------------------------------------------------------- Капсулы
   Полностью круглые края, побольше воздуха — мягко и дружелюбно. */
:is(html[data-btn="pill"], .btn-demo[data-btn="pill"]):not(#_) :is(.next-btn, .reveal-btn, .plan-buy-btn) {
  border-radius: 999px; padding-top: 15px; padding-bottom: 15px; box-shadow: 0 6px 18px color-mix(in srgb, var(--coral) 30%, transparent);
}
:is(html[data-btn="pill"], .btn-demo[data-btn="pill"]):not(#_) :is(.reveal-btn, .plan-buy-btn) { box-shadow: 0 6px 18px color-mix(in srgb, var(--indigo) 25%, transparent); }
:is(html[data-btn="pill"], .btn-demo[data-btn="pill"]):not(#_) :is(.mini-btn, .choice-btn, .quick-btn, .quiz-option, .tile, .tab-btn, .lessons-tab) { border-radius: 999px; }
:is(html[data-btn="pill"], .btn-demo[data-btn="pill"]):not(#_) .quiz-option { padding-left: 20px; }


/* ---------------------------------------------------------------- Контурные
   Только рамка и цвет текста, без заливки — лёгкий, «журнальный» вид. */
:is(html[data-btn="outline"], .btn-demo[data-btn="outline"]):not(#_) .next-btn {
  background: transparent; color: var(--coral); border: 2px solid var(--coral); box-shadow: none; border-radius: 12px;
}
:is(html[data-btn="outline"], .btn-demo[data-btn="outline"]):not(#_) :is(.reveal-btn, .plan-buy-btn) {
  background: transparent; color: var(--indigo); border: 2px solid var(--indigo); box-shadow: none; border-radius: 12px;
}
:is(html[data-btn="outline"], .btn-demo[data-btn="outline"]):not(#_) :is(.next-btn, .reveal-btn, .plan-buy-btn):active { background: color-mix(in srgb, currentColor 12%, transparent); }
:is(html[data-btn="outline"], .btn-demo[data-btn="outline"]):not(#_) :is(.mini-btn, .choice-btn, .quick-btn, .quiz-option, .tile) {
  background: transparent; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); box-shadow: none;
}
:is(html[data-btn="outline"], .btn-demo[data-btn="outline"]):not(#_) .choice-btn.selected { background: transparent; color: var(--indigo); border-color: var(--indigo); border-width: 2px; }
:is(html[data-btn="outline"], .btn-demo[data-btn="outline"]):not(#_) :is(.partner-btn, .coins-pill, .sub-pill, .streak-pill) { background: transparent; }


/* ---------------------------------------------------------------- Градиент
   Сочный перелив из акцентного цвета оформления в основной, со свечением. */
:is(html[data-btn="gradient"], .btn-demo[data-btn="gradient"]):not(#_) :is(.next-btn, .reveal-btn, .plan-buy-btn) {
  background: linear-gradient(120deg, var(--coral), color-mix(in srgb, var(--coral) 45%, var(--indigo)) 55%, var(--indigo));
  background-size: 160% 100%; background-position: 0% 50%;
  color: #fff; border: none; border-radius: 16px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--coral) 35%, transparent);
  transition: background-position .4s ease, transform .12s ease;
}
:is(html[data-btn="gradient"], .btn-demo[data-btn="gradient"]):not(#_) :is(.next-btn, .reveal-btn, .plan-buy-btn):hover { background-position: 100% 50%; }
:is(html[data-btn="gradient"], .btn-demo[data-btn="gradient"]):not(#_) .choice-btn.selected,
:is(html[data-btn="gradient"], .btn-demo[data-btn="gradient"]):not(#_) .lessons-tab.active,
:is(html[data-btn="gradient"], .btn-demo[data-btn="gradient"]):not(#_) .tab-btn.active {
  background: linear-gradient(120deg, var(--coral), var(--indigo)); color: #fff; border-color: transparent;
}
:is(html[data-btn="gradient"], .btn-demo[data-btn="gradient"]):not(#_) :is(.mini-btn, .choice-btn, .quick-btn, .quiz-option, .tile) { border-radius: 14px; }


/* ---------------------------------------------------------------- Стекло
   Полупрозрачные, с размытием фона — красиво на «Акварели», «Неоне», «Полночи». */
:is(html[data-btn="glass"], .btn-demo[data-btn="glass"]):not(#_) :is(.next-btn, .reveal-btn, .plan-buy-btn) {
  background: color-mix(in srgb, var(--coral) 72%, transparent);
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 18px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 24px rgba(0, 0, 0, .12);
}
:is(html[data-btn="glass"], .btn-demo[data-btn="glass"]):not(#_) :is(.reveal-btn, .plan-buy-btn) { background: color-mix(in srgb, var(--indigo) 70%, transparent); }
:is(html[data-btn="glass"], .btn-demo[data-btn="glass"]):not(#_) :is(.mini-btn, .choice-btn, .quick-btn, .quiz-option, .tile, .partner-btn, .coins-pill, .sub-pill, .streak-pill) {
  background: color-mix(in srgb, var(--card) 55%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}


/* ---------------------------------------------------------------- Чёткие
   Квадратные углы, крупные буквы, жирный шрифт — строго и контрастно. */
:is(html[data-btn="sharp"], .btn-demo[data-btn="sharp"]):not(#_) :is(.next-btn, .reveal-btn, .plan-buy-btn) {
  border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; font-weight: 900; box-shadow: none; border: none;
}
:is(html[data-btn="sharp"], .btn-demo[data-btn="sharp"]):not(#_) :is(.mini-btn, .choice-btn, .quick-btn, .quiz-option, .tile, .tab-btn, .lessons-tab, .partner-btn, .coins-pill, .sub-pill, .streak-pill) {
  border-radius: 2px; box-shadow: none;
}
:is(html[data-btn="sharp"], .btn-demo[data-btn="sharp"]):not(#_) .quiz-option { border-left: 4px solid var(--indigo); }
:is(html[data-btn="sharp"], .btn-demo[data-btn="sharp"]):not(#_) .quiz-option.correct { border-left-color: var(--sage); }
:is(html[data-btn="sharp"], .btn-demo[data-btn="sharp"]):not(#_) .quiz-option.wrong { border-left-color: var(--coral); }


/* ---------------------------------------------------------------- превью в настройках */
.btn-style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.btn-demo { border: 2px solid var(--line); border-radius: 14px; padding: 10px; background: var(--paper); cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.btn-demo.active { border-color: var(--coral); }
.btn-demo .next-btn { margin: 0 0 8px; padding: 9px; font-size: 13px; pointer-events: none; }
.btn-demo .demo-row { display: flex; gap: 6px; pointer-events: none; }
.btn-demo .demo-row .choice-btn { padding: 5px 9px; font-size: 12px; }
.btn-demo .demo-name { font-size: 12px; font-weight: 700; margin-top: 8px; display: flex; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  :is(.next-btn, .reveal-btn, .plan-buy-btn, .mini-btn, .choice-btn, .quick-btn, .quiz-option, .tile):active { transform: none; }
}

/* Стекло: выбранная кнопка должна выделяться цветом */
:is(html[data-btn="glass"], .btn-demo[data-btn="glass"]):not(#_) :is(.choice-btn.selected, .lessons-tab.active, .tab-btn.active) {
  background: color-mix(in srgb, var(--indigo) 72%, transparent); color: #fff;
}