:root {
    --kb26-font: var(--font-montserrat), sans-serif;

    --kb26-bg-page: #F5F6F7;

    --kb26-bg: #ffffff;
    --kb26-border: #e5e7eb;
    --kb26-text: #454545;
    --kb26-text-invert: #ffffff;
    --kb26-accent: #4245ff;
    --kb26-focus: #4245ff;

    --kb26-radius: 8px;
    --kb26-max-w: 1080px;
    --kb26-gutter: 12px;

    --kb26-input-border: #808080;
    --kb26-input-bg: #ffffff;

    --kb26-success: #087a54;
    --kb26-success-bg: #E7F6EF;
    --kb26-fail: #CF300C;
    --kb26-fail-bg: #FFEFEB;
    --kb26-info-bg: #EEF0FF;
    --kb26-badge-bg: #E4EEFF;

    --kb26-text-secondary: #707070;

    --kb26-difficulty-easy: #098159;
    --kb26-difficulty-medium: #A85A00;
    --kb26-difficulty-hard: #CF300C;

    --kb26-divider-strong: #808080;
}

@media (min-width: 640px) {
    :root {
        --kb26-gutter: 32px;
    }
}

@media (min-width: 420px) {
    :root {
        --kb26-gutter: 24px;
    }
}

.kb26-input {
  border-color: var(--kb26-input-border) !important;
  background-color: var(--kb26-input-bg) !important;
  color: var(--kb26-text);
}

/* Нативный select с управляемым chevron вместо браузерного индикатора. */
.kb26-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23454545' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  padding-right: 44px !important;
  cursor: pointer;
}

.kb26-select:disabled {
  cursor: not-allowed;
  opacity: .65;
}

/* Единый видимый индикатор фокуса клавиатуры для всех фокусируемых элементов kb26 */
.kb26-focus-ring {
  outline: none !important;
}

/* !important нужен, чтобы кольцо фокуса не перебивалось общими стилями сайта
   (например, легаси-правилами вида "a:focus{outline:0!important}") */
.kb26-focus-ring:focus-visible {
  outline: 3px solid var(--kb26-focus) !important;
  outline-offset: 3px;
}

/* Увеличивает кликабельную/тач-зону элемента минимум до 44x44px через невидимый
   псевдоэлемент, не влияя на видимый размер самого элемента и его кольца фокуса */
.kb26-tap-target {
  position: relative;
}

.kb26-tap-target::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
}

.kb26-radio-label:has(input[type="radio"]:checked) .radio-dot { display: block; }
.kb26-checkbox-label:has(input[type="checkbox"]:checked) .checkbox-box { background-color: var(--kb26-accent); }
.kb26-checkbox-label:has(input[type="checkbox"]:checked) .checkbox-check { display: flex; }

/* Нативный input в этих виджетах визуально скрыт (opacity:0), поэтому его
   собственный outline при фокусе тоже невидим (opacity влияет и на outline).
   Показываем кольцо фокуса на видимом декоративном кружке/квадрате рядом. */
.kb26-radio-label:has(input[type="radio"]:focus-visible) .kb26-radio-circle,
.kb26-checkbox-label:has(input[type="checkbox"]:focus-visible) .checkbox-box {
  outline: 3px solid var(--kb26-focus);
  outline-offset: 3px;
}

/* Рейтинг «звёздами» в форме отзыва: input тоже скрыт визуально, кольцо
   фокуса переносим на видимую звезду-label рядом с ним. */
.stars input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--kb26-focus) !important;
  outline-offset: 3px;
}

/* Кнопка "Обзор" в зоне загрузки файлов: input[type=file] тоже скрыт через
   opacity:0 и лежит абсолютным слоем над кнопкой, поэтому кольцо фокуса
   переносим на саму кнопку-обёртку. */
.kb26-file-drop:has(input[type="file"]:focus-visible) {
  outline: 3px solid var(--kb26-focus);
  outline-offset: 3px;
}

.kb26-reit-group {
    display: flex;
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 20px;
}

@media (min-width: 768px) {
    .kb26-reit-group {
        column-gap: 27px;
    }
}

@media (min-width: 1024px) {
    .kb26-reit-group {
        column-gap: 52px;
    }
}

.kb26-reit-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.kb26-reit-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 10;
    opacity: 0;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
}

.kb26-reit-input:focus,
.kb26-reit-input:focus-visible,
.kb26-reit-input:active {
    outline: none;
    box-shadow: none;
}

.kb26-reit-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--kb26-accent);
    color: var(--kb26-accent);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.kb26-reit-label:has(input:checked) .kb26-reit-circle {
    background-color: var(--kb26-accent);
    color: var(--kb26-text-invert);
}

/* .kb26-reit-input скрыт через opacity:0 и его собственный outline отключён выше,
   поэтому кольцо фокуса переносим на видимый кружок-label рядом с ним. */
.kb26-reit-label:has(.kb26-reit-input:focus-visible) .kb26-reit-circle {
    outline: 3px solid var(--kb26-focus);
    outline-offset: 3px;
}

/* Сброс браузерных стилей fieldset/legend, используемых для группировки
   радио/чекбокс-вопросов (доступное имя группы через <legend>). */
.kb26-fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.kb26-fieldset > legend {
    padding: 0;
    width: 100%;
}

html[data-theme="dark"] {
    --kb26-bg-page: #121212;
    --kb26-bg: #1e1e1e;
    --kb26-border: #333333;
    --kb26-text: #b3b3b3;
    --kb26-text-invert: #121212;
    --kb26-accent: #9da0ff;
    --kb26-focus: #9da0ff;

    --kb26-input-border: #8A8A8A;
    --kb26-input-bg: #121212;

    --kb26-success: #34C185;
    --kb26-success-bg: rgba(52, 193, 133, 0.14);
    --kb26-fail: #FF6B5E;
    --kb26-fail-bg: rgba(255, 107, 94, 0.14);
    --kb26-info-bg: rgba(157, 160, 255, 0.14);
    --kb26-badge-bg: #2C2C2C;

    --kb26-text-secondary: #999999;

    --kb26-difficulty-easy: #34C185;
    --kb26-difficulty-medium: #FFA04D;
    --kb26-difficulty-hard: #FF6B5E;

    --kb26-divider-strong: #808080;
}

html[data-theme="dark"] .kb26-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23B3B3B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

div, span, p, h1, h2, h3, h4 {
    font-family: var(--kb26-font) !important;
    color: var(--kb26-text);
}

a {
    color: var(--kb26-accent);
}

a:focus-visible {
    outline: 3px solid var(--kb26-focus) !important;
    outline-offset: 3px;
    border-radius: 8px;
}

.kb26-bg-page {
    background-color: var(--kb26-bg-page);
}

.kb26-font {
    font-family: var(--kb26-font) !important;
}

.kb26-text {
    color: var(--kb26-text) !important;
}

.kb26-text-invert {
    color: var(--kb26-text-invert) !important;
}

.kb26-wrap {
    width: 100%;
    max-width: calc(var(--kb26-max-w) + var(--kb26-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--kb26-gutter);
    box-sizing: border-box;
}

.kb26-card {
    width: 100%;
    max-width: var(--kb26-max-w);
    margin-inline: auto;

    background-color: var(--kb26-bg);
    border: 1px solid var(--kb26-border);
    border-radius: var(--kb26-radius);

    font-family: var(--kb26-font) !important;
    color: var(--kb26-text);

    box-sizing: border-box;
}

.kb26-card-flatten {
    width: 100%;
    max-width: var(--kb26-max-w);
    margin-inline: auto;

    background-color: var(--kb26-bg);
    border-radius: var(--kb26-radius);

    font-family: var(--kb26-font) !important;
    color: var(--kb26-text);

    box-sizing: border-box;
}

.kb26-difficulty {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    border-radius: 6px;
    background-color: var(--kb26-bg);
    padding: 5px;
    box-sizing: border-box;
}

.kb26-difficulty-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kb26-difficulty-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid;
    box-sizing: border-box;
}

.kb26-difficulty-dot--easy {
    border-color: var(--kb26-difficulty-easy);
}

.kb26-difficulty-dot--medium {
    border-color: var(--kb26-difficulty-medium);
}

.kb26-difficulty-dot--hard {
    border-color: var(--kb26-difficulty-hard);
}

.kb26-difficulty-dot--filled.kb26-difficulty-dot--easy {
    background-color: var(--kb26-difficulty-easy);
}

.kb26-difficulty-dot--filled.kb26-difficulty-dot--medium {
    background-color: var(--kb26-difficulty-medium);
}

.kb26-difficulty-dot--filled.kb26-difficulty-dot--hard {
    background-color: var(--kb26-difficulty-hard);
}

.kb26-difficulty-text {
    font-size: 12px;
    line-height: 18px;
    color: var(--kb26-text);
}

.kb26-badge-success {
    background-color: var(--kb26-success-bg);
    border: 1px solid transparent;
}

.kb26-badge-fail {
    background-color: var(--kb26-fail-bg);
    border: 1px solid transparent;
}

html[data-theme="dark"] .kb26-badge-success {
    background-color: transparent;
    border-color: var(--kb26-success);
}

html[data-theme="dark"] .kb26-badge-fail {
    background-color: transparent;
    border-color: var(--kb26-fail);
}