/* ══════════════════════════════════════════════════════════════════════
   kanji.css — Раздел «Иероглифы»
   Использует CSS-переменные из base.css
══════════════════════════════════════════════════════════════════════ */

/* ── Toolbar ── */
.kj-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0 18px;
    margin-bottom: 8px;
}
.kj-toolbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}


.kj-search-input {
    width: 180px;
    flex-shrink: 0;
    font-size: 14px !important;
    padding: 4px 0 6px !important;
}

/* ── Поиск в хедере: лупа зафиксирована, поле выдвигается влево ── */
.kj-search-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 32px;
    width: 32px;
    transition: width 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.18s;
}
.kj-search-header.open {
    width: 212px;
    box-shadow: 0 1.5px 0 0 var(--accent, #732212);
}

/* Кнопка-лупа — всегда крайняя справа, не двигается */
.kj-search-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--text-3, #aaa);
    border-radius: 6px;
    flex-shrink: 0;
    transition: color 0.15s;
    padding: 0;
    z-index: 1;
}
.kj-search-btn:hover,
.kj-search-header.open .kj-search-btn {
    color: var(--accent, #732212);
}

/* Поле ввода — заполняет контейнер между левым краем и кнопкой */
.kj-search-slide {
    position: absolute;
    left: 4px;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    opacity: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--text, #1a1714);
    padding: 0 0 2px 0;
    transition: opacity 0.18s, border-color 0.18s;
    min-width: 0;
    box-sizing: border-box;
}
.kj-search-slide::placeholder {
    color: var(--text-3, #aaa);
}

/* Открытое состояние */
.kj-search-header.open .kj-search-slide {
    opacity: 1;
}
.kj-filter-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}
.kj-filter-arrow {
    font-size: 8px;
    color: var(--text-3, #B0A89E);
    line-height: 1;
}
.kj-filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--card-bg, #fff);
    border-radius: 0;
    box-shadow: 0 1px 0 var(--border, #E2D8D3), 0 4px 16px rgba(0,0,0,0.07);
    border: 1px solid var(--border, #E2D8D3);
    padding: 0;
    min-width: 140px;
    z-index: 100;
}
.kj-filter-option {
    padding: 8px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3, #B0A89E);
    cursor: pointer;
    transition: color 0.12s;
}
.kj-filter-option:hover { background: transparent; color: var(--text, #1a1714); }
.kj-filter-option.active { background: transparent; color: var(--accent, #732212); font-weight: 400; }

.kj-res-filter-sep { height: 1px; background: var(--border, #E2D8D3); margin: 0; }

/* ── Группа по уровню ──
   Свёрнутые уровни сжимаются до ширины заголовка и выстраиваются
   в общую строку — иначе каждый скрытый уровень тянет свой
   собственный отступ вниз (см. #kj-list-content ниже). */
#kj-list-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px 14px;
}
#kj-list-content > * {
    flex: 1 1 100%;
}
.kj-level-group {
    margin-bottom: 0;
}
#kj-list-content > .kj-level-group--collapsed,
#kj-list-content > .kn-script-inline {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
}
.kj-level-group--collapsed .kj-level-label-row {
    margin-bottom: 0;
}

/* Точка-разделитель между соседними «свёрнутыми» элементами ряда —
   появляется только между двумя компактными элементами подряд (через
   +), поэтому сама расставляется правильно независимо от того, что
   свёрнуто, а что развёрнуто, и не липнет к началу новой строки при
   переносе. */
#kj-list-content > .kj-level-group--collapsed + .kj-level-group--collapsed::before,
#kj-list-content > .kn-script-inline + .kj-level-group--collapsed::before {
    content: '\00b7';
    margin-right: 14px;
    color: var(--text-3);
    font-size: 15px;
}

.kj-level-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 2px;
}

/* ── Мини-сетка иероглифов ── */
.kj-mini-grid {
    content-visibility: auto;
    contain-intrinsic-size: 600px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

/* ── Мини-карточка ── */
.kj-mini-card {
    position: relative;
    background: var(--surface-2, #fff);
    border: none;
    border-radius: var(--radius-lg);
    padding: 10px 6px 8px;
    text-align: center;
    cursor: pointer;
    transition: color 0.18s;
    user-select: none;
    overflow: hidden;
}
.kj-mini-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; right: 50%;
    height: 1.5px;
    background: var(--accent, #732212);
    transition: left 0.22s cubic-bezier(.4,0,.2,1), right 0.22s cubic-bezier(.4,0,.2,1);
}
.kj-mini-card:hover::after {
    left: 14px; right: 14px;
}
.kj-mini-card:hover .kj-mini-char {
    color: var(--text, #1a1714);
}

.kj-mini-char {
    font-family: 'YuMincho', 'Yu Mincho', 'DM Sans', sans-serif;
    font-size: 30px;
    line-height: 1.1;
    color: var(--text, #1a1714);
    margin-bottom: 3px;
}
.kj-mini-read {
    font-family: 'YuMincho', 'Yu Mincho', sans-serif;
    font-size: 10px;
    color: var(--text-3);
    margin-bottom: 2px;
    min-height: 13px;
}
/* Карточка китайского — пиньинь латиницей */
.kj-mini-card[data-lang="zh"] .kj-mini-read {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
}
.kj-mini-mean {
    font-size: 10px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Статусы мини-карточки ── */
/* Не изучен — серый */
.kj-mini-char { color: #b0aba4; }

/* Знаком / в процессе изучения → зелёный иероглиф + зелёная рамка */
.kj-mini--familiar .kj-mini-char { color: #2e7d48; }
.kj-mini--familiar:hover {}

/* Изучен → тёмный нейтральный */
.kj-mini--studied  .kj-mini-char { color: #1a1714; }

/* На повторении (ручная отметка или препод) → красный иероглиф + акцентная рамка */
.kj-mini--review   .kj-mini-char,
.kj-mini--reviewing .kj-mini-char { color: var(--accent, #732212); }
.kj-mini--review:hover,
.kj-mini--reviewing:hover {}

/* ── Иконка пометки учителя ── */
.kj-mini-note {
    position: absolute;
    top: 3px; right: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
}
.kj-mini-note--covered { background: #4a7c59; color: #fff; }
.kj-mini-note--review  { background: var(--accent); color: #fff; }

/* ── Выбор для отработки ── */
.kj-mini-card--selectable { cursor: pointer; }
.kj-mini-card--selectable:hover { border-color: var(--accent-mid); }
.kj-mini-card--selected {
    border-color: var(--accent) !important;
    background: var(--accent-light) !important;
    box-shadow: 0 0 0 2px var(--accent-light);
}

/* ════════════════════════════════════════════════
   ДЕТАЛЬНЫЙ ВИД
════════════════════════════════════════════════ */
.kj-detail {
    max-width: none;
    padding: 0 4px 40px;
}
.kj-back-btn {
    background: none;
    border: none;
    font-size: 12px;
    font-family: 'DM Sans', sans-serif;
    color: var(--text-3);
    cursor: pointer;
    padding: 0;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}
.kj-back-btn:hover { color: var(--text, #1a1714); }

.kj-det-hero {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}
.kj-det-char-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 130px;
    gap: 8px;
}
.kj-det-char {
    font-family: 'YuMincho', 'Yu Mincho', 'DM Sans', sans-serif;
    font-size: 116px;
    line-height: 1;
    color: var(--text, #1a1714);
    width: 130px;
    text-align: center;
}

/* Китайский детальный вид: слово горизонтально, ширина по содержимому */
.kj-detail--zh .kj-det-hero {
    flex-wrap: wrap;
}
.kj-detail--zh .kj-det-char-wrap {
    width: auto;
    max-width: 100%;
    flex-shrink: 1;
}
.kj-detail--zh .kj-det-char {
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    letter-spacing: 0.04em;
    font-size: clamp(48px, 10vw, 116px);
}
.kj-detail--zh .kj-det-meta {
    min-width: 180px;
    flex: 1;
}
.kj-det-char-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.kj-det-meta-tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-3);
    text-transform: uppercase;
    line-height: 1;
}
.kj-det-meta { flex: 1; padding-top: 8px; }
.kj-det-meanings { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }

.kj-tag {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3px 9px;
    font-size: 12px;
    color: var(--text-3);
}
.kj-tag--meaning {
    background: transparent;
    border: none;
    padding: 2px 6px;
    margin: -2px -6px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--text, #1a1714);
    letter-spacing: -0.01em;
    border-radius: var(--radius);
    transition: background 0.15s;
    cursor: default;
}
.kj-tag--meaning:hover {
    background: var(--bg);
}

.kj-badge {
    display: inline-block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text-2);
    margin-right: 4px;
    margin-bottom: 4px;
}
/* Detail badge override — no border */
.kj-det-char-meta .kj-badge {
    background: none;
    border: none;
    padding: 0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-3);
    text-transform: uppercase;
    margin: 0;
}

.kj-det-readings { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* «Уже встречался в другом слове» — компактная строка на карточке составного
   китайского слова. Без фона/рамки, только приглушённый текст — не должна
   спорить с заголовком и значениями. */
.kj-det-priorhit {
    margin-top: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-3);
}
.kj-det-priorhit-char {
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    color: var(--text-2, #6b6259);
}
.kj-reading-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.kj-read-label {
    font-family: 'YuMincho', 'Yu Mincho', sans-serif;
    font-size: 11px;
    color: var(--text-3);
    min-width: 52px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.kj-read-val {
    font-family: 'YuMincho', 'Yu Mincho', sans-serif;
    font-size: 20px;
    color: #1a1714 !important;
    letter-spacing: 0.02em;
    padding: 2px 6px;
    border-radius: var(--radius);
    transition: background 0.15s;
    cursor: default;
    /* Кана — line-break class ID (как иероглифы): браузер по умолчанию
       готов перенести строку между ЛЮБЫМИ двумя её символами, из-за чего
       одно чтение (например「うれ」) могло разорваться на «у» и «れ» на
       разных строках. nowrap запрещает перенос внутри конкретного чтения,
       а перенос между отдельными span'ами (следующим чтением) остаётся
       возможным — так длинный список чтений всё ещё переносится по словам. */
    white-space: nowrap;
}
/* Китайский детальный вид — пиньинь латиницей, нужен Cormorant */
.kj-detail--zh .kj-read-label {
    font-family: 'DM Sans', sans-serif;
}
.kj-detail--zh .kj-read-val {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
}
[data-theme="dark"] .kj-read-val {
    color: #f0ece6 !important;
}
.kj-read-val:hover {
    background: var(--bg);
}

.kj-det-stroke img, .kj-det-stroke svg {
    width: 80px; height: 80px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px;
    flex-shrink: 0;
}

/* ── Секции детального вида ── */
.kj-section { margin-bottom: 24px; }
.kj-section-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
}
.kj-theory {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text, #1a1714);
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
}

/* ── Примеры ── */
.kj-examples { display: flex; flex-direction: column; gap: 0; background: transparent; }
.kj-example {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 14px 2px;
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--border-light, #E8E3DD);
    transition: background 0.15s;
}
.kj-example:last-child { border-bottom: none; }
.kj-ex-word {
    font-family: 'YuMincho', 'Yu Mincho', 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--text, #1a1714);
    min-width: 64px;
    line-height: 1.3;
}
.kj-ex-reading {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    color: #B0A89E !important;
    letter-spacing: 0.04em;
}
.kj-ex-mean {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-2);
    flex: 1;
}
.kj-ex-sent {
    width: 100%;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-2);
    margin-top: 6px;
    padding-top: 0;
    border-top: none;
    padding-left: 14px;
    border-left: 2px solid rgba(115, 34, 18, 0.18);
    line-height: 1.7;
}
.kj-ex-sent-r {
    font-family: 'YuMincho', 'Yu Mincho', sans-serif;
    color: #B0A89E !important;
    font-size: 11px;
    margin-left: 6px;
}
/* Китайские примеры — пиньинь */
.kj-detail--zh .kj-ex-reading {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
}
.kj-detail--zh .kj-ex-sent-r {
    font-family: 'Cormorant Garamond', 'DM Sans', sans-serif;
    font-size: 13px;
}

/* ── Кнопки действий ── */
.kj-det-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.kj-det-btn { font-size: 13px; padding: 8px 20px; }

/* Понижение визуального веса для деструктивных/обходных действий обучения
   (напр. «Знаком — пропустить обучение») — текстовая ссылка без фона/рамки,
   чтобы не конкурировать с primary CTA. */
.kj-det-btn-ghost {
    font-size: 13px;
    padding: 8px 10px;
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-3);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.kj-det-btn-ghost:hover {
    color: var(--text-2);
    text-decoration-color: var(--text-3);
}

/* ── Статус-бейджи ── */
.kj-status-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius);
}
.kj-status--familiar { background: #e8f4ec; color: #2e7d48; }   /* зелёный — знаком/изучается */
.kj-status--studied  { background: #f0ece6; color: #1a1714; }   /* тёмный — изучен */
.kj-status--review   { background: var(--accent-light); color: var(--accent); } /* красный — надо повторить */

/* ════════════════════════════════════════════════
   СЕССИЯ ОБУЧЕНИЯ
════════════════════════════════════════════════ */
.kj-study-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 16px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 24px;
}
.kj-study-progress-wrap {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.kj-study-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.kj-study-count {
    font-size: 12px;
    color: var(--text-3);
    min-width: 48px;
    text-align: right;
}
.kj-study-body {
    max-width: 480px;
    margin: 0 auto;
}

/* ── Задание — написание ── */
.kj-write-task { text-align: center; }
.kj-study-char-label {
    font-family: 'YuMincho', 'Yu Mincho', 'DM Sans', sans-serif;
    font-size: 52px;
    color: var(--text, #1a1714);
    margin-bottom: 8px;
    line-height: 1;
}
.kj-write-readings { margin-bottom: 8px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.kj-write-hint-label {
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 12px;
}
.kj-canvas-wrap {
    position: relative;
    display: inline-block;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    margin: 0 auto 16px;
}

/* ── Окно ввода иероглифа: рамка + пунктир по центру ── */
#kj-writer-container {
    position: relative;
    outline: 1.5px solid var(--border);
    box-sizing: border-box;
}
#kj-writer-container::before,
#kj-writer-container::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
/* SVG иероглифа от HanziWriter должен быть поверх пунктирных линий */
#kj-writer-container svg {
    position: relative;
    z-index: 1;
}
/* Горизонтальная линия */
#kj-writer-container::before {
    top: 50%;
    left: 6px;
    right: 6px;
    height: 0;
    border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
    transform: translateY(-0.5px);
}
/* Вертикальная линия */
#kj-writer-container::after {
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: 0;
    border-left: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
    transform: translateX(-0.5px);
}
.kj-write-guide-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'YuMincho', 'Yu Mincho', 'DM Sans', sans-serif;
    font-size: 220px;
    color: var(--border);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
#kjCanvas { position: relative; z-index: 1; }
.kj-write-actions { display: flex; justify-content: center; gap: 10px; }
.kj-write-action-btn { font-size: 12px; }

/* Скромная, ненавязчивая ссылка «пропустить письмо» — намеренно мелкая
   и приглушённая, без фона/рамки, чтобы не нажималась случайно вместо
   основных кнопок задания. */
.kj-write-skip-link {
    display: block;
    margin: 18px auto 0;
    padding: 4px 8px;
    background: none;
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: var(--text-3, #B0A89E);
    opacity: 0.6;
    cursor: pointer;
    text-align: center;
}
.kj-write-skip-link:hover { opacity: 1; color: var(--text-2, #6b6259); }

/* ── Задание — выбор ── */
.kj-choice-task { text-align: center; }
.kj-choice-prompt {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 20px;
}
.kj-choice-word {
    font-family: 'YuMincho', 'Yu Mincho', 'DM Sans', sans-serif;
    font-size: 40px;
    color: var(--text, #1a1714);
    margin-bottom: 6px;
}
.kj-choice-sent {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 24px;
    color: var(--text);
    margin-bottom: 24px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    display: block;
    line-height: 2.2;
}
.kj-choice-target {
    border-bottom: 1.5px solid var(--accent, #732212);
    padding-bottom: 1px;
    font-weight: 600;
    color: var(--text, #1a1714);
}
.kj-choice-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 0;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.kj-choice-btn {
    background: transparent;
    border: none;
    border-radius: var(--radius, 6px);
    padding: 16px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--text-2, #5c5650);
    cursor: pointer;
    transition: color 0.15s, background 0.12s;
    text-align: center;
}
.kj-choice-btn:hover:not(:disabled) { color: var(--text, #1a1714); background: rgba(115,34,18,0.03); }
.kj-choice-btn--correct { background: transparent !important; color: #3a6b35 !important; font-weight: 500 !important; }
.kj-choice-btn--wrong   { background: transparent !important; color: var(--text-3) !important; opacity: 0.45 !important; text-decoration: line-through; }
.kj-choice-btn:disabled { cursor: default; }
.kj-choice-feedback { font-size: 13px; margin-top: 12px; min-height: 20px; color: var(--text-3); }

/* ── Задание — анки ── */
.kj-anki-task { text-align: center; padding: 16px 0; }
.kj-anki-question {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-2);
    margin: 12px 0;
    letter-spacing: 0;
}
.kj-anki-meanings { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.kj-anki-actions  { display: flex; justify-content: center; gap: 12px; }
.kj-anki-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 28px;
    border: 1px solid var(--border-light);
    border-radius: 0;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--text-2, #5c5650);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    min-width: 100px;
}
.kj-anki-btn:hover { color: var(--text); border-color: var(--border); }
.kj-anki-btn--yes:hover { color: #3a6b35; border-color: #5a9e52; }
.kj-anki-btn--no:hover  { color: var(--accent); border-color: var(--accent); }

/* ── Финиш обучения ── */
.kj-finish {
    text-align: center;
    padding: 60px 20px;
    max-width: 400px;
    margin: 0 auto;
}
.kj-finish-char {
    font-family: 'YuMincho', 'Yu Mincho', 'DM Sans', sans-serif;
    font-size: 80px;
    color: var(--text, #1a1714);
    margin-bottom: 16px;
}
.kj-finish-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--text, #1a1714);
    margin-bottom: 8px;
}
.kj-finish-sub  { font-size: 14px; color: var(--text-2); margin-bottom: 28px; }
.kj-finish-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════
   ADMIN-ФОРМА
════════════════════════════════════════════════ */
.kj-admin-form {
    max-width: 900px;
    padding-bottom: 60px;
}
.kj-admin-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 400;
    color: var(--text, #1a1714);
    margin-bottom: 24px;
}
.kj-admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 700px) { .kj-admin-grid { grid-template-columns: 1fr; } }

.kj-admin-section {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
}
.kj-admin-section-h {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 16px;
}
.kj-admin-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.kj-admin-label { font-size: 11px; color: var(--text-3); }
.kj-admin-input {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 7px 10px;
    color: var(--text, #1a1714);
    outline: none;
    width: 100%;
    transition: border-color 0.15s;
}
.kj-admin-input:focus { border-color: var(--accent-mid); }
.kj-admin-input--sm  { flex: 1; min-width: 0; }
.kj-admin-ex-level  {
    flex: 0 0 90px;
    min-width: 0;
    font-size: 11px;
    padding: 0 4px;
    cursor: pointer;
    background-color: var(--bg-card);
    color: var(--text);
}
.kj-admin-ex-level-col {
    flex: 0 0 90px;
}

/* Примеры в admin */
.kj-admin-ex-header {
    display: flex;
    gap: 8px;
    padding: 0 4px 6px;
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 6px;
}
.kj-admin-ex-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.kj-admin-ex-num {
    font-size: 11px;
    color: var(--text-3);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.kj-admin-btn-del {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    border-radius: var(--radius);
    flex-shrink: 0;
    width: 24px;
    transition: color 0.15s;
}
.kj-admin-btn-del:hover { color: var(--accent); }

/* Footer admin */
.kj-admin-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}
.kj-admin-btn-delete {
    background: none;
    border: 1px solid var(--accent-mid);
    color: var(--accent);
    border-radius: var(--radius);
    padding: 7px 16px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.kj-admin-btn-delete:hover { background: var(--accent-pale); }
.kj-admin-footer > span { margin-left: auto; }

/* ════════════════════════════════════════════════
   Dark theme
════════════════════════════════════════════════ */
[data-theme="dark"] .kj-mini-card { background: var(--surface-2, #1d1d1c); border: none; }
[data-theme="dark"] .kj-mini-card::after { background: var(--accent-mid, #a8503f); }
[data-theme="dark"] .kj-mini-card:hover .kj-mini-char { color: var(--text, #f0ece6); }
[data-theme="dark"] .kj-mini-char { color: #6b6560; }
[data-theme="dark"] .kj-mini--familiar .kj-mini-char { color: #5db87a; }
[data-theme="dark"] .kj-mini--studied   .kj-mini-char { color: #f0ece6; }
[data-theme="dark"] .kj-mini--reviewing .kj-mini-char,
[data-theme="dark"] .kj-mini--review    .kj-mini-char { color: #e07060; }

[data-theme="dark"] .kj-canvas-wrap   { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .kj-admin-input   { background: var(--surface-2); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .kj-admin-section { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .kj-choice-btn    { background: transparent; color: #b0a89e; }
[data-theme="dark"] .kj-anki-btn      { background: transparent; border-color: rgba(255,255,255,0.10); }

/* ── Mobile ── */
/* ── Узкие экраны (мобильный/планшет): плоские плитки без «карточек» ──
   На мобильном фон страницы бежевый, а у плиток --surface-2 + radius —
   вместе это читается как рамки. Убираем: плитки как на десктопе. */
@media (max-width: 1024px) {
    .kj-mini-card { background: transparent; border-radius: 0; }
    /* Лупа в шапке секции дублирует плавающую и заезжает под колокольчик */
    #kjSearchHeader { display: none; }
}

@media (max-width: 600px) {
    /* .kj-detail на десктопе почти без отступов (0 4px) — там их даёт обёртка сайдбара.
       На мобиле такой обёртки нет, поэтому контент упирался в край экрана. */
    .kj-detail    { padding: 0 22px 40px; }
    .kj-mini-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 12px 8px; }
    .kj-mini-char { font-size: 26px; }
    .kj-det-char  { font-size: 86px; width: 100px; }
    .kj-det-char-wrap { width: 100px; }
    .kj-detail--zh .kj-det-char { width: auto; font-size: 76px; }
    .kj-detail--zh .kj-det-char-wrap { width: auto; }
    /* Иероглиф по центру, слева — уровень/черты, справа — порядок написания.
       Ниже, во всю ширину — чтения/значения. Снизу отдельно — ромб (см. ниже). */
    .kj-det-hero {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
    /* Бейджи и SVG — прямые flex-элементы героя, расходятся по разные
       стороны иероглифа (порядок задаём через order, без display:contents —
       он ненадёжно работает с order в паре с обёрткой). */
    .kj-det-badges {
        order: 1;
        flex-direction: column;
        align-items: flex-end;
        padding-top: 0;
        margin-left: 0;
    }
    .kj-det-char-wrap { order: 2; }
    .kj-det-stroke {
        order: 3;
        margin-right: 0;
    }
    .kj-det-meta {
        order: 4;
        flex: 1 1 100%;
        width: 100%;
        padding-top: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* Блок значений/чтений центрируется на странице как единое целое,
       но строки внутри него (おんよみ/くんよみ) выровнены друг под другом слева */
    .kj-det-meanings { justify-content: center; }
    .kj-det-readings { align-items: stretch; align-self: center; }
    .kj-admin-grid { grid-template-columns: 1fr; }
    .kj-admin-ex-row { flex-wrap: wrap; }
    .kj-choice-options { grid-template-columns: 1fr; }
    

    /* Письмо на мобильном: крупнее тач-таргеты для кнопок под канвасом */
    .kj-write-actions { gap: 8px; flex-wrap: wrap; }
    .kj-write-action-btn {
        font-size: 13px;
        padding: 12px 16px;
        min-height: 44px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   АНИМАЦИЯ ПОРЯДКА ЧЕРТ (animCJK)
══════════════════════════════════════════════════════════════════════════════ */

.kj-det-stroke {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    margin-right: 16px;
}

/* Бейджи слева от SVG, прижаты к верхнему краю, текст по правому краю */
.kj-det-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding-top: 10px;
}
/* На десктопе прижимаем бейджи+SVG к правому краю героя (на мобиле — center) */
@media (min-width: 601px) {
    .kj-det-badges { margin-left: auto; }
}

.kj-det-badge-level {
    font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #8b1a2a;
    line-height: 1;
}

[data-theme="dark"] .kj-det-badge-level {
    color: #c0445a;
}

.kj-det-badge-strokes {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-3);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Несколько иероглифов — ряд SVG в одну строку */
.kj-stroke-multi {
    display: flex;
    flex-direction: row;
    gap: 6px;
    flex-wrap: wrap;
}
.kj-stroke-multi-item {
    position: relative;
    display: inline-block;
    line-height: 0;
    transition: opacity 0.3s;
}
/* Иероглиф ожидает своей очереди — заморожен, серый */
.kj-stroke-multi-item.kj-stroke-pending {
    opacity: 0.25;
    pointer-events: none;
}
.kj-stroke-multi-item.kj-stroke-pending svg path {
    animation-play-state: paused !important;
}
.kj-stroke-multi-item > svg,
.kj-stroke-multi-item > div > svg {
    width: 100px;
    height: 100px;
    border: none;
    padding: 0;
    background: transparent;
    display: block;
}
/* 2 иероглифа — крупнее */
.kj-stroke-multi:has(.kj-stroke-multi-item:nth-child(2):last-child) .kj-stroke-multi-item > svg,
.kj-stroke-multi:has(.kj-stroke-multi-item:nth-child(2):last-child) .kj-stroke-multi-item > div > svg {
    width: 130px;
    height: 130px;
}
/* 3 иероглифа */
.kj-stroke-multi:has(.kj-stroke-multi-item:nth-child(3):last-child) .kj-stroke-multi-item > svg,
.kj-stroke-multi:has(.kj-stroke-multi-item:nth-child(3):last-child) .kj-stroke-multi-item > div > svg {
    width: 110px;
    height: 110px;
}
/* 4 иероглифа */
.kj-stroke-multi:has(.kj-stroke-multi-item:nth-child(4):last-child) .kj-stroke-multi-item > svg,
.kj-stroke-multi:has(.kj-stroke-multi-item:nth-child(4):last-child) .kj-stroke-multi-item > div > svg {
    width: 95px;
    height: 95px;
}
/* Кнопка replay поверх каждого SVG в мульти-режиме — появляется при наведении */
.kj-stroke-multi-item .kj-stroke-replay-btn--sm {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-3);
    opacity: 0;
    transition: opacity 0.18s, color 0.15s;
    line-height: 0;
}
.kj-stroke-multi-item .kj-stroke-replay-btn--sm > svg {
    width: 12px !important;
    height: 12px !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: none !important;
    display: block;
}
.kj-stroke-multi-item:hover .kj-stroke-replay-btn--sm {
    opacity: 1;
}
.kj-stroke-multi-item .kj-stroke-replay-btn--sm:hover {
    color: var(--accent);
}
/* Убираем старое правило — кнопка теперь не под рядом а над каждым SVG */
#kjStrokeBlock:has(.kj-stroke-multi) .kj-stroke-replay-btn {
    display: none;
}

.kj-stroke-anim-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* SVG из animCJK */
.kj-stroke-anim-wrap svg {
    width: 130px;
    height: 130px;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    display: block;
}

/* Кнопка replay — круглая иконка в правом нижнем углу поверх SVG */
.kj-stroke-replay-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-3);
    opacity: 0;
    transition: opacity 0.18s, color 0.15s;
    line-height: 0;
}
/* Иконка внутри кнопки — отдельный svg, не путать с главным SVG анимации */
.kj-stroke-replay-btn > svg {
    width: 14px !important;
    height: 14px !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: none !important;
    display: block;
}
.kj-stroke-anim-wrap:hover .kj-stroke-replay-btn {
    opacity: 1;
}
.kj-stroke-replay-btn:hover {
    color: var(--accent);
}

/* Скелетон-пульс пока грузится SVG */
.kj-stroke-skeleton {
    width: 130px;
    height: 130px;
    border-radius: var(--radius-lg);
    background: var(--border-light, #e8e2da);
    animation: kjPulse 1.4s ease-in-out infinite;
}
@keyframes kjPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* Dark theme */
[data-theme="dark"] .kj-stroke-anim-wrap > svg,
[data-theme="dark"] .kj-stroke-multi-item > svg,
[data-theme="dark"] .kj-stroke-multi-item > div > svg {
    background: transparent;
    border-color: transparent;
}
[data-theme="dark"] .kj-stroke-replay-btn {
    background: transparent;
}
[data-theme="dark"] .kj-stroke-skeleton {
    background: var(--border);
}

/* Mobile */
@media (max-width: 600px) {
    .kj-stroke-anim-wrap > svg,
    .kj-stroke-skeleton {
        width: 100px;
        height: 100px;
    }
    /* Отступ перед ромбом — он теперь единственный блок внизу, по центру */
    .kj-section--skill-diamond {
        margin-top: 20px;
    }
    /* На мобиле кнопку всегда показываем (нет hover) */
    .kj-stroke-replay-btn {
        opacity: 1;
        width: 26px;
        height: 26px;
        bottom: 4px;
        right: 4px;
    }
}

/* Скрываем образец (первую группу) для free-mode */
#kj-writer-container.free-mode svg g:first-child {
    display: none !important;
}
/* ── Дополнительные примеры (examples_rest) ── */
.kj-section--rest { margin-top: -8px; }
.kj-section-title--rest { opacity: 0.6; }
.kj-examples--rest .kj-example {
    opacity: 0.6;
    background: transparent;
    border-bottom-color: transparent;
    padding: 8px 2px;
}
.kj-examples--rest .kj-example:hover {
    opacity: 1;
    background: transparent;
    border-bottom-color: transparent;
}

/* ── JLPT-бейдж на карточке описания ── */
.kj-badge--jlpt {
    background: transparent;
    border: none;
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0;
    margin: 0;
}

/* ── Уровень слова — справа, видно при наведении ── */
.kj-ex-level-badge {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    transition: none;
    pointer-events: none;
}
.kj-example:hover .kj-ex-level-badge {
    opacity: 1;
    transition: opacity 0.1s ease;
}

/* ── Разделитель уровней в списке ── */
.kj-level-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

[data-theme="dark"] .kj-badge--jlpt { border-color: var(--border); color: var(--text-3); }

/* ── Дополнительные примеры (examples_rest) ── */
.kj-examples--rest .kj-example {
    opacity: 0.6;
    background: transparent;
    border-bottom-color: transparent;
    padding: 8px 2px;
}
.kj-examples--rest .kj-example:hover {
    opacity: 1;
    background: transparent;
    border-bottom-color: transparent;
}

/* ── Спиннер загрузки ── */
.kj-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: kjSpin 0.75s linear infinite;
    /* transform-origin по центру — без этого Safari дрожит */
    transform-origin: center center;
}
@keyframes kjSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* ── Попап с дополнительными значениями примера ── */
.kj-example--has-meanings {
    position: relative;
    cursor: default;
}
.kj-ex-more {
    font-size: 11px;
    color: var(--text-3);
    margin-left: 3px;
    vertical-align: middle;
}
.kj-ex-meanings-popup {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 200;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(26,23,20,0.10);
    padding: 10px 14px;
    min-width: 220px;
    max-width: 340px;
    pointer-events: none;
}
.kj-example--has-meanings:hover .kj-ex-meanings-popup {
    display: block;
}
.kj-ex-meanings-popup-row {
    font-size: 13px;
    color: var(--text-2);
    padding: 3px 0;
    border-bottom: 1px solid var(--border-light);
    line-height: 1.5;
}
.kj-ex-meanings-popup-row:last-child {
    border-bottom: none;
}


/* ── Переключатель чей прогресс ─────────────────────────────────────────── */
.kj-toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* Мой прогресс — dropdown без рамки */
.kj-student-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    min-width: 0;
    background-repeat: no-repeat;
    background-position: right 0 center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-2, #5c5650);
    padding: 0 18px 0 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B0A89E' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.kj-student-select:focus { outline: none; }

/* Повторить — как btn btn-primary */
.kj-repeat-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 22px;
    border: 1px solid var(--accent, #732212);
    border-radius: var(--radius);
    background: var(--accent, #732212);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
}
.kj-repeat-btn:hover { background: var(--accent-dark, #571a0d); border-color: var(--accent-dark, #571a0d); }

/* Выбрать — стили перенесены в блок «единый визуальный блок с хедером» */


.kj-level-label-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
    width: fit-content;
    padding: 2px 0;
    transition: opacity 0.12s;
}
.kj-level-label-row:hover { opacity: 0.7; }
.kj-level-label-row .kj-level-label {
    margin-bottom: 0;
}

/* Счётчик иероглифов уровня */
.kj-level-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--text-3);
    font-weight: 400;
    letter-spacing: 0;
}

/* Свёрнутая сетка */
.kj-mini-grid--collapsed {
    display: none;
}

/* Бейдж в тулбаре */
.kj-collapsed-badge {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--text-3);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.12s;
    white-space: nowrap;
    order: -1;
}
.kj-collapsed-badge:hover {
    color: var(--accent);
}
.kj-select-all-btn {
    background: none;
    border: none;
    font-size: 11px;
    color: var(--text-3, #aaa);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.kj-select-all-btn:hover { color: var(--accent); background: var(--accent-light); }

/* Карточка в режиме выбора */
.kj-mini-card.kj-selectable { cursor: pointer; }
.kj-mini-card.kj-selectable:hover { background: var(--surface-2); }
.kj-mini-card.kj-selected {
    background: var(--accent-light, #f0ede8) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-light);
    border-radius: var(--radius-lg);
}
.kj-mini-card.kj-selected:hover {
    background: var(--accent-light, #f0ede8) !important;
}
.kj-sel-check {
    position: absolute;
    top: 4px; right: 4px;
    width: 14px; height: 14px;
    border: 1.5px solid #ccc;
    border-radius: 4px;
    background: var(--card-bg, #fff);
    transition: background 0.15s, border-color 0.15s;
}
.kj-selected .kj-sel-check {
    background: var(--accent, #8b6f47);
    border-color: var(--accent, #8b6f47);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 8px;
}

/* Панель действий снизу */
.kj-sel-panel {
    position: fixed;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    box-shadow: 0 4px 40px rgba(20,16,12,0.14);
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 200;
    transition: bottom 0.28s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
    max-width: min(92vw, 720px);
    overflow: hidden;
}
.kj-sel-panel.visible { bottom: 28px; }

.kj-sel-count {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 300;
    color: var(--text);
    letter-spacing: -0.01em;
    padding: 14px 20px;
    flex-shrink: 0;
}
.kj-sel-ctx {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.04em;
    padding: 0 16px;
    flex-shrink: 0;
}
.kj-sel-actions {
    display: flex;
    align-items: center;
    gap: 0;
}
.kj-sel-action {
    border: none;
    background: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 18px;
    cursor: pointer;
    color: var(--text-2);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.kj-sel-action:hover { background: var(--bg); color: var(--text); }
.kj-sel-review   { color: var(--accent); }
.kj-sel-review:hover { background: var(--accent-pale); color: var(--accent); }
.kj-sel-studied:hover  { background: var(--text); color: #fff; }
.kj-sel-covered  { color: #2e7d48; }
.kj-sel-covered:hover { background: #edf6f1; color: #2e7d48; }

.kj-sel-divider {
    width: 1px; height: 18px;
    background: var(--border-light);
    flex-shrink: 0;
}
.kj-sel-assign {
    border: none;
    background: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    cursor: pointer;
    padding: 14px 18px;
    transition: background 0.15s, color 0.15s;
}
.kj-sel-assign:hover { background: none; color: var(--text); }

.kj-sel-back {
    border: none;
    background: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    color: var(--text-3);
    cursor: pointer;
    padding: 14px 16px 14px 18px;
    transition: color 0.15s;
    flex-shrink: 0;
}
.kj-sel-back:hover { color: var(--text); }

/* Список студентов — имена в строку */
.kj-sel-students {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
    padding: 8px 4px;
}
.kj-sel-student-btn {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-2);
    background: none;
    border: none;
    padding: 6px 14px;
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.kj-sel-student-btn:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}


/* ── Подсказка после ответа ─────────────────────────────────────────────── */
.kj-choice-reveal {
    margin: 10px 0 4px;
    font-size: 14px;
    color: var(--text-2, #666);
}
.kj-anki-reveal {
    text-align: center;
    margin: 16px auto 8px;
    line-height: 1.8;
}
.kj-reveal-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-3, #aaa);
    margin-right: 4px;
}
.kj-next-btn {
    display: block;
    margin: 14px auto 0;
    padding: 10px 32px;
    background: var(--accent, #8b6f47);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .15s;
}
.kj-next-btn:hover { opacity: .85; }

.kj-fb-ok  { color: #4a7c59; font-weight: 500; }
.kj-fb-err { color: var(--accent); }

/* Кнопка Назад в topbar */
.kj-prev-btn {
    margin-left: 6px;
    opacity: .6;
    font-size: 12px;
}
.kj-prev-btn:hover { opacity: 1; }

/* ── Селектор повторения ────────────────────────────────────────────────── */
.kj-review-selector {
    padding: 0 0 40px;
}
.kj-review-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.kj-review-batch-picker {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kj-review-due-label {
    font-size: 12px;
    color: var(--text-3, #aaa);
    margin-bottom: 12px;
}

/* Карточка «на очереди» — серый фон */
.kj-mini-card--due {
    background: var(--surface-2, #f5f2ee);
}
.kj-mini-card--due.kj-mini-card--selected {
    background: var(--accent-light, #f0ede8) !important;
    border-color: var(--accent) !important;
}

/* Всё повторено */
.kj-review-all-done {
    text-align: center;
    padding: 8px 0 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-2, #5c5650);
}
.kj-review-all-done-icon {
    font-size: 26px;
    color: var(--accent, #732212);
    margin-bottom: 4px;
    font-family: 'Cormorant Garamond', serif;
}

.kj-review-selector-footer {
    margin-top: 24px;
}


.kj-batch-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-2, #666);
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
}
.kj-batch-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color, #333);
    cursor: pointer;
    padding: 0 18px 0 0;
    margin: 0;
    vertical-align: middle;
    line-height: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
}
.kj-batch-select:focus { outline: none; }


/* ── Переключатель языка (ЯПОНСКИЙ / КИТАЙСКИЙ) ───────────────────────────── */
#kjHeaderBtns {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    justify-content: flex-end !important;
    margin-right: 2.5cm;
}
#kjLangSwitch {
    display: none;
    align-items: center;
    gap: 2px;
}
.kj-lang-btn {
    background: none;
    border: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3, #B0A89E);
    cursor: pointer;
    padding: 2px 6px;
    transition: color 0.15s;
    line-height: 1;
}
.kj-lang-btn:hover {
    color: var(--text-2, #5c5650);
}
.kj-lang-btn.active {
    color: var(--text, #1a1714);
    font-weight: 400;
}

/* ── Китайские слова: всегда в одну строку, одинаковый шрифт ─────────────── */
.kj-mini-card[data-lang="zh"] .kj-mini-char {
    white-space: nowrap;
    /* Размер шрифта 30px — как у всех, не уменьшаем */
}

/* ── Китайский режим: строки, карточки растягиваются по длине слова ────────── */
/* Строки, карточки растягиваются по длине слова; gap совпадает с японской сеткой */
.kj-mini-grid--zh {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

/* Карточка растягивается пропорционально кол-ву иероглифов.
   Базовая ширина — 80px (= минимум японской карточки), каждый доп. иероглиф +36px */
.kj-mini-grid--zh .kj-mini-card {
    flex-grow: var(--char-len, 1);
    flex-shrink: 1;
    flex-basis: calc(80px + (var(--char-len, 1) - 1) * 36px);
    min-width: 0;
}

/* Задаём CSS-переменную через data-атрибут */
.kj-mini-grid--zh .kj-mini-card[data-charlen="1"] { --char-len: 1; }
.kj-mini-grid--zh .kj-mini-card[data-charlen="2"] { --char-len: 2; }
.kj-mini-grid--zh .kj-mini-card[data-charlen="3"] { --char-len: 3; }
.kj-mini-grid--zh .kj-mini-card[data-charlen="4"] { --char-len: 4; }
.kj-mini-grid--zh .kj-mini-card[data-charlen="5"] { --char-len: 5; }
.kj-mini-grid--zh .kj-mini-card[data-charlen="6"] { --char-len: 6; }

/* Текст иероглифа — центрирован по горизонтали */
.kj-mini-grid--zh .kj-mini-char {
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.05em;
}



/* ── Настройки: выбор языков ─────────────────────────────────────────────── */
.kj-lang-options-group {
    border: 1px solid var(--border, #E2D8D3);
    border-radius: var(--radius, 2px);
    background: var(--surface-2, #fff);
    overflow: hidden;
}
.kj-lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light, #E8E3DD);
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
    background: var(--surface-2, #fff);
}
.kj-lang-option:first-child {
    border-radius: var(--radius, 2px) var(--radius, 2px) 0 0;
}
.kj-lang-option:last-child {
    border-bottom: none;
    border-radius: 0 0 var(--radius, 2px) var(--radius, 2px);
}
.kj-lang-option:only-child {
    border-radius: var(--radius, 2px);
}
.kj-lang-option:hover {
    background: var(--bg, #F9F7F3);
}
.kj-lang-option--on {
    background: var(--surface-2, #fff);
}

/* Нативный чекбокс — accent-color задаёт бордовый цвет браузерно */
.kj-lang-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--accent, #732212);
    cursor: pointer;
    margin: 0;
}

/* Текст */
.kj-lang-option-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.kj-lang-option-name {
    font-family: var(--fi-font-ui, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 400;
    color: var(--text, #1a1714);
}
.kj-lang-option--on .kj-lang-option-name {
    color: var(--text, #1a1714);
}
.kj-lang-option-hint {
    font-family: var(--fi-font-ui, 'DM Sans', sans-serif);
    font-size: 11px;
    font-weight: 400;
    color: var(--text-3, #B0A89E);
    letter-spacing: 0.01em;
}

/* ── Настройки: строки выбора языка ─────────────────────────────────────── */
.kj-lang-setting-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.kj-lang-setting-check-wrap {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.kj-lang-setting-cb {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.kj-lang-setting-check {
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border, #E2D8D3);
    border-radius: var(--radius, 2px);
    background: transparent;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.kj-lang-setting-row:hover .kj-lang-setting-check {
    border-color: var(--accent-mid, #a8503f);
}
.kj-lang-setting-cb:checked + .kj-lang-setting-check {
    background: var(--accent, #732212);
    border-color: var(--accent, #732212);
}
.kj-lang-setting-cb:checked + .kj-lang-setting-check::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: 1.5px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.kj-lang-setting-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-2, #5c5650);
}

/* ══════════════════════════════════════════════════════════════════════════════
   WORD-РЕЖИМ (китайский, несколько иероглифов)
══════════════════════════════════════════════════════════════════════════════ */

/* Слово над полем ввода: пиньинь над каждым знаком, скрытый — квадрат */
.kj-study-word-label {
    font-family: 'YuMincho', 'Yu Mincho', 'Source Han Serif CN', serif;
    font-size: 52px;
    line-height: 1;
    margin-bottom: 8px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: flex-start; /* выравниваем по верхушке — чтобы пиньинь на одной линии */
}

/* Колонка: пиньинь сверху, иероглиф/квадрат снизу — нижние края на одном уровне */
.kj-word-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    justify-content: flex-start;
}

/* Обёртка нижней части: фиксированная высота = высота иероглифа (font-size 52px) */
.kj-word-item > :not(.kj-word-reading) {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Пиньинь над иероглифом */
.kj-word-reading {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1;
    color: var(--text-3, #b0a89e);
    letter-spacing: 0.01em;
    height: 16px; /* фиксированная высота — все на одной линии */
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.kj-word-char-dim {
    color: var(--text-3, #b0a89e);
    line-height: 1;
}

/* Пустой квадрат вместо скрытого иероглифа */
.kj-word-char-blank {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid var(--text-2, #9a9088);
    border-radius: 5px;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ЗАДАНИЕ НА ТОНЫ (tone_pick) — только китайский
══════════════════════════════════════════════════════════════════════════════ */

.kj-tone-task {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 8px 0;
}

.kj-tone-prompt {
    font-size: 13px;
    color: var(--text-3);
    letter-spacing: 0.02em;
}

/* Слово без тонов — крупно как ориентир */
.kj-tone-word {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 26px;
    font-weight: 300;
    color: var(--text-2);
    letter-spacing: 0.08em;
}

/* Колонки по числу слогов */
.kj-tone-columns {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.kj-tone-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Иероглиф над колонкой вариантов */
.kj-tone-char {
    font-family: 'YuMincho', 'Yu Mincho', 'Source Han Serif CN', serif;
    font-size: 36px;
    color: var(--text);
    line-height: 1;
}

/* Варианты тонов */
.kj-tone-opts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kj-tone-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 300;
    padding: 8px 22px;
    border: 1px solid var(--border-light);
    border-radius: 0;
    background: transparent;
    color: var(--text-2, #5c5650);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
    min-width: 80px;
    text-align: center;
    letter-spacing: 0.06em;
}

.kj-tone-btn:hover:not(:disabled) {
    color: var(--text, #1a1714);
    border-color: var(--border);
    background: transparent;
}

.kj-tone-btn--selected {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}

.kj-tone-btn--correct {
    background: transparent !important;
    border-color: #5a9e52 !important;
    color: #3a6b35 !important;
    font-weight: 500;
}

.kj-tone-btn--wrong {
    background: transparent !important;
    border-color: var(--border-light) !important;
    color: var(--text-3) !important;
    opacity: 0.4;
    text-decoration: line-through;
}

.kj-tone-feedback {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ЗАДАНИЕ НА ВВОД ПИНЬИНЯ (pinyin_input)
══════════════════════════════════════════════════════════════════════════════ */

.kj-pinyin-input-task {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.kj-pinyin-input-word {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.kj-pinyin-input-char {
    font-family: 'YuMincho', 'Yu Mincho', 'Source Han Serif CN', serif;
    font-size: 52px;
    line-height: 1;
    color: var(--text);
}

.kj-pinyin-input-field {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    text-align: center;
    padding: 10px 20px;
    border: none;
    border-bottom: 1.5px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    width: 260px;
    outline: none;
    transition: border-color 0.15s;
    letter-spacing: 0.06em;
}

.kj-pinyin-input-field:focus {
    border-bottom-color: var(--accent);
}

.kj-pinyin-input-field:disabled {
    opacity: 0.7;
}

.kj-pinyin-input-hint {
    font-size: 12px;
    color: var(--text-3);
    margin-top: -8px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ПРИМЕРЫ-ПРЕДЛОЖЕНИЯ (hsk1_auto) с тултипами
══════════════════════════════════════════════════════════════════════════════ */

.kj-example--sentence {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.kj-example--sentence:last-child {
    border-bottom: none;
}

/* Строка с иероглифами */
.kj-sent-line {
    font-family: 'YuMincho', 'Yu Mincho', 'Source Han Serif CN', serif;
    font-size: 20px;
    line-height: 1.4;
    color: var(--text);
}

/* Слово с тултипом */
.kj-sent-word {
    cursor: pointer;
    border-bottom: 1px dashed var(--text-3);
    transition: color 0.12s, border-color 0.12s;
}
.kj-sent-word:hover {
    color: var(--accent, #732212);
    border-bottom-color: var(--accent, #732212);
}

/* Пиньинь */
.kj-sent-pinyin {
    font-size: 12px;
    color: var(--text-3);
    letter-spacing: 0.03em;
}

/* Перевод */
.kj-sent-meaning {
    font-size: 13px;
    color: var(--text-2);
}

/* Всплывающий тултип */
.kj-word-tip {
    display: none;
    position: absolute;
    z-index: 9999;
    background: var(--surface, #fff);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    white-space: nowrap;
    pointer-events: none;
    max-width: 280px;
}

/* ═══════════════════════════════════════════════════════════════════
   Фуригана в японских примерах-предложениях
   ═══════════════════════════════════════════════════════════════════ */
.kj-example--jp .kj-sent-line {
    line-height: 2.1;  /* запас по высоте под <rt> */
}
.kj-example--jp ruby {
    ruby-position: over;
}
.kj-example--jp ruby rt {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.5em;
    color: var(--text-2, #666);
    font-weight: 400;
    letter-spacing: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Слова — сворачивание «ещё N» через <details>
   ═══════════════════════════════════════════════════════════════════ */
.kj-rest-details {
    margin-top: 4px;
}
.kj-rest-details > summary.kj-rest-summary {
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 12px 0;
    list-style: none;
    user-select: none;
    transition: color 0.15s;
    display: flex;
    align-items: center;
    gap: 12px;
}
.kj-rest-details > summary.kj-rest-summary::-webkit-details-marker {
    display: none;
}
.kj-rest-details > summary.kj-rest-summary::before,
.kj-rest-details > summary.kj-rest-summary::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
    display: block;
    transition: background 0.15s;
}
.kj-rest-details > summary.kj-rest-summary:hover {
    color: var(--accent, #732212);
}
.kj-rest-details > summary.kj-rest-summary:hover::before,
.kj-rest-details > summary.kj-rest-summary:hover::after {
    background: rgba(115,34,18,0.18);
}
.kj-rest-details[open] > summary.kj-rest-summary {
    color: var(--text-3);
    opacity: 0.5;
}
.kj-rest-details .kj-examples {
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   Секция «В контексте» — предложения с фуриганой как карточки
   ═══════════════════════════════════════════════════════════════════ */
.kj-section--sentences {
    margin-top: 12px;
}
.kj-section--sentences .kj-section-title {
    margin-bottom: 12px;
}
.kj-sentences {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
}
.kj-sentences .kj-example--sentence {
    background: #fff;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--border-light, #E8E3DD);
    padding: 16px 2px;
}
.kj-sentences .kj-example--sentence:last-child {
    border-bottom: none;
}
.kj-sentences .kj-sent-line {
    margin-bottom: 4px;
}
.kj-sentences .kj-sent-meaning {
    margin-top: 4px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
}
.kj-sentences .kj-sent-pinyin {
    font-family: 'DM Sans', sans-serif;
    font-style: italic;
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   Баннер «Учиться» — действия в стиле Cormorant, без заголовка
   ═══════════════════════════════════════════════════════════════════ */
.kj-learn-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: default;
    user-select: none;
    position: relative;
}
.kj-learn-banner:hover {
    background: transparent;
}
.kj-learn-banner-main {
    flex: 1;
    min-width: 0;
}
.kj-learn-banner-eyebrow {
    display: none;
}
/* Заголовок скрыт — действия сами говорят за себя */
.kj-learn-banner-title {
    display: none;
}
.kj-learn-banner-hint {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-3, #B0A89E);
    margin-top: 0;
    letter-spacing: 0.03em;
}
.kj-learn-banner-arrow {
    display: none;
}

/* Пустое состояние — без акцентов */
.kj-learn-banner--empty {
    background: transparent;
    cursor: default;
    opacity: 0.45;
}
.kj-learn-banner--empty:hover {
    background: transparent;
}

/* Ручной выбор — лёгкая подсветка акцентом */
.kj-learn-banner--manual .kj-learn-banner-eyebrow {
    color: var(--accent, #732212);
}

/* ═══════════════════════════════════════════════════════════════════
   Новые типы задач (sentence_intro, pattern, context, fill)
   ═══════════════════════════════════════════════════════════════════ */
.kj-stask {
    max-width: 480px;
    margin: 0 auto;
    padding: 8px 0 16px;
    text-align: center;
}
.kj-stask-intro {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3, #B0A89E);
    margin-bottom: 18px;
}
.kj-stask-char {
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    font-size: 22px;
    color: var(--text, #2a2620);
    padding: 0 4px;
}
.kj-stask-char-small {
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    font-size: 22px;
    margin-right: 8px;
}
.kj-stask-priorhit {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--text-3, #B0A89E);
    margin-bottom: 14px;
}
.kj-stask-priorhit-char {
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    color: var(--text-2, #6b6259);
}
.kj-stask-sentence {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 26px;
    line-height: 2.2;
    color: var(--text, #1a1714);
    margin: 8px 0 16px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}
/* Латиница/цифры внутри японских предложений (SNS, WiFi, 2026 и т.п.) —
   явный системный шрифт вместо отката внутри стека YuMincho. В Safari
   для текста, вставленного через innerHTML, unicode-range у @font-face
   ненадёжен: латинские буквы иногда рисуются невидимыми/белыми глифами
   вместо перехода на следующий шрифт (см. static/css/base.css:13). */
.kj-latin {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.kj-stask-sentence ruby { ruby-position: over; }
.kj-stask-sentence ruby rt {
    font-family: -apple-system, sans-serif;
    font-size: 0.5em;
    color: var(--text-2, #888);
    font-weight: 400;
}
.kj-stask-sentence--blank {
    letter-spacing: 0.03em;
}

.kj-stask-prompt {
    font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--text, #1a1714);
    margin: 0 0 14px;
    letter-spacing: 0.01em;
}

.kj-stask-options {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 auto;
    max-width: 340px;
    text-align: left;
    counter-reset: kjOpts;
}
.kj-stask-options--kanji {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 100%;
    text-align: center;
    counter-reset: none;
}
.kj-stask-btn {
    counter-increment: kjOpts;
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 9px 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.01em;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-2, #5c5650);
    cursor: pointer;
    transition: color 0.14s;
    text-align: left;
    width: 100%;
}
.kj-stask-btn::before {
    content: counter(kjOpts, decimal-leading-zero);
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--text-3, #C8BFB8);
    flex-shrink: 0;
    transition: color 0.14s;
    padding-top: 3px;
}
.kj-stask-options--kanji .kj-stask-btn::before {
    display: none;
}
.kj-stask-btn:hover:not(:disabled) {
    color: var(--text, #1a1714);
}
.kj-stask-btn:hover:not(:disabled)::before {
    color: var(--accent, #732212);
}
.kj-stask-btn:active:not(:disabled) {
    opacity: 0.7;
}
.kj-stask-btn:disabled {
    cursor: default;
    opacity: 1;
}
.kj-stask-btn--correct {
    background: transparent !important;
    color: var(--accent, #732212) !important;
    font-weight: 500 !important;
}
.kj-stask-btn--correct::before {
    color: var(--accent, #732212) !important;
}
.kj-stask-btn--wrong {
    background: transparent !important;
    color: var(--text-3) !important;
    opacity: 0.35 !important;
    text-decoration: line-through;
}
.kj-stask-btn--wrong::before {
    opacity: 0.35;
}
.kj-stask-btn--kanji {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 42px;
    font-weight: 400;
    padding: 4px 12px;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    justify-content: center;
}
.kj-stask-btn--kanji:hover:not(:disabled) {
    color: var(--accent, #732212) !important;
}

.kj-stask-reveal {
    margin-top: 16px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    text-align: center;
}
.kj-stask-translation {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-2, #5c5650);
    margin-bottom: 16px;
}
.kj-stask-translation--top {
    text-align: center;
    font-size: 13px;
    color: var(--text-2, #888);
    margin-top: -16px;
    margin-bottom: 20px;
    background: none;
    padding: 0;
}
.kj-stask-next {
    margin-top: 12px;
}
/* Строка «иероглиф — значение» в reveal */
.kj-stask-kanji-meaning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 13px;
}
.kj-stask-kanji-meaning .kj-stask-char-small {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 52px;
    line-height: 1;
    color: var(--text, #1a1714);
    margin-right: 0;
}
.kj-stask-kanji-meaning > span:last-child {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--text-2);
    letter-spacing: 0.02em;
}

/* Шаг 2: список слов с общим кандзи */
.kj-pattern-words {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 20px;
}

/* Каждое слово — горизонтальная строка: иероглиф · тире · перевод на одной базовой линии */
.kj-pattern-word {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 6px 0;
    width: 100%;
    min-width: 0;
}

.kj-pattern-w-jp {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text, #1a1714);
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.kj-pattern-w-jp ruby { ruby-position: over; }
.kj-pattern-w-jp ruby rt {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 0.34em;
    color: var(--text-3, #B0A89E);
    font-weight: 400;
    letter-spacing: 0.04em;
}

/* Строка «тире + перевод» — flex, тире прибито к верху, текст переносится */
.kj-pattern-w-trans {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.25s;
    margin-top: 2px;
}

.kj-pattern-w-dash {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--text-3, #B0A89E);
    flex-shrink: 0;
    line-height: 1.5;
    margin-top: 1px;
}

/* Перевод — сам текст */
.kj-pattern-w-meaning {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-2, #5c5650);
    letter-spacing: 0.01em;
    line-height: 1.5;
}
/* Кандзи в строке ответа — крупный акцент */
.kj-stask-kanji-meaning .kj-stask-char-small {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 36px;
    color: var(--text, #1a1714);
    line-height: 1;
    margin-right: 0;
}
.kj-pattern-trans-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kj-pattern-trans {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-2);
}
.kj-pattern-trans-jp {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 17px;
    margin-right: 6px;
    color: var(--text);
}
.kj-pattern-trans-r {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: var(--text-3);
    margin-right: 4px;
}
.kj-pattern-trans-m {
    color: var(--text-2);
}

/* ── Шаги 1/3: «Показать перевод» — кнопка как простая ссылка ── */
.kj-stask-reveal-wrap {
    margin-top: 20px;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PATTERN TASK — 2-колоночный layout:  слова слева │ вопрос + варианты справа
══════════════════════════════════════════════════════════════════════════════ */

.kj-stask:has(.kj-pattern-words) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 40px;
    max-width: 640px;
    align-items: start;
}

/* Заголовок — над обеими колонками */
.kj-stask:has(.kj-pattern-words) .kj-stask-intro {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    margin-bottom: 20px;
}

/* Слова — левая колонка */
.kj-stask:has(.kj-pattern-words) .kj-pattern-words {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
    align-items: flex-start;
}

/* В двухколоночном режиме — размер по содержимому, но не огромный */
.kj-stask:has(.kj-pattern-words) .kj-pattern-w-jp {
    font-size: clamp(24px, 4vw, 38px);
    line-height: 1.6;
}

/* Обёртка правой колонки: вопрос + варианты как единый блок, вертикально по центру */
.kj-pattern-right {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    gap: 0;
}

/* Вопрос внутри обёртки */
.kj-pattern-right .kj-stask-prompt {
    font-size: 20px;
    margin: 0 0 16px;
    text-align: left;
}

/* Варианты внутри обёртки — без auto-margin, выровнены по левому краю вопроса */
.kj-pattern-right .kj-stask-options {
    max-width: 100%;
    margin: 0;
    text-align: left;
}

/* Reveal — под обеими колонками */
.kj-stask:has(.kj-pattern-words) .kj-stask-reveal-wrap,
.kj-stask:has(.kj-pattern-words) .kj-stask-reveal {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: center;
    margin-top: 8px;
}

/* ── Мобайл: вертикальный стек ── */
@media (max-width: 520px) {
    .kj-stask:has(.kj-pattern-words) {
        display: flex;
        flex-direction: column;
    }
    .kj-stask:has(.kj-pattern-words) .kj-pattern-words {
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .kj-pattern-right {
        align-self: stretch;
    }
    .kj-pattern-right .kj-stask-prompt {
        text-align: center;
        font-size: 22px;
    }
    .kj-pattern-right .kj-stask-options {
        margin: 0 auto;
    }
}
.kj-stask-reveal-btn {
    background: transparent;
    border: none;
    color: var(--text-3, #B0A89E);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.15s;
}
.kj-stask-reveal-btn:hover {
    color: var(--text-2, #5c5650);
}
.kj-stask-reveal--open {
    background: transparent;
    padding: 16px 0 0;
    border-radius: 0;
    text-align: center;
}

/* kj-pattern-word и kj-pattern-w-meaning определены выше */

/* ── Подсказки в write_free (без образца сверху) ── */
.kj-write-hint {
    text-align: center;
    margin-bottom: 14px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
.kj-write-hint-reading {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 24px;
    color: var(--text, #1a1714);
    margin-bottom: 4px;
}
.kj-write-hint-meaning {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-3);
}
.kj-write-hint--sentence {
    max-width: 480px;
}
.kj-write-hint-sent {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 24px;
    line-height: 2.2;
    color: var(--text, #1a1714);
    margin-bottom: 8px;
}
.kj-write-hint-sent ruby { ruby-position: over; }
.kj-write-hint-sent ruby rt {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 0.44em;
    color: var(--text-3);
}
.kj-write-hint-word {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 26px;
    color: var(--text, #1a1714);
    margin-bottom: 6px;
}

#kjLangDivider { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   Кнопки режима — главные CTA, в стиле Cormorant
   ══════════════════════════════════════════════════════════════════ */

.kj-learn-banner:has(.kj-learn-banner-modes) {
    cursor: default;
}
.kj-learn-banner:has(.kj-learn-banner-modes):hover {
    background: transparent;
}

.kj-learn-banner-modes {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 0;
    position: relative;
}

/* Разделитель — высокий, между кнопками через order.
   Показываем, только когда режимов действительно два (в кане, например,
   часто есть только «изучить новое» — тогда черта висела бы одна, ни
   к чему не привязанная). */
.kj-learn-banner-modes:has(.kj-mode-btn + .kj-mode-btn)::before {
    content: '/';
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 200;
    color: var(--border, #D8D0C8);
    font-style: normal;
    line-height: 1;
    flex-shrink: 0;
    padding: 0 14px;
    align-self: center;
    order: 2;
    pointer-events: none;
    user-select: none;
}

/* Убираем старый разделитель */
.kj-learn-banner-modes .kj-mode-btn + .kj-mode-btn::before {
    content: none;
}

.kj-mode-btn {
    font-family: 'Cormorant Garamond', 'Garamond', serif;
    font-size: 26px;
    font-weight: 300;
    font-style: normal;
    letter-spacing: -0.01em;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.18s;
    white-space: normal;
    line-height: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    color: var(--text, #1a1714);
}

/* Глагол — чёрный */

/* Существительное (em) — бордо */
.kj-mode-btn em {
    font-style: italic;
    display: block;
    color: var(--accent, #732212);
    line-height: 1;
    margin-top: -1px;
}

.kj-mode-btn:hover,
.kj-mode-btn:hover em {
    color: var(--accent, #732212);
}

/* Порядок: первая кнопка слева, разделитель по центру, вторая справа */
.kj-mode-btn:first-child {
    order: 1;
}
.kj-mode-btn + .kj-mode-btn {
    order: 3;
}

.kj-mode-btn--primary {
    color: var(--text-3, #B0A89E);
}
.kj-mode-btn--primary:hover {
    color: var(--accent, #732212);
}

/* ── Итоговый экран сессии ────────────────────────────────────────── */
.kj-finish--session {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
    text-align: center;
}

.kj-summary-stats {
    display: flex;
    gap: 32px;
    justify-content: center;
    margin: 24px 0 32px;
}

.kj-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.kj-summary-n {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 300;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: lining-nums;
}

.kj-summary-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* ── Хедер иероглифов + тулбар — единый визуальный блок ── */
#kjPageHeader {
    margin-bottom: 0;
    padding-bottom: 16px;
}

/* Кнопка-тоггл — три линии, без кружков */
.kj-toolbar-toggle-btn {
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s;
}
.kj-toolbar-toggle-btn:hover {
    opacity: 1;
}
.kj-toolbar-toggle-btn.active {
    opacity: 1;
    color: var(--text, #1a1714);
}

/* Drawer с фильтрами — раскрывается под хедером */
#kjToolbarDrawer {
    padding: 6px 0 14px;
    border-bottom: 1px solid var(--border, #e0d8d2);
    margin-bottom: 16px;
}
#kjHeaderToolbarRight .kj-toolbar-right {
    gap: 0;
}

/* Строка кнопок режима — всегда видна под хедером */
.kj-mode-row {
    padding: 0 0 20px;
    margin-bottom: 4px;
}

/* Тулбар — вторая строка хедера */


/* Разделители тулбара — такие же как | в хедере */
.kj-toolbar-divider {
    width: 1px;
    height: 11px;
    background: var(--border, #e0d8d2);
    margin: 0 10px;
    flex-shrink: 0;
}

/* Фильтр «Все ▾» — в стиле ЯПОНСКИЙ/КИТАЙСКИЙ */
.kj-filter-current {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3, #B0A89E);
}
.kj-filter-select-wrap:hover .kj-filter-current,
.kj-filter-select-wrap:hover .kj-filter-arrow {
    color: var(--text-2, #5c5650);
}

/* Мой прогресс — в стиле ЯПОНСКИЙ/КИТАЙСКИЙ */

/* Выбрать — в стиле ЯПОНСКИЙ/КИТАЙСКИЙ */
.kj-pick-btn {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3, #B0A89E);
    padding: 2px 4px;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.15s;
}
.kj-pick-btn:hover { color: var(--text-2, #5c5650); }
.kj-pick-btn.active {
    color: var(--text, #1a1714);
    font-weight: 400;
}

/* Кнопка-фильтр в хедере */
#kjFilterToggleBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    transition: color 0.15s;
}
#kjFilterToggleBtn.active {
    color: var(--text, #1a1714);
}

/* ВСЕ / МОЙ ПРОГРЕСС / ВЫБРАТЬ — всегда справа в хедере */
#kjHeaderToolbarRight {
    display: flex;
    align-items: center;
    margin-left: auto;
}
#kjHeaderToolbarRight .kj-toolbar-right {
    gap: 16px;
}
#kjHeaderToolbarRight .kj-toolbar-divider {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   РОМБ НАВЫКОВ (Skill Diamond)
══════════════════════════════════════════════════════════════════════════════ */

/* ── Мини-ромб рядом с анимацией ── */
.kj-mini-diamond-chip {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    opacity: 0.62;
    transition: opacity 0.18s, transform 0.18s;
    -webkit-user-select: none;
    user-select: none;
}
.kj-mini-diamond-chip:hover {
    opacity: 1;
    transform: scale(1.04);
}
.kj-mini-diamond-chip--active {
    opacity: 1;
}
.kj-mini-diamond-chip svg {
    display: block;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}
.kj-mini-diamond-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
    transition: color 0.15s;
    line-height: 1;
}
.kj-mini-diamond-chip--active .kj-mini-diamond-label {
    color: var(--accent, #732212);
}

/* ── Раскрывающаяся панель (десктоп) — свёрнута по умолчанию, открывается
   мини-чипом рядом с анимацией. На мобиле (≤600px) — всегда развёрнута,
   а сам чип-переключатель скрыт за ненадобностью (см. медиа-запрос ниже). */
.kj-diamond-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
        opacity    0.28s ease;
}
.kj-diamond-panel--open {
    max-height: 460px;
    opacity: 1;
}
@media (max-width: 600px) {
    .kj-diamond-panel {
        max-height: none;
        overflow: visible;
        opacity: 1;
    }
    .kj-mini-diamond-chip { display: none; }
}

.kj-section--skill-diamond {
    margin-bottom: 24px;
}

.kj-skill-diamond-wrap {
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 0;
}

.kj-skill-diamond-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}

.kj-skill-diamond-who {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--text-2, #5c5650);
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* SVG — центрируем */
.kj-skill-diamond-wrap > svg {
    display: block;
    margin: 0 auto;
}

/* Подсказка под ромбом */
.kj-skd-note {
    margin: 4px 0 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--text-3);
    line-height: 1.6;
    text-align: center;
}

.kj-skd-note em {
    font-style: normal;
    font-weight: 500;
    color: var(--accent, #732212);
}

/* Старые классы легенды — скрываем на случай если остались где-то */
.kj-skill-diamond-body  { display: none; }
.kj-skill-diamond-empty { display: none; }
.kj-skill-diamond-legend { display: none; }

/* dark theme */
[data-theme="dark"] .kj-skill-diamond-wrap {
    background: transparent;
    border: none;
}

[data-theme="dark"] .kj-skill-diamond-who {
    background: transparent;
    color: var(--text-3);
}
/* Цвет как у «пройденное» в kj-mode-btn em (var(--accent-mid)) — ближе к золоту,
   без красноватого. На ховере уходит в белый. */
[data-theme="dark"] .kj-mini-diamond-chip svg polygon:last-of-type {
    fill: rgba(196,175,152,0.14);
    stroke: rgba(196,175,152,0.80);
    transition: fill 0.2s ease, stroke 0.2s ease;
}
[data-theme="dark"] .kj-mini-diamond-chip:hover svg polygon:last-of-type {
    fill: rgba(255,255,255,0.16);
    stroke: rgba(255,255,255,0.88);
}
[data-theme="dark"] .kj-skill-diamond-wrap svg polygon[stroke-width="1.2"] {
    fill: rgba(196,175,152,0.14);
    stroke: rgba(196,175,152,0.80);
    transition: fill 0.2s ease, stroke 0.2s ease;
}
[data-theme="dark"] .kj-skill-diamond-wrap:hover svg polygon[stroke-width="1.2"] {
    fill: rgba(255,255,255,0.16);
    stroke: rgba(255,255,255,0.88);
}
/* Проценты на вершинах ромба (когда > 0) заданы инлайново в JS бургунди —
   перекрываем на тот же тон, с переходом в белый на ховере */
[data-theme="dark"] .kj-skill-diamond-wrap svg text[font-weight="500"] {
    fill: #C4AF98;
    transition: fill 0.2s ease;
}
[data-theme="dark"] .kj-skill-diamond-wrap:hover svg text[font-weight="500"] {
    fill: #FFFFFF;
}

/* Тёмная тема — строки без белого фона */
[data-theme="dark"] .kj-examples,
[data-theme="dark"] .kj-example,
[data-theme="dark"] .kj-examples--rest .kj-example,
[data-theme="dark"] .kj-examples--rest .kj-example:hover,
[data-theme="dark"] .kj-sentences,
[data-theme="dark"] .kj-sentences .kj-example--sentence {
    background: transparent;
}
[data-theme="dark"] .kj-example,
[data-theme="dark"] .kj-sentences .kj-example--sentence,

[data-theme="dark"] .kj-ex-sent {
    border-left-color: rgba(212,128,106,0.30);
}

/* ══════════════════════════════════════════════════════════════════════════
   Новые типы заданий + TTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TTS кнопка 🔊 ── */
.kj-speak-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--text-3, #b0a89e);
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.15s;
    margin: -16px auto 16px;   /* прижимаем вплотную под предложение */
    display: flex;
    justify-content: center;
    width: 100%;
}
.kj-speak-btn:hover { color: var(--text-2, #6a635a); }
.kj-speak-btn:active { color: var(--accent, #732212); transform: scale(0.97); }
.kj-speak-btn svg { flex-shrink: 0; }
.kj-speak-label { line-height: 1; }

/* Обёртка «предложение + кнопка» — убрана, кнопка теперь строчная под текстом */
.kj-stask-sentence-row {
    display: contents; /* прозрачная обёртка если где-то осталась */
}
.kj-stask-sentence-row .kj-stask-sentence {
    flex: unset;
    margin: 12px 0 8px;  /* меньше отступ снизу — кнопка займёт место */
}

/* ── hiragana_input ── */
/* Слово + кнопка 🔊 в одну строку */
.kj-hiragana-word-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

/* Новая обёртка: слово в карточке + кнопка «слушать» под ней */
.kj-hiragana-word-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
}

.kj-stask--input .kj-stask-char-large {
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    font-size: clamp(36px, 8vw, 64px);
    line-height: 1.2;
    color: var(--text, #2a2620);
    background: var(--surface-2, #faf7f2);
    border-radius: 10px;
    padding: 16px 32px;
    margin-bottom: 0;
    display: inline-block;
}

/* Кнопка слушать — под карточкой слова, с небольшим отступом */
.kj-hiragana-word-block .kj-speak-btn {
    margin: 8px auto 0;
    width: auto;
}
.kj-stask--input .kj-stask-meanings {
    font-size: 14px;
    color: var(--text-2);
    margin-bottom: 24px;
}
.kj-hiragana-input-wrap {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}
.kj-hiragana-field {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 22px;
    padding: 10px 16px;
    border: none;
    border-bottom: 1.5px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    outline: none;
    width: 180px;
    text-align: center;
    transition: border-color 0.15s;
}
.kj-hiragana-field:focus { border-bottom-color: var(--accent); }
.kj-hiragana-field--correct { border-bottom-color: #4a7c59 !important; background: transparent !important; color: #3a6b35 !important; }
.kj-hiragana-field--wrong   { border-bottom-color: var(--accent) !important; background: transparent !important; }
.kj-hiragana-check-btn { flex-shrink: 0; }

/* ── kanji_choice ── */
.kj-stask--kanji-choice .kj-stask-meanings {
    font-size: 17px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
}
.kj-stask--kanji-choice .kj-stask-readings {
    font-size: 14px;
    color: var(--text-2);
    margin-bottom: 24px;
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}
.kj-kanji-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 360px;
    margin: 0 auto 16px;
}
.kj-kanji-choice-btn {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 52px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 2px;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    line-height: 1;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kj-kanji-choice-btn:hover:not(:disabled) {
    border-color: var(--border);
    color: var(--accent, #732212);
    background: transparent;
}
.kj-kanji-choice-btn:active:not(:disabled) { opacity: 0.7; }
.kj-kanji-choice-btn:disabled { cursor: default; }
.kj-kanji-choice-btn--correct {
    border-color: #5a9e52 !important;
    color: #3a6b35 !important;
    background: transparent !important;
}
.kj-kanji-choice-btn--wrong {
    border-color: var(--border-light) !important;
    color: var(--text-3) !important;
    opacity: 0.35 !important;
    background: transparent !important;
}

/* ── meaning_to_kanji ── */
.kj-stask-prompt-meaning {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--text);
    margin: 8px 0 28px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    letter-spacing: 0.01em;
}
.kj-meaning-kanji-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 400px;
    margin: 0 auto 16px;
}
.kj-meaning-kanji-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    aspect-ratio: 1;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.15s, opacity 0.15s;
}
.kj-meaning-kanji-btn:hover:not(:disabled) {
    border-color: var(--border);
    background: transparent;
}
.kj-meaning-kanji-btn:active:not(:disabled) { opacity: 0.7; }
.kj-meaning-kanji-btn:disabled { cursor: default; }
.kj-meaning-kanji-btn--correct {
    border-color: #5a9e52 !important;
    background: transparent !important;
}
.kj-meaning-kanji-btn--correct .kj-mkb-char { color: #3a6b35; }
.kj-meaning-kanji-btn--wrong {
    border-color: var(--border-light) !important;
    background: transparent !important;
    opacity: 0.35 !important;
}
.kj-mkb-char {
    font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 46px;
    line-height: 1;
    color: var(--text);
}

/* ── stask-feedback общий ── */
.kj-stask-feedback {
    min-height: 32px;
    margin-top: 24px;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ── stask-char-large для hiragana_input ── */
.kj-stask-char-large {
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    font-size: 72px;
    line-height: 1.1;
    color: var(--text, #2a2620);
    margin-bottom: 12px;
}

/* ── Мобильный ── */
@media (max-width: 480px) {
    .kj-kanji-choice-btn  { font-size: 40px; padding: 14px 8px; }
    .kj-mkb-char          { font-size: 32px; }
    .kj-meaning-kanji-btn { padding: 12px 8px; }
    .kj-hiragana-field    { width: 140px; font-size: 18px; }
}

/* ── Dark theme ── */
[data-theme="dark"] .kj-hiragana-field {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: var(--text);
}
[data-theme="dark"] .kj-kanji-choice-btn,
[data-theme="dark"] .kj-meaning-kanji-btn,
[data-theme="dark"] .kj-stask-prompt-meaning {
    background: transparent;
    border-color: rgba(255,255,255,0.07);
    color: var(--text);
}
[data-theme="dark"] .kj-kanji-choice-btn:hover:not(:disabled),
[data-theme="dark"] .kj-meaning-kanji-btn:hover:not(:disabled) {
    border-color: rgba(255,255,255,0.18);
    color: var(--accent);
    background: transparent;
}
[data-theme="dark"] .kj-kanji-choice-btn--correct,
[data-theme="dark"] .kj-meaning-kanji-btn--correct {
    background: transparent !important;
    border-color: #4a7c59 !important;
    color: #6ab87e !important;
}
[data-theme="dark"] .kj-kanji-choice-btn--wrong,
[data-theme="dark"] .kj-meaning-kanji-btn--wrong {
    background: transparent !important;
    border-color: rgba(255,255,255,0.05) !important;
    color: var(--text-3) !important;
    opacity: 0.3 !important;
}

/* kj-hira-blank убраны — прочерки не используются */

/* ══════════════════════════════════════════════════════
   ДАШБОРД УЧИТЕЛЯ
   ══════════════════════════════════════════════════════ */

.kj-dash-wrap {
    padding: 4px 0 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Кнопка открытия дашборда в toolbar */
.kj-dash-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-3);
    padding: 4px 6px;
    transition: color 0.15s;
}
.kj-dash-open-btn:hover { color: var(--text); }

/* Метка секции */
.kj-dash-sec-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 14px;
}

/* Заголовки колонок */
.kj-dash-col-heads { display: none; }  /* карточная сетка не нуждается в заголовках */

/* Строка студента — editorial: белый фон, одна колонка, hairline-разделители.
   Прежняя карточная сетка (grid + gap 1px на фоне-бордере + заливки строк)
   заменена: воздух задаётся вертикальным ритмом, а не панелями. */
.kj-dash-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    max-width: 1180px;
    margin-top: 6px;
    background: transparent;
}
@media (max-width: 900px) {
    .kj-dash-list { grid-template-columns: 1fr; }
}

.kj-dash-row {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 20px 2px;
    background: transparent;
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.06));
    box-sizing: border-box;
}
.kj-dash-row:hover { background: transparent; }
.kj-dash-row--warn { background: transparent; }
.kj-dash-row--warn:hover { background: transparent; }

/* Имя + действия в одну строку */
.kj-dash-name-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.kj-dash-name-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
/* Имя слева, действия — у правого края строки */
.kj-dash-name-row .kj-dash-name-btn { margin-right: auto; }
.kj-dash-name-row .kj-dash-action-sep { align-self: center; }
.kj-dash-name {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 21px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--text);
    transition: color 0.12s;
}
.kj-dash-name-btn:hover .kj-dash-name { color: var(--accent); }
.kj-dash-known {
    display: block;
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 1px;
    font-family: 'DM Sans', sans-serif;
}

/* Оси */
.kj-dash-axes {
    display: flex;
    gap: 8px;
    align-items: center;
}
.kj-dash-axis {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.kj-dash-axis-track {
    width: 36px;
    height: 2px;
    background: var(--border);
}
.kj-dash-axis-fill {
    height: 2px;
    transition: width 0.3s;
}
.kj-dash-axis-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}
.kj-dash-not-started {
    font-size: 10.5px;
    color: var(--text-3);
    font-style: italic;
    font-family: 'DM Sans', sans-serif;
}

/* Флаги */
.kj-dash-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 5px;
}
.kj-dash-flag {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0;
    background: none;
    white-space: nowrap;
}
.kj-dash-flag--red   { color: var(--accent); }
.kj-dash-flag--amber { color: #9a6a2a; }

/* Правая часть строки */
.kj-dash-right {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}
.kj-dash-date {
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    color: var(--text-3);
    white-space: nowrap;
}
.kj-dash-top-mark {
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.kj-dash-go {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-3);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.12s;
}
.kj-dash-go:hover { color: var(--text); }

/* Топ-3 */
.kj-dash-top-block {
    margin-bottom: 0;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}
.kj-dash-top-row {
    display: flex;
    gap: 12px;
}
.kj-dash-top-card {
    background: none;
    border: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 14px;
    transition: border-color 0.15s, background 0.15s;
}
.kj-dash-top-card:hover {
    border-color: var(--text-3);
    background: var(--surface);
}
.kj-dash-top-flame {
    color: var(--text-3);
    display: flex;
    align-items: center;
}
.kj-dash-top-n {
    font-family: 'Cormorant Garamond', 'YuMincho', serif;
    font-size: 26px;
    font-weight: 300;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.kj-dash-top-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--text-2);
    white-space: nowrap;
}
.kj-dash-skeleton {
    height: 48px;
    background: linear-gradient(90deg, var(--border-light) 25%, var(--surface) 50%, var(--border-light) 75%);
    background-size: 200% 100%;
    animation: kj-dash-shimmer 1.4s infinite;
}
@keyframes kj-dash-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Пусто */
.kj-dash-empty {
    padding: 48px 0;
    font-size: 13px;
    color: var(--text-3);
    font-family: 'DM Sans', sans-serif;
}

/* Covered badge в строке дашборда */
.kj-dash-covered {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: #2e7d48;
    background: #edf6f1;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Строка домашнего задания в дашборде */
.kj-dash-covered-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0 2px;
    flex-wrap: wrap;
}
.kj-dash-covered-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    flex-shrink: 0;
    margin-right: 2px;
}
.kj-dash-covered-char {
    font-family: 'YuMincho', 'Yu Mincho', serif;
    font-size: 20px;
    line-height: 1;
    color: #2e7d48;
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    transition: color 0.12s;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
}
.kj-dash-covered-char:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}
.kj-dash-loading-name:nth-child(2n)   { animation-delay: 0.2s; }
.kj-dash-loading-name:nth-child(3n)   { animation-delay: 0.4s; }
@keyframes kj-dash-pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.9; }
}

/* ── Угловой лоадер дашборда ── */
.kj-dash-loader-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0 100px;
}
.kj-corner-loader svg {
    overflow: visible;
}
.kj-cl-corner {
    fill: none;
    stroke: var(--accent, #732212);
    stroke-width: 3.5;
    stroke-linecap: square;
    opacity: 0;
}

/* ── Линейный лоадер дашборда (вдохновение Hermès) ── */
.kj-dash-line-loader-wrap {
    padding: 80px 0 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.kj-dash-line-track {
    width: 160px;
    height: 1.5px;
    background: var(--border-light, #e8e3dd);
    position: relative;
    overflow: hidden;
}
.kj-dash-line-fill {
    position: absolute;
    left: 0; top: 0;
    height: 1.5px;
    width: 0%;
    background: var(--accent, #732212);
}

/* ══════════════════════════════════════════════════════
   РАДИКАЛ И КОМПОНЕНТЫ — КАРТОЧКА ИЕРОГЛИФА
   ══════════════════════════════════════════════════════ */

.kj-det-radical {
    margin-top: 8px;
}
.kj-det-radical-btn {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    line-height: 1;
}
.kj-det-radical-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
    pointer-events: none;
}
.kj-det-radical-char {
    font-family: 'YuMincho', 'Yu Mincho', 'Noto Serif CJK JP', serif;
    font-size: 20px;
    line-height: 1;
    color: var(--text-2);
    display: block;
    transition: color 0.15s;
}
.kj-det-radical-btn:hover .kj-det-radical-char { color: var(--accent); }
.kj-det-radical-parts {
    display: inline-flex;
    gap: 3px;
    align-items: baseline;
}
.kj-det-radical-parts span {
    font-family: 'YuMincho', 'Yu Mincho', serif;
    font-size: 14px;
    color: var(--text-3);
    line-height: 1;
}

/* ══════════════════════════════════════════════════════
   POPUP — ИЕРОГЛИФЫ С КОМПОНЕНТОМ
   ══════════════════════════════════════════════════════ */

@keyframes _kjFadeIn { from { opacity: 0; } to { opacity: 1; } }

.kj-comp-popup {
    background: #fff;
    box-shadow: 0 24px 64px rgba(20,16,12,0.18);
    width: min(92vw, 480px);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kj-comp-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.kj-comp-popup-char {
    font-family: 'YuMincho', 'Yu Mincho', serif;
    font-size: 32px;
    line-height: 1;
    color: var(--text);
}
.kj-comp-popup-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-3);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.12s;
}
.kj-comp-popup-close:hover { color: var(--text); }

.kj-comp-popup-body {
    overflow-y: auto;
    padding: 16px 24px 20px;
}
.kj-comp-popup-loading {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}
.kj-comp-popup-empty {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--text-3);
    text-align: center;
    padding: 20px 0;
}

/* Японский — сетка иероглифов */
.kj-comp-popup-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.kj-comp-popup-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: 1px solid var(--border-light);
    padding: 8px 12px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    min-width: 56px;
}
.kj-comp-popup-item:hover {
    border-color: var(--accent);
    background: var(--accent-pale);
}
.kj-comp-popup-item-char {
    font-family: 'YuMincho', 'Yu Mincho', serif;
    font-size: 24px;
    line-height: 1;
    color: var(--text);
}
.kj-comp-popup-item-mean {
    font-family: 'DM Sans', sans-serif;
    font-size: 9.5px;
    color: var(--text-3);
    text-align: center;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Китайский — список слов */
.kj-comp-popup-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kj-comp-popup-word {
    display: grid;
    grid-template-columns: 80px 120px 1fr;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    padding: 8px 4px;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.12s;
}
.kj-comp-popup-word:last-child { border-bottom: none; }
.kj-comp-popup-word:hover { background: var(--bg); }
.kj-comp-popup-word-char {
    font-family: 'YuMincho', 'Yu Mincho', serif;
    font-size: 20px;
    color: var(--text);
}
.kj-comp-popup-word-pinyin {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--text-3);
    font-style: italic;
}
.kj-comp-popup-word-mean {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--text-2);
}

/* ── Части иероглифа в карточке ── */
.kj-det-parts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

/* Кнопка-часть — без рамки, только иероглиф */
.kj-det-part-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    position: relative;
    transition: opacity 0.15s;
}
.kj-det-part-btn:hover { opacity: 0.65; }
.kj-det-part-char {
    font-family: 'YuMincho', 'Yu Mincho', serif;
    font-size: 20px;
    line-height: 1;
    color: var(--text-2);
}
/* Tooltip при наведении — под кнопкой */
.kj-det-part-btn[data-meaning]:not([data-meaning=""]):hover::before {
    content: attr(data-meaning);
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 8.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
    pointer-events: none;
    background: #fff;
    padding: 1px 4px;
}

/* Составные слова */
.kj-det-word-tabs {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kj-det-word-section {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kj-det-word-section-char {
    font-family: 'YuMincho', 'Yu Mincho', serif;
    font-size: 20px;
    line-height: 1;
    color: var(--text-3);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

/* ══════════════════════════════════════════════════════
   ЗАДАНИЕ НА РАДИКАЛ
   ══════════════════════════════════════════════════════ */
.kj-radical-task .kj-choice-prompt {
    margin-top: 8px;
}
.kj-radical-task-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 12px;
}
.kj-radical-task-char {
    font-family: 'YuMincho', 'Yu Mincho', serif;
    font-size: 72px;
    line-height: 1;
    color: var(--text);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════
   ЗАДАНИЕ НА ПОХОЖИЕ ИЕРОГЛИФЫ
   ══════════════════════════════════════════════════════ */
.kj-similar-task {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 8px 0;
}
.kj-similar-chars {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    justify-content: center;
}
.kj-similar-char-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.kj-similar-char {
    font-family: 'YuMincho', 'Yu Mincho', serif;
    font-size: 80px;
    line-height: 1;
    color: var(--text);
    letter-spacing: -0.02em;
}
.kj-similar-opts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 140px;
}
.kj-similar-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    color: var(--text-2);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}
.kj-similar-btn:hover:not(:disabled) {
    border-color: var(--border);
    background: var(--bg);
    color: var(--text);
}
.kj-similar-btn.kj-choice-correct {
    background: #edf6f1;
    border-color: #2e7d48;
    color: #2e7d48;
}
.kj-similar-btn.kj-choice-wrong {
    background: var(--accent-pale);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Китайские предложения в sentence_intro/context ── */
.kj-stask-sentence--zh {
    font-family: 'YuMincho', 'Yu Mincho', serif;
    font-size: 28px;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 8px;
}
.kj-stask-pinyin {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-3);
    font-style: italic;
    letter-spacing: 0.03em;
    margin-bottom: 12px;
    transition: opacity 0.3s;
}
/* .kj-stask-pinyin--hidden используется в двух разных местах с разным
   смыслом: (1) здесь — отдельная строка с пиньинем рядом с предложением,
   и (2) как модификатор на контейнере всего ruby-предложения в zh-заданиях
   (см. _kjRenderZhSentence в kanji.js), где скрывать нужно только <rt>
   (пиньинь), а не сами иероглифы. Раньше правило ниже было без префикса
   .kj-stask-pinyin и совпадало с ОБОИМИ случаями — opacity:0 на контейнере
   ruby-предложения гасил вообще всё внутри, включая иероглифы (родительский
   opacity нельзя «отменить» изнутри). Сузили селектор, чтобы задевать
   только этот, первый случай; скрытие <rt> для ruby-предложений сделано
   отдельным, точным правилом через _kjInjectZhRubyStyles(). */
.kj-stask-pinyin.kj-stask-pinyin--hidden {
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

/* ── Знакомство с иероглифом (zh без предложений) ── */
.kj-zh-intro-task {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}
.kj-zh-intro-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-3);
}
.kj-zh-intro-char {
    font-family: 'YuMincho', 'Yu Mincho', serif;
    font-size: 96px;
    line-height: 1;
    color: var(--text);
    letter-spacing: -0.02em;
}
.kj-zh-intro-pinyin {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    color: var(--text-2);
    font-style: italic;
    letter-spacing: 0.05em;
}
.kj-zh-intro-meaning {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 300;
    color: var(--text-3);
    letter-spacing: 0.02em;
}
.kj-zh-intro-btn {
    margin-top: 8px;
}


/* ── Мобильный хедер раздела «Иероглифы» — по умолчанию скрыт,
   включается в mobile-new.css @media (max-width:600px) ── */
#mobKjHeader { display: none; }