/* ===== SELECT_FILL: Пропуски ===== */

.select-fill-input {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 2px dashed #2196f3 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  vertical-align: middle !important;
  min-width: 28px !important;
  position: relative !important;
  padding: 4px 8px;
  color: #6c757d;
  font-weight: 500;
}

.select-fill-input:hover {
  background: #e3f2fd !important;
  border-color: #1976d2 !important;
}

/* Когда значение выбрано */
.select-fill-input.select-fill-filled {
  border-style: solid !important;
  border-color: #2196f3 !important;
  background: #fff !important;
  color: #212529;
}

/* ===== Состояния проверки ===== */

.select-fill-input.sf-correct {
  border-color: #198754 !important;
  background-color: #d1e7dd !important;
  color: #0f5132 !important;
}



.select-fill-input.sf-wrong {
  border-color: #dc3545 !important;
  background-color: #f8d7da !important;
  color: #842029 !important;
  animation: sf-shake 0.5s ease-in-out;
}

.fcfb-popup .select-fill-input {
 border-style: solid !important;
  border-color: #2196f3 !important;
  background: #fff !important;
  background-color: rgb(255, 255, 255);
  color: #212529;
}


/* Анимация тряски при ошибке */
@keyframes sf-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* Анимация успеха (волна) */
.sf-success-pop {
  animation: sf-pop 0.5s ease;
}

@keyframes sf-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 16px rgba(25, 135, 84, 0.5); }
  100% { transform: scale(1); }
}

/* Тряска всего контейнера при общей ошибке */
.sf-area-shake {
  animation: sf-area-shake 0.4s ease-in-out;
}

@keyframes sf-area-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Деактивация после успеха */
.sf-disabled .select-fill-input {
  cursor: default !important;
  pointer-events: none;
}

/* ===== Попап выбора ===== */

.select-fill-popup-title {
  text-align: center;
  margin-top: 10px;
  font-size: 22px;
  font-weight: 600;
  color: #333;
}

.select-fill-popup-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 24px;
  justify-content: center;
  padding: 0 10px;
}

.select-fill-opt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid #2196f3;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.1rem;
}

.select-fill-opt-btn:hover {
  background: #e3f2fd;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.25);
}

.select-fill-opt-btn:active {
  transform: translateY(0);
}

/* Для картинок в опциях */
.select-fill-opt-btn img {
  max-width: 100px;
  max-height: 80px;
  object-fit: contain;
}

/* Активный вариант (уже выбран) */
.select-fill-opt-btn-active {
  background: #e3f2fd;
  border-color: #1565c0;
  box-shadow: inset 0 0 0 2px #1565c0;
}



/* Placeholder через псевдоэлемент */
/* Placeholder когда элемент пустой */
.select-fill-input:empty::before {
  content: attr(data-placeholder);
  color: #6c757d;
}

 





/* =========replace============ */




/* ===== REPLACE: Поля ввода ===== */

.replace-input {
  border: 2px dashed #2196f3 !important;
  padding: 0 4px !important;
  font-size: inherit !important;
  text-align: center;
  border-radius: 6px !important;
  outline: none !important;
  background: #fff;
  transition: all 0.2s ease;
}

.replace-input:focus {
  border: 2px solid #2196f3 !important;
  background: #f0f7ff;
}

/* Состояния проверки */
.replace-input.rp-correct {
  border-color: #198754 !important;
  background-color: #d1e7dd !important;
  color: #0f5132 !important;
}

.replace-input.rp-wrong {
  border-color: #dc3545 !important;
  background-color: #f8d7da !important;
  color: #842029 !important;
  animation: rp-shake 0.5s ease-in-out;
}

/* Анимация тряски при ошибке */
@keyframes rp-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Анимация успеха (волна) */
.rp-success-pop {
  animation: rp-pop 0.5s ease;
}

@keyframes rp-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); box-shadow: 0 0 12px rgba(25, 135, 84, 0.5); }
  100% { transform: scale(1); }
}

/* Тряска всего контейнера при общей ошибке */
.rp-area-shake {
  animation: rp-area-shake 0.4s ease-in-out;
}

@keyframes rp-area-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Деактивация после успеха */
.rp-disabled .replace-input {
  pointer-events: none;
  opacity: 0.9;
}






/* ======== error (find & fix) ======== */




/* Подсветка кликабельных (если задан error-input-bg) */
.task-error .error-input-bg {
  background: #e3f2fd;
  border-radius: 6px;
  padding: 0 6px; 
  transition: all 0.2s ease;  
  cursor: pointer;
}

/* Для текста без bg: только на hover */
.task-error .error-input-bg:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Анимация успеха — pop с зелёным glow (временная) */
.task-error .er-success-pop {
  animation: er-pop 0.5s ease;
}

@keyframes er-pop {
  0% { transform: scale(1); }
  50% { 
    transform: scale(1.1); 
    box-shadow: 0 0 12px rgba(25, 135, 84, 0.5);
    background-color: #d1e7dd;
    border-radius: 6px;
  }
  100% { transform: scale(1); }
}

/* Тряска всего контейнера при ошибке */
.task-error .er-area-shake {
  animation: er-area-shake 0.4s ease-in-out;
}

@keyframes er-area-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Деактивация после успеха */
.task-error.er-disabled .error-input {
  pointer-events: none;
  opacity: 0.9;
}




.error-edit-field {
  border: 1px solid #ddd;
  width: 100%;
  padding: 10px;
  margin-top: 10px
}

.error-edit-btn {
  border: none;
  border-radius: 4px;
  text-align: center;
  user-select: none;
  cursor: pointer;
  padding: 5px 15px;
  font-size: 15px;
  background: #62a9f4;
  color: white;
  display: table;
  margin-top: 20px
}





/* ===== highlight_parts ===== */


/* Легенда типов под контентом */
.hgp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
 
  padding:    1.5rem  ;
 
 
}
.preview-content .hgp-legend {
  padding-bottom: 0
}



.hgp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
 
}
 
.hgp-legend-color {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}

.hgp-legend-text {
  white-space: nowrap;
}

/* Попап выбора типа */
.hgp-popup {
  /*! max-width: 320px; */
  /*! width: 100%; */
  /*! display: block; */
}

.hgp-popup-title {
  font-size: 24px;
  margin-bottom: 18px;
  font-weight: 600;
}

.hgp-popup-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
 
}


.hgp-opt-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: #fff;
  cursor: pointer;
  padding: 8px 8px!important;;
  border-radius: 4px!important;;
  box-shadow: 0 0 0 2px #ddd;
  font-size: 18px!important;;
  text-align: left;
}

.hgp-opt-btn:hover {
  box-shadow: 0 0 0 2px #62a9f4;
}

.hgp-opt-btn-active {
  box-shadow: 0 0 0 2px #62a9f4;
}

.hgp-opt-color {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}

.hgp-opt-text {
  flex: 1;
}


/* =====  segments ===== */
 .hgp-segment{
  /*! display:inline-flex; */
  align-items:center;
  justify-content:center;
  min-width: 24px;
 
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}

 .hgp-segment:hover{
  background: rgba(13,110,253,.08);
  transform: translateY(-1px);
}

/* disabled after success */
.task-highlight_parts.hgp-disabled .hgp-segment{
  pointer-events:none;
  opacity:.9;
  cursor: default;
}

/* ===== wrong animation (temporary) ===== */
.task-highlight_parts .hgp-segment.hgp-wrong{
  animation: hgp-shake .35s ease;
}

@keyframes hgp-shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-5px); }
  40%{ transform: translateX(5px); }
  60%{ transform: translateX(-3px); }
  80%{ transform: translateX(3px); }
}




/* ===== preview: выключаем клики внутри попапа ===== */
.preview-content .task-highlight_parts,
.preview-content .hgp-segment{
  pointer-events:none !important;
  cursor: default !important;
}




 /* Success pulse — не ломает выбранный box-shadow */
.task-highlight_parts .hgp-segment.hgp-success {
  animation: hgp-success-pop 0.45s ease;
  filter: drop-shadow(0 0 10px rgba(25, 135, 84, 0.45));
}

@keyframes hgp-success-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}


 

/* ===== preview popup safety for geometry ===== */
#popup_trainer_preview .ttr-geometry{
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
  border-radius: 12px;
}
 





 


/* ===== click_target: targets ===== */
.task-click_target .ttr-ct-target{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  /*! height: 40px; */
  padding: 0 0px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* скрываем чекбокс, но оставляем логически */
.task-click_target .ttr-ct-checkbox{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* состояние выбора (до проверки) */
.task-click_target .ttr-ct-target.ttr-ct-selected{
  box-shadow: 0 0 0 2px #0d6efd;
  background: rgba(13,110,253,.08);
  z-index: 11111;
}

/* корректно (после проверки) */
.task-click_target .ttr-ct-target.ttr-ct-correct{
  box-shadow: 0 0 0 2px rgba(25,135,84,.85), 0 0 12px rgba(25,135,84,.25);
  background: rgba(25,135,84,.08);
}

/* неверно (flash) */
.task-click_target .ttr-ct-target.ttr-ct-wrong{
  box-shadow: 0 0 0 2px rgba(220,53,69,.70), 0 0 14px rgba(220,53,69,.40);
  background: rgba(220,53,69,.08);
  animation: ct-shake .35s ease;
}

@keyframes ct-shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-5px); }
  40%{ transform: translateX(5px); }
  60%{ transform: translateX(-3px); }
  80%{ transform: translateX(3px); }
}

 

/* тряска всей области при ошибке */
.task-click_target .ct-area-wrong{
  animation: ct-area-shake .4s ease;
  box-shadow: 0 0 0 3px rgba(220,53,69,.20);
}

@keyframes ct-area-shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
}

/* “волна успеха” — не ломает box-shadow выбора */
.task-click_target .ttr-ct-target.ct-success{
  animation: ct-pop .45s ease;
  filter: drop-shadow(0 0 10px rgba(25,135,84,.35));
}
@keyframes ct-pop{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.14); }
  100%{ transform: scale(1); }
}

/* disabled после успеха */
.task-click_target.ct-disabled .ttr-ct-target{
  pointer-events: none;
  cursor: default;
  opacity: .95;
}

/* preview popup: запрет кликов */
.preview-content .task-click_target,
.preview-content .task-click_target .ttr-ct-target{
  pointer-events: none !important;
  cursor: default !important;
}



















/* ════════════════════════════════════════════════════════════════════════════
   LONG DIVISION TRAINER STYLES
   Префикс: ldv- (long division)
════════════════════════════════════════════════════════════════════════════ */

/* ═══ ОСНОВНЫЕ КОНТЕЙНЕРЫ ═══ */
.ldv-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.ldv-grid-area {
    flex: 1;
    min-width: 200px;
}

.ldv-controls-area {
    flex: 1;
    min-width: 280px;
    max-width: 500px;
}





.ldv-control {
       display: flex;
   flex-direction: column;
    gap: 1rem;
     margin-bottom: 1rem;
}

/* ═══ ПАНЕЛЬ НАСТРОЕК ═══ */
.ldv-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.9rem;
    align-items: center;
 
}

.ldv-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ldv-input-group label {
    font-size: 0.95rem;
    color: #6c757d;
    white-space: nowrap;
}

.ldv-input-group input[type="text"] {
    width: 90px;
    
}

.ldv-input-group input[type="range"] {
    width: 100px;
}

 

/* ═══ ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМОВ ═══ */
.ldv-mode-switch {
    display: flex;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.ldv-mode-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.ldv-mode-btn:hover {
    background: #e9ecef;
}

.ldv-mode-btn.active {
    background: #0d6efd;
    color: white;
}

/* ═══ КНОПКИ ПРИМЕРОВ ═══ */
.ldv-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  
}

.ldv-example-btn {
    padding: 0.315rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #0d6efd;
    background: #e7f1ff;
    color: #0d6efd;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ldv-example-btn:hover {
    background: #0d6efd;
    color: white;
}

.ldv-example-btn.active {
    background: #0d6efd;
    color: white;
}

/* ═══ УВЕДОМЛЕНИЕ О КОНВЕРТАЦИИ ═══ */
.ldv-normalization {
    padding: 0.75rem 1rem;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    display: none;
}

.ldv-normalization.show {
    display: block;
}

.ldv-normalization strong {
    color: #856404;
}

/* ═══ ТАБЛИЦА ДЕЛЕНИЯ ═══ */
.ldv-division-table {
    border-collapse: collapse;
    /*! margin: 0 auto; */ 
}

.ldv-division-table td {
    width: 36px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    border: 1px solid #cfe2ff;
    font-size: 1.25rem;
     
    border: 1px solid #90caf9;
 
 
}

 
 


.ldv-division-table td.ldv-empty-cell {
    border-color: transparent;
}

.ldv-division-table td.ldv-active-cell {
    background: #e8f4ff;
    border-color: #90caf9;
}

td.ldv-result-cell {
     border-top: 2px solid #000!important;;
}
td.ldv-result-digit {
      border-top: 2px solid #000!important;;
}

/* Клетка ожидающая ввода */
.ldv-division-table td.ldv-awaiting {
    animation: ldv-pulse 1s infinite;
    background: #fff9c4;
}

@keyframes ldv-pulse {
    0%, 100% { background: #fff9c4; }
    50% { background: #ffeb3b; }
}

/* Уголок */
.ldv-corner-left {
    border-left: 2px solid #000000 !important;
}

.ldv-corner-bottom {
    border-bottom: 2px solid #000000 !important;
}

/* Подчёркивание */
.ldv-underline {
    border-bottom: 2px solid #000000 !important;
}

/* Результат */
.ldv-result-digit {
    color: #2e7d32;
    font-weight: bold;
}

/* Вычитаемое */
.ldv-subtracted {
    color: #555;
}

/* Добавленные нули */
.ldv-brought-down {
    color: #1565c0;
}

/* Ведущие нули */
.ldv-leading-zero {
    color: #9e9e9e;
}

/* Знак минус */
.ldv-minus-sign {
    position: absolute;
    top: 0px;
    left: 0;
    transform: translate(-100%, -50%);
    font-size: 1.25rem;
    line-height: 1;
    z-index: 10;
    color: #333;
    font-weight: bold;
}

/* Десятичная запятая */
.ldv-decimal-comma {
    position: absolute; 
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: #4d4a48;
    z-index: 10;
}

/* ═══ РЕЗУЛЬТАТ ═══ */
.ldv-result-box {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #e8f5e9;
    border-radius: 0.5rem;
    font-size: 1rem;
    border-left: 4px solid #4caf50;
}

.ldv-result-box.ldv-has-remainder {
    background: #fff8e1;
    border-left-color: #ff9800;
}

.ldv-result-box .ldv-remainder-label {
    color: #e65100;
    font-weight: bold;
}

 
 

 

/* ═══ ПАНЕЛЬ ТРЕНИРОВКИ ═══ */


.ldv-training-step {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.ldv-training-hint {
    font-size: 1rem;
    color: #0d6efd;
    margin-bottom: 0.75rem;
    min-height: 1.5rem;
}

.ldv-training-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ldv-training-input {
    width: 50px;
 
}

.ldv-training-input:focus {
    outline: none;
    border-color: #0a58ca;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.ldv-training-input[disabled] {
   background: #ebebeb;
} 

.ldv-attempts-counter {
    font-size: 0.8rem;
    color: #6c757d;
}

.ldv-answer-reveal {
    font-size: 0.9rem;
    color: #dc3545;
    font-weight: bold;
    display: none;
}

.ldv-answer-reveal.show {
    display: block;
}

/* ═══ ПАНЕЛЬ ДЕМОНСТРАЦИИ ═══ */
.ldv-demo-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.ldv-speed-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ldv-speed-control label {
    font-size: 0.95rem;
    color: #6c757d;
}

.ldv-speed-control input[type="range"] {
    width: 120px;
}
 
/* В CSS добавить: */
.ldv-step {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ldv-step.ldv-visible {
    opacity: 1;
}





/* Подчёркивание */
.ldv-underline {
    border-bottom: 2px solid #333 !important;
}


/* Активная клетка (видимая) */
.ldv-active-cell {
    background: #f8f9fa;
  
}

/* Клетка для результата */
.ldv-result-cell {
    background: #e8f5e9;
}

/* Клетка для вычислений */
.ldv-work-cell {
    background: #fff;
}

/* Ожидающая ввода */
.ldv-awaiting {
    animation: ldv-pulse 0.8s infinite;
}

@keyframes ldv-pulse {
    0%, 100% { background: #fff9c4; }
    50% { background: #ffeb3b; }
}






 
/* Стили подсказок */
.ldv-hint-confident {
    color: #0d6efd;
    font-weight: 500;
}

.ldv-hint-uncertain {
    color: #fd7e14;
    font-style: italic;
}

/* Анимация появления подсказки */
.ldv-training-hint {
    transition: all 0.3s ease;
}



 
/* ═══ АДАПТИВНОСТЬ ═══ */
@media (max-width: 768px) {
    .ldv-container {
        flex-direction: column;
    }
    
    .ldv-controls-area { 
        max-width: 100%;
    }
    
    .ldv-division-table td {
        width: 28px;
        height: 36px;
        font-size: 1rem;
    }
}



/* ════════════════════════════════════════════════════════════════════════════
   LONG MULTIPLICATION TRAINER STYLES
   Префикс: lmt- (long multiplication trainer)
════════════════════════════════════════════════════════════════════════════ */

/* ═══ ОСНОВНЫЕ КОНТЕЙНЕРЫ ═══ */
.lmt-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.lmt-grid-area {
    flex: 1;
    min-width: 200px;
}

.lmt-controls-area {
    flex: 1;
    min-width: 280px;
    max-width: 500px;
}

.lmt-control {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ═══ ПАНЕЛЬ НАСТРОЕК ═══ */
.lmt-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.9rem;
    align-items: center;
}

.lmt-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lmt-input-group label {
    font-size: 0.95rem;
    color: #6c757d;
    white-space: nowrap;
}

.lmt-input-group input[type="text"] {
    width: 100px;
}

.lmt-input-group input[type="range"] {
    width: 100px;
}

/* ═══ ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМОВ ═══ */
.lmt-mode-switch {
    display: flex;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.lmt-mode-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.lmt-mode-btn:hover {
    background: #e9ecef;
}

.lmt-mode-btn.active {
    background: #0d6efd;
    color: white;
}

/* ═══ КНОПКИ ПРИМЕРОВ ═══ */
.lmt-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lmt-example-btn {
    padding: 0.315rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #0d6efd;
    background: #e7f1ff;
    color: #0d6efd;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.lmt-example-btn:hover {
    background: #0d6efd;
    color: white;
}

.lmt-example-btn.active {
    background: #0d6efd;
    color: white;
}




/* ═══ ТАБЛИЦА УМНОЖЕНИЯ ═══ */
.lmt-table {
    border-collapse: collapse;
}

.lmt-table td { 
    width: 36px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    font-size: 1.25rem;
    border: 1px solid #90caf9;
}

  

.lmt-table td.lmt-cell {
    background: #f8f9fa;
    border: 1px solid #90caf9;
}

/* Ожидающая ввода клетка */
.lmt-table td.lmt-awaiting {
    animation: lmt-pulse 1s infinite;
    background: #fff9c4;
}

@keyframes lmt-pulse {
    0%, 100% { background: #fff9c4; }
    50% { background: #ffeb3b; }
}

/* Подчёркивание */
.lmt-underline {
    border-bottom: 2px solid #000 !important;
}

/* Знак умножения */
.lmt-times {
    font-weight: bold;
    color: #333;
}

.lmt-times-symbol {
    position: relative;
    top: -19px;
    font-weight: bold;
    color: #333;
}
/* Частичные произведения */
.lmt-partial {
    color: #1565c0;
}

/* Итоговый результат */
.lmt-product {
    color: #2e7d32;
    font-weight: bold;
}

/* Десятичная запятая */
.lmt-comma {
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: #4d4a48;
    z-index: 10;
}

/* ═══ РЕЗУЛЬТАТ ═══ */
.lmt-result-box {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #e8f5e9;
    border-radius: 0.5rem;
    font-size: 1rem;
    border-left: 4px solid #4caf50;
}

/* ═══ ПАНЕЛЬ ТРЕНИРОВКИ ═══ */
.lmt-train-step {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.lmt-hint {
    font-size: 1rem;
    color: #0d6efd;
    margin-bottom: 0.75rem;
    min-height: 1.5rem;
    transition: all 0.3s ease;
}

.lmt-train-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.lmt-input {
    width: 50px;
}

.lmt-input:focus {
    outline: none;
    border-color: #0a58ca;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.lmt-input[disabled] {
    background: #ebebeb;
}

.lmt-attempts {
    font-size: 0.8rem;
    color: #6c757d;
}

.lmt-answer-reveal {
    font-size: 0.9rem;
    color: #dc3545;
    font-weight: bold;
    display: none;
}

.lmt-answer-reveal.show {
    display: block;
}

/* ═══ ПАНЕЛЬ ДЕМОНСТРАЦИИ ═══ */
.lmt-demo-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.lmt-speed-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lmt-speed-control label {
    font-size: 0.95rem;
    color: #6c757d;
}

.lmt-speed-control input[type="range"] {
    width: 120px;
}

/* Стили подсказок */
.lmt-hint-ok {
    color: #0d6efd;
    font-weight: 500;
}

.lmt-hint-warn {
    color: #fd7e14;
    font-style: italic;
}


 

/* ═══ АДАПТИВНОСТЬ ═══ */
@media (max-width: 768px) {
    .lmt-container {
        flex-direction: column;
    }
    
    .lmt-controls-area {
        max-width: 100%;
    }
    
    .lmt-table td {
        width: 28px;
        height: 36px;
        font-size: 1rem;
    }
}








/* ════════════════════════════════════════════════════════════════════════════
   COLUMN ADDITION TRAINER STYLES
   Префикс: cadd- (column addition)
════════════════════════════════════════════════════════════════════════════ */

/* ═══ ОСНОВНЫЕ КОНТЕЙНЕРЫ ═══ */
.cadd-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.cadd-grid-area {
    flex: 1;
    min-width: 200px;
}

.cadd-controls-area {
    flex: 1;
    min-width: 280px;
    max-width: 500px;
}

.cadd-control {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ═══ ПАНЕЛЬ НАСТРОЕК ═══ */
.cadd-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.9rem;
    align-items: center;
}

.cadd-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cadd-input-group label {
    font-size: 0.95rem;
    color: #6c757d;
    white-space: nowrap;
}

.cadd-input-group input[type="text"] {
    width: 100px;
}

.cadd-input-group input[type="range"] {
    width: 100px;
}

/* ═══ ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМОВ ═══ */
.cadd-mode-switch {
    display: flex;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.cadd-mode-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.cadd-mode-btn:hover {
    background: #e9ecef;
}

.cadd-mode-btn.active {
    background: #0d6efd;
    color: white;
}

/* ═══ КНОПКИ ПРИМЕРОВ ═══ */
.cadd-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cadd-example-btn {
    padding: 0.315rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #0d6efd;
    background: #e7f1ff;
    color: #0d6efd;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cadd-example-btn:hover {
    background: #0d6efd;
    color: white;
}

.cadd-example-btn.active {
    background: #0d6efd;
    color: white;
}

/* ═══ ТАБЛИЦА СЛОЖЕНИЯ ═══ */
.cadd-table {
    border-collapse: collapse;
}

.cadd-table td {
    width: 36px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    font-size: 1.25rem;
    border: 1px solid #90caf9;
}

.cadd-table td.cadd-cell {
    background: #f8f9fa;
    border: 1px solid #90caf9;
}

/* Ожидающая ввода клетка */
.cadd-table td.cadd-awaiting {
    animation: cadd-pulse 1s infinite;
    background: #fff9c4;
}

@keyframes cadd-pulse {
    0%, 100% { background: #fff9c4; }
    50% { background: #ffeb3b; }
}

/* Подчёркивание */
.cadd-underline {
    border-bottom: 2px solid #000 !important;
}

/* Знак сложения */
.cadd-plus {
    font-weight: bold;
    color: #333;
}

.cadd-plus-symbol {
    position: relative;
    top: -19px;
    font-weight: bold;
    color: #333;
}

/* Итоговый результат */
.cadd-sum {
    color: #2e7d32;
    font-weight: bold;
}

/* Десятичная запятая */
.cadd-comma {
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: #4d4a48;
    z-index: 10;
}

/* ═══ РЕЗУЛЬТАТ ═══ */
.cadd-result-box {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #e8f5e9;
    border-radius: 0.5rem;
    font-size: 1rem;
    border-left: 4px solid #4caf50;
}

/* ═══ ПАНЕЛЬ ТРЕНИРОВКИ ═══ */
.cadd-train-step {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.cadd-hint {
    font-size: 1rem;
    color: #0d6efd;
    margin-bottom: 0.75rem;
    min-height: 1.5rem;
    transition: all 0.3s ease;
}

.cadd-train-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.cadd-input {
    width: 50px;
}

.cadd-input:focus {
    outline: none;
    border-color: #0a58ca;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.cadd-input[disabled] {
    background: #ebebeb;
}

.cadd-attempts {
    font-size: 0.8rem;
    color: #6c757d;
}

.cadd-answer-reveal {
    font-size: 0.9rem;
    color: #dc3545;
    font-weight: bold;
    display: none;
}

.cadd-answer-reveal.show {
    display: block;
}

/* ═══ ПАНЕЛЬ ДЕМОНСТРАЦИИ ═══ */
.cadd-demo-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.cadd-speed-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cadd-speed-control label {
    font-size: 0.95rem;
    color: #6c757d;
}

.cadd-speed-control input[type="range"] {
    width: 120px;
}

/* Стили подсказок */
.cadd-hint-ok {
    color: #0d6efd;
    font-weight: 500;
}

.cadd-hint-warn {
    color: #fd7e14;
    font-style: italic;
}


/* ═══ УВЕДОМЛЕНИЕ О КОНВЕРТАЦИИ ═══ */
.cadd-normalization {
    padding: 0.75rem 1rem;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    display: none;
}

.cadd-normalization.show {
    display: block;
}

.cadd-normalization strong {
    color: #856404;
}


/* ═══ АДАПТИВНОСТЬ ═══ */
@media (max-width: 768px) {
    .cadd-container {
        flex-direction: column;
    }
    
    .cadd-controls-area {
        max-width: 100%;
    }
    
    .cadd-table td {
        width: 28px;
        height: 36px;
        font-size: 1rem;
    }
}




















/* ════════════════════════════════════════════════════════════════════════════
   COLUMN SUBTRACTION TRAINER STYLES
   Префикс: cst- (column subtraction)
════════════════════════════════════════════════════════════════════════════ */

/* ═══ ОСНОВНЫЕ КОНТЕЙНЕРЫ ═══ */
.cst-container { display:flex; flex-wrap:wrap; gap:1.5rem; }
.cst-grid-area { flex:1; min-width:200px; }
.cst-controls-area { flex:1; min-width:280px; max-width:500px; }

.cst-control { display:flex; flex-direction:column; gap:1rem; margin-bottom:1rem; }

/* ═══ ПАНЕЛЬ НАСТРОЕК ═══ */
.cst-settings { display:flex; flex-wrap:wrap; gap:0.75rem 1.9rem; align-items:center; }
.cst-input-group { display:flex; align-items:center; gap:0.5rem; }
.cst-input-group label { font-size:0.95rem; color:#6c757d; white-space:nowrap; }
.cst-input-group input[type="text"] { width:110px; }

/* ═══ ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМОВ ═══ */
.cst-mode-switch { display:flex; border-radius:0.5rem; overflow:hidden; border:1px solid #dee2e6; }
.cst-mode-btn { padding:0.5rem 1rem; border:none; background:#f8f9fa; cursor:pointer; font-size:0.95rem; transition:all .2s; }
.cst-mode-btn:hover { background:#e9ecef; }
.cst-mode-btn.active { background:#0d6efd; color:#fff; }

/* ═══ КНОПКИ ПРИМЕРОВ ═══ */
.cst-examples { display:flex; flex-wrap:wrap; gap:0.5rem; }
.cst-example-btn {
  padding:0.315rem 0.75rem; font-size:0.9rem;
  border:1px solid #0d6efd; background:#e7f1ff; color:#0d6efd;
  border-radius:2rem; cursor:pointer; transition:all .2s;
}
.cst-example-btn:hover { background:#0d6efd; color:#fff; }
.cst-example-btn.active { background:#0d6efd; color:#fff; }

/* ═══ УВЕДОМЛЕНИЕ О ВЫРАВНИВАНИИ ═══ */
.cst-normalization {
  padding:0.75rem 1rem;
  background:#fff3cd;
  border-left:4px solid #ffc107;
  border-radius:0.5rem;
  margin-bottom:1rem;
  font-size:0.85rem;
  display:none;
}
.cst-normalization.show { display:block; }
.cst-normalization strong { color:#856404; }

/* ═══ ТАБЛИЦА ═══ */
.cst-table { border-collapse:collapse; }
.cst-table td {
  width:36px; height:36px;
  text-align:center; vertical-align:middle;
  position:relative;
  font-size:1.25rem;
  border:1px solid #90caf9;
}
.cst-table td.cst-cell { background:#f8f9fa; border:1px solid #90caf9; }

.cst-table td.cst-awaiting { animation:cst-pulse 1s infinite; background:#fff9c4; }
@keyframes cst-pulse { 0%,100%{background:#fff9c4;} 50%{background:#ffeb3b;} }

.cst-underline { border-bottom:2px solid #000 !important; }

/* знак минус */
.cst-minus { font-weight:700; color:#333; }
.cst-minus-symbol { position:relative; top:-19px; font-weight:700; color:#333; }

/* результат */
.cst-diff { color:#2e7d32; font-weight:700; }

/* запятая */
.cst-comma {
  position:absolute; top:50%; right:-4px;
  transform:translateY(-50%);
  font-size:1.5rem; font-weight:700;
  color:#4d4a48; z-index:10;
}

/* результат-блок */
.cst-result-box {
  margin-top:1rem;
  padding:0.75rem 1rem;
  background:#e8f5e9;
  border-radius:0.5rem;
  font-size:1rem;
  border-left:4px solid #4caf50;
}

/* тренировка */
.cst-train-step { font-size:0.85rem; color:#6c757d; margin-bottom:0.5rem; font-weight:700; }
.cst-hint { font-size:1rem; color:#0d6efd; margin-bottom:0.75rem; min-height:1.5rem; transition:all .3s ease; }
.cst-train-input-group { display:flex; gap:0.5rem; align-items:center; }
.cst-input { width:50px; }
.cst-input:focus { outline:none; border-color:#0a58ca; box-shadow:0 0 0 3px rgba(13,110,253,.25); }
.cst-input[disabled] { background:#ebebeb; }
.cst-attempts { font-size:0.8rem; color:#6c757d; }

.cst-answer-reveal { font-size:0.9rem; color:#dc3545; font-weight:700; display:none; }
.cst-answer-reveal.show { display:block; }

/* демо */
.cst-demo-panel { display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; }
.cst-speed-control { display:flex; align-items:center; gap:0.5rem; }
.cst-speed-control label { font-size:0.95rem; color:#6c757d; }
.cst-speed-control input[type="range"] { width:120px; }

.cst-hint-ok { color:#0d6efd; font-weight:500; }
.cst-hint-warn { color:#fd7e14; font-style:italic; }

/* адаптив */
@media (max-width:768px){
  .cst-container{ flex-direction:column; }
  .cst-controls-area{ max-width:100%; }
  .cst-table td{ width:28px; height:36px; font-size:1rem; }
}












/* Прогресс */
.tquiz-progress {
    height: 12px;
    background: #f0f0f0;
    border-radius: 3px;
    margin-bottom: 45px;
    overflow: hidden;
}
.tquiz-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #9BC1FB, #4D96FF);
    transition: width 0.4s ease;
}


/* Центрирование контента */
.task-quiz  .task-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	min-height: 350px;
	
}

.tquiz-content {
    width: 100%;
    animation: tquiz-fadeIn 0.4s ease;
}



@keyframes tquiz-fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Визуал */
.tquiz-visual {
    text-align: center;
    margin-bottom: 25px;
}
.tquiz-visual-emoji {
    font-size: 3rem;
}

/* Вопрос */
.tquiz-question {
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
}

/* Варианты */
.tquiz-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Карточка */
.tquiz-card {
    cursor: pointer;
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 11px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 120px;
    text-align: center;
    transition: all 0.2s;
}
.tquiz-card:hover {
    border-color: #adb5bd;
    transform: translateY(-2px);
}
.tquiz-card input { display: none; }
.tquiz-card.selected {
    border-color: #0d6efd;
    background: #e7f1ff;
    color: #0d6efd;
}
.tquiz-card.correct {
    border-color: #198754 !important;
    background: #d1e7dd !important;
    color: #0f5132 !important;
}
.tquiz-card.wrong {
    border-color: #dc3545 !important;
    background: #f8d7da !important;
    animation: tquiz-shake 0.4s;
}

/* Инпут */
.tquiz-input {
    font-size: 1.5rem;
    
    text-align: center;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    max-width: 250px;
    width: 100%;
    transition: all 0.2s;
}
 
.tquiz-input.correct {
    border-color: #198754 !important;
    background: #d1e7dd !important;
    color: #0f5132 !important;
}
.tquiz-input.wrong {
    border-color: #dc3545;
    background: #f8d7da;
    animation: tquiz-shake 0.4s;
}

/* Финиш */
.tquiz-finish {
    text-align: center;
    padding: 30px;
    animation: tquiz-fadeIn 0.5s ease;
}


 

/* Шаг X из Y */
.tquiz-step-info {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 8px;
    text-align: center;
}

/* Анимация "выбери ответ" */
@keyframes tquiz-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.tquiz-options.pulse .tquiz-card,
.tquiz-options.pulse .tquiz-input {
    animation: tquiz-pulse 0.3s ease 2;
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.3);
}









/* Чтобы JSXGraph не растягивался */
.task-quiz .ttr-geometry {
    aspect-ratio: 4 / 3;
    height: auto !important;
    max-height: 250px;
}


@keyframes tquiz-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@media (max-width: 576px) {
    .tquiz-card { width: 100%; }
    .tquiz-visual-emoji { font-size: 3rem; }
}







 





/* ===== SEQUENCING: Контейнер ===== */
.sequencing-items {
	border-top: 3px solid #E1E8EF;
  background: #fff;
  padding: 20px;
	
    display: flex;
    flex-direction: column;
    gap: 10px;
    
    margin: 0;
    min-height: 60px;
}

/* Горизонтальная раскладка */
.sequencing-items-layout-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* ===== SEQUENCING: Элементы ===== */
.sequencing-item {
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* При наведении */
.sequencing-item:hover {
    transform: translateY(-2px);
}

/* При перетаскивании (jQuery UI добавляет этот класс) */
.sequencing-item.ui-sortable-helper {
   
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    z-index: 1000;
    opacity: 0.95;
}

/* Placeholder (место куда можно бросить) */
.sequencing-items .ui-sortable-placeholder {
    visibility: visible !important;
    background: #e3f2fd;
    border: 2px dashed #90caf9;
    border-radius: 12px;
    min-height: 50px;
}

/* Для горизонтального layout — placeholder inline */
.sequencing-items-layout-horizontal .ui-sortable-placeholder {
    min-width: 50px;
    min-height: 50px;
}


/* ===== Заблокированное состояние ===== */
.sequencing-items.disabled {
    pointer-events: none;
    opacity: 0.7;
}

.sequencing-items.disabled .sequencing-item {
    cursor: default !important;
}

.sequencing-items.disabled .sequencing-item > * {
    cursor: default !important;
}



 

/* --- ОШИБКА: Тряска  + Красный - -- */
 .sequencing-shake .sequencing-item {
     
 
    animation: seq-shake .4s ease;
    box-shadow: 0 0 7px rgb(243, 12, 12);
    border-radius: 10px;
 
} 
 

  .sequencing-shake {
  animation: seq-shake 0.5s ease-in-out;
}

@keyframes seq-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* --- УСПЕХ: Зеленый + Блокировка --- */
 .sequencing-disabled .sequencing-item {
 
  
    box-shadow: 0 0 7px rgb(38, 93, 22);
    border-radius: 10px;
  
  cursor: default !important;
  pointer-events: none;
 
  animation: seq-pop 0.4s ease;
}

@keyframes seq-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); box-shadow: 0 0 10px rgba(25, 135, 84, 0.3); }
  100% { transform: scale(1); }
}

 .sequencing-disabled .sequencing-items {
  pointer-events: none; /* Блокируем весь контейнер */
}


/* ===== Мобильная адаптация ===== */
@media (max-width: 576px) {
    .sequencing-items-layout-horizontal {
        gap: 8px;
    }
    
    .sequencing-item.ui-sortable-helper {
        transform: scale(1.02);
    }
}

/* ===== Touch-устройства: убираем hover эффекты ===== */
@media (hover: none) {
    .sequencing-item:hover {
        transform: none;
    }
}












/* ===== build_from_parts  ===== */

.bfp-grab {
    display: flex;
    gap: 20px;
    margin-bottom: 1.5rem;
}


.bfp-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    min-height: 80px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    flex: 1;
 align-items: start
}

.bfp-items.disabled { 
    pointer-events: none;
    opacity: 0.6;
}

/* ===== Область сборки ===== */
.bfp-items-result {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    min-height: 80px;
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    transition: border-color 0.3s;
    flex: 1;
}

.bfp-items-result:empty::before,
.bfp-items-result:not(:has(.bfp-item)):not(:has(.bfp-slot))::before {
    content: 'Перетащи сюда';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    color: #adb5bd;
    font-style: italic;
}

.bfp-items-result.disabled {
    pointer-events: none;
}

/* Горизонтальный layout */
.bfp-items-layout-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

/* Slots layout */
.bfp-items-layout-slots {
    flex-direction: column;
}

/* ===== Элементы ===== */
.bfp-item {
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.bfp-item:hover {
    transform: translateY(-2px);
}

.bfp-item.ui-sortable-helper,
.bfp-item.ui-draggable-dragging {
    transform: scale(1.03) rotate(1deg);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    z-index: 1000 !important;
}

.bfp-item.bfp-dragging {
    opacity: 0.5;
}

/* ===== Placeholder ===== */
.bfp-placeholder {
    visibility: visible !important;
    background: #e3f2fd;
    border: 2px dashed #90caf9;
    border-radius: 8px;
    min-height: 45px;
}

.bfp-items-layout-horizontal .bfp-placeholder {
    min-width: 50px;

}
.bfp-items-result.bfp-sorting::before,
.bfp-items-result.bfp-sorting::after {
    display: none !important;
}
 
.bfp-items-layout-vertical  .bfp-placeholder {
 
	width: 100%!important;
}


/* ===== Ячейки (slots) ===== */
.bfp-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    min-height: 45px;
    padding: 5px;
    background: #f8f9fa;
    border: 2px dashed #adb5bd;
    border-radius: 8px;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.bfp-slot:empty::before {
    content: '?';
    color: #adb5bd;
    font-size: 1.2rem;
    font-weight: bold;
}


/* Слот при наведении элемента */
.bfp-slot-hover {
    background: #bbdefb !important;
    border-color: #1976d2 !important;
    border-style: solid !important;
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.3), 0 4px 12px rgba(25, 118, 210, 0.2);
    transition: all 0.15s ease;
	  animation: bfp-slot-pulse 0.6s ease infinite;
}




@keyframes bfp-slot-pulse {
    0%, 100% { 
        box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.3), 0 4px 12px rgba(25, 118, 210, 0.2);
    }
    50% { 
        box-shadow: 0 0 0 8px rgba(25, 118, 210, 0.15), 0 4px 16px rgba(25, 118, 210, 0.3);
    }
}

.bfp-slot .bfp-item {
    margin: 0;
}

/* Ячейка с элементом */
.bfp-slot:has(.bfp-item) {
    background: #fff;
    border-style: solid;
    border-color: #dee2e6;
}

/* ===== Состояния проверки ===== */

/* Правильно (для элементов) */
.bfp-item.correct > *,
.bfp-items-result .bfp-item.correct > * {
    border-color: #198754 !important;
    background-color: #d1e7dd !important;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.2);
}

.bfp-item.correct {
    animation: bfp-pop 0.3s ease;
}

/* Правильно (для ячеек) */
.bfp-slot.correct {
    border-color: #198754 !important;
    background-color: #d1e7dd !important;
    border-style: solid;
    animation: bfp-pop 0.3s ease;
}

 
 

 
/* ===== Анимации ===== */
@keyframes bfp-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes bfp-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


 /* Ошибка — анимация контейнера */
.bfp-items-result.wrong {
    animation: bfp-shake 0.4s ease;
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
}

@media (max-width: 1000px) {
  
  .bfp-grab {
   flex-direction: column
}

}




/* ===== Мобильные ===== */
@media (max-width: 576px) {
    .bfp-items,
    .bfp-items-result {
        padding: 10px;
    }
    
    .bfp-slot {
        min-width: 40px;
        min-height: 40px;
    }
  
 
  
}

@media (hover: none) {
    .bfp-item:hover {
        transform: none;
    }
}












/* ===== COMPARE: layout ===== */
.compare-grab{
    display:flex;
    gap:16px;
    align-items:flex-start;
}

.compare-items-fixed,
.compare-items-sorting{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    border-radius:12px;
    width: 100%;
}

.compare-items-fixed{
    background:#f8f9fa;
    border:2px dashed #dee2e6;
}

.compare-items-sorting{
    background:#fff;
    border:2px solid #dee2e6;
    transition:border-color .2s ease, background-color .2s ease;
}

/* ===== COMPARE: items ===== */
.compare-item-fixed,
.compare-item-sorting{
    position:relative;
    display:flex;               /* для вертикального центрирования контента */
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid #dee2e6;
    border-radius:12px;
    background:#fff;
    user-select:none;
    box-sizing:border-box;
}

.compare-item-sorting{
 cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}


.compare-item-sorting:hover {
    transform: translateY(-2px);
}

/* Если внутри формулы/картинки — пусть не ломают ширину */
.compare-item-fixed > *,
.compare-item-sorting > *{
    max-width:100%;
}

/* ===== Нумерация (важно для мобильного, но можно оставить всегда) ===== */
.compare-items-fixed{ counter-reset: cmpRow; }
.compare-items-sorting{ counter-reset: cmpRow; }

.compare-item-fixed::before,
.compare-item-sorting::before{
    counter-increment: cmpRow;
    content: counter(cmpRow);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:999px;
    flex:0 0 auto;
    font-size:12px;
    font-weight:700;
    color:#6c757d;
    background:#f1f3f5;
    border:1px solid #dee2e6;
}

/* ===== Drag effects ===== */
.compare-item-sorting.compare-dragging{
    opacity:.55;
}

.compare-item-sorting.ui-sortable-helper{
    box-shadow:0 8px 25px rgba(0,0,0,.15);
    transform:scale(1.02);
}


/* placeholder */
.compare-placeholder{
  display:block;
  width:100% !important;
  min-height:44px;         /* страховка, даже если JS не успел */
  visibility:visible !important;
  border:2px dashed #90caf9;
  background:#e3f2fd;
  border-radius:12px;
  box-sizing:border-box;
}

/* ===== Result states ===== */
.compare-items-sorting.correct{
    border-color:#198754 !important;
    background:#d1e7dd !important;
}


.compare-items-sorting.wrong{
    border-color:#dc3545 !important;
    background:#fff5f5 !important;
    animation: cmp-shake .4s ease;
}

@keyframes cmp-shake{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-6px); }
    40%{ transform:translateX(6px); }
    60%{ transform:translateX(-4px); }
    80%{ transform:translateX(4px); }
}

/* ===== Disabled ===== */
.compare-items-sorting.disabled{
    pointer-events:none;
    opacity:.75;
}


#popup_trainer_preview .compare-items-fixed {
	 display:none;
}

#popup_trainer_preview  .compare-item-sorting {
	height: auto!important;
}


/* ===== Responsive ===== */
@media (max-width: 1000px){
    .compare-grab{ flex-direction:column; }
	
	.compare-item-fixed,
	.compare-item-sorting {
	height: auto!important;
}
}










/* ===========================
   SORT (task-sort) styles
   Prefix: sort-
   =========================== */

/* ----- Верхние корзины ----- */
.sort-items-cols{
    display:flex;
    gap:16px;
    align-items:stretch;
    margin-bottom:16px;
}

.sort-items-col{
    flex:1 1 0;
    min-width:0;
    background:#fff;
    border:2px solid #dee2e6;
    border-radius:14px;
    padding:12px;
}

/* Заголовок корзины */
.sort-items-col-name{
    font-weight:700;
    color:#495057;
    margin-bottom:10px;
    padding-bottom:8px;
    border-bottom:1px solid #e9ecef;
    font-size:.95rem;
}

/* Внутренняя область, куда кладём элементы */
.sort-items-inner{
    min-height:120px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-content:flex-start;
    align-items:flex-start;
}

/* Плейсхолдер для пустой корзины */
.sort-items-inner:empty::before{
    content: attr(data-placeholder);
    display:block;
    width:100%;
    color:#adb5bd;
    font-style:italic;
    padding:10px 6px;
}

/* ----- Банк снизу на всю ширину ----- */
.sort-items-data{
    width:100%;
    background:#f8f9fa;
    border:2px dashed #dee2e6;
    border-radius:14px;
    padding:12px;
}

.sort-items-data .sort-items-col-name{
    border-bottom:1px solid #dee2e6;
}

/* Контейнер с элементами в банке */
.sort-items-data{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-content:flex-start;
    align-items:flex-start;
}

/* Чтобы заголовок банка занимал всю ширину */
.sort-items-data .sort-items-col-name{
    width:100%;
    margin-bottom:10px;
}

/* ----- Элементы ----- */
.sort-item-data{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid #dee2e6;
    background:#fff;
    cursor:grab;
    user-select:none;
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    font-weight:600;
}

/* если это эмодзи/иконки — чуть крупнее */
.sort-item-data{
    font-size:1.4rem;
    line-height:1;
}

/* hover */
.sort-item-data:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* во время перетаскивания */
.sort-item-data.ui-sortable-helper,
.sort-item-data.ui-draggable-dragging{
    box-shadow:0 10px 28px rgba(0,0,0,.18);
    transform:scale(1.02);
    z-index:10000 !important;
}

/* когда используем helper: clone — оригинал делаем полупрозрачным */
.sort-item-data.sort-dragging{
    opacity:.55;
}

/* ----- Placeholder (куда вставится элемент) ----- */
.sort-placeholder{
    visibility:visible !important;
    background:#e3f2fd;
    border:2px dashed #90caf9;
    border-radius:12px;
    box-sizing:border-box;
   flex: 0 0 auto !important;
  
    min-height:44px;
}



 
 
/* hover-подсветка зоны, куда тащим */
.sort-items-inner.sort-drop-hover,
.sort-items-data.sort-drop-hover{
  border-color:#0d6efd !important;
  box-shadow:0 0 0 4px rgba(13,110,253,.15);
  background:#f8fbff;
}

/* тряска и красный фон у неверных зон */
.sort-items-inner.sort-wrong,
.sort-items-data.sort-wrong{
  animation:sort-shake .4s ease;
}






/* В корзинах placeholder пусть не растягивает строку */
.sort-items-inner .sort-placeholder{
    flex:0 0 auto;
}

/* ----- Подсветка корзины при наведении ----- */
/* .sort-drop-hover{
    border-color:#0d6efd !important;
    box-shadow:0 0 0 4px rgba(13,110,253,.15);
    background:#f8fbff;
    transition:all .15s ease;
} */

/* ----- Состояния проверки ----- */
.sort-items-inner.sort-correct{
    border:2px solid #198754;
    background:#d1e7dd;
    border-radius:12px;
    padding:10px;
}

.sort-items-inner.sort-wrong{
    border:2px solid #dc3545;
    background:#fff5f5;
    border-radius:12px;
    padding:10px;
    animation:sort-shake .4s ease;
}

@keyframes sort-shake{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-6px); }
    40%{ transform:translateX(6px); }
    60%{ transform:translateX(-4px); }
    80%{ transform:translateX(4px); }
}

/* ----- Disabled ----- */
.sort-disabled{
    pointer-events:none;
    opacity:.75;
}



 

#popup_trainer_preview .sort-items-data {
	display:none;
}

#popup_trainer_preview .sort-items-cols {
 flex-direction: column!important;;
 margin-bottom: 0;
}

#popup_trainer_preview .task-main {
  padding: 0;
  
}


#popup_trainer_preview .sort-items-inner {
  min-height: auto;
 
  
}
 



/* ----- Responsive ----- */
@media (max-width: 768px){
    .sort-items-cols{
        flex-direction:column;
    }
    .sort-items-col{
        padding:10px;
    }
    .sort-items-inner{
        min-height:90px;
    }
}

@media (max-width: 576px){
    .sort-item-data{
        width:100%;
        justify-content:center;
        font-size:1.25rem;
    }
}










/* ===== geo_construction: feedback animations ===== */

.task-geo_construction .ttr-geo-construction{
  transition: all 0.2s ease;
}

/* На время эффекта отключаем взаимодействие (чтобы не дергать точки во время shake) */
.task-geo_construction .ttr-geo-construction.gc-checking{
  pointer-events: none;
}

/* Успех: зелёный pop */
.task-geo_construction .ttr-geo-construction.gc-correct{
  animation: gc-pop 0.5s ease;
  box-shadow: 0 0 12px rgba(25, 135, 84, 0.5);
}

@keyframes gc-pop{
  0% { transform: scale(1); }
  50% { transform: scale(1.03); } /* чуть меньше, чем replace, чтобы не ломать UX графика */
  100% { transform: scale(1); }
}

/* Ошибка: красный shake */
.task-geo_construction .ttr-geo-construction.gc-wrong{
  animation: gc-shake 0.5s ease-in-out;
  box-shadow: 0 0 0 .25rem rgba(220,53,69,.25);
}

@keyframes gc-shake{
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}


/* ===== geo_drag_point ===== */

.task-geo_drag_point .ttr-geo-input-row {
  margin-top: 15px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.task-geo_drag_point .geo-input {
  text-align: center;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  padding: 6px 4px;
  font-family: monospace;
  font-weight: 700;
  color: #333;
  transition: all 0.2s ease;
  background: #fff;
  min-width: 60px;
}

.task-geo_drag_point .geo-input:focus {
  border-color: #f59e0b; /* Оранжевый, как активная точка */
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

/* Результат проверки */
.task-geo_drag_point .geo-input.gp-correct {
  border-color: #198754 !important;
  background-color: #d1e7dd !important;
  color: #0f5132;
}

.task-geo_drag_point .geo-input.gp-wrong {
  border-color: #dc3545 !important;
  background-color: #f8d7da !important;
  animation: gp-shake 0.4s ease-in-out;
}

@keyframes gp-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Блокировка */
.task-geo_drag_point.gp-disabled .geo-input {
  pointer-events: none;
  opacity: 0.8;
  background-color: #e9ecef;
}









/* ======== predict_result ======== */

.prs-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
  /*! margin-top: 20px; */
   padding:   15px;
  margin: 1.5rem;
  border: 2px solid #dee2e6;
  border-radius: 10px;
}

.prs-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  background: #fff;
  border: 2px solid #dee2e6;
  border-radius: 10px;
  padding: 12px 16px;
  transition: all 0.2s ease;
  user-select: none;
}

.prs-item:hover {
  background-color: #f8f9fa;
  border-color: #adb5bd;
}

.prs-item input[type="checkbox"] {
  width: 1.3em;
  height: 1.3em;
  margin-right: 12px;
  cursor: pointer;
  accent-color: #0d6efd;
}

/* Активное состояние (выбран пользователем) */
.prs-item.prs-selected {
  border-color: #0d6efd;
  background-color: #f0f7ff;
}

/* Контент */
.prs-item-content {
  flex: 1;
  font-size: 1.05rem;
  line-height: 1.4;
}
.prs-item-content img.ttr-opt-img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

/* --- Feedback Animations --- */

/* Ошибка: трясем ВЕСЬ контейнер + красный GLOW */
.prs-items.pr-container-shake {
  animation: pr-shake 0.5s ease-in-out;
  /* Добавляем красную подсветку во время тряски */
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25); 
  border-radius: 12px; /* Чтобы glow был красивым */
  background-color: rgba(220, 53, 69, 0.05); /* Легкий красный фон */
}

@keyframes pr-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* Успех: зелёный pop на конкретных элементах */
.prs-item.pr-correct-anim {
  border-color: #198754 !important;
  background-color: #d1e7dd !important;
  animation: pr-pop 0.5s ease forwards; /* forwards чтобы остался зеленым */
}

@keyframes pr-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); box-shadow: 0 0 15px rgba(25, 135, 84, 0.3); }
  100% { transform: scale(1); }
}

/* Блокировка */
.task-predict_result.pr-disabled .prs-item {
  pointer-events: none;
  opacity: 0.9;
}






















































/* ========================================================
   MATH GENERATOR — Интерактивный математический тренажёр
   ======================================================== */

/* Статистика сверху */
.math-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 0.75rem;
  font-size: 0.95rem;
  border: 1px solid #dee2e6;
}

.math-stat {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.math-stat i {
  font-size: 1.1rem;
}

.math-stat-correct { color: #198754; }
.math-stat-wrong { color: #dc3545; }
.math-stat-skipped { color: #6c757d; }
.math-stat-revealed { color: #fd7e14; }

.math-stat-correct-val,
.math-stat-wrong-val,
.math-stat-skipped-val,
.math-stat-revealed-val {
  font-weight: 700;
  min-width: 1.5ch;
}

/* -------------------- Настройки диапазонов -------------------- */
.math-settings {
  background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
  border: 1px solid #ffc107;
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.math-settings-title {
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #664d03;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.math-settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.math-range-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid #e9c46a;
}

.math-range-label {
  font-size: 0.85rem;
  color: #495057;
  font-weight: 500;
}

.math-range-input {
  width: 65px;
  padding: 0.3rem 0.4rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}

.math-range-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.math-settings-warning {
  color: #dc3545;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  display: none;
  font-weight: 500;
}

.math-settings-warning.show {
  display: block;
}

/* -------------------- Таймер -------------------- */
.math-timer {
  background: linear-gradient(135deg, #e7f1ff 0%, #cfe2ff 100%);
  border: 1px solid #b6d4fe;
  border-radius: 0.75rem;
  padding: 0.6rem 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: #0d6efd;
  font-variant-numeric: tabular-nums;
}

.math-timer i {
  font-size: 1.5rem;
}

.math-timer.math-timer-warning {
  background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
  border-color: #ffc107;
  color: #997404;
}

.math-timer.math-timer-danger {
  background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
  border-color: #dc3545;
  color: #dc3545;
  animation: math-timer-pulse 0.5s ease-in-out infinite;
}

@keyframes math-timer-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.02); }
}

/* -------------------- Область примера -------------------- */
.math-problem-wrap {
  position: relative;
  margin-bottom: 1rem;
}

.math-problem {
  background: #fff;
  border: 3px solid #dee2e6;
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  text-align: center;
  font-size: 2rem;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  line-height: 1.4;
}

.math-problem-number {
  position: absolute;
  top: 0.6rem;
  left: 0.75rem;
  font-size: 0.8rem;
  color: #6c757d;
  background: #f8f9fa;
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  font-weight: 500;
}

/* Состояния примера */
.math-problem.math-correct {
  border-color: #198754;
  background: linear-gradient(135deg, #d1e7dd 0%, #a3cfbb 100%);
}

.math-problem.math-wrong {
  border-color: #dc3545;
  background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
  animation: math-shake 0.5s ease-in-out;
}

.math-problem.math-revealed {
  border-color: #fd7e14;
  background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
}

@keyframes math-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-10px); }
  30% { transform: translateX(10px); }
  45% { transform: translateX(-8px); }
  60% { transform: translateX(8px); }
  75% { transform: translateX(-4px); }
  90% { transform: translateX(4px); }
}

/* Анимация успеха */
.math-problem.math-success-anim {
  animation: math-success-pop 0.6s ease;
}

@keyframes math-success-pop {
  0% { transform: scale(1); }
  25% { transform: scale(1.03); }
  50% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* -------------------- Поле ввода ответа -------------------- */
.math-input {
  border: 2px dashed #2196f3;
  border-radius: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: inherit;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  min-width: 2.5ch;
  max-width: 12ch;
  background: #fff;
  outline: none;
  transition: all 0.2s ease;
  color: #212529;
}

.math-input::placeholder {
  color: #adb5bd;
  font-weight: 400;
}

.math-input:focus {
  border-style: solid;
  border-color: #0d6efd;
  background: #e7f1ff;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.math-input.math-input-correct {
  border-style: solid;
  border-color: #198754;
  background: #d1e7dd;
  color: #0f5132;
}

.math-input.math-input-wrong {
  border-style: solid;
  border-color: #dc3545;
  background: #f8d7da;
  color: #842029;
}

.math-input.math-input-revealed {
  border-style: solid;
  border-color: #fd7e14;
  background: #fff3cd;
  color: #664d03;
}

.math-input:disabled {
  opacity: 0.9;
  cursor: not-allowed;
}

/* Инпут для сравнения (>, <, =) */
.math-input-compare {
  width: 2ch !important;
  min-width: 2ch !important;
  text-transform: none;
}

/* -------------------- Вертикальные примеры (столбик) -------------------- */
.math-vertical {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.math-vertical > div {
  padding: 0 0.5rem;
}

.math-vertical .math-input {
  font-family: 'Courier New', Courier, monospace;
}

/* -------------------- Дроби -------------------- */
.math-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.3rem;
  font-size: 0.8em;
  line-height: 1.2;
}

.math-frac-num {
  border-bottom: 2px solid currentColor;
  padding: 0 0.3rem 0.15rem;
}

.math-frac-denom {
  padding: 0.15rem 0.3rem 0;
}

/* -------------------- Кнопки -------------------- */
.math-btn-check {
  min-width: 140px;
}

.math-btn-reveal {
  color: #fd7e14 !important;
  border-color: #fd7e14 !important;
}

.math-btn-reveal:hover {
  background: #fd7e14 !important;
  color: #fff !important;
}

.math-btn-skip {
  color: #6c757d !important;
}

/* Кнопка Старт (для таймера) */
.math-btn-start {
  font-size: 1.1rem;
  padding: 0.75rem 2rem;
}

/* -------------------- Экран старта -------------------- */
.math-start-screen {
  text-align: center;
  padding: 2rem;
}

.math-start-screen h3 {
  margin-bottom: 1rem;
  color: #212529;
}

.math-start-screen p {
  color: #6c757d;
  margin-bottom: 1.5rem;
}

/* -------------------- Адаптив -------------------- */
@media (max-width: 768px) {
  .math-problem {
    font-size: 1.5rem;
    padding: 2rem 1rem;
    min-height: 120px;
  }
  
  .math-stats {
    font-size: 0.85rem;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
  }
  
  .math-stat span {
    display: none; /* Скрываем текст, оставляем иконки и числа */
  }
  
  .math-range-group {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .math-range-input {
    width: 55px;
  }
  
  .math-timer {
    font-size: 1.4rem;
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 480px) {
  .math-problem {
    font-size: 1.35rem;
    padding: 1.5rem 0.75rem;
  }
  
  .math-input {
    padding: 0.15rem 0.35rem;
  }
  
  .math-vertical {
    font-size: 1.3rem;
  }
}






 



.math-overlay {
  position:absolute; inset:0;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 5;
  border-radius: 1rem;
}

.math-overlay-box{
  text-align:center;
  padding: 1.25rem 1.25rem;
  background:#fff;
  border:1px solid #dee2e6;
  border-radius: 1rem;
  max-width: 420px;
  width: calc(100% - 2rem);
}

.math-helper {
  margin-top: 1rem;
  display:flex;
  justify-content:center;
  gap: .5rem;
  flex-wrap: wrap;
}

.math-symbol-btn {
  min-width: 54px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #0d6efd;
  background: #e7f1ff;
  color: #0d6efd;
  font-weight: 700;
  font-size: 1.15rem;
}
.math-symbol-btn:active { transform: scale(0.98); }









/* =========================================================
   GEOM — интерактивный геометрический генератор (JSXGraph)
   Prefix: geom-
   ========================================================= */

/* Статистика */
.geom-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  padding: .75rem 1rem;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  border-radius: .75rem;
  margin-bottom: 1rem;
}

.geom-stat {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .95rem;
}

.geom-stat strong {
  font-weight: 800;
  min-width: 1.5ch;
}

.geom-stat-correct { color:#198754; }
.geom-stat-wrong   { color:#dc3545; }
.geom-stat-skipped { color:#6c757d; }
.geom-stat-reveal  { color:#fd7e14; }

/* Область задания */
.geom-problem-wrap {
  position: relative;
}

.geom-visual {
  margin-bottom: .75rem;
}

.geom-board {
  width: 100%;
  height: 200px; /* как ты просил */
}

/* Вопрос */
.geom-question {
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.35;
  margin-bottom: .5rem;
}

.geom-subline {
  text-align: center;
  color: #6c757d;
  font-size: 1.1rem;
  margin-bottom: .75rem;
}

/* Инпуты */
.geom-input {
  border: 2px dashed #2196f3;
  border-radius: .5rem;
  padding: .15rem .45rem;
  font: inherit;
  font-weight: 700;
  text-align: center;
  background: #fff;
  outline: none;
  transition: .15s ease;
}

.geom-input:focus {
  border-style: solid;
  border-color: #0d6efd;
  background: #e7f1ff;
  box-shadow: 0 0 0 3px rgba(13,110,253,.15);
}

.geom-input.geom-correct {
  border-style: solid;
  border-color: #198754;
  background: #d1e7dd;
  color: #0f5132;
}

.geom-input.geom-wrong {
  border-style: solid;
  border-color: #dc3545;
  background: #f8d7da;
  color: #842029;
}

.geom-input.geom-reveal {
  border-style: solid;
  border-color: #fd7e14;
  background: #fff3cd;
  color: #664d03;
}

.geom-input:disabled {
  opacity: .9;
  cursor: not-allowed;
}

/* Анимации */
.geom-shake {
  animation: geom-shake .45s ease-in-out;
}

@keyframes geom-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.geom-success-pop {
  animation: geom-pop .55s ease;
}

@keyframes geom-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.03); }
  65% { transform: scale(0.99); }
  100% { transform: scale(1); }
}

/* Оверлей старта (опционально, включается в JS конфиге) */
.geom-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .75rem;
}

.geom-overlay-box {
  width: min(420px, calc(100% - 2rem));
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 1rem;
  padding: 1.25rem;
  text-align: center;
}

/* Мелочь */
.geom-unit {
  font-weight: 600;
  margin-left: .25rem;
  white-space: nowrap;
}


/* номер примера как в math */
.geom-problem-number{
  position:absolute;
  top:.55rem;
  left:.75rem;
  font-size:.8rem;
  color:#6c757d;
  background:#f8f9fa;
  border:1px solid #dee2e6;
  padding:.1rem .55rem;
  border-radius:999px;
  z-index:3;
}

/* чтобы инпут не “обрезал” 2–3 цифры */
.geom-input{
  box-sizing: content-box;
  min-width: 1.2ch;
}




.geom-board .JXGtext,
.ttr-geometry .JXGtext {
  text-shadow: 
    -1px -1px 0 #fff,  
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
    -1px  0   0 #fff,
     1px  0   0 #fff,
     0   -1px 0 #fff,
     0    1px 0 #fff;
  font-weight: 700;
  color: #000!important;;
  z-index: 100;  
}