/* ==== Конвертер дробей — доп. стили поверх inputs-style.css (дизайн-система сайта) ==== */

/* подсказка под полем */
#drob-conv .dc-hint { font-size: 12px; color: #757575; font-family: "Unbounded", serif; line-height: 1.5; margin: 0 0 8px; }

/* ошибка */
#drob-conv .calc-error { color: #d32f2f; font-size: 13px; font-family: "Unbounded", serif; margin-bottom: 8px; }

/* чекбокс «отрицательная дробь».
   ⚠ Глобальное .calculator-wrapper input раздувает чекбокс до height:64px/width:100%/border/flex —
   сбрасываем всё через !important (иначе огромный блок перекрывает кнопки → «невозможно выбрать»). */
#drob-conv .dc-neg { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-family: "Unbounded", serif; color: #000; opacity: .8; cursor: pointer; margin: 8px 0; }
#drob-conv .dc-neg input[type="checkbox"] {
  -webkit-appearance: auto !important; appearance: auto !important;
  width: 18px !important; height: 18px !important; min-width: 18px; flex: none;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: none !important; display: inline-block !important;
  accent-color: #000; cursor: pointer;
}

/* блок результата */
#drob-conv .result-text#dc-res-main { font-size: 18px; line-height: 1.5; font-family: "Unbounded", serif; color: #000; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#drob-conv .dc-res-label { font-weight: 400; }
#drob-conv .dc-alt { font-size: 13px; color: #616161; font-weight: 400; }

/* шаги «Метод расчёта» */
#drob-conv #dc-res-steps { width: 100%; font-family: "Unbounded", serif; font-size: 12px; color: rgba(0,0,0,.75); line-height: 1.7; }
#drob-conv .dc-step { margin-bottom: 8px; }
#drob-conv .dc-step:last-child { margin-bottom: 0; }
#drob-conv #dc-res-steps b { color: #000; font-weight: 600; }

/* инлайн-дроби (числитель над знаменателем) */
#drob-conv .dc-f { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .15em; }
#drob-conv .dc-f-n { display: block; padding: 0 .3em; }
#drob-conv .dc-f-l { display: block; border-bottom: 1.5px solid currentColor; margin: 1px 0; }
#drob-conv .dc-f-d { display: block; padding: 0 .3em; }
#drob-conv .dc-m { display: inline-flex; align-items: center; gap: .25em; }
#drob-conv #dc-res-main .dc-f { font-size: 20px; }

/* чипы-примеры (базовый .rz-chip из inputs-style, добавляем раскладку) */
#drob-conv .dc-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
#drob-conv .dc-chips__label { font-size: 12px; color: #616161; font-family: "Unbounded", serif; }
#drob-conv .dc-chip { width: auto !important; padding: 8px 14px !important; font-size: 12px; min-height: 36px; }

/* тост */
#drob-conv .dc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px); background: #111; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 2000; }
#drob-conv .dc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }